#menu {
	background-color: rgb(255, 255, 255);
	position: fixed;
	left: 0%;
	top: 0%;
	height: 100%;
	z-index: 10;
	text-align: center;
	padding-top: 10px;
	box-shadow: 8px 0px 30px rgba(6, 13, 29, 0.418);
	font-family: 'Roboto', sans-serif;
	width: 325px;
}

#visualizer {
	position: fixed;
	top: 0%;
	height: 100%;
	z-index: 1;
	background-color: rgb(197, 198, 211);
}

#hider {
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 1000;
	pointer-events: none;
}


@media (max-width : 768px) {
	#menu {
		top: 0;
		left: 0;
		width: 100% !important;
		height: 35%;
	}

	#visualizer {
		top: calc(35% + 10px);
		left: 0 !important;
		height: calc(65% - 10px) !important;
		width: 100% !important;
	}
}

.ball {
	border-radius: 50%;
	position: absolute;
	z-index: 1000;
	display: none;
	transform: translate(-50%, -50%);
	transition: 0.25s linear;
	padding: 8px 8px 0 8px;
}