.titulo{
  top: 5%;
  right: 38%;
  color: #ffffff;
  position: absolute;
  z-index: 10;
  
}
.fondo{
  width: 100vmin;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #444444;
}
.fondo *{
  position: absolute;
  box-sizing: border-box;
}
.luna {
  width: 50%;
  height: 50%;
  background: 
    radial-gradient(280% 320% at -5% -25%, #c4c4c4 40%, #0000 21%),#d2d2d2;
  border-radius: 50%;
  top: 50%;
  left: 25%;
  transform: translatey(-50%);
}
.crater{
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background: #a2a2a2;
  top: 60%;
  left: 30%;
  filter: drop-shadow(-0.2vmin 0vmin #5b5b5b);
}
.crater + .crater{
  left: 60%;
  top: 20%;
  width:15%;
  height: 15%;
  filter: drop-shadow(-0.2vmin 0vmin #5b5b5b);
}
.crater2{
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background: #a2a2a2;
  top: 60%;
  left: 70%;
  filter: drop-shadow(.5vmin 0.5vmin #c4c4c4);
}
.crater2 + .crater2{
  left: 50%;
  top: 85%;
  width: 5%;
  height: 5%;
}
.crater3{
  width: 5%;
  height: 5%;
  border-radius: 50%;
  background: #a2a2a2;
  top: 40%;
  left: 20%;
  filter: drop-shadow(-0.2vmin 0vmin #5b5b5b);
}
.crater3 + .crater3{
  top: 30%;
  left: 40%;
}
.crater4{
  width: 5%;
  height: 5%;
  border-radius: 50%;
  background: #a2a2a2;
  top: 20%;
  left: 30%;
  filter: drop-shadow(-0.2vmin 0vmin #5b5b5b);
}
.crater4 + .crater4{
  top: 50%;
  left: 50%;
}
.fantasma{
  width: 9%;
  height: 20%;
  top: 40%;
  left: 10%;
  background: #ffffff;
  border-radius: 45% 45% 0 0
}
.ojo{
  width: 10%;
  height: 6%;
  border-radius: 30%;
  background: #000;
  top: 20%;
  left: 30%;
}
.ojo + .ojo{
  left: 50%;
  width: 11%
}
.boca{
  width: 20%;
  height: 10%;
  border-radius: 50%;
  background: #000;
  top: 30%;
  left: 35%;
}
.fantasma + .fantasma{
  left: 80%;
  transform: rotate(180deg);
}