@font-face {
	font-family: 'ASimplerMrn';
	src: url('fonts/ASimplerMrn.woff') format('woff');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}


body{margin: 0;background: #000;}
#canvas_container{max-width: 100vw;max-height: 100vh;overflow: hidden;}
/* .container{display: flex;align-items:center;justify-content:center;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 100;} */
#logo{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);pointer-events:none;}

.playerButtons{position: absolute;left: 50%;bottom: 130px;transform: translatex(-50%);color: #fff;font-size: 20px;text-align: center;}
.playerButtons a{color: #fff;margin: 0 10px;}
.playerButtons a:hover,
.playerButtons a.disabled{color: #ccc;}

#player{position: absolute;left: 0;bottom: 60px;width: 100%; }
#instagram{position: absolute;top: 20px;right: 20px;width: 32px;height: 32px;color: #db44db;}
.socials{position: absolute;top: 20px;right: 20px;color: #db44db;display: flex;align-items:center;gap: 10px;font-size: 26px;}
.socials a{color: #fff;}
.socials svg{display: block;}
.textLogo{font-family: 'ASimplerMrn';color: #fff;position: absolute;left: 20px;top: 20px;font-size: 34px;}
.textLogo a{text-decoration: none;color: #fff;}

@media (max-width: 420px){
	.socials{top: 70px;width: 100%;right: 0;justify-content:center;}
	.textLogo{width: 100%;text-align: center;left: 0;}
}

#analyserCanvas {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30%;
	opacity: .5;
}