* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	min-width: 330px;
}

.page-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

.particles-area {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
}

.options__toggle-btn {
	width: 2.5rem;
	height: 2.5rem;
	float: right;
	background-color: #181818;
	border: 1px solid #000;
	border-radius: 0.2rem;
	cursor: pointer;
	outline: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55% 55%;
}

.open-btn {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i0KHQu9C+0LlfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMS41LDYuNSAxOC41LDYuNSAxMCwxNC41ICIvPg0KPC9zdmc+DQo=');
}

.close-btn {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i0KHQu9C+0LlfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIyIiB5MT0iMiIgeDI9IjE4IiB5Mj0iMTgiLz4NCgk8bGluZSBjbGFzcz0ic3QwIiB4MT0iMTcuNiIgeTE9IjIuMyIgeDI9IjIuMiIgeTI9IjE3LjciLz4NCjwvZz4NCjwvc3ZnPg0K');
}

.options {
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 320px;
	z-index: 1000;
}

.slider {
	position: relative;
	width: 150px;
	height: 20px;
	background-color: #828282;
	cursor: w-resize;
	user-select: none;
}

.slider-thumb {
	height: 100%;
	background-color: #6495ED;
	width: 0%;
}

.options-list__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;
}

.options-list__color-input {
	max-width: 100px;
}

.option-value {
	width: 40px;
	text-align: center;
}

.options-list {
	width: 100%;
	padding: 0.5rem;
	margin-top: 3rem;
	border-radius: 0.2rem;
	background-color: #181818;
	color: #fff;
}

.hidden {
	display: none;
}