body {
  margin: 0;
  background: #ffd0cf;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body.game-running {
  background-image: url('../images/background-2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* START SCREEN */

#start-screen {
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 20; 
}


#start-screen h1,
#start-screen button {
  font-size: 80px;
  color: white;
  background-color: rgba(190, 60, 71, 0.6); 
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 20px; 
}



#start-screen button {
  font-size: 28px;
  padding: 12px 40px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background-color: #f18590;
  color: white;
  transition: 0.2s;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#start-screen button:hover {
  background-color: #c96b75;
}

/* GAME CANVAS */
canvas {
  display: none;
  background: #fdedfc;
  border: 2px solid black;
}

#game-over-screen {
  display: none; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #804c57; 
  z-index: 10;
}

#game-over-screen h1 {
  font-size: 100px;
  margin-bottom: 30px;
  color: #ffffff; 
}

#game-over-screen button {
  font-size: 28px;
  padding: 12px 40px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background-color: #f5b1bf;
  color: white;
  transition: 0.2s;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin: 10px;
}

#game-over-screen button:hover {
  background-color: #d6536d;
}

#frog {
  position: absolute;

  left: 100px;      /* move left / right */
  bottom: 140px;    /* move up / down */

  width: 50px;
  height: 50px;

  background-image: url('../images/frog-spritesheet.png');
  background-repeat: no-repeat;
  background-position: 0 0;

  transform: scale(2.8);
  image-rendering: pixelated;

  z-index: 1;       /* behind canvas */
  pointer-events: none;

  display: none;    
}

#duck {
  position: absolute;

  left: 300px;      
  bottom: 170px;    
  width: 50px;
  height: 50px;

  background-image: url('../images/duck-spritesheet.png');
  background-repeat: no-repeat;
  background-position: 0 0;

  transform: scale(3.5);      
  image-rendering: pixelated;

  z-index: 1;               
  pointer-events: none;

  display: none;            
}

#fox {
  position: absolute;

  left: 1550px;      
  bottom: 185px;    

  width: 50px;
  height: 50px;

  background-image: url('../images/fox-spritesheet.png');
  background-repeat: no-repeat;
  background-position: 0 0;

  transform: scale(4.5);      
  image-rendering: pixelated;

  z-index: 1;               
  pointer-events: none;

  display: none;            
}

#rabbit {
  position: absolute;

  left: 1770px;      
  bottom: 170px;    

  width: 50px;
  height: 50px;

  background-image: url('../images/rabbit-spritesheet.png');
  background-repeat: no-repeat;
  background-position: 0 0;

  transform: scale(3.8);      
  image-rendering: pixelated;

  z-index: 1;              
  pointer-events: none;

  display: none;            
}