* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #c9dbe9 0%, #fff 100%);
  position: relative; /* Necesario para el posicionamiento de nubes */
}

/* Fondo de nubes */
#clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* Aseguramos que las nubes estén detrás */
}

/* Nubes individuales */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.cloud:before,
.cloud:after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.cloud {
  width: 200px;
  height: 60px;
}

.cloud:before {
  width: 100px;
  height: 80px;
  top: -15px;
  left: 10px;
}

.cloud:after {
  width: 120px;
  height: 120px;
  top: -55px;
  right: 15px;
}

/* Animación de las nubes */
@keyframes moveclouds {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100vw);
  }
}

.x1 {
  animation: moveclouds 15s linear infinite;
  top: 10%;
  left: 25%;
}

.x2 {
  animation: moveclouds 25s linear infinite;
  top: 30%;
  left: 10%;
  transform: scale(0.6);
  opacity: 0.6;
}

.x3 {
  animation: moveclouds 20s linear infinite;
  top: 20%;
  left: 70%;
  transform: scale(0.8);
  opacity: 0.8;
}

.x4 {
  animation: moveclouds 18s linear infinite;
  top: 5%;
  left: 40%;
  transform: scale(0.75);
  opacity: 0.75;
}

.x5 {
  animation: moveclouds 20s linear infinite;
  top: 40%;
  left: 80%;
  transform: scale(0.8);
  opacity: 0.8;
}

.x6 {
  animation: moveclouds 30s linear infinite;
  top: 60%;
  left: 20%;
  transform: scale(0.5);
  opacity: 0.5;
}

.x7 {
  animation: moveclouds 22s linear infinite;
  top: 75%;
  left: 50%;
  transform: scale(0.7);
  opacity: 0.7;
}

.x8 {
  animation: moveclouds 28s linear infinite;
  top: 90%;
  left: 10%;
  transform: scale(0.4);
  opacity: 0.4;
}

/* Contenedor para centrar contenido */
.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  z-index: 2; /* Aseguramos que el contenido esté sobre las nubes */
}

/* Imagen flotante */
.floating-image {
  animation: float 1s infinite ease-in-out;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Botón flotante */
.floating-button {
  display: inline-block;
  width: auto;
  padding: 20px 25px;
  font-size: 20px;
  margin-top: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.floating-button:hover {
  background-color: #3e8e41;
}

/* Ajustes para orientación horizontal */
@media (orientation: landscape) {
  body {
    overflow: hidden;
    height: 100vh;
  }

  #clouds {
    height: 100%; /* Ajustamos el fondo al tamaño de la pantalla */
  }

  .floating-image {
    width: 50vw; /* Reducimos el tamaño para que también se vea el botón */
    max-height: 50vh;
    margin-bottom: -5px; /* Añadimos un margen inferior */
  }

  .center-container {
    padding: 10px;
  }

    .floating-button {
    font-size: 22px; /* Aumentamos el tamaño de la fuente */
    padding: 20px 30px; /* Aumentamos el padding */
    max-height: 30vh; /* Aumentamos la altura máxima */
    background-color: #4CAF50; /* Fondo verde */
    color: white; /* Color de texto */
    border-radius: 50px; /* Bordes redondeados */
    text-align: center; /* Centrar texto */
    display: inline-block; /* Hacer que el enlace funcione como botón */
    text-decoration: none; /* Quitar subrayado del enlace */
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
    position: relative; /* Necesario para que funcione z-index */
  z-index: 9999; /* Asegura que el botón esté en el frente */
  }

  .floating-button:hover {
    background-color: #45a049; /* Fondo verde más oscuro al pasar el mouse */
  }
}

/* Ajustes para orientación vertical */
@media (orientation: portrait) {
  body {
    overflow-y: hidden; /* Desactivamos el scroll */
    padding: 10px; /* Padding adicional */
  }

  #clouds {
    height: 100vh; /* Ajustamos el fondo para evitar scroll */
  }

  .floating-image {
    width: 100vw; /* Ocupa menos ancho */
    max-height: 60vh; /* Reducimos la altura */
    margin-top: -50px; /* Desplazamos la imagen más arriba */
  }

  .floating-button {
    font-size: 32px; /* Aumentamos el tamaño de la fuente */
    padding: 30px 40px; /* Aumentamos el padding */
    max-height: 100vh; /* Aumentamos la altura máxima */
    background-color: #4CAF50; /* Fondo verde */
    color: white; /* Color de texto */
    border-radius: 50px; /* Bordes redondeados */
    text-align: center; /* Centrar texto */
    display: inline-block; /* Hacer que el enlace funcione como botón */
    text-decoration: none; /* Quitar subrayado del enlace */
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
    position: relative; /* Necesario para que funcione z-index */
  z-index: 9999; /* Asegura que el botón esté en el frente */
  }

  .floating-button:hover {
    background-color: #45a049; /* Fondo verde más oscuro al pasar el mouse */
  }
}


@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}