@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
/* ---- reset ---- */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}


/* ---- typography ---- */

body {
  color: #111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 147%;
}


p {
  margin: 0;
}



/* ---- layout ---- */

#site-header {
  padding: 30px 0;
  color: white;
  background: #111;
}

#site-footer {
  color: white;
  padding: 60px 0;
  background: #111;
} */

#site-main {
  margin-bottom: 60px;
} 

.container {
  margin: 0 0;
}

/* .section {
  margin-bottom: 20px;
  padding-top: 20px;
} */

/* @media (min-width: 768px) {
  .container {
    max-width: 728px;
    margin: 0 auto;
  }
}  */

/* ---- animations ---- */
/* ANIMATION PULSE */
@-webkit-keyframes name {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes name {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}



@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* ANIMATION FADEINDOWN */
/* ---- end animations ---- */


/* ---- components ---- */

button {
  
  animation: name 0.5s infinite;  
  z-index: 100;
  font-size: 1vw;
  font-family: 'Press Start 2P', cursive;
  color:rgb(53, 54, 73);
  padding: 2% 4%;
  background-color:rgba(231, 210, 210, 0.4);
  border: 5px solid rgb(255, 3, 234);
  border-radius: 40px;  
}
button:hover {
  animation: name 0.2s infinite;  
  background-color:rgba(236, 248, 167, 0.4);
  border: 5px solid rgb(220, 253, 32);
}


/* ---- section ---- */


.splash-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  /*margin: -20px 0 0 0; */
}
    

.splash-screen .name {
  width: 70%;
  height:auto;
  animation: name 3s infinite;
  z-index: 100;
}

.splash-screen .instructions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  width: 100%;
  height:auto;
  z-index: 150;
  bottom: 13vh;
}
.splash-screen .keyboard {

  width: 40%;
  height:auto;
  z-index: 150;
}

.splash-screen button {
  width: 40%;
  font-size: 1.5em;
  padding: 1% 2%;
  
}
  
.background-splash{
  position:absolute;
  z-index: 0;
}

.game-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  /* background-color: rgb(211, 243, 242  ); */
}
.background-game{
  display: block;
  position:absolute;
  z-index: 0;
  width: 100%;
  height: 100vh;
}
#hub {
  position:absolute;
  /* width:20vw;
  height:10vh; */
  z-index: 1000;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 5vh 0 0 3vw;
  font-family: 'Press Start 2P', cursive;
  font-size: 1vw;

}

.score{
  color: white;
  background-color: rgb(255, 3, 234, 0.2);
  
}
.live{
  color: white;
  background-color: rgb(255, 3, 234, 0.2);
  
}

.background-gameover{
  position:absolute;
  z-index: 0;
}

.gameover-screen {
  position: absolute;
  inset: 0;
  z-index: 999;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.35);
  
}

.hidden {
  display: none;
}

.gameover-screen h1{
  animation: fadeInDownBig 1s ;
  z-index: 100;
  color:white;
  font-family: 'Press Start 2P';
  font-size: 5vw;
  
  

}
.gameover-screen h3{
  
  animation: fadeInDownBig 2s ;
  z-index: 100;
  color:orange;
  font-family: 'Press Start 2P', cursive;
  font-size: 2vw;

}

.gameover-screen .end-buttons{
  animation: fadeInDownBig 3s ;
  display:flex;
  width:80%;
  flex-direction:row; 
  /* align-items: center; */
  justify-content: space-evenly;
  margin-bottom:1px; 

}