html, body {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: rgb(255, 255, 255);
}

.header{
  position: absolute;
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-around;

}

.pause-button{

  z-index: 1;
  display: inline;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  align-self: center;
}

.score, .highscore, .health-points{
  z-index: 0;

  font-size: xx-large;
  font-family:Arial, Helvetica, sans-serif;
}

.health-points{
 
  left: 10%;
  color: red;
}

.highscore{
  left: 80%;
}

.shake {
  animation: shake 0.5s;
  animation-fill-mode: forwards;
}

@keyframes shake {
  0%   { transform: translate(0px, 0px); background-color: transparent; }
  10%  { transform: translate(-2px, -2px); background-color: rgba(150, 0, 0, 0.1); }
  20%  { transform: translate(2px, 2px); background-color: rgba(150, 0, 0, 0.15); }
  30%  { transform: translate(-2px, 2px); background-color: rgba(150, 0, 0, 0.2); }
  40%  { transform: translate(2px, -2px); background-color: rgba(150, 0, 0, 0.25); }
  50%  { transform: translate(-2px, -2px); background-color: rgba(150, 0, 0, 0.3); }
  60%  { transform: translate(2px, 2px); background-color: rgba(150, 0, 0, 0.25); }
  70%  { transform: translate(-2px, 2px); background-color: rgba(150, 0, 0, 0.2); }
  80%  { transform: translate(2px, -2px); background-color: rgba(150, 0, 0, 0.15); }
  90%  { transform: translate(-2px, 2px); background-color: rgba(150, 0, 0, 0.1); }
  100% { transform: translate(0px, 0px); background-color: transparent; }
}



.pause-menu{
  position: absolute;
  left: 40%;
  top: 25%;
  height: 50%;
  width: 20%;
  border: solid;
  z-index: 1;
  background-color: white;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10%;
  font-size:x-large;
  color: black;
}


@media (max-width: 768px) { 
  .pause-menu{
    
    width: 80%;
    left: 10%;
  }

 .score, .highscore, .health-points{
  font-size: large;

}
}

button{
  z-index: 20;
}