/*--Animations-------------------------------------------------------------------------------------------------------------------------------------*/
@keyframes fadeIn{
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes pulse{
	0% {opacity:1;}
	50% {opacity:0.3;}
	100% {opacity:1;}
}

/*--Initial----------------------------------------------------------------------------------------------------------------------------------------*/
body{
	background-image:linear-gradient(rgb(0,150,255),rgb(150,215,255));
	font-family:"Helvetica";
	color:rgb(60,40,0);
	user-select:none;
	overflow:hidden;
	height:100vh;
}
canvas{
	position:absolute;
	left:0px;
	top:0px;   
}
.loadingScreen{
	background-image:linear-gradient(rgb(0,150,255),rgb(150,215,255));
	position:absolute;
	height:100%;
	width:100%;
	z-index:5;
	left:0px;
	top:0px;
}

/*--Main Menu--------------------------------------------------------------------------------------------------------------------------------------*/
.menuWindow{
	animation:"fadeIn" 0.2s linear;
	background-image:radial-gradient(circle,rgb(230,210,80),rgb(200,180,70));
	box-shadow:10px 10px 10px rgba(0,0,0,0.5);
	border:10px solid rgb(70,50,0);
	transform:translate(-50%,-50%);
	border-radius:5vh;
	position:absolute;
	display:none;
	left:50%;
	top:50%;
}
.menuTitle{
	text-shadow:1px 1px 3px rgba(60,40,0,0.5);
	justify-content:center;
	align-items:center;
	position:absolute;
	font-weight:bold;
	font-size:5vh;
	display:flex;
	height:15vh;
	width:100%;
}
#mainMenu{
	height:35vh;
	width:30vh;
}
#scores{
	height:50vh;
	width:35vh;
}
.scoreHolder{
	position:absolute;
	overflow:hidden;
	display:block;
	height:50%;
	width:80%;
	top:12vh;
	left:10%;
}
.score{
	border-bottom:1px solid rgba(60,40,0,0.5);
	justify-content:center;
	align-items:center;
	font-size:2.5vh;
	display:flex;
	height:20%;
	width:100%;
}
.scoreNotify{
	justify-content:center;
	align-items:center;
	font-size:2.5vh;
	display:flex;
	height:20%;
	width:100%;
}
#name{
	height:50vh;
	width:30vh;
}
#backN{
	bottom:2vh;
}
#confirm{
	bottom:10vh;
}
input[type="text"]{
	border:5px solid rgb(70,50,0);
	transform:translate(-50%);
	border-radius:5vh;
	position:absolute;
	font-size:3vh;
	height:5vh;
	width:80%;
	left:50%;
	top:20vh;
}

/*--Buttons----------------------------------------------------------------------------------------------------------------------------------------*/
.button{
	background-image:linear-gradient(rgb(235,215,85),rgb(200,180,70));
	border:5px solid rgb(70,50,0);
	transform:translate(-50%,0px);
	justify-content:center;
	align-items:center;
	border-radius:5vh;
	position:absolute;
	font-size:2.5vh;
	cursor:pointer;
	display:flex;
	height:5vh;
	width:20vh;
	left:50%;
	font-size:20px;
}
.button:hover{
	transform:translate(-50%,-2px);
}
.button:active{
	transform:translate(-50%,2px);
}
#startGame{
	bottom:10vh;
}
#scoreboard{
	bottom:2vh
}
#backS{
	bottom:2vh;
}

/*--In Game----------------------------------------------------------------------------------------------------------------------------------------*/
.gameWindow{
	animation:"fadeIn" 0.2s linear;
	position:absolute;
	display:none;
	height:100%;
	width:100%;
	left:0px;
	top:0px;
}
.gameText{
	text-shadow:0px 0px 2px rgb(0,0,0);
	animation:"pulse" 1s linear infinite;
	transform:translate(-50%,-50%);
	color:rgb(255,255,255);
	text-align:center;
	position:absolute;
	font-size:5vh;
	display:none;
	left:50%;
	top:50%;
}
.gameScore{
	text-shadow:0px 0px 2px rgb(0,0,0);
	transform:translate(-50%);
	color:rgb(255,255,255);
	text-align:center;
	position:absolute;
	font-size:10vh;
	left:50%;
	top:10%;
}
#gameOverWindow{
	height:35vh;
	width:30vh;
}
#gameM{
	bottom:2vh;
}
#gameR{
	bottom:10vh;
}