*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:-apple-system,BlinkMacSystemFont,sans-serif;

background:linear-gradient(180deg,#2d6cdf,#0f172a);

color:white;

min-height:100vh;

}

#loading{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:20px;

}

.spinner{

width:45px;
height:45px;

border-radius:50%;

border:4px solid rgba(255,255,255,.2);

border-top:4px solid white;

animation:gira 1s linear infinite;

}

@keyframes gira{

to{

transform:rotate(360deg);

}

}

#app{

display:none;

padding:25px;

max-width:700px;

margin:auto;

}

.hero{

text-align:center;

padding:35px 10px;

}

#ciudad{

font-size:26px;

font-weight:600;

}

#temperatura{

font-size:95px;

font-weight:200;

}

#descripcion{

opacity:.8;

font-size:20px;

margin-top:10px;

}

#mensajeLluvia{

margin-top:20px;

font-size:17px;

font-weight:600;

}

.info{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin:25px 0;

}

.item{

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

padding:18px;

border-radius:18px;

text-align:center;

}

.card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:25px;

padding:20px;

margin-bottom:20px;

}

#horas{

display:flex;

overflow-x:auto;

gap:12px;

padding-top:15px;

}

.hora{

min-width:80px;

text-align:center;

background:rgba(255,255,255,.08);

padding:15px;

border-radius:18px;

}

#dias{

display:flex;

flex-direction:column;

gap:12px;

margin-top:15px;

}

.dia{

display:flex;

justify-content:space-between;

padding:15px;

border-radius:15px;

background:rgba(255,255,255,.06);

}

body.clear{

background:
linear-gradient(
180deg,
#3b82f6,
#1e3a8a
);

transition:.8s;

}

body.cloud{

background:
linear-gradient(
180deg,
#64748b,
#1e293b
);

transition:.8s;

}

body.rain{

background:
linear-gradient(
180deg,
#334155,
#020617
);

transition:.8s;

}

body.storm{

background:
linear-gradient(
180deg,
#111827,
#000
);

transition:.8s;

}

body.snow{

background:
linear-gradient(
180deg,
#dbeafe,
#94a3b8
);

transition:.8s;

}