styles.css

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url('fondo.png');
  background-size: cover;
}

.menu-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#titulo {
  font-size: 24px;
  font-family: "Calibri", Arial, sans-serif;
  text-align: center;
  color: #ff1d44;
}




#start-button {
  font-size: 24px;
  padding: 10px 20px;
  background-color: #74bf9d;
  color: white;
  border: none;
  cursor: pointer;
}

#start-menu {
  background-image: url('https://www.ttamayo.com/wp-content/uploads/2021/11/https-wwwmuseothyssenorg-sites-default-files-styles-full-resolution-public-imagen-obras-descarga-ctb1999112-nubes-septiembrex800.jpg');
  background-size: cover; 
  background-repeat: no-repeat; 
}

#game-container {
  background-image: url('fondo.png'); 
  background-size: cover;
  background-repeat: no-repeat;
}

.score-container {
  font-size: 33px;
  font-weight: bold;
  color: lightcoral;
}

#lives {
  font-family: Arial, sans-serif;
  font-size: 33px;
  color: greenyellow;
}

#heart-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.heart {
  position: absolute;
  top: -50px;
  left: 0;
  width: 50px;
  height: 50px;
  background-image: url('heart.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.zaiby {
  position: absolute;
  width: 300px;
  height: 370px;
  background-size: cover;
}

#Zaira {
  background-image: url('zaira.png');
  left: 10%;
}

#Gaby {
  background-image: url('gaby.png');
  right: 10%;
}

#piso {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-color: green;
}