body{
  margin:0;
  font-family:Arial;
  color:white;
  background: linear-gradient(45deg, #ff4e50, #1fddff);
}

/* 🌈 BACKGROUND DINAMICO */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(45deg, #ff4e50, #1fddff, #4facfe, #00f2fe);
  background-size: 400% 400%;
  animation: moveBg 8s ease infinite;
}

@keyframes moveBg{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* TOP */
.topbar{
  display:flex;
  justify-content:space-between;
  padding:25px 40px;
  font-size:20px;
  opacity:0.8;
}

/* CENTRO */
.hero{
  height:55vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.temp-block{
  text-align:center;
}

#temp{
  font-size:160px;
  font-weight:200;
  letter-spacing:-5px;
}

#desc{
  font-size:28px;
  opacity:0.8;
  margin-top:-10px;
}

#extra{
  margin-top:10px;
  opacity:0.6;
}

/* FORECAST */
.forecast{
  display:flex;
  justify-content:center;
  gap:20px;
  padding:20px;
}

.card{
  background:rgba(255,255,255,0.08);
  padding:15px 20px;
  border-radius:18px;
  text-align:center;
  min-width:110px;
  backdrop-filter: blur(10px);
}