*{
	user-select: none;
	cursor: default;
}
html{
	font-family: Lilita One;
	user-select: none;
	overflow: hidden;
}
body{
	margin: 0;
	padding: 0;
	background: #000;
}
#box{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#game{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	outline: none;
}
#UI{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#player1Info{
	position: absolute;
	left: 5%;
	top: 10%;
	width: 100px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#player1Text{
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
}
#player1Time{
	color: #ffffff;
	font-size: 30px;
	font-weight: bold;
}
#player2Info{
	position: absolute;
	right: 5%;
	top: 10%;
	width: 100px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#player2Text{
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
}
#player2Time{
	color: #ffffff;
	font-size: 30px;
	font-weight: bold;
}
#buttonInfo{
	position: absolute;
	left: 50%;
	bottom: 22%;
	color: #ffffff;
	width: 1000px;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transform: translate(-50%, 0);
}
#bar{
	position: absolute;
	left: 50%;
	top: 20%;
	width: 95%;
	height: 30px;
	background: #fff;
	border-radius: 20px;
	transform: translate(-50%, 0);
}
#button{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	bottom: 5%;
	width: 80%;
	height: 15%;
	max-width: 600px;
	font-size: calc(0.75 * 15vh);
	color: #fff;
	border-radius: 100px;
	background: rgba(40, 255, 80, 0.6);
	transform: translate(-50%, 0);
	visibility: hidden;
}
#button:hover{
	filter: brightness(1.2);
}
#startTimerContainer{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transform: translate(-50%, -50%);
	visibility: hidden;
}
#startTimer{
	color: #ffffff;
	font-size: 300px;
}
.startTimerAnimated{
	animation: startTimerAnimation 0.5s ease-in-out;
}
#loader{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 150, 250, 0.5);
}
#loader-text{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	top: 50%;
	color: #fff;
	font-size: 150%;
	transform: translate(-50%, -50%);
}
#start-menu{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80%;
	height: 80%;
	background: rgba(245, 20, 120, 0.6);
	transform: translate(-50%, -50%);
}
#timer{
	position: absolute;
	left: 50%;
	top: 10%;
	color: #ffffff;
	font-size: 80px;
	transform: translate(-50%, -50%);
	visibility: hidden;
}
#minus{
	position: absolute;
	left: 50%;
	top: 10%;
	color: #ffffff;
	font-size: 80px;
	transform: translate(-50%, -50%);
	visibility: hidden;
}
@keyframes startTimerAnimation{
	0%{
		opacity: 0.5;
		transform: scale(1);
	}
	100%{
		opacity: 1;
		transform: scale(0.7);
	}
}