/*@import url("base.css");
*/
body {
	margin: 0;
}
canvas {
	display: block;
	width: 100vw;
	height: 100vh;
}

.center-text {
	position: absolute;
	right: 50%;
	bottom: 50%;
}

#login-button {
	position: absolute;
	right: 5%;
	bottom: 5%;
	color: black;
	background-color: black;
}

#login-button:hover {
	background-color: red;
}

#logout-button {
	position: absolute;
	right: 5%;
	bottom: 5%;
	color: black;
	background-color: red;
}

#admin-button {
	position: absolute;
	right: 5%;
	bottom: 1%;
}

#greeting {
	position: absolute;
	right: 5%;
	bottom: 10%;
	font: 1.3rem Inconsolata, monospace;
	color: white;
}

#info {
	z-index: 100;
	display: block;
	color: white;
	font: 1.3rem Inconsolata, monospace;
}

 /* Dropdown Button */
#pos1 {
	position: absolute;
	top: 30%;
	left: 5%;
	font-size: 1.8rem; 
}
#pos2 {
	position: absolute;
	top: 35%;
	left: 5%;
}
#pos3 {
	position: absolute;
	top: 40%;
	left: 5%;
}
#pos4{
	position: absolute;
	top: 45%;
	left: 5%;
}
a {
	color: green;
}
a:hover {
	color: darkgreen;
}

#play-button {
	position: absolute;
	top: 35%;
	right: 15%;
	font: 1.5rem Inconsolata, monospace;
	appearance: button;
	background-color: darkorange;
	color: green;
}
#play-button:hover {
	background-color: grey;
	color: darkgreen;
}
#play-button:active {
	background-color: orange;
	color: lightgreen;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  position: absolute;
  right: 15%;
  bottom: 15%;
  appearance: none;
  width: 30%;
  height: 25px; /* Specified height */
  background: #003300; /* Grey background */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: grey; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: grey; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}