@import url(//db.onlinewebfonts.com/c/7bc71114a54a06cbaf716a3264b70bd6?family=Arcade+Classic);

@font-face {
  font-family: "Arcade Classic";
  src        : url("//db.onlinewebfonts.com/t/7bc71114a54a06cbaf716a3264b70bd6.eot");
  src        : url("//db.onlinewebfonts.com/t/7bc71114a54a06cbaf716a3264b70bd6.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/7bc71114a54a06cbaf716a3264b70bd6.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/7bc71114a54a06cbaf716a3264b70bd6.woff") format("woff"), url("//db.onlinewebfonts.com/t/7bc71114a54a06cbaf716a3264b70bd6.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/7bc71114a54a06cbaf716a3264b70bd6.svg#Arcade Classic") format("svg");
}

p,
button,
input,
li {
  font-family     : "Arcade Classic";
  color           : #8bac0f;
  background-color: #0f380f;
  font-size       : 1.1em;
}

body {
  background     : url("https://i.pinimg.com/originals/2e/b9/25/2eb9259ab41657a199ccce95aa692ce0.gif");
  background-size: cover;
}

.personalLogo img {
  max-width: 10%;
  height   : auto;
  z-index  : 2;
  position : fixed;
  bottom   : 0.5em;
}

.title {
  font-family: "Arcade Classic";
  color      : #306230;
  font-size  : 5em;
  text-align : center;
  margin     : 0.1em auto 0em;
}

.gameOfLife {
  text-align     : center;
  display        : flex;
  flex-direction : column;
  justify-content: center;
}

.gameRow {
  display        : flex;
  flex-direction : row;
  justify-content: center;
}

.trueTile {
  padding         : .386em;
  border          : 0.065em #306230 solid;
  background-color: #8bac0f;
}

.falseTile {
  padding         : .386em;
  border          : 0.065em #306230 solid;
  background-color: #0f380f;
}

.hidden {
  display: none;
}

#controlsDiv {
  background: #306230;
  border    : 0.1em #0f380f solid;
  padding   : 0.5em 0;
  margin    : 0.7em auto;
  width     : 44.9em;
}

#generationCount {
  width     : 18em;
  text-align: center;
  padding   : 0.3em 0 0;
  margin    : 0.2em auto;
  border    : 0.1em #306230 solid;
}

button,
input {
  border-color: #306230;
}

button {
  margin: 0 0.2em 0.2em
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border-color           : #306230;
  -webkit-text-fill-color: #8bac0f;
  box-shadow             : #0f380f;
  font-family            : "Arcade Classic";
  -webkit-box-shadow     : 0 0 0px 1000px #0f380f inset;
  transition             : background-color 5000s ease-in-out 0s;
}

#bgcolour {
  width : 15em;
  margin: 0 0.3em 0.3em
}

#fgcolour {
  width : 13.3em;
  margin: 0 0.3em 0.3em
}

#speed {
  width : 11.0em;
  margin: 0 0.3em 0.3em
}

#dimensions {
  width : 3.9em;
  margin: 0 0.3em 0.3em
}

.infoText {
  width : 45em;
  margin: 0 auto;
}

.textDiv {
  background: #0f380f;
}

.textSection {
  width : 40em;
  margin: 0 auto
}

.infoText h2,
.infoText h3 {
  border    : 0.05em #0f380f solid;
  padding   : 0.2em 0 0;
  background: #306230;
}

h2 {
  font-family    : "Arcade Classic";
  color          : #8bac0f;
  font-size      : 2em;
  text-align     : center;
  margin         : 0.1em auto 0.7em;
  text-decoration: underline;
}

h3 {
  font-family: "Arcade Classic";
  color      : #8bac0f;
  font-size  : 1.5em;
  text-align : center;
  margin     : 0.1em auto 0em;

}

li {
  padding: 0.1em auto 1em;
}