body {
  background-color: black;
}

h1, h2, label {
  font-family: 'Press Start 2P', cursive;
  color: #2fff00;
}

h3 {
  font-family: 'Press Start 2P', cursive;
  color: #fe1aa4;
}

h4 {
  font-family: 'Press Start 2P', cursive;
  color: #2fff00;
  font-size: 1.2em;
}

p {
  font-family: 'Electrolize', sans-serif;
  color: #2fff00 !important;
  font-size: 1.2em;
}

button {
  font-family: 'Electrolize', sans-serif;
  font-size: 1.7em;
}

input {
  background-color: black !important;
  color: #2fff00;
  border: none;
  border-bottom: 2px solid #00f92a;
}

input:focus, :after {
  outline: 0 !important;
  background-color: black;
  color: #2fff00;
  border: none;
  border-bottom: 2px solid #00f92a;
}

/**** general style classes ****/
.white {
  color: white;
}

.green {
  color: #2fff00;
}

.yellow {
  color: #ccff00;
}

.pink {
  color: #fe1aa4 !important;
}

.bk-pink {
  background-color: #fe1aa4 !important;
}

.bk-blue {
  background-color: darkblue;
}

.bk-green {
  font-size:1em;
  background-color: #2fff00;
}

.bk-gray{
  height: 4em;
  width: 8em;
  /*color: #ccff00;*/
  background-color: gray;
}

.font-lg {
  font-size: 1.7em;
}

.font-md {
  font-size: 1.4em;
}

.outline {
  text-shadow: 3px 3px  black;
}

.button-red {
  height: 4em;
  width: 8em;
  color: #2fff00;
  background-color: #fe1aa4;
  font-weight: 900 !important;
}

.button-blue {
  height: 4em;
  width: 8em;
  color: #ccff00;
  background-color: blue;
}

.button-gray {
  height: 4em;
  width: 8em;
  color: #ccff00;
  background-color: gray;
}

.button-blue-md {
  color: #ccff00;
  background-color: blue;
  font-size: 1.1em;
}

.button-blue-sm {
  color: #ccff00;
  background-color: blue;
  font-size: .9em;
}

.gray-border {
  border: .7em solid #343a40;
}

.electrolize {
  font-family: 'Electrolize', sans-serif;
}

/* fun extras */
.label-text:after {
  content: '';
  display: inline-block;
  width: 0.8rem;
  height: 1.2rem;
  background-color: #00f92a;
  animation-name: blinker;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
}

@keyframes blinker {
  from {
    background-color: #00f92a;
  }
  to {
    background-color: #000500;
  }
}

/**** navigate styles ****/
.home img { 
  top: 2em;
  height: 70px; 
  border: 2px solid white; 
  border-radius: 5px;
}

.home img:hover { 
  opacity: .5;
}

.circular {
  width: 125px;
  height: 125px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid white; 
}

.intro-image {
  width: 175px;
}

/**** guess woof styles ****/
#dogBoard {
  margin-left: 30px;
  font-family: 'Electrolize', sans-serif;
  color: #2fff00 !important;
  font-size: 1.2em;
}

#dogDiv {
  font-family: 'Electrolize', sans-serif;
  color: #2fff00 !important;
  font-size: 1.2em;
}

#dogDiv img{
  width: 60%;
  border-radius: 5px;
}

#guessInput {
  width: 400px;
  max-width: 100%;
}

.guess-bk {
  background-color: #00a12b;
  border-radius: 5px;
  border: 2px solid lightgray;
}

.play-guess { 
  margin: 2rem auto;
  position: relative; 
}

.play-guess img { 
  position: absolute; 
  left: 43%; 
  width: 10em; 
  border: 2px solid #ffe; 
  border-radius: 5px;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2); 
  transform-origin: center 400px; 
  transition: all .6s linear; 
}
.play-guess img:first-child { 
  transform: rotate(2deg);  
}
.play-guess img:last-child { 
  transform: rotate(-2deg); 
}
.play-guess:hover img:first-child { 
  transform: rotate(8deg); 
}
.play-guess:hover img:last-child { 
  transform: rotate(-8deg);  
}

.board-image {
  width: 175px;
  max-width: 90%;
  border: 1px solid white;
}

.guess-guide {
  line-height: 1;
}

.not-it {
  content: url('../img/dog-pattern.png')
}

/**** donnisaur styles ****/
#donnisaur {
  position: relative;
  height: 90%;
  width: 100%;
  bottom: 0;
}

#donniRex {
  position: fixed;
  left: 10px;
  bottom: 0px;
  width: 100px;
  height: 100px;
  background-image: url('../img/donsaurpix.png');
}

.clickdon {
  font-size: 1em;
  position: absolute;
  left: 100px;
}

.over {
  top: 6em;
  position: absolute;
  width: 100%;
  margin: auto;
}

.wow {
  font-size: 3em;
  top: 6em;
  position: absolute;
  width: 100%;
  margin: auto;
  color: #ff0080;
  text-shadow: 0 0 0.6em black;
}

.hurdle {
  position: fixed;
  width: 60px;
  height: 50px;
  background-image: url('../img/fence.png');
  bottom: 0px;
}
.cloud {
  position: fixed;
  width: 60px;
  height: 50px;
  background-image: url('../img/clouds.png');
  bottom: 0px;
}
.weather-box {
  width: 250px;
  float: right;
  top: 1em;
  right: 1em;
  background-color: black;
  border: 3px solid white;
  border-radius: 5px;
  box-shadow: 0 0 20px black;
}

.score-board {
  width: 200px;
  top: 1em;
  right: 280px;
  background-color: black;
  border: 3px solid white;
  border-radius: 5px;
  box-shadow: 0 0 20px black;
}

.weather-clear {
  position: fixed;
  background-size: cover;
  background-image: url('../img/clear3.png');
  background-repeat: repeat-x !important;
  width: 100%;
  height: 100%;
  z-index: -2000;
  bottom: 0;
}

.weather-clouds {
  position: fixed;
  background-image: url('../img/clouds1.png');
  background-repeat: repeat-x !important;
  width: 100%;
  background-size: cover;
  height: 100%;
  bottom: 0;
  z-index: -2000;
}

.weather-rain {
  position: fixed;
  background-image: url('../img/rain3.png');
  background-repeat: repeat-x !important;
  width: 100%;
  height: 110%;
  /*background-size: cover;*/
  bottom: 0;
  z-index: -2000;
}

.weather-snow {
  position: absolute;
  background-image: url('../img/snow.png');
  background-repeat: repeat !important;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: -2000;
}

#taco img {
  top: 125px;
  left: 10px;
  position: absolute;
}

.taco-score {
  top: 30px;
  left: 75px;
  position: absolute;
  width: 58px;
}