/* Estilo general para el body */
html{
  height: 100vh; 
  width: 100vw; 
  
}

 body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  padding-right: 12%;
  background-image: url('gif/sol.gif');
  background-size: cover; 
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-position: center; 
    height: 100vh; 
    width: 100vw; 
  
}

/* Fondo para clima despejado */
body.clear-background {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  padding-right: 12%;
  background-image: url('img/sol.gif');
  background-size: cover; 
  background-repeat: no-repeat; 
  background-attachment: fixed;
  background-position: center;
  transition: background-image 1s ease;
}



.weather-icon {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
}



/* Contenedor de la galería */
.image-slider {
  position: relative;
  width: 500px; 
  height: 300px; 
  overflow: hidden;
}



/* Formulario */
form {
  max-width: 380px; 
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
}


label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

input, textarea {
  width: 65%;
  padding: 0.8rem;
  border-radius: 8px;
  border: 2px solid #ddd;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #ffb84d;
}



input,
textarea {
  width: 65%;
  padding: 0.8rem;
  border-radius: 8px;
  border: 2px solid #ddd;
  font-size: 1rem;
  transition: background 0.3s ease;
}


/* Estilo para el botón */
button {
  display: center;
  margin-top: 20px;
  font-weight: bold;
  padding: 0.5rem;
  margin-left: 10px;
  background: linear-gradient(to right, #ffec5ff8, #ffb84d);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
 
  transform: scale(1.2);
}


/* Clases para cambiar el color de fondo de input y textarea según el clima */
.input-sol,
.textarea-sol {
  background: linear-gradient(to right, #ffec5ff8, #ffb84d); 
}

.input-nubes,
.textarea-nubes {
  background: linear-gradient(to right, #3db4f8f8, #163ca7); 
}

.input-lluvia,
.textarea-lluvia {
  background: linear-gradient(to right, #eaf1f1f8, #989a9c); 
}

.input-nieve,
.textarea-nieve {
  background: linear-gradient(to right, #069494f8, #90caf9); 
}

.input-viento,
.textarea-viento {
  background: linear-gradient(to right, #55544994, #26b2be81); 
}

/* Clases para cambiar el color de fondo del botón según el clima */
.btn-sol {
  background: linear-gradient(to right, #ffec5ff8, #ffb84d); 
}

.btn-nubes {
  background: linear-gradient(to right, #3db4f8f8, #163ca7); 
}

.btn-lluvia {
  background: linear-gradient(to right, #eaf1f1f8, #989a9c); 
}

.btn-nieve {
  background: linear-gradient(to right, #069494f8, #90caf9); 
}

.btn-viento {
  background: linear-gradient(to right, #55544994, #26b2be81); 
}

#btn-borrar {
  background: linear-gradient(to bottom, red, rgb(255, 255, 255));
  margin-right: 7%;
 
}




/* Clases para cambiar el color de fondo del botón según el clima */
.card.card-sol {
  background: linear-gradient(to bottom, white 50%, #ffffff 0%, #dbe9189d 100%);
}

.card.card-nubes {
  background: linear-gradient(to bottom, white 50%, #ffffff 0%, #4d77ff9d 100%);
}

.card.card-lluvia {
  background: linear-gradient(to bottom, white 50%, #ffffff 0%, #58616463 100%);
}

.card.card-nieve {
  background: linear-gradient(to bottom, white 50%, #ffffff 0%, #18f5f59d 100%);
}

.card.card-viento {
  background: linear-gradient(to bottom, white 50%, #ffffff 0%, #5d606b9d 100%);
}


/* Clases para cambiar el color del volumen */
.btn-sonido-sol {
  background: linear-gradient(to right, #ffec5ff8, #ffb84d); 
}

.btn-sonido-nubes {
  background: linear-gradient(to right, #3db4f8f8, #163ca7); 
}

.btn-sonido-lluvia {
  background: linear-gradient(to right, #eaf1f1f8, #989a9c); 
}

.btn-sonido-nieve {
  background: linear-gradient(to right, #069494f8, #90caf9); 
}

.btn-sonido-viento {
  background: linear-gradient(to right, #55544994, #26b2be81); 
}



/* Estilo para la tarjeta */
.card {
  width: 400px;
  height: 400px; 
  position: relative;
  padding: 25px;
  background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%), #FFFFFF;
  box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 23px;
  transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
  margin-top: 30px;
  margin-left: 10%;
  margin-right: 20%;
}

.card:hover {
  transform: scale(1.05);
}

/* Ajuste del encabezado y la temperatura */
.card-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-header span:first-child {
  word-break: break-all;
  font-weight: 800;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.66);
}

.card-header span:last-child {
  font-weight: 700;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.33);
}

.temp {
  position: absolute;
  left: 25px;
  bottom: 12px;
  font-weight: 700;
  font-size: 44px;
  line-height: 77px;
  color: rgba(87, 77, 51, 1);
}

.temp-scale {
  width: 80px;
  height: 36px;
  position: absolute;
  right: 25px;
  top: 92%;
  bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 9px;
}

.temp-scale span {
  font-weight: 700;
  
  font-size: 13px;
  line-height: 134.49%;
  color: rgba(87, 77, 51, 0.66);
}


/* Responsividad */
@media (max-width: 600px) {
  form {
      padding: 15px;
  }

  .container {
      margin-bottom: 12px;
  }
}

/* Hacer la tarjeta responsiva */
@media (max-width: 768px) {
  .card {
      width: 90%; /* Se adapta al ancho de la pantalla */
      height: 69%; /* Ajusta la altura automáticamente */

     
  }
}

@media (max-width: 480px) {
  .card {
      width: 95%; /* Aumenta el ancho en pantallas muy pequeñas */
      margin-left: 2.5%; /* Ajuste de márgenes */
      margin-right: 2.5%; /* Ajuste de márgenes */
  }
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-header span:first-child {
  word-break: break-all;
  font-weight: 800;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.66);
}

.card-header span:last-child {
  font-weight: 700;
  font-size: 15px;
  line-height: 135%;
  color: rgba(87, 77, 51, 0.33);
}


/* Botón de volumen */
#btn-volumen {
  width: 60px; 
  height: 60px;
   flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  border: none;
  background: transparent; 
}

/* Imagen del sonido */
#btn-sonido {
  width: 45px;  
  height: 40px; 
  margin-top: 10px;
}