.sky {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 150px;
    /*Alturadelespaciodondevuelaelavioncito*/background-color: transparent;
    /*Fondotransparente*/overflow: hidden;
    /*Evitaqueelaviónsesalgadelcontenedor*/margin-bottom: 20px;
    z-index: 98;
    transform: scale(0.5) translateY(10px) !important;
    align-items: center;
    -webkit-transform: scale(0.5) translateY(10px) !important;
    -moz-transform: scale(0.5) translateY(10px) !important;
    -ms-transform: scale(0.5) translateY(10px) !important;
    -o-transform: scale(0.5) translateY(10px) !important;
}

  
  .plane {
    position: fixed;
    height: 120%;
    top: 0px; /* Ajusta para posicionar el avión */
    left: -10%; /* Empieza ligeramente fuera del margen izquierdo */
    width: auto; /* Mantiene las proporciones de la imagen */
    animation: fly-across 18s linear infinite; /* Animación */
    transform: translateY(30px);
  }

  .cloud{
    position: fixed;
    height: 50%;
    top: 0px; /* Ajusta para posicionar el avión */
    left: -10%; /* Empieza ligeramente fuera del margen izquierdo */
    width: auto; /* Mantiene las proporciones de la imagen */
    animation: cloudmove 25s linear infinite, darken 27s ease-in-out; /* Animación */
  }

  .cloud2 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 22.5s linear infinite, darken 27s ease-in-out;
}

.cloud3 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 21s linear infinite, darken 27s ease-in-out;
}

.cloud4 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 17.5s linear infinite, darken 27s ease-in-out;
}

.cloud5 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 17s linear infinite, darken 27s ease-in-out;
}

.cloud6 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 17.3s linear infinite, darken 27s ease-in-out;
}

.cloud7 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 26s linear infinite, darken 27s ease-in-out;
}

.cloud8 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 19s linear infinite, darken 27s ease-in-out;
}

.cloud9 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 18s linear infinite, darken 27s ease-in-out;
}

.cloud10 {
    position: fixed;
    height: 50%;
    top: 0px;
    left: -10%;
    width: auto;
    animation: cloudmove 21s linear infinite, darken 27s ease-in-out;
}

.rain {
  position: fixed;
  height: 50%;
  top: 0px; /* Ajusta para posicionar la lluvia */
  left: -10%; /* Empieza ligeramente fuera del margen izquierdo */
  width: auto; /* Mantiene las proporciones de la imagen */
  animation: rainmove 25s linear infinite, fadeInOut 27s ease-in-out; /* Animación */
}

.rain2 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 22.5s linear infinite, fadeInOut 27s ease-in-out;
}

.rain3 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 21s linear infinite, fadeInOut 27s ease-in-out;
}

.rain4 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 17.5s linear infinite, fadeInOut 27s ease-in-out;
}

.rain5 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 17s linear infinite, fadeInOut 27s ease-in-out;
}

.rain6 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 17.3s linear infinite, fadeInOut 27s ease-in-out;
}

.rain7 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 26s linear infinite, fadeInOut 27s ease-in-out;
}

.rain8 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 19s linear infinite, fadeInOut 27s ease-in-out;
}

.rain9 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 18s linear infinite, fadeInOut 27s ease-in-out;
}

.rain10 {
  position: fixed;
  height: 50%;
  top: 0px;
  left: -10%;
  width: auto;
  animation: rainmove 21s linear infinite, fadeInOut 27s ease-in-out;
}



@media (max-width: 1920px) {
    .sky{
      transform: scale(1) translateY(-96px);
    }
    
    .plane{
      transform: scale(0.2) translateY(-70px);
      z-index: 80;
    }
    .snow{
      transform: rotate(18deg) translateX(100px) translateY(10px) scale(0.3);
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      z-index: 79;
    }
    .cloud, .cloud2, .cloud3, .cloud4, .cloud5, .cloud6, .cloud7, .cloud8, .cloud9, .cloud10{
      transform: translateY(80px);
      z-index: 40;
    }
    .rain, .rain2, .rain3, .rain4, .rain5, .rain6, .rain7, .rain8, .rain9, .rain10 {
      transform: translateY(120px) scale(0.85);
      z-index: 39;
    }
}  

@media (max-width: 1180px) {
  
  
}


  @keyframes fly-across {
    0% {
      left: -400px; /* Inicio fuera del margen izquierdo */
    }
    100% {
      left: 100%; /* Termina justo fuera del margen derecho */
    }
  }

  @keyframes cloudmove {
    0% {
      left: -400px; /* Inicio fuera del margen izquierdo */
    }
    100% {
      left: 100%; /* Termina justo fuera del margen derecho */
    }
  }

  @keyframes rainmove {
    0% {
      left: -400px; /* Inicio fuera del margen izquierdo */
    }
    100% {
      left: 100%; /* Termina justo fuera del margen derecho */
    }
  }

  @keyframes darken {
    0% {
      filter: brightness(100%);
    }
    40% {
      filter: brightness(100%);
    }
    60% {
      filter: brightness(50%);
    }
    100% {
      filter: brightness(100%);
    }
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }