
.body {
  width: 100%;
  height: 100%;
}
#banner {
  width: 61%;
  height: 61%;
  margin-left:13%;
  margin-top:-5%;
  margin-bottom:-8%;
}
#container {
  margin-top:1%;
  margin-left: 8%;
  width: 61.8+9.5%;
  background-color: none;
}
.sliderInput {
  -webkit-appearance: none;
  width: 50px;
  height: 15px;
  outline: none;
  border: 1px solid #d0cfceff;
  border-radius: 50px;
}
.sliderInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3vw;
  height:  3vw;
  cursor: pointer;
  background-image: url('../assets/petri dish.svg');  #00D no-repeat fixed;
}
.sliderInput::-webkit-slider-thumb:hover {
  border-radius: 50px;
  background-color: #92d3f59a;
  background-image: url('../assets/microbe.svg');  #00D no-repeat fixed;
  width: 4.85vw;
  height: 4.85vw;
  border: 2px solid black;
  border-radius: 90px;
}
.sliderInput::-moz-range-thumb {
  width: 20px;
  height: 60px;
  background: #000;
  cursor: pointer;
  border: 5px solid lawngreen;
  border-radius: 4px;
}
.dropdown{
  text-align: center;
  font-family: Helvetica;
  background: none;
  height: 50px;
  width: 50%;
  border: solid 2px;
  border-radius: 50px;
  position: relative;
  display: inline-block;
  font-size: 100%;
  font-weight: 900;
  float: left;
  margin-left:5%;
}
.dropdown-content{
  background-color: white;
  border:inherit;
  border-radius:12px;
  background-size: cover;
  display: none;
  position: absolute;
  width: 160%;
  margin-left: -30%;
  margin-top: -10%;
}
.MemeSettings {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.MemeSettings:hover {
  background: #92d3f5ff;
  background-image: url('../assets/dna.svg');
  background-size:12%;
}
.dropdown:hover .dropdown-content {display: block;}
#nosign {
  margin-top:-150%;
  height: 100%;
  display: inline-block;
  width: 100%;
}
#evolve {
  height: 100%;
  width: 100%;
}
#links {
  width: 90%;
}
#github {
  float: left;
  height: 10%;
  width: 5%;
}
#zcc {
  float: right;
  margin-top: -2%;
  height: 10%;
  width: 8%;
}
#evolution {
  border: solid 2px;
  border-radius: 15px;
  width: 30%;
  float: right;
  margin-right:5%;
}
#ebutton:hover  {
  opacity: 90%;
}
#select {
  margin-top:-70%;
  margin-left:30%;
  float: left;
  position: relative;
  width: 70%;
}

#select:hover {
  width: 50%;
  margin-top:-55%;
  margin-left:20%;
}
#pixel {
  height: 100%;
  width: 100%;
}
#cell {
  float:left;
  position:relative;
}
#cellWall {
  margin:-40%;
  height: 175%;
  width: 175%;
}
#cellState {
  height: 100%;
  width: 100%;
}
#vax {
  position: absolute;
  margin:75%;
  margin-left:110%;
  height: 74%;
  width: 74%;
  float: right;
}
#mask {
  position: absolute;
  float: left;
  height: 175%;
  width: 175%;
}
#stats {
  border: solid 1px;
  width: 25%;
  height: 25%;
}
#panel {
  border: solid 2px;
  border-radius: 40px;
  width: 19%;
  float: left;
  position: relative;
  background:inherit;
}
#panelMid {
  width: 52%;
  float: left;
  background:inherit;
}
#petriDish {
  margin-top:15%;
  width:100%;
  height: 100%;
  position: relative;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:none;
}
#rangeViewer {
  width:17vw;
  height:17vw;
}
.neighborhood {
  margin:9.5%;
  margin-bottom: 26%;
  border: none;
  float:left;
  width:38vw;
  height:38vw;
  background:none;
}
#backgroundPetri {
  margin-left:-13.2%;
  margin-top:-12%;
  width:73vw;
  height:73vw;
  background-image: url('../assets/petri dish empty.svg');
  position: absolute;
}
#graph {
  border: solid 2px;
  border-radius: 40px;
  float:left;
  width:95%;
  height:32vw;
  margin-left: 2.5%;
  margin-top: -8%;
}
#stat {
  float: left;
  margin-top:2.5%;
  margin-left:1.5%;
  width: 90%;
  height: 90%;
}
#settings {
  float: left;
  width:100%;
  height:100%;
  font-weight: 900;
  font-family: Helvetica;
  text-align: left;
  background:inherit;
}
#subSettings {
  box-sizing: border-box;
  float: left;
  width: 50%;
  margin-bottom:50px;
  background:inherit;
}
#slider {
  font-size: 0.65vw;
  font-family: Helvetica;
  text-align: center;
  border-bottom: 1px solid black;
  width: 100%;
}
.sliderInput {
  width:90%;
}
.sliderText {
  font-size:100%;
  margin-top:-2%;
  float:right;
}
.topStats {
  float: left;
  width:100%;
  margin-top:2%;
  font-family: Helvetica;
  text-align: center;
  font-size:250%;
  font-weight: 900;
}
#days {
  font-family: Helvetica;
  text-align: center;
  font-weight: 900;
}
#text {
  font-family: Helvetica;
  text-align: center;
  font-weight: 900;
  font-size: 0.9vw;
}
#rNaught {
  font-family: Helvetica;
  text-align: center;
  font-weight: 900;
  font-size: 0.9vw;
}
#horsepill{
  float: left;
  width:10%;
  margin-top:2%;
}
