@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(145deg, #000000, #02347a);
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
      color: rgb(255, 255, 255);
      min-height: 100vh;
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .fade-in {
      animation: fadeIn 1s ease-in-out forwards;
    }

    .slide-up {
      animation: slideUp 0.6s ease-out forwards;
    }

    .hover-zoom:hover {
      transform: scale(1.05);
      transition: all 0.3s ease-in-out;
    }

    .bounce-icon {
      animation: bounce 2s infinite;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      0% {
        transform: translateY(20px);
        opacity: 0;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    #hourlyForecastContainer {
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: 0.5rem;
    }

    #hourlyForecastContainer::-webkit-scrollbar {
      height: 8px;
    }

    #hourlyForecastContainer::-webkit-scrollbar-thumb {
      background-color: #ffffff;
      border-radius: 10px;
    }

    /* Weather cards shared styles */
    .weather-card {
      border: 2px solid transparent;
      border-radius: 16px;
      padding: 1rem;
      background: linear-gradient(145deg, #dddddd, #0f1645);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s;
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25);
    }

    .weather-card:hover {
      border-color: #ffffff;
      transform: scale(1.03);
      box-shadow: 0 10px 25px rgba(222, 222, 222, 0.885);
    }

    /* Hourly card */
    .hourly-card {
      width: 150px;
      height: 270px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      background: linear-gradient(#06142b, #0a1536);
      color: white;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    /* Nearby city card */
    .nearby-city-card {
      width: 100%;
      height: 200px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(#fbf8f8, #000000);
      color: white;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .nearby-city-card img {
      width: 100px;
      height: 100px;
      margin-bottom: 0.5rem;
      animation: bounce 2.5s infinite;
    }

    input::placeholder {
      color: #ffffff;
      opacity: 0.8;
    }

    button {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
    }