* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; font-family: "Arial"} /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

#tron-logo {
	/*margin: 0 auto;
	width: 40vw;
	height: 30vh;*/
	width: 70%;
	height: auto;
	margin: 10px;
}

#menu {
	font-family: "Tahoma";
}

#controls {
	color: #6ddfff;
	margin: 0 auto;
	width: 140px;
}

#playerListAndControls {
	text-align: left;
}

.btn {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #6CCFF3;
	outline: none;

	text-transform: uppercase;
	font-family: Arial;
	color: #6CCFF3;
	font-size: 14px;

	background: transparent;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	-o-transition:color 1s ease-out, background 1s ease-out;
	-ms-transition:color 1s ease-out, background 1s ease-out;
	-moz-transition:color .2s ease-out, background 1s ease-out;
	-webkit-transition:color .2s ease-out, background 1s ease-out;
	
	transition:color 1s ease-out, background 1s ease-out;
}

.btn:hover {
	background: #6CCFF3;
	/*background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);*/
	text-decoration: none;
	box-shadow: -1px 1px 50px #666666;
	color:white;
	transition: 0.25s;
	cursor: pointer;	
}

.menu {
	position: absolute;
	text-align: center;
	height: 40vh;
	width: 50vw;
	top:20%;
	left: 50%;
	transform: translate(-50%, 0%);
	color: white;
	background: transparent;
}

.setting {
	padding:10px;
}

.setting-label{
	text-align: center;
}

label {
	padding: 10px;
}

#leaderBoard {
	font-family: "Tahoma";
	font-size: 30px;
	left: 50%;
	top: 10%;
	transform: translate(-50%, 0%);
	color:white;
	position: absolute;
}

#gameSettings {
	width: 70%;
	height: auto;
	border: 3px solid #6CCFF3;
	border-radius: 3px;
	display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px auto 10px auto;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

ul {
	list-style-type: none;
}

.sideMenu {
	position: absolute;
	right: 0;
	width: 0;
	padding: 20px;
	height: 94vh;
	overflow: hidden;
	border-right: 1px solid #123432;
	z-index: 0;
	text-align: left;
	border-left: gray 1px solid;
	background: #333438;
}

input[type=range]{
	margin: 5px;
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #6CCFF3;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]{

    /*required for proper track sizing in FF*/
    width: 30%;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #6CCFF3;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
}