@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}

body{
  height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;
  color:var(--text,#fff);
  transition:background 0.5s ease,color 0.3s ease;
  background:linear-gradient(135deg,#74b9ff,#a29bfe);
}

.dark{
  background:linear-gradient(135deg,#1e293b,#0f172a);
  color:#e2e8f0;
}

.container{
  position:relative;z-index:10;
  width:320px;padding:25px;border-radius:18px;
  background:rgba(0,0,0,0.4);backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
  text-align:center;
}

.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.toggle-btn{
  background:rgba(255,255,255,0.1);
  border:none;border-radius:8px;
  padding:8px 10px;color:inherit;cursor:pointer;
}
.search-box{display:flex;margin-bottom:20px}
.search-box input{
  flex:1;padding:10px;border:none;outline:none;
  border-radius:10px 0 0 10px;
}
.search-box button{
  border:none;background:#4f46e5;color:#fff;padding:10px 15px;
  border-radius:0 10px 10px 0;cursor:pointer;
}
.weather-info img{width:70px;margin:10px auto}
.hidden{display:none}
footer{margin-top:10px;font-size:0.9rem;opacity:0.8}

/* background for different weathers */
#background{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;
  background:linear-gradient(135deg,#74b9ff,#a29bfe);
  transition:background 0.7s ease;
}

/* avatar */
#avatar{
  position:fixed;top:20px;right:20px;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.15);
  padding:10px 14px;border-radius:20px;
  backdrop-filter:blur(6px);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  animation:float 4s ease-in-out infinite;
  z-index:20;
}
#avatar img{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,0.6)}
#avatarText{font-weight:500;max-width:120px}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}