@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  padding: 0;
  text-align: center;
  color: #32aadd;
  font-family: "Press Start 2P";
  background-color: #000088;
}
h1 {
  color: #32aadd;
  font-family: "Press Start 2P";
  font-size: 80px;
  padding-top: 60px;
}

#game-intro {
  padding: 80px 0px;
}

#audiobutton {
  display: flex;
  width: 100vw;
  padding: 20px 0px;
  justify-content: center;
}

.hearts{
    height: 30px;
    margin: 0;
    padding-top: 50px;
}

#info-container {
    display: flex;
    padding: 20px;
    color: #eceded;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: -25px;
}

#runningscore-container {
    display: flex;
    padding: 20px;
    padding-top: 465px;
    color: #eceded;
    flex-direction: row-reverse;
    align-items: flex-end;
}

.audio-img {
    width: 80px;
}

#instructions {
    display: none;
    margin-right: auto;
    margin-top: 100px;
    align-content: center;
}

.instructions-img {
    width: 900px
}


#game-screen {
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  align-content: center;
  overflow: hidden;
  position: relative;
  background-image: url(./assets/Backgroundbrown.png);
  background-size: cover;
  background-repeat: repeat-x; 
  animation: slide 5s linear infinite;
}


@keyframes slide {
  0% {
    background-position: 900px 0;
  }
  100% {
    background-position: 0px 0;
  }
}


#game-end {
  display: none;
  padding: 80px 0px;
}

h3 {
    color: #32aadd;
    font-family: "Press Start 2P";
    font-size: 35px;
    padding-top: 60px;
    padding-bottom: px;
  }
#final-score {
    font-size: 35px;
    color: #ECEDED;
}

/*
.game-over-img {
    width: 200px;
}
*/

body button {
  font-size: 30px;
  background-color: #000088;
  color: #32aadd;
  padding: 20px 20px;
  border: 3;
  border-color: #32aadd;
  box-shadow: 0;
  margin-top: 80px;
  margin-bottom: 80px;
  font-family: "Press Start 2P";
}

#start-button:hover {
    background-color: #32aadd;
    color: #000088;
}

#restart-button:hover {
    background-color: #32aadd;
    color: #000088;
}


.pulsate {
    -webkit-animation: pulsate 0.25s linear;
}

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(1, 1); opacity: 1;}
    25% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
    50% {-webkit-transform: scale(1, 1); opacity: 1;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.9;}
}