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;
}

img {
  width: 100%;
  height: auto;
  //min-width: 100%;
  //min-height: 100%;
  margin: 0px;
  padding: 0px;
  vertical-align: sub;
}
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;
}

#canvas {
  background-color: white;
}

.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;
}

.gamecap{
  color: rgba(130, 20, 20, 1);
  font-size: 1.5rem;
  //text-align: center;
  margin: 1rem;
  text-decoration: none;
}

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

.game {
  width: 24rem;
  height: 30rem;
  margin: 2rem;
  margin-left: 0px;
  //background-color: rgba(255,255,255,1);
  //border: 1px solid rgba(130,20,20,1);
  color: rgba(50, 20, 20, 1);
  font-weight: bold;
  text-decoration: none;
  line-height: 2rem;
  font-size: 1.4rem;
  overflow: hidden;
  text-align: center;
  //display: inline-block;
  cursor: pointer;
}

.gameimg {
  width: 24rem;
  height: 24rem;
  //object-fit: cover;
  border: 1px solid rgba(130,20,20,1);
  overflow: hidden;
  //display: inline-block;
  cursor: pointer;
}

.gamerow {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
}


/* 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 */

.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);
}


/* 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);
}


/* Presets */







.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;
}

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



/////