/* Default */
body.default {
  background: linear-gradient(to right, #dfe9f3, #ffffff);
}

/* Sunny */
body.sunny {
  background: linear-gradient(to right, #fceabb, #f8b500);
}

/* Cloudy */
body.cloudy {
  background: linear-gradient(to right, #bdc3c7, #2c3e50);
}

/* Rainy */
body.rainy {
  background: linear-gradient(to right, #4b79a1, #283e51);
}
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}


/* Container */
.container {
  text-align: center;
}

/* Title */
h1 {
  margin-bottom: 20px;
  font-weight: 600;
  color: #333;
}

/* Search Box */
.search-box {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Input */
input {
  padding: 10px;
  width: 180px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Button */
button {
  padding: 10px 15px;
  background: #4facfe;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  
}

button:hover {
  background: #3a8ee6;
}

/* Result Box */
#result {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}
/* SUN ANIMATION */
.sunny::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50%;
  width: 100px;
  height: 100px;
  background: yellow;
  border-radius: 50%;
  box-shadow: 0 0 50px yellow;
  animation: glow 2s infinite alternate;
  transform: translateX(-50%);
}

@keyframes glow {
  from { box-shadow: 0 0 20px yellow; }
  to { box-shadow: 0 0 60px orange; }
}


/* RAIN ANIMATION */
.rainy::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    transparent,
    transparent 10px,
    rgba(255,255,255,0.3) 10px,
    rgba(255,255,255,0.3) 12px
  );
  animation: rain 0.5s linear infinite;
}

@keyframes rain {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}


/* CLOUDY BACKGROUND */
body.cloudy {
  background: linear-gradient(to right, #bdc3c7, #2c3e50);
  overflow: hidden;
  position: relative;
}

/* BIG CLOUDS */
.cloudy::before,
.cloudy::after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
}

/* First cloud */
.cloudy::before {
  width: 200px;
  height: 100px;
  top: 80px;
  left: -250px;
  box-shadow:
    50px 20px 0 white,
    100px 10px 0 white,
    150px 25px 0 white;
  animation: moveClouds 25s linear infinite;
}

/* Second cloud */
.cloudy::after {
  width: 250px;
  height: 120px;
  top: 200px;
  left: -300px;
  box-shadow:
    60px 30px 0 white,
    120px 15px 0 white,
    180px 35px 0 white;
  animation: moveClouds 35s linear infinite;
}

/* Animation */
@keyframes moveClouds {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(120vw);
  }
}