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

@font-face {
	font-family: "Pacifico";
	src: url("Fonts/Pacifico-Regular.woff2") format('woff2');
}

body {
	background-color: #121212;
	color: #e0e0e0;
}

#container {
	display: flex;
	align-items: flex-end;
	/* This makes bars grow from bottom up */
	margin: 0 auto;
	width: intrinsic;
	width: -moz-max-content;
	width: -webkit-max-content;
	height: 60%;
}


#b,
#d {
	display: inline-block;
	margin-left: 1vw;
	width: 1vw;
}

#bars,
#delay {
	vertical-align: middle;
}

.header {
	display: flex;
	flex-wrap: wrap;
	font-weight: bold;
	background-color: #1f1f1f;
	margin: 0;
	color: #ffffff;
	padding: 1vw 1vw 2vw 1vw;
	margin-bottom: 2vw;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

h1 {
	font-size: 3vw;
	font-family: Pacifico, cursive;
	font-weight: lighter;
	width: 25%;
	text-align: center;
	color: #ff79c6;
}

.range {
	justify-content: space-evenly;
	display: flex;
	flex-wrap: wrap;
	flex-flow: wrap;
}

.slide {
	margin: 0vw 1vw;
}

.bar {
	border: 0.05vw solid #444;
	width: 0.6vw;
	margin: 0.1vw;
	background-color: #bb86fc;
}

.sorts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.vars {
	width: 60%;
	align-self: flex-start;
	text-align: center;
	font-size: 1.3vw;
	font-family: sans-serif;
	color: #e0e0e0;
}

input[type="button"],
button {
	background: #1f1f1f;
	border: 1px solid #333;
	padding: 1.3vh;
	border-radius: 9vw;
	min-width: 8vw;
	color: #bb86fc;
	font-size: 1.2vw;
	transition: background 0.3s ease;
}

input[type="button"]:hover,
button:hover {
	background-color: #333;
	cursor: pointer;
	color: #03dac6;
}

input[type="button"]:disabled,
input[type="range"]:disabled {
	background-color: #2c2c2c;
	cursor: not-allowed;
	color: #666;
}

/* Range slider styles */
input[type="range"] {
	-webkit-appearance: none;
	width: 10vw;
	height: 0.5vw;
	background: #333;
	border-radius: 1vw;
	outline: none;
	direction: ltr;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1vw;
	height: 1vw;
	background: #bb86fc;
	cursor: pointer;
	border-radius: 50%;
	border: none;
}

input[type="range"]::-moz-range-thumb {
	width: 1vw;
	height: 1vw;
	background: #bb86fc;
	cursor: pointer;
	border-radius: 50%;
	border: none;
}