body{
	background-color: black;
	background-image: url(https://1-background.com/images/stars-1/star-space-tile.jpg);
	/*overflow: hidden;*/
	font-family: 'Audiowide', cursive;
	text-align: center;
	color: white;
	user-select: none;
}

login{
	background-color: black;
	opacity: .8;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 50px;
	text-align: center;
	color: white;
	font-family: 'Audiowide', cursive;
}

login>h1{
	margin: 0;
	margin-bottom: 20px;
	font-size: 2.5em;
}

input,button{
	margin: auto;
	outline: 0;
	background-color: #222;
	color: white;
	font-family: 'Audiowide', cursive;
	text-align: center;
	transition: background-color .3s;
	font-size: 1.1em;
	letter-spacing: 1px;
	border: 1px solid white;
}

login>input,login>button{
	width: 75%;
	display: block;
	padding: 10px;
	border: 0;
}

input:hover,button:hover{
	background-color: #444;
}

lobby{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: grid;
	grid-template-columns: 25% calc(75% - 15px);
	grid-column-gap: 15px;
	opacity: 0;
	transition: opacity .5s;
}

lobby>*{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #222;
	text-align: center;
}

#players>li{
	list-style-type: none;
	transition: background-color .3s;
	border-bottom: 1px solid gray;
	padding: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#players>li:hover{
	background-color: #444;
}

#players>li:last-of-type{
	border-bottom: 0;
}

canvas{
	opacity: .9;
}