html {
  box-sizing: border-box;
  font-size: 10px;
  background-color: 'black';
  font-family: helvetica, sans-serif;
  margin: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body{
    background-color: rgba(245,240,240,1);
    width: 100%;
    height: 100%;
    margin: 0;
}

body{
  margin: 0;
  margin-top: 2rem;
}

h1 {
  color: rgba(50,30,30,1);
  font-size: 3rem;
  line-height: 3.5rem;
  margin: 0;
}
h3 {
  color: rgba(130, 20, 20, 1);
  font-size: 1.2rem;
  line-height: 2rem;
  margin: 0;
  font-weight: bold;
}

p {
  margin-top: 5px;
  margin-bottom: 20px;
}

.shoe{
  width: auto;
  margin-left: calc(5px + 3vw);
  margin-right: calc(5px + 3vw);
}

.heading{
  font-weight: bold;
  text-decoration: none;
  color: rgba(130, 20, 20, 1);
  //margin-right: 2rem;
  line-height: 2.5rem;
}

.settings{
  font-size: 1.5rem;
  margin-right: : 1rem;
  margin-top: 1rem;
  text-decoration: none;
}

a {
  text-decoration: none;
  color: rgba(130, 20, 20, 1);
  margin-right: 1rem;
  line-height: 2.5rem;
}


/* Gmae board */

#gameBoard{
  border-collapse: collapse;
  margin: 0;
}

table {
  table-layout: fixed;
  margin: 0;
  margin-top: 1rem;
  height: auto;
  //width: 650px;
  //border-collapse: collapse;
  //border: 1px solid rgba(130, 20, 20, 1);
}

td {
  //height: 10px;
  //border: 1px solid rgba(245,240,240,1);
  /* rgba(130, 20, 20, 1)*/
  background-color: white;
}

.tile-on {
  background-color: rgba(0,0,0,1);
  //animation: grow_green 200ms;
}

/* Amimation
@keyframes grow_green {
  0% {
    background-color: white;
  }
  70%{
    background-color: rgba(6,60,0,1);
  }
  100% {
    background-color: black;
  }
}
@keyframes die_red {
  0% {
    background-color: black;
  }
  30%{
    background-color: rgba(44,22,0,1);
  }
  100% {
    background-color: white;
  }
}
*/

/* For mobile */



/* Section line*/

.line{
  height: 20px;
  width: 100%;
  border-bottom: 1px solid rgba(130, 20, 20, 1);
}


/* BUTTONS */

#control-box {
  height:60px;
  display: grid;
  align-items: center;
  grid-template-columns: 3fr 2fr;
  //width: 650px;
}

.player {
  display: flex;
  align-items: center;
  float: left;
}

.scale {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  float: right;
}

.buttonStyle {
  width: 8rem;
  height: 4rem;
  margin: 1rem;
  margin-left: 0;
  margin-right: 5px;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: rgba(245,240,240,1);
  background-color: rgba(130, 20, 20, 1);
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
}
.buttonStyle:hover {
  background-color: rgba(180, 30, 30, 1);
}

#reset-button{
  font-size: 2.4rem;
  line-height: 2rem;
  font-weight: bold;
}

#tempo-button, #back-button{
  font-size: 1.8rem;
  line-height: 2rem;
  //font-weight: bold;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
/*
.buttonInactive {
  color: rgba(245,240,240,1);
  background-color: rgba(130, 120, 120, 1);
  cursor: default;
}
.buttonInactive:hover {
  background-color: rgba(130, 120, 120, 1);
}
*/

.scale-btn {
  font-size: 18px;
  align-items: baseline;
  text-align: right;
  cursor: pointer;
}

#scale-inp{
  font-size: 1.6rem;
  line-height: 1.8rem;
  width: 5rem;
  background: rgba(255, 255, 0, 0);
  border-style: none;
  color: rgba(130, 20, 20, 1);
  display: block;
}

#scale-div{
  display: inline-block;
  height: 4rem;

}


/* Input and input buttons*/

.input{
  background: rgba(255, 255, 0, 0);
  border-style: none;
  border-bottom: 1px solid;
  border-color: rgba(130, 20, 20, 1);
  color: rgba(130, 20, 20, 1);
  font-size: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-family: Helvetica, sans-serif;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.rules{
  font-size: 1.5rem;
  color: rgba(130, 20, 20, 1);
  margin-right: : 1rem;
  margin-bottom: 2rem;
  //margin-top: 1rem;
  display: inline-block;
  //grid-template-columns: 1fr 1fr 1fr;
  //grid-auto-rows: 6rem;
  text-decoration: none;
}

.rules-input{
  font-size: 1rem;
  color: rgba(130, 20, 20, 1);
  margin-right: : 1rem;
  //margin-top: 1rem;
  text-decoration: none;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(200,190,190,1);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(200,190,190,1);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(200,190,190,1);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(200,190,190,1);
}

.btncell{
  width: 30rem;
  font-size: 1.5rem;
  color: rgba(130, 20, 20, 1);
  //margin-right: : rem;
  display: inline-block;
  text-decoration: none;
  border-collapse: collapse;
}
.buttonrow{
  margin: 5px;
  margin-left: 0px;
}

.btn-label{
  margin: 5px;
  margin-left: 0px;
}

.numBut{
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border: 1px solid rgba(150,130,130,1);
  border-collapse: collapse;
  background-color: white;
  text-align: center;
  display: inline-block;
  font-size: 1rem;
  //font-weight: bold;
  color: rgba(130, 20, 20, 1);
  cursor: pointer;
  margin: 0px;
  padding: 0px;
}

.chk{
  background-color: rgba(130, 20, 20, 1);
  //transition: backgroundColor .25s;
  color: white;
  //animation: grow_green 300ms;
  //transition: 500ms ease-out;
}



/* Presets */

.rules-card  {
  width: 16rem;
  height: 6rem;
  background-color: rgba(255,255,255,1);
  border: 1px solid rgba(130,20,20,1);
  color: rgba(130, 20, 20, 1);
  font-weight: bold;
  text-decoration: none;
  line-height: 2rem;
  font-size: 2rem;
  margin: 5px;
  margin-left: 0px;
  padding: 1rem;
  overflow: hidden;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

figure  {
  min-width: 12rem;
  height: auto;
  max-width: 16rem;
  background-color: rgba(130,20,20,1);
  border: 1px solid rgba(130,20,20,1);
  margin: 1rem;
  margin-left: 0px;
  //padding: 5px;
  overflow: hidden;
  text-align: center;
  align-items: center;
  cursor: pointer;
}

figcaption {
  background-color: rgba(130,20,20,1);
  color: #fff;
  font: sans-serif;
  font-size: 16px;
  font-style: italic;
  line-height: 3rem;
  width: 100%;
  margin: 0px;
  padding: 0px;
  //text-align: center;
}

img {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  vertical-align: sub;
}

#canvas {
  background-color: white;
}

#presets{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) );
}

.seed {
  max-width: 10rem;
  min-width: 6rem;
  //width: auto;
  //height: auto;
  margin-right: 1rem;
  //background-color: rgba(255,255,255,1);
  border: 1px solid rgba(130,20,20,1);
  margin-bottom: 1rem;
  //overflow: hidden;
  //text-align: center;
  //align-items: center;
  flex: 0 0 20%;
  //display: grid;
  cursor: pointer;
}
/*
#seeds{
  -webkit-columns: 8 80px;
     -moz-columns: 8 80px;
          columns: 8 80px;
}*/
#seeds{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}


/* Instructions */

#overlay {
 visibility: hidden;
 position: fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
 width:100vw;
 //min-height:100%;
 //text-align:center;
 z-index: 100;
 background-color: rgba(100,100,100,0.5);
 display: flex;
}

#overInst {
  visibility: hidden;
  position: absolute;
  top: 1rem;
  //bottom:0;
  left: 2vw;
  //right: 1rem;
  width:96vw;
  //min-width: 480px;
  max-width: 600px;
  margin: 0;
  background-color: #fff;
  border:1px solid rgba(50,30,30,1);
  //border-radius: 25px;
  padding:25px;
  color: rgba(130, 20, 20, 1);
  font-size: 1.6rem;
  font-family: 'Fira Sans', sans-serif;
  text-align:left;
  z-index: 200;
}

#squon{
  width:10px;
  height:10px;
  background-color: black;
  border: 1px solid black;
  display:inline-block;
}
#squoff{
  width:10px;
  height:10px;
  background-color: white;
  border: 1px solid black;
  display:inline-block;
}
#neighbor{
  width: 80px;
  height: 80px;
  margin-right: 30px;
  float: left;
}
#close{
  width: 20px;
  height: 20px;
  margin-right: 30px;
  float: right;
  cursor: pointer;
}

.blimg{
  width: 40px;
  height:40px;
  //border: 1px solid black;
}

.inimg{
  width: 40px;
  height:40px;
  //border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}
.inpimg{
  width: 90%;
  max-width: 400px;
  height: auto;
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}
.indiv{
  width: 200px;
  height:40px;
  //border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

.example{
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}


@media screen and (max-width: 480px) {
  .input {font-size: 2.4rem;}
}



/////