* {
  box-sizing: border-box;
}

body {
  max-width: 960px;
  background-image: url(../images/audio_waveform.jpg);
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  font-family: 'Work Sans', sans-serif;
}

main {
background-color: black;
border-radius: 20px;
padding: 30px;
overflow: hidden;
opacity: 0.8;

}

h1 {
  font-family: Papyrus, fantasy;
  color: white;
  font-size: 60px;
  font-style: normal;
  font-variant: normal;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  margin: 60px 0;
}

@media (max-width: 920px) {

  h1 {
    line-height: 60px;
  }
}

.scores {
  width: 30%;
  float: left;

}

.boards {
  width: 70%;
  float: left;

}

#playerTurn {
  /*font-family: Papyrus, fantasy;*/
  font-size: 20px;
  font-weight: 800;
  font-weight: 600;
  text-align: left;
  color: red;
}

#playerTurn.green {
  color: green;
  font-size: 20px;
  font-weight: 800;
}

#player1 {
  /*font-family: Papyrus, fantasy;*/
  margin-top: 30px;
  color: red;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 26.4px;
}

#player2 {
  /*font-family: Papyrus, fantasy;*/
  margin-top: 30px;
  color: green;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 26.4px;
}

#cpuSquares {
  width: 225px;
  display: inline-block;
  margin: auto;
  margin-right: 20px;
}

#cpuSquares div {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#cpuSquares div:nth-child(1) { background-image: url(../images/accordion.jpg); }
#cpuSquares div:nth-child(2) { background-image: url(../images/audio_waveform.jpg); }
#cpuSquares div:nth-child(3) { background-image: url(../images/laptop_music_player.jpg); }
#cpuSquares div:nth-child(4) { background-image: url(../images/music_cd.jpg); }
#cpuSquares div:nth-child(5) { background-image: url(../images/music_keys.jpg); }
#cpuSquares div:nth-child(6) { background-image: url(../images/music_player_buttons.jpg); }
#cpuSquares div:nth-child(7) { background-image: url(../images/music_roll.jpg); }
#cpuSquares div:nth-child(8) { background-image: url(../images/musical_notes.jpg); }
#cpuSquares div:nth-child(9) { background-image: url(../images/portable_music.jpg); }
#cpuSquares div:nth-child(10) { background-image: url(../images/accordion.jpg); }
#cpuSquares div:nth-child(11) { background-image: url(../images/audio_waveform.jpg); }
#cpuSquares div:nth-child(12) { background-image: url(../images/laptop_music_player.jpg); }
#cpuSquares div:nth-child(13) { background-image: url(../images/music_cd.jpg); }
#cpuSquares div:nth-child(14) { background-image: url(../images/music_keys.jpg); }
#cpuSquares div:nth-child(15) { background-image: url(../images/music_player_buttons.jpg); }
#cpuSquares div:nth-child(16) { background-image: url(../images/music_roll.jpg); }

.cpu-square-image {
  width: 60px;
  height: 60px;
  margin: 1px;
}

#userSquares {
  width: 225px;
  display: inline-block;
  margin: auto;

}

#userSquares div {
  display: inline-block;
  border: 2px solid #222;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#userSquares div:nth-child(1) { background-image: url(../images/accordion.jpg); }
#userSquares div:nth-child(2) { background-image: url(../images/audio_waveform.jpg); }
#userSquares div:nth-child(3) { background-image: url(../images/laptop_music_player.jpg); }
#userSquares div:nth-child(4) { background-image: url(../images/music_cd.jpg); }
#userSquares div:nth-child(5) { background-image: url(../images/music_keys.jpg); }
#userSquares div:nth-child(6) { background-image: url(../images/music_player_buttons.jpg); }
#userSquares div:nth-child(7) { background-image: url(../images/music_roll.jpg); }
#userSquares div:nth-child(8) { background-image: url(../images/musical_notes.jpg); }
#userSquares div:nth-child(9) { background-image: url(../images/portable_music.jpg); }
#userSquares div:nth-child(10) { background-image: url(../images/accordion.jpg); }
#userSquares div:nth-child(11) { background-image: url(../images/audio_waveform.jpg); }
#userSquares div:nth-child(12) { background-image: url(../images/laptop_music_player.jpg); }
#userSquares div:nth-child(13) { background-image: url(../images/music_cd.jpg); }
#userSquares div:nth-child(14) { background-image: url(../images/music_keys.jpg); }
#userSquares div:nth-child(15) { background-image: url(../images/music_player_buttons.jpg); }
#userSquares div:nth-child(16) { background-image: url(../images/music_roll.jpg); }

#userSquares div:nth-child(1):hover { border-color: yellow; }
#userSquares div:nth-child(2):hover { border-color: yellow; }
#userSquares div:nth-child(3):hover { border-color: yellow; }
#userSquares div:nth-child(4):hover { border-color: yellow; }
#userSquares div:nth-child(5):hover { border-color: yellow; }
#userSquares div:nth-child(6):hover { border-color: yellow; }
#userSquares div:nth-child(7):hover { border-color: yellow; }
#userSquares div:nth-child(8):hover { border-color: yellow; }
#userSquares div:nth-child(9):hover { border-color: yellow; }
#userSquares div:nth-child(10):hover { border-color: yellow; }
#userSquares div:nth-child(11):hover { border-color: yellow; }
#userSquares div:nth-child(12):hover { border-color: yellow; }
#userSquares div:nth-child(13):hover { border-color: yellow; }
#userSquares div:nth-child(14):hover { border-color: yellow; }
#userSquares div:nth-child(15):hover { border-color: yellow; }
#userSquares div:nth-child(16):hover { border-color: yellow; }



.user-square {
  display: inline-block;
  height: 60px;
  width: 60px;
  background-color: grey;
  border-color: white;
  padding: 2px;
  margin: 1px;
  vertical-align: top;
}

.user-square-audio {
  width: 111px;
  height: 111px;
}


ol {
  list-style: none;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  color: rgb(0,0,0);
  font-size: 20px;
  line-height: 50px;
  margin: 0px;
}

#gameButtons {
  margin-top: 20px;
  margin-bottom: 5px;
}

#easy {
  width: 80px;
  height: 30px;
  border-radius: 50px;
}

#easy:hover {
  background-color: darkgrey;
}

#medium {
  width: 80px;
  height: 30px;
  border-radius: 50px;
}

#medium:hover {
  background-color: darkgrey;
}

#hard {
  width: 80px;
  height: 30px;
  border-radius: 50px;
}

#hard:hover {
  background-color: darkgrey;
}

#reset {
  width: 80px;
  height: 30px;
  border-radius: 50px;
}

#reset:hover {
  background-color: darkgrey;
}

#instruct1 {
  color: green;
  font-weight: 600;
  font-size: 15px;
  margin-top: 0px;
}

#instruct2 {
  color: blue;
  font-weight: 600;
  font-size: 15px;
  margin: 0px;
}

button.active {
  background-color: green;
  color: white;

}