body{
  width: 100%;
  margin: 0;
  padding:0;
  text-align: center;
  font-family: arial;
}
.hide {
    display: none;
}
#reset{
 height: 3em;
 margin:2em;
 top: 20px;
}
h1 {
  height: 1.5em;
  margin: 1em;
  color:#3498db; 
}
.resetButton {
  background-color: white;
   border: none;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 31px;
   margin: 4px 2px;
   cursor: pointer;
}
#main {
  margin: 0 2em;
}
#p5canvas{
  float:left;
}
#controlpanel{
  float: left;
  margin-left: 3em;
  position: relative;
}
#defaultradio0-0:checked ~ label[for="defaultradio0-0"] {
  background-color: #3498db;

}
#defaultradio0-1:checked ~ label[for="defaultradio0-1"] {
  background-color: #3498db;

}
label[for="defaultradio0-0"]{
  padding: 10px 30px;
  margin: 10em 1em;
  background-color: #ccc;
  color: white;
  text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;


}
label[for="defaultradio0-1"]{
  padding: 10px 20px;
  margin: 1em;
  background-color: #ccc;
  color: white;
  text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;

}
#defaultradio0-0, #defaultradio0-1 {
    display: none;
}
#pick-typ {
  margin: 2em 0;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 25px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 30px;
    border: 2px solid #2980b9;
  }
  input[type="range"]::-moz-range-thumb {
    border: 2px solid #ffffff;
    height: 21px;
    width: 34px;
    border-radius: 28px;
    background: #3498db;
    cursor: pointer;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    margin: -2px 0;
}
#cells-current {
    position: absolute;
    top: 125px;
    left: 96%;
    -webkit-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    background: #3498db;
    font-size: 1.2em;
    color: #fff;
    width: 140px;
    padding: 10px;
}
#cells-current::after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-width: 9px;
    border-bottom-color: #3498db;
    border-bottom-width: 16px;
    margin-left: -9px;
}
.button{
  background-color: #3498db;
   border: none;
   color: white;
   padding: 10px 40px;
   margin-top:8em;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 1px;
   cursor: pointer;
   width: 100%

}
#cells-slider {
  margin-top: 80px;
}