* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Comic Sans MS', sans-serif;
  }
  
  body {
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #09001a;
  }
  
 /* Título */
#titulo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    font: normal 48px/normal "Warnes", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    white-space: pre;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00a759, 0 0 70px #00a759, 0 0 80px #00a759, 0 0 100px #00a759;
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    position: relative;
    z-index: 101;
    bottom: 3em;
  }
 #titulo:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000;
  }

  .star-1{
  position: relative;
  background-color: #FFFDFD;
  top: 50px;
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #FFFDFD,
  -70px 150px 1px 0 #FFFDFD,
  290px 150px 1px -1px #a2bf00,
  -90px 100px 1px -1px #cca90c,
  270px 10px 1px 0.11px #FFFDFD,
  390px 80px 1px -0.6px #ccaf0c,
  -30px 120px 3px -1px #a2bf00;
  animation: pulsate 5s ease;
  animation-iteration-count: infinite;
}

.star-2 {
  position: absolute;
  background-color: #FFFF00;
  top: 100px;
  left: -60px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 5px 1px #FFFF00,
  -90px 30px 1px 0.09px #FFFF00,
  355px 30px 0.5px 1px #FFFF00,
  400px 90px 1px -1px #FFFF00,
  -50px -30px 1px -1px #FFFF00;
  animation: pulsate 7s ease;
  animation-iteration-count: infinite;
}

.star-3 {
  position: absolute;
  background-color: #FFFF00;
  top: -10px;
  left: -110px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 5px 1px #ffff70,
  -90px 30px 1px 0.09px #FFFF00,
  355px 30px 0.5px 1px #ffffb7,
  400px 90px 1px -1px #ffff76,
  -50px -30px 1px -1px #FFFF00;
  animation: pulsate 9s ease;
  animation-iteration-count: infinite;
}

.star-4{
  position: absolute;
  background-color: #FFFDFD;
  top: -110px;
  left: 30px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #FFFDFD,
  -70px 150px 1px 0 #FFFDFD,
  290px 150px 1px -1px #a2bf00,
  -90px 100px 1px -1px #cca90c,
  270px 10px 1px 0.11px #FFFDFD,
  390px 80px 1px -0.6px #ccaf0c,
  -30px 120px 3px -1px #a2bf00;
  animation: pulsate 10s ease;
  animation-iteration-count: infinite;
}

.moon {
  background-color: #fff2ab;
  position: relative;
  left: 40%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-shadow: 5px 0 10px 3px rgba(229, 229, 229, 0.3),
  0 0 10px 2px rgba(229, 229, 229, 0.3),
  5px 0 10px 2px rgba(229, 229, 229, 0.3),
  0 0 3px 2px rgba(229, 229, 229, 0.3);
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.moon::after{
  content: '';
  background-color: rgba(162, 162, 162, 0.81);
  display: block;
  position: absolute;
  left: 160px;
  top: 50px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 2px 0 0 1px rgba(98, 98, 98, 0.51),
  7px 45px 0 -5px rgba(162, 162, 162, 0.9),
  9px 45px 0 -5px rgba(100, 100, 100, 0.51),
  35px 20px 0 -10px rgba(162, 162, 162, 0.9),
  39px 20px 0 -10px rgba(100, 100, 100, 0.51);
}
@keyframes pulsate {
  0% { opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}

#imagen{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
}