body {
  background-color: black;
  margin: 0px;
  background: radial-gradient(navy, black);
}

* {
  font-family: "Tektur";
}

#app {
  width: 100%;
  display: grid;
  margin: 0 auto;
  max-width: 800px;

}

.titleDiv {
  display: grid;
  width: fit-content;
  margin: 20px auto;
  padding: 0px;
  color: white;
  text-align: center;
  z-index: 1000;
}
  
.titleDiv a {
  margin: 0 auto;
  font-family: "Tektur", system-ui;
  color: Orange;
  font-size: 1.5em ;
  text-decoration: none;
}

#game {
  display: flex;
  flex-wrap: wrap;
  width: 95vw;
  height: 95vw;
  margin: 10px auto;
  /** border: 4px dashed white; */

  border-radius: 5px;
  background-color: black;
}


#controlsOuter {
  box-sizing: border-box;
  background-color: orange;
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 20px auto;
  padding: 20px;
  width: 500px;
  max-width: 96vw;
  border-radius: 30px;
  text-align: center;
}

#controlsInner {
  display: grid; 
  width: 100%; 
  max-width: 80vw; 
  margin: 0 auto;
}



label {
  margin: 20px auto 0px auto;
}



#scaleCtrl, #tuningCtrl {
  text-align: center;
}

#btnDiv {
  display: flex;
  margin: 5px auto;
}


#startBtn, #resetBtn {
  margin: 10px 20px;
  width: 150px;
  max-width: 30vw;
  text-align: center;
  border-radius: 20px;
  background-color: #47F5A1;
  padding: 20px;
  font-weight: bolder;
  font-size: 15px;
  color: black;
}

#resetBtn {
  background-color: red;
  background-color: #F55C47;
}

.cell {
  box-sizing:border-box;
  text-decoration:none;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: blue;
  border: 1px dotted blue;
  background-color: transparent;
  border-radius: 10%;
  color: orange;
  text-align: center; 
  align-content: center;
  font-size: 9px;
}

.cell span {
  pointer-events: none;
  color: orange;
  font-size: 9px;
  text-align: center;

}

#ruleset {
  color: #f5f5f5;
  display: grid;
  text-align: center;
  margin: 10px auto;
  font-weight: bold;
}

#ruleset span {
  font-size: 15px;
  margin: 5px auto;
  font-weight: normal;
  padding: 5px 40px;

}

@keyframes glowing {
  50% {  background-color: yellow;}
  100% { background-color: black;}
}

.flash {
  animation: glowing 3000ms 1;
}

@keyframes live4 {
  10% {  background-color: darkgreen;}
  80% {  background-color: green;}
  90% { background-color: olive;}
  100% { background-color: olive;}
}

@keyframes die {
  0% {  background-color: olive;}
  100% { background-color: transparent;}
}


@keyframes live3 {
  0% {  background-color: white;}
  25% {  background-color: yellow;}
  50% {  background-color: lightgreen;}
  75% {  background-color: olive;}
  100% { background-color: darkgreen;}
}


@keyframes live2 {
  0% {  background-color: white;}
  25% {  background-color: yellow;}
  50% {  background-color: lightgreen;}
  60% {  background-color: darkgreen;}
  75% {  background-color: olive}
  100% { background-color: green;}
}

@keyframes live {
  0% {  background-color: black;}
  100% { background-color: green;}
}

.grow {
  animation: live 0ms 1 forwards;
}

.bury {
  animation: die 0ms 1 forwards;
}


@media (min-width: 749px) {
  #game {
    width: 650px;
    height: 650px;
    box-shadow: 0px 0px 20px 5px black;
  }

  .titleDiv a {
    font-size: 3em ;
  } 

  
  #startBtn, #resetBtn {
    width: 150px;
    font-size: 20px;
  }

  #controlsOuter {
    width: 500px;
    max-width: 96vw;
  }
  
  #controlsInner {
    width: 100%; 
    max-width:400px; 
  }

  .cell:hover {
    opacity: .8;
    border: 4px inset orange;
  }
  
}