body * {
	font-family: 'Jua', sans-serif;
	outline: none;
}

#can {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#main-bg {
	width: 100%;
	height: 100%;
	background-color: #eee;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	transition: top 1s;
}

#main-bg footer {
	font-size: 15px;
	position: absolute;
	bottom: 5px;
	left: 5px;
}

#main-bg h1 {
	text-align: center;
	font-size: 70px;
	color: #000;
	margin-top: 2%;
}

#message {
	text-align: center;
	font-size: 32px;
	color: #000;
	margin-top: 1%;
}


#play-cont {
	width: 400px;
	height: 500px;
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-200px,0px);
}
#play-cont h2 {
	text-align: center;
	font-size: 24px;
	color: #000;
	margin-top: 20px;
	margin-bottom: 5px;
}
#play-cont h3 {
	text-align: center;
	font-size: 16px;
	color: #000;
	margin-top: -15px;
	margin-bottom: 0px;
}

#nick {
	text-align: center;
	width: 220px;
	height: 35px;
	border: 3px solid #e70;
	border-radius: 10px;
	font-size: 20px;
	color: #000;
	display: block;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}

#servers {
	width: 250px;
	height: 40px;
	color: #000;
	font-size: 22px;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 20px;
}
#servers * {
	user-select: none;
	margin: 0px;
	display: inline;
}
.options-toggle {
	width: 120px;
	height: 30px;
	background-color: #00f;
	border-radius: 15px;
	color: #fff;
	text-align: center;
	padding-top: 5px;
	position: absolute;
	left: 50%;
	transform: translate(-60px, 0px);
}
.left-arr {
	float: left;
}
.right-arr {
	float: right;
}
.left-arr, .right-arr {
	padding: 10px;
	font-size: 32px;
	color: #00f;
	transform: translate(0px, -10px);
	transition: text-shadow 0.5s;
}
.left-arr:hover, .right-arr:hover {
	text-shadow: 2px 0px 3px #88f, -2px 0px 3px #88f;
}

#classes {
	width: 250px;
	height: 35px;
	color: #000;
	font-size: 22px;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 20px;
}
#classes * {
	user-select: none;
	margin: 0px;
	display: inline;
}

#play-btn {
	width: 150px;
	height: 50px;
	background-color: #0d0;
	border: 2px solid #060;
	border-radius: 3px;
	color: #fff;
	font-size: 22px;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translate(-75px,0px);
	cursor: pointer;
}


#gui-frame {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
	z-index: 5;
}

#info-cont {
	width: 100px;
	height: 50px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
}
#info-cont p {
	color: #fff;
	font-size: 16px;
	margin: 5px;
}

#scores {
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px;
	user-select: none;
}
#scores h2 {
	color: #fff;
	font-size: 20px;
	text-align: center;
	margin: 5px;
}
#scores table {
	color: #fff;
	font-size: 12px;
	margin: 0px;
	margin-bottom: 5px;
}
#scores table tr th {
	
}
#scores table tr td {
	
}
.score-place {
	width: 10px;
	text-align: right;
	padding-right: 5px;
}
.score-name {
	width: 120px;
	text-align: left;
}
.score-tiles {
	width: 40px;
	text-align: right;
	padding-right: 5px;
}

#msg-flash {
	font-size: 40px;
	text-align: center;
	margin-top: 10%;
	transform: translate(-10000px, 0px);
	transition: transform 1s;
}

#discord-btn {
	width: 100px;
	height: 50px;
	background-color: #888;
	border: 2px solid #444;
	border-radius: 3px;
	color: #ddd;
	font-size: 20px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}