* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
}

main {
  background-image: url();
  margin: 0;
}

h1 {
  font-family: 'Russo One', sans-serif;
  font-size: 100px;
  color: #9991bd;
  text-shadow: 4px 2px rgb(0, 0, 0);
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 0;
  animation: fadeInTop 1s 1 0s linear;
}

h2 {
  font-size: 50px;
  font-family: 'Abel', sans-serif;
  color: rgba(238, 230, 208, 1);
  margin: 0;
  margin-bottom: 30px;
}

p {
  text-shadow: 1px 0.5px white;
}

.menu-backg {
  /* display: none; */
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
}

#game-vid {
  display: none;
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  /* min-width: 100%; */
  /* min-height: 100%; */
  /* transform: translate(-50%, -50%); */
}

.menu-screen {
  /* display: none; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 700px;
  background-color: rgba(14, 5, 58, 0.8);
  color: rgb(140, 133, 145);
  text-align: center;
  border: 8px solid;
  border-radius: 10px;
  box-shadow: 0 1px 32px white;
}

.button-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  position: absolute;
  top: 60%;
  left: 35%;
  transform: translate(-50%, -50%);
  height: 500px;
  width: 500px;
  margin: 0;

}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Abel', sans-serif;
  /* font-family: 'Roboto Condensed', sans-serif; */
  font-size: 30px;
  color: rgba(238, 230, 208, 1);
  list-style-type: none;
  width: 200px;
  height: 90px;
  cursor: pointer;

  /* background-color:rgba(57, 38, 221, 0.7); */
  /* border: 8px solid rgba(25, 23, 29, 0.7); */
  /* border-radius: 10px; */
  /* box-shadow: 0 1px 32px white; */
}

.buttons:hover,
.back:hover {
  animation: low-glow 1.5s infinite 0s linear;
}

.loaded1 {
  animation: fadeInLeft 0.7s 1 0s ease;
}

.loaded2 {
  animation: fadeInLeft 0.9s 1 0s ease;
}

.loaded3 {
  animation: fadeInLeft 1s 1 0s ease;
}

.fade-left1 {
  animation: fadeOutLeft 0.9s 1 0s ease;
}

.fade-left2 {
  animation: fadeOutLeft 1s 1 0s ease;
}

.fade-left3 {
  animation: fadeOutLeft 1.1s 1 0s ease;
}

.fade-in-right {
  animation: fadeInRight 0.8s 1 0s ease;
}

.fade-out-right {
  animation: fadeOutRight 0.8s 1 0s ease;
}

@keyframes low-glow {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.back {
  display: none;
  position: absolute;
  top: 82%;
  left: 80%;
  /* transform: translate(-20%, -18%); */
  align-content: center;
  vertical-align: auto;
  font-family: 'Abel', sans-serif;
  font-size: 30px;
  list-style-type: none;
  color: rgba(238, 230, 208, 1);
  background-color: none;
  width: 60px;
  height: 30px;
  cursor: pointer;
}

.options-wrap {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -35%);
  height: 500px;
  width: 600px;
  margin: 0;
}

.slider-text {
  margin-bottom: 20px;
  font-family: 'Abel', sans-serif;
  font-size: 25px;
  color: rgba(238, 230, 208, 1);
}

.slider {
  width: 500px;
}

.press-enter {
  display: none;
  font-family: 'Abel', sans-serif;
  font-size: 40px;
  margin: 80px;
  animation: low-glow 1.5s infinite 0s linear;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(57, 38, 221);
  color: rgb(238, 230, 208);
  border-radius: 10px;
  width: 400px;
  height: 200px;
  margin-bottom: 50px;
}

.stage-select {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 900px;
  height: 500px;
}

.stage-select h2 {
  margin: 0;
}

/* .stage-select p {
  text-align: center;
} */

.vid-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.stage-choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 250px;
  font-family: 'Abel', sans-serif;
  font-size: 25px;
  color: rgba(238, 230, 208, 1);
}

.vid {
  display: flex;
  width: 250px;
  height: 160px;
  animation: vidShrink 0.3s 1 0s linear;
}

.vid:hover {
  transform: scale(1.4);
  animation: vidGrow 0.4s 1 0s linear;
}

.win-lose {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 738px;
  width: 512px;
  background-color: rgba(14, 5, 58, 1);
}

.game-over-text {
  border: none;
  font-size: 30px;
  font-family: 'Press Start 2P', cursive;
  color: white;
  text-shadow: 1px 0.5 black;
  text-align: center;
}

.loser {
  animation: gameOverDrop 3s 1 0s linear;
}

.winner {
  animation: winnerRise 3s 1 0s linear;
}

.winning-glow {
  animation: winnersGlow 3s infinite 0s linear;
}

@keyframes gameOverDrop {
  0%{
      transform: translateY(-300px);
      opacity: 0;
      }
  30%{
      transform: translateY(-200px);
      opacity: 0.4;
      }
  60%{
      transform: translateY(-100px);
      opacity: 0.8;
      }
  100%{
      transform: translateY(0px);
      opacity: 1;
      }
}

@keyframes winnerRise {
  0%{
      transform: translateY(0);
      opacity: 0;
      }
  30%{
      transform: scale(1.3) translateY(0);
      opacity: 0.5;
      box-shadow: 0 0 100px 10px white;
      }
  60%{
      transform: scale(1.3) translateY(0);
      opacity: 0.8;
      box-shadow: 0 0 100px 50px white;
      }
  84%{
      transform: scale(1.3) translateY(0);
      opacity: 1;
      box-shadow: 0 0 120px 100px white;
      }
  100%{
      transform: scale(1.3) translateY(0);
      opacity: 1;
      box-shadow: 0 0 120px 100px white;
      }
}

@keyframes winnersGlow{
  0%{
      transform: scale(1.3) translateY(0);
      opacity: 1;
      box-shadow: 0 0 120px 80px white;
      }
  30%{
      transform: scale(1.3) translateY(0);
      opacity: 0.5;
      box-shadow: 0 0 100px 10px white;
      }
  60%{
      transform: scale(1.3) translateY(0);
      opacity: 0.8;
      box-shadow: 0 0 100px 50px white;
      }
  83%{
      transform: scale(1.3) translateY(0);
      opacity: 0.5;
      box-shadow: 0 0 100px 10px white;
      }
  99%{
      transform: scale(1.3) translateY(0);
      opacity: 1;
      box-shadow: 0 0 120px 80px white;
      }
}

@keyframes vidGrow{
  0%{
      transform: rotate(0) scale(1.0);
      }
  65%{
      transform: rotate(0) scale(1.4);
      }
  100%{
      transform: rotate(0) scale(1.4);
      }
}

@keyframes vidShrink{
  0%{
      transform: rotate(0) scale(1.4);
      }
  65%{
      transform: rotate(0) scale(1.0);
      }
  100%{
      transform: rotate(0) scale(1.0);
      }
}


/* Game Section */
.wrapper {
  /* display: flex; */
  display: none;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  height: 100vh;
  opacity: 0.9;
}

.container,
.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.container2 {
  display: none;
  margin-right: 100px;
}

.grid,
.grid2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  width: 360px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  /* border: 3px solid grey; */
}

.grid div,
.grid2 div {
  border: 1px solid lightgrey;
  flex-grow: 1;
  height: 5%;
  width: 10%;
}

.hidden-grid {
  opacity: 0.5;
}


.occupied {
  border: 2px solid rgb(0, 0, 0);
  background-color: #42f5ad;
  opacity: 1;
}

.locked {
  border: 2px solid rgb(199, 195, 195);
  background-color: rgb(80, 79, 79);
  opacity: 1;
}

@keyframes glow {
  from {
    -webkit-box-shadow: 0px 0px 10px 5px #69c800;
    box-shadow: 0px 0px 10px 5px #69c800;
  }

  20% {
    -webkit-box-shadow: 0px 0px 30px 10px #69c800;
    box-shadow: 0px 0px 30px 10px #69c800;
  }

  40% {
    -webkit-box-shadow: 0px 0px 50px 30px #69c800;
    box-shadow: 0px 0px 50px 30px #69c800;
  }

  60% {
    -webkit-box-shadow: 0px 0px 70px 55px #69c800;
    box-shadow: 0px 0px 70px 55px #69c800;
  }

  80% {
    -webkit-box-shadow: 0px 0px 90px 70px #69c800;
    box-shadow: 0px 0px 90px 70px #69c800;
  }

  to {
    -webkit-box-shadow: 0 0 5px #69c800;
    -moz-box-shadow: 0 0 80px #69c800;
    box-shadow: 0 0 5px #69c800;
  }
}

.glow {
  font-weight: 50px;
  text-shadow: 2px 2px black;
  background-size: cover;
  box-shadow: 0 0 40px 20px rgb(255, 94, 0);
}

.sidebar,
.sidebar2 {
  border: 4px solid rgb(134, 133, 133);
  border-radius: 7px;
  background-color: rgba(199, 203, 207, 0.8);
  ;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  height: 100%;
  font-family: 'Righteous', cursive;
}

.next,
.next2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  height: 144px;
  width: 144px;
}

.future {
  border: 2px solid black;
  background-color: rgba(48, 60, 92, 0.767);
}

.next div,
.next2 div {
  border: 1px solid lightgrey;
  flex-grow: 1;
  height: 36px;
  width: 36px;
}

.timer,
.timer2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 1px 0.5px white;
  align-items: center;
  height: 20%;
  /* background-color: rgb(144, 147, 150); */

}

.score,
.score2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 0.5px white;
  height: 20%;
  /* background-color: rgb(144, 147, 150); */
}

.controls-ingame {
  /* display: flex; */
  text-align: center;
  text-shadow: 1px 0.5px white;
}

.text {
  font-size: small;
}



/* .grid div.pika {
  background-image: url('../assets/pika-sprite.png');
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
} */
.disabled {
  pointer-events: none;
}

.land {
  animation: landed 0.7s 1 0s linear;
}

@keyframes landed {
  0% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 0 px dodgerblue;
    ;
  }

  10% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 10px 10px dodgerblue;
    ;
  }

  19% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 30px 10px dodgerblue;
    ;
  }

  29% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 60px 20px dodgerblue;
    ;
  }

  38% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 80px 30px dodgerblue;
    ;
  }

  46% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 100px 40px rgb(104, 145, 212);
    ;
  }

  55% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 120px 40px grey;
    ;
  }

  67% {
    transform: rotate(0);
    background: lightblue;
    box-shadow: 0 0 160px 50px grey;
    ;
  }

  82% {
    transform: rotate(0);
    background: grey;
    box-shadow: 0 0 200px 40px black;
    ;
  }

  96% {
    transform: rotate(0);
    background: grey;
    box-shadow: 0 0 200px 20px black;
    ;
  }

  100% {
    transform: rotate(0);
    background: grey;
    box-shadow: 0 0 0 px black;
    ;
  }
}

.crash {
  animation: tremble 1s 1 0s linear;
}

@keyframes tremble{
  0%{
      }
  10%{
      transform: translateX(10px);
      }
  11%{
      transform: translateX(-10px);
      }
  13%{
      transform: translateX(20px);
      }
  22%{
      transform: translateX(10px);
      }
  23%{
      transform: translateX(-20px);
      }
  34%{
      transform: translateX(0px);
      }
  38%{
      transform: translateX(-10px);
      }
  41%{
      transform: translateX(10px);
      }
  43%{
      transform: translateX(-10px);
      }
  47%{
      transform: translateX(-20px);
      }
  51%{
      transform: translateX(20px);
      }
  56%{
      transform: translateX(0px);
      }
  63%{
      transform: translateX(10px);
      }
  65%{
      transform: translateX(-10px);
      }
  71%{
      transform: translateX(20px);
      }
  75%{
      transform: translateX(10px);
      }
  80%{
      transform: translateX(-10px);
      }
  83%{
      transform: translateX(10px);
      }
  87%{
      transform: translateX(-10px);
      }
}

.cleared {
  animation: clear 1s 1 0s linear;
}

@keyframes clear{
  0%{
      transform: rotate(0);
      background: #04bfd4;
      opacity: 1;
      }
  5%{
      transform: rotate(0);
      background: #f5da42;
      }
  13%{
      transform: rotate(0);
      background: #42f5ad;
      }
  23%{
      transform: rotate(0);
      background: #d152eb;
      }
  32%{
      transform: rotate(0);
      background: #cc0213;
      }
  44%{
      transform: rotate(0);
      background: #ff7512;
      }
  53%{
      transform: rotate(0);
      background: #093ddb;
      }
  65%{
      transform: rotate(0);
      background: #cc0213;
      }
  75%{
      transform: rotate(0);
      background: #000000;
      box-shadow: 0 0 60px 30px white;
      }
  85%{
      transform: rotate(0);
      background: #000000;
      }
  100%{
      transform: rotate(0);
      background: #000000;
      opacity: 0;
      }
}



@keyframes fadeInLeft {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }

  40% {
    transform: translateX(-40px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fadeOutLeft {
  0% {
    transform: rotate(0) translateX(0px);
  }

  20% {
    transform: rotate(0) translateX(10px);
  }

  100% {
    transform: rotate(0) translateX(-60px);
    opacity: 0;
  }
}

@keyframes fadeOutRight {
  0% {
    transform: translateX(0px);
  }

  20% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(60px);
    opacity: 0;
  }
}

@keyframes fadeInRight {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }

  100% {
    transform: translateX(30px);
    opacity: 1;
  }
}

@keyframes fadeInTop {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.color1 {
  background-color: #04bfd4;
}

.color2 {
  background-color: #cc0213;
}
.color3 {
  background-color: #ff7512;
}
.color4 {
  background-color: #f5da42 ;
}
.color5 {
  background-color: #42f5ad;
}
.color6 {
  background-color: #d152eb;
}
.color7 {
  background-color: #0249cc;
}