body {
  margin: 0 auto;
  padding: 0;
  background-color: #e3e3e3;
  max-width: 1400px;
  font-family: 'Barlow', sans-serif;
}


/*///////////////////////////////GAME TITLES///////////////////////////*/

.nextLevel {
  font-size: 200px;
  position: absolute;
  margin-top: 214px;
  color: #152df7;
  z-index: 2;
  -webkit-animation: "newlevelflash" .4s 8; /* Safari 4+ */
  -moz-animation: "newlevelflash" .4s 8; /* Fx 5+ */
  -o-animation: "newlevelflash" .4s 8; /* Opera 12+ */
  animation: "newlevelflash" .4s 8;
  display: none;
}

.wrongMove {
  font-size: 200px;
  position: absolute;
  margin-top: 214px;
  color: #f74915;
  z-index: 2;
  -webkit-animation: "wrongmoveflash" .4s 8; /* Safari 4+ */
  -moz-animation: "wrongmoveflash" .4s 8; /* Fx 5+ */
  -o-animation: "wrongmoveflash" .4s 8; /* Opera 12+ */
  animation: "wrongmoveflash" .4s 8;
  display: none;
}

.gameOver {
  font-size: 200px;
  position: absolute;
  margin-top: 214px;
  color: #f7151f;
  background-color: white;
  border: 5px red solid;
  z-index: 2;
  -webkit-animation: "gameoverflash" .4s 8; /* Safari 4+ */
  -moz-animation: "gameoverflash" .4s 8; /* Fx 5+ */
  -o-animation: "gameoverflash" .4s 8; /* Opera 12+ */
  animation: "gameoverflash" .4s 8;
  display: none;
}

.gameWon {
  font-size: 121px;
  text-align: center;
  position: absolute;
  margin-top: 214px;
  border: 5px solid white;
  background-color: #152df7;
  color: white;
  z-index: 1;
  display: none;
}

/*//////////////////////////TIMER//////////////////////////////////*/

/*timer container*/

.timer {
  display:inline-block;
  margin-left: 144px;
  vertical-align: top;
  margin-top: 158px;
}

/*styling for individual numbers in the countdown */

.counter {
  font-size: 200px;
  color: red;
  border: 5px solid red;
  border-radius: 200px;
  padding: 40px;
}

/*shark o'clock heading that sits under number zero when countdown times out*/

.sharkclock {
  font-size: 40px;
  font-weight: 700;
  color: red;
  text-align: center;
  display: none;
}

/*hiding each number in the countdown until it is called in the jQuery file*/

#zero {
  display: none;
}

#one {
  display: none;
}

#two {
  display: none;
}

#three {
  display: none;
}

#four {
  display: none;
}

#five {
  display: none;
}

/*.timerheading {
  font-size: 30px;
  color: red;
  display: inline-block;
  margin-left: 12px;
  display: none;
}*/

/*///////////////////////GAME BOARD//////////////////////////////*/

/*game board container*/

.container {
  width: 600px;
  height: 600px;
  display:inline-block;
  padding: 50px;
  border: 5px solid white;
  background-image: url("../images/waves-3.jpg");
  background-repeat: no-repeat;
}

/*sos button styling*/

.sosButton {
  width: 100px;
  height: 50px;
  border: 5px solid white;
  background-color: red;
  display: inline-block;
  margin-left: 232px;
  vertical-align: top;
}

/*text inside sos button */

.sosButton p {
  text-align: center;
  color: white;
  font-size: 30px;
  margin-top: 8px;
}

/*styling of red dots*/

.buoy {
  width: 51px;
  height: 51px;
  background-color: red;
  display: inline-block;
  margin: 44px;
  border-radius: 50px;
}

/*////////////////////////OPENING PATTERN FLASHING ANIMATION/////////////////////////*/
/*lights up the dots that match the pattern*/

@-webkit-keyframes flash {
  0%   { background-color: red; }
  100% { background-color: #21E412; }
  75% { background-color: yellow; }
}
@-moz-keyframes flash {
  0%   { background-color: red; }
  100% { background-color: #21E412; }
  75% { background-color: yellow; }
}
@-o-keyframes flash {
  0%   { background-color: red; }
  100% { background-color: #21E412; }
  75% { background-color: yellow; }
}
@keyframes flash {
  0%   { background-color: red; }
  100% { background-color: #21E412; }
  75% { background-color: yellow; }
}

.circleFlash {
  -webkit-animation: "flash" 0.5s 2; /* Safari 4+ */
  -moz-animation: "flash" 0.5s 2; /* Fx 5+ */
  -o-animation: "flash" 0.5s 2; /* Opera 12+ */
  animation: "flash" 0.5s 2; /* IE 10+, Fx 29+ */
}

/*////////////////////////NEXT LEVEL HEADING ANIMATION///////////////////////////*/

@-webkit-keyframes newlevelflash {
  0%   { color: #152df7; }
  100% { color: #15bff7; }
}
@-moz-keyframes newlevelflash {
  0%   { color: #152df7; }
  100% { color: #15bff7; }
}
@-o-keyframes newlevelflash {
  0%   { color: #152df7; }
  100% { color: #15bff7; }
}
@keyframes newlevelflash {
  0%   { color: #152df7; }
  100% { color: #15bff7; }
}

/*////////////////////////WRONG MOVE HEADING ANIMATION///////////////////////////*/

@-webkit-keyframes wrongmoveflash {
  0%   { color: #f74915; }
  100% { color: #f7db16; }
}
@-moz-keyframes wrongmoveflash {
  0%   { color: #f74915; }
  100% { color: #f7db16; }
}
@-o-keyframes wrongmoveflash {
  0%   { color: #f74915; }
  100% { color: #f7db16; }
}
@keyframes wrongmoveflash {
  0%   { color: #f74915; }
  100% { color: #f7db16; }
}

/*////////////////////////GAME OVER HEADING ANIMATION///////////////////////////*/

@-webkit-keyframes gameoverflash {
  0%   { color: #f7151f; }
  100% { color: #F7159E; }
}
@-moz-keyframes gameoverflash {
  0%   { color: #f7151f; }
  100% { color: #F7159E; }
}
@-o-keyframes gameoverflash {
  0%   { color: #f7151f; }
  100% { color: #F7159E; }
}
@keyframes gameoverflash {
  0%   { color: #f7151f; }
  100% { color: #F7159E; }
}