body {

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
}


#home { 
  width: 1136px;
  height: 720px;
  background-image: url('../images/unnamed.png');
  background-size: cover;
  background-color:rgb(59, 75, 33);
}



.game-intro {
  float: center;
  padding: 0% 10%;
}


.logo-img {
  width: 350px;

}

.wasd-img {

  margin: 5px 5px;
  font-size: 20px;
  color:rgb(2, 2, 2);
  font-family:fantasy;
  font-weight: 900;

}
.logo-controller{

 align-items:initial;
 
  
}

.spacebar-controller{
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  transform: translate(-20%,-99%);
  

}


#start-button {
  font-size: 22px;
  text-align: center;
  background-image: url('../images/SCORE.png');
  background-size: 167px 89px;
  align-items: center;
  font-family: fantasy;
  font-weight: bold;
  color:rgb(126, 131, 118);
  padding: 30px 30px;
  background-color: transparent;
  border: transparent;
  margin-top: -20px;
  

}

#game-over{
  background-image: url('../images/game over background.jpeg');
  width: 1150px;
  height: 900px;
  position: absolute;
  transform: translate(-50%, -51%);
  top: 50%;
  left: 50%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#score{
  font-family:fantasy;
  display: flex;
  color: #422800;
  background-image: url('../images/gameovergrame.png');
  background-size: cover;
  height: 75px;
  border: 2px solid #422800;
  background-color: #bd2207;
  border-radius: 5px;
  font-weight: 900;
  font-size: 35px;
  padding: 0 15px;
  position: relative;
  align-items: center;
  text-align: center;
  margin-top: -110px;
  transform: translate(0%,-99%);
}



.restart {
  background-color: #bd2207;
  border: 2px solid #130b01;
  border-radius: 30px;
  box-shadow: #422800 4px 4px 0 0;
  color: #422800;
  cursor: pointer;
  display: inline-block;
  font-family: fantasy;
  font-weight: 800;
  font-size: 18px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  transform: translate(0%,0%);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.restart:hover {
  background-color: #fff;
}

.restart:active {
  box-shadow: #422800 2px 2px 0 0;
  transform: translate(1px, 2px);
}

@media (min-width: 768px) {
  .restart {
    min-width: 120px;
    padding: 0 25px;
  }
}