@font-face {
	font-family: "text";
	src: url("./assets/fonts/at01.ttf");
}
@font-face {
	font-family: "title";
	src: url("./assets/fonts/BKShatteredScore.ttf");
}

*{
	user-select: none;
}

html, body {
	font-family:text,monospace;
	font-size:32px;
	width: 100%;
	height: 100%;

	overflow: hidden;
	margin: 0;
}

.controls{
	display:none;
}

.menu,.win,.lose{
	box-sizing: border-box;
	position:fixed;
	top: 0;
	z-index:1;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:rgba(0,0,0,.5);
}

.menu__container,.win__container,.lose__container{
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:5% 10%;
	border:1px solid rgba(150,150,255,.16);
	background-color:rgba(255,255,255,.01);
	border-radius:4px;
	backdrop-filter:blur(4px);
	text-shadow: 0 0 0px black, 0 0 2px white, 0 0 4px cyan,0 0 6px blue;
}
.menu__container:after{
	font-family:'title' ,monospace;
	text-align:center;
	content:" Structural Intergrity Corrupted";
	position:fixed;
	white-space:wrap;
	color:red;
	font-size:100px;
	transform:rotate(-3deg);
	text-shadow:0 0 4px black,0 0 8px black,0 0 32px red;
	opacity:0;
}

.menu__title,.ui{
	font-family:'title' ,monospace;
	position:relative;
	margin-top:0;
	/*margin-bottom:15%;*/
	font-size:5em;
	text-shadow: 0 0 2px black,0 0 2px black, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 10px cyan,0 0 20px blue;
}

.menu__title:after{
	font-family:'title' ,monospace;
	content:"ARC-ADE";
	position:absolute;
	top:0;
	left:0;
	/*font-size: 72px;*/
	background: -webkit-linear-gradient(90deg, rgba(41,38,60,1) 40%, rgba(0,0,0,1) 59%, rgba(0,212,255,1) 59%, rgba(0,0,150,1) 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow:none;
}

.menu__description{
	text-align:center;
}
.menu__subtitle{

}
.menu--error .menu__container:after{
	opacity:1;
}
.menu--error .menu__container,.lose__container{
	background-color:rgba(255,0,0,.25);
}
.menu--error .menu__container *{
	opacity:0;
}

.ui{
	position:fixed;
	top: 0;
	width:100%;
	text-align:center;
	font-size:64px;
	z-index:10;
	font-family:monospace;
	/*
	font-family:'title' ,monospace;

	padding:16px;
	margin:16px;
	color:white;
	text-shadow: 0 0 2px black, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 10px cyan,0 0 20px blue,0 0 1px white;*/

}
.ui__deep{
	position:absolute;
	text-align:center;
	top:100%;
	font-size:16px;
	width:100%;
}
.ui__deep:before{
	display: block;
	width100%
	position:absolute;
	text-align:center;
	top:100%;
	font-size:16px;
	content:"escape distance";
}
.win__container{
	display: block!important;
	backdrop-filter:none;
	font-size:40px;
	color:green;
	text-shadow:0 0 4px black,0 0 8px black,0 0 4px black,0 0 8px black,0 0 32px green;
	background-color:rgba(0,255,0,.25);
}

.lose__container{
	backdrop-filter:none;
	font-size:40px;
	color:red;
	text-shadow:0 0 4px black,0 0 8px black,0 0 32px red;
}

.sound{
	//font-size: px;
	position:fixed;
	z-index:10;
	bottom:0;
	right:0;
	line-height:1em;
	color:rgba(255,255,255,.25);
	cursor:pointer;
	padding:0px 8px;
	margin:8px;
}
.sound:hover{
	background-color:rgba(255,255,255,.1);
}
/*---*/
/*------------------*/
.menu,.ui{
	transition:all 3s ease-in-out;
}
.menu--hidden,.ui--hidden,.win--hidden,.lose--hidden,.next--hidden{
	opacity:0;
}

.menu__subtitle,.next{
	animation: grow 2s infinite;
}

@keyframes grow{
	0% {
		transform:scale(1);
	}
	50%{
		transform:scale(1.2);
	}
	100% {
		transform:scale(1);
	}
}