body {
  background-image: url("https://bcc53877d7aa0a135b9a-1452ca75bf8985207bb5b0c44a65ef28.ssl.cf4.rackcdn.com/Product-800x800/8db5b973-cf4d-487c-9d68-d676cdb1fd05.jpg");
}

h1 {
  color: rgb(46, 51, 56);
  margin: 50px 0;
  font-family: 'Press Start 2P';
  font-size: 30px;
}

.container {
  text-align: center;
}

.rowFormat {
  margin: 0 auto;
}

#panels {
  text-align: center;
  display: flex;
  justify-content: center;
}

.row {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.run {
  opacity: 0.5;
  margin: 50px auto;
  display: flex;
  position: absolute;
}

.lights {
  opacity: 0.5;
  margin: 50px 0;
  height: 360px;
  width: 500px;
  display: flex;
  position: relative;  
}

#tempHolder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 800px;
}

.panel {
  border: 5px solid black;
  border-radius: 5px;
  margin: 50px 10px;
  width: 150px;
  height: 150px;
  color: transparent;
  display: flex;
}

#pan-1 {
  background: darkgreen;
}

#pan-2 {
  background: darkred;
}

#pan-3 {
  background: goldenrod;
}

#pan-4 {
  background: darkblue;
}

#pan-5 {
  background: teal;
}

#pan-6 {
  background: purple;
}

#pan-7 {
  background: #804000;
}

#pan-8 {
  background: #33334d;
}

#start, #menu, .level, #normal, #advance, #master, #back1, #back2, #back3, #back4 {
  display: none;
}

.button, .level {
  text-align: center;
  font-size: 10px;
  min-width: 80px;
  line-height: 50px;
  background: rgb(46, 51, 56);
  color: white;
  border-radius: 5px;
  margin: 5px 10px;
  font-family: 'Press Start 2P';
} 

.level {
  width: 100px;
  max-width: 100px;
  padding: 0 5px;
}

.button:hover {
  border: 1px solid white;
}

@media only screen and (max-width: 1140px) {
  .button, .level {
    min-width: 75px;
  } 

  .panel {
    width: 150px;
    height: 150px;
  }

  #tempHolder {
    width: 800px;
  }
}

@media only screen and (max-width: 960px) {
  .button, .level {
    min-width: 75px;
  } 
  .panel {
    width: 125px;
    height: 125px;
  }

  #tempHolder {
    width: 700px;
  }
}

@media only screen and (max-width: 720px) {
  .button, .level {
    min-width: 75px;
  } 

  .panel {
    width: 100px;
    height: 100px;
  }

  #tempHolder {
    width: 600px;
  }
}

@media only screen and (max-width: 540px) {
  .rowFormat {
    min-width: 430px;
  }

  .button, .level {
    min-width: 75px;
  } 

  .panel {
    width: 75px;
    height: 75px;
  }

  #tempHolder {
    width: 500px;
  }
}

@media only screen and (max-width: 440px) {
  .rowFormat {
    min-width: 430px;
  }

  .button, .level {
    min-width: 75px;
  } 

  .panel {
    width: 60px;
    height: 60px;
  }

  #tempHolder {
    width: 440px;
  }
}

@media only screen and (max-width: 380px) {
  .rowFormat {
    min-width: 320px;
  }

  .button, .level {
    min-width: 75px;
  } 

  .panel {
    width: 40px;
    height: 40px;
  }

  #tempHolder {
    width: 320px;
  }
}



@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}

.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}