html{
	user-select: none;
}
body{
	font-family: Arial;
	margin: 0;
	padding: 0;
	background: #000;
}
#box{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#game{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#UI{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#loader{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#loader-bar{
	position: absolute;
    left: calc(50% - 32px);
    top: calc(50% - 64px);
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-radius: 50%;
    border-color: #fff;
    border-right-color: transparent;
    animation: rotate 1s linear infinite;
}
#menu{
	display: none;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: rgba(100, 150, 210, 0.5);
    border-radius: 10px;
}
#form{
	position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 50%;
    background: rgba(100, 150, 210, 0.5);
    border-radius: 10px;
}
#text{
	color: #fff;
	font-weight: bold;
	text-align: center;
}
#input{
	position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 70%;
	height: 15%;
	border: none;
	outline: none;
	color: #fff;
	font-weight: bold;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 10px;
}
#button{
	position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
	width: 80%;
	height: 22%;
	color: #fff;
	font-weight: bold;
	border: none;
	background: rgba(100, 100, 200, 0.3);
	border-radius: 10px;
}
#button:active{
  filter: brightness(1.2);
}
#controls{
	display: none;
}
#left{
	position: absolute;
    left: 7%;
    bottom: 5%;
	width: 15%;
	height: 10%;
	color: #fff;
	outline: none;
	border: none;
	border-radius: 10px;
}
#right{
	position: absolute;
    left: 25%;
    bottom: 5%;
	width: 15%;
	height: 10%;
	color: #fff;
	outline: none;
	border: none;
	border-radius: 10px;
}
#accelerate{
	position: absolute;
    right: 7%;
    bottom: 8%;
	width: 15%;
	height: 10%;
	color: #fff;
	outline: none;
	border: none;
	background: #2f3675;
	border-radius: 10px;
}
#shoot1{
	position: absolute;
    left: 19%;
    bottom: 16%;
	width: 9%;
	height: 6%;
	color: #fff;
	outline: none;
	border: none;
	border-radius: 10px;
}
#shoot2{
	position: absolute;
    right: 25%;
    bottom: 10%;
	width: 9%;
	height: 6%;
	color: #fff;
	outline: none;
	border: none;
	border-radius: 10px;
}
@keyframes rotate{
    0%{
        transform: rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}