@charset "utf-8";
/* CSS Document */

header {
	height: 13em;
	position: relative;
	background-color:burlywood;
	text-align: left;
	font-weight: bold;
	/*  "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" */
	font-family:  Helvetica;
	font-size: 10px; 
	/*display: grid;*/
	/*grid-template-columns: repeat(8, minmax(0,1fr));*/
}
#title1{
	position: absolute;
	width: 20em;
	font-size: 18px;
	left: 5%;
	top: 0%;
	color:#035100;
}

main {
	grid-template-columns: repeat(3, minmax(0,1fr));
  	grid-gap: 1rem;
	height: 30em;
	background-color: black;
	position:relative;
}

.kinetic {
	background-color: 'red';
	height: 10px;
	width: 10px;
	position: absolute;
	padding: .4rem .4rem;
	text-align: right;
	font-weight: bold;
	/*  "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" */
	font-family:  Helvetica;
	font-size: 16px; 
	color:crimson;
}

#sheep {
	bottom: 0%;
	left: 10%;
}

footer {
	background-color:  rosybrown;
	height: 2em;
}

.numLabel{
	border-radius: 5px;
	border: none;
	/*background-color: aqua;*/
	padding: .4rem .4rem;
	text-align: right;
	font-weight: bold;
	/*  "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" */
	font-family:  Helvetica;
	font-size: 14px; 
	width: 7em;
	color:crimson;
	position: absolute;
}

#introScreen {
	position: absolute;
	padding: 2em;
	color: goldenrod;
	background-color: darkgreen;
	left: 37%;
  	top: 10%;
  	width: 25%;
	height: 60%;
  	text-align: center;
  	font-size: 18px;
	overflow-y: auto;
}

#debriefScreen {
	position: absolute;
	padding: 2em;
	color: goldenrod;
	background-color: darkgreen;
	left: 37%;
  	top: 10%;
  	width: 25%;
	height: 60%;
  	text-align: center;
	object-position: center;
  	font-size: 18px;
	overflow-y: auto;
}

#numlabElasped{
	position: absolute;
	padding: 1em;
	color: crimson;
	background-color: none;
	right: 1%;
  	top: 10%;
  	width: 6em;
	height: 60%;
  	text-align: left;
	object-position: center;
	overflow-y: auto;
}
#timeiter{
	width: 4em;
	position: absolute;
	right: 10%;
	top: 30%;
	display: none;
}
#timeother{
	width: 4em;
	position: absolute;
	right: 5%;
	top: 30%;
	display: none;
}

#startBut {
	background: #037C05;
	width: 5em;
	padding: .4em;
	color: white;
}
#introTxt1{
	padding: 0em;
	height: 40%;
}
#sub{
		/*position: absolute;*/
	font-weight: bold;
	/*  "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" */
	font-family:  Helvetica;
}
.burst{
	width: 10px;
	height: 10px;
	background-color: rgba(255,253,21,1.00);
	position: absolute;
}
.dot{
	background-color: 'green';
	color: 'green';
	padding: 1px;
	width: 10px;
	height: 10px;
}
.stats{
	color: orangered;
}
#barElapsed{
	position: relative;
	width: 100px;
	height: 5em;
	left: 30%;
  	top: 5px;
	grid-template-columns: repeat(8, minmax(0,1fr));
	display: grid;
	border-color: aqua;
}
.timeBar{
	position: absolute;
	width: 1px;
	height: 13px;
	background-color: orangered;
	left: 70px;
	color: yellow;
}
.elapsedlab{
	color: firebrick;
	width: 4em;
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 50%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}