/* Gradient */
:root {
  --gradient: #666666, #666666, #666666, #666666, #bf5b17, #bf5b17, #bf5b17, #bf5b17, #f0027f, #f0027f, #f0027f, #f0027f, #386cb0, #386cb0, #386cb0, #386cb0, #ffff99, #ffff99, #ffff99, #ffff99, #fdc086, #fdc086, #fdc086, #fdc086, #beaed4, #beaed4, #beaed4, #beaed4, #7fc97f, #7fc97f, #7fc97f, #7fc97f;
}

/* General Rules */
body {
  width: 100%;
  height: 100%;
  background: #acac;
  margin: 0px;
}

canvas {
  width: 100%;
  z-index: -1;
  position: fixed;
  top:0;
  image-rendering: pixelated
}

hr {
  color:#acac;
}

/* Create Game Button */
#createGame {
  margin-top: 25px;
  display: block;
}

/* Create Game, Tutorial, Presets and Controls */
.control {
  background: #ffffffa0;
  padding: 10px;
  margin: 10px;
  width: 900px;
}

.colorPreview {
  height: 10px;
  background: linear-gradient(90deg, var(--gradient));
  border-color: #ffffffa0;
}

#gamefieldIcon {
  height: 24px;
  margin-top: -3px;
  vertical-align: middle;
  display: inline-block;
}

#tutorial {
  top: 400px;
  left: 10px;
}

#presets {
  top: 1550px;
  left: 10px;
}

#createGameSettings {
  display: block;
}

#info {
  display: none;
  width: 400px;
}

/* Input Fields */
#resolutionX, #resolutionY, #colormapStart, #colormapStop {
  width: 50px;
}

#arrayX, #arrayY, #iterationTime, #startConditionModulator, #neighborhoodSize {
  width: 40px;
}

#startCondition, #colormap, #gameName {
  width: 140px;
}

#survive, #birth {
  width: 90px
}

#naturalDeath {
  width: 60px;
}

#reverseColormap, #mirrorColormap {
  width: 15px;
  height: 15px;
}

#controlHint {
  font-size: 14px;
}

#timer {
  width: 120px;
  display: inline-block;
}

li {
  list-style-type: none;
  padding: 0;
  margin-top: 2px;
}

ul {
  padding: 0;
  margin-top: 0; 
}

.presetPreview {
  font-size: 14px;
}

#saveGame:focus { 
  animation: saveGame 0.6s;
  -webkit-animation: saveGame 0.6s;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}
@keyframes saveGame  {
    0%   {color:#000; background-color:#73d7ee00; text-shadow:0 0 9px rgba(255,255,144,0);}
    90%  {color:#000; background-color:#ffafc7; text-shadow:0 0 9px rgba(255,255,144,0.75);}
    100% {color:#0000; background-color:#0000; text-shadow:0 0 9px rgba(255,255,144,0);}
}