/* =========================
   BODY
========================= */
body{
    margin:0;
    padding:0;
    min-height:100vh;
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(
        135deg,
        #4facfe,
        #00f2fe
    );
}
/* =========================
   CONTENEDOR
========================= */
.clima-container{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:90vh;
}
/* =========================
   TARJETA
========================= */
.clima-card{
    border:none;
    border-radius:25px;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    color:white;
    text-align:center;
    padding:20px;
    box-shadow:
    0 0 25px rgba(0,0,0,0.3);
    animation:fade 1s;
}
/* =========================
   ICONO
========================= */
.icono{
    font-size:80px;
    margin-bottom:10px;
}
/* =========================
   TITULO
========================= */
.clima-card h1{
    font-size:40px;
    margin-bottom:20px;
    font-weight:bold;
}
/* =========================
   TEMPERATURA
========================= */
#temp{
    font-size:60px;
    font-weight:bold;
    margin-bottom:10px;
}
/* =========================
   ESTADO
========================= */
#estado{
    font-size:28px;
    margin-bottom:15px;
}
/* =========================
   TEXTO
========================= */
#humedad,
#ciudad{
    font-size:20px;
    margin:10px 0;
}
/* =========================
   BOTON
========================= */
.volver-btn{
    padding:12px 25px;
    border-radius:30px;
    font-weight:bold;
    transition:0.3s;
}
.volver-btn:hover{
    transform:scale(1.05);
}
/* =========================
   NAVBAR
========================= */
.navbar{
    padding:15px;
}
/* =========================
   ANIMACION
========================= */
@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){
    .clima-card{
        margin:20px;
    }
    #temp{
        font-size:45px;
    }
    .clima-card h1{
        font-size:30px;
    }
}