body {
        min-height: 100vh;
        margin: 0;
        background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
        font-family: 'Segoe UI', Arial, sans-serif;
      }
      .main-header {
        width: 100vw;
        background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
        color: #fff;
        text-align: center;
        padding: 2rem 0 1.2rem 0;
        box-shadow: 0 2px 12px rgba(106,17,203,0.08);
        position: relative;
        z-index: 2;
      }
      .main-header h1 {
        margin: 0;
        font-size: 2.5rem;
        letter-spacing: 1px;
      }
      .container {
        display: flex;
        min-height: calc(100vh - 80px);
      }
      .sidebar {
        width: 270px;
        background: rgba(255,255,255,0.97);
        box-shadow: 2px 0 16px rgba(106,17,203,0.07);
        padding: 2rem 1.2rem 2rem 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        min-height: calc(100vh - 80px);
      }
      .sidebar h2 {
        color: #6a11cb;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
      }
      .sidebar form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
        width: 100%;
      }
      #city-input {
        padding: 0.6rem 1rem;
        border: 1px solid #bdbdbd;
        border-radius: 6px;
        font-size: 1rem;
        outline: none;
        transition: border 0.2s;
      }
      #city-input:focus {
        border: 1.5px solid #6a11cb;
      }
      .btn, button {
        padding: 0.6rem 1.2rem;
        background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(106,17,203,0.08);
        transition: background 0.2s, transform 0.1s;
      }
      .btn:hover, button:hover {
        background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
        transform: translateY(-2px) scale(1.03);
      }
      #locations-dropdown {
        margin-top: 0.5rem;
        width: 100%;
        padding: 0.5rem;
        border-radius: 6px;
        border: 1px solid #bdbdbd;
        font-size: 1rem;
      }
      main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 3rem 2rem 2rem 2rem;
      }
      #weather-display {
        background: rgba(255,255,255,0.97);
        border-radius: 18px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        padding: 2rem 2.5rem 2rem 2.5rem;
        min-width: 340px;
        max-width: 95vw;
        margin-top: 1.5rem;
        font-size: 1.1rem;
        color: #333;
      }
      hr {
        border: none;
        border-top: 1px solid #e0c3fc;
        margin: 1.2rem 0 0.7rem 0;
      }
       body {
        min-height: 100vh;
        margin: 0;
        background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
        display: flex;
        flex-direction: column;
        font-family: 'Segoe UI', Arial, sans-serif;
      }
      .main-header {
        width: 100%;
        background: none;
        text-align: center;
        padding: 1.5rem 0;
        margin-bottom: 2.5rem;
      }
      .main-header h1 {
        color: #6a11cb;
        font-size: 2.3rem;
        margin: 0;
        letter-spacing: 1px;
      }
      .container {
        flex: 1;
        display: flex;
        width: 100%;
      }
      .sidebar {
        width: 270px;
        background: rgba(255,255,255,0.97);
        box-shadow: 2px 0 16px rgba(106,17,203,0.07);
        padding: 2rem 1.2rem 2rem 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        min-height: 100vh;
      }
      .sidebar h2 {
        color: #6a11cb;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
      }
      .sidebar form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
        width: 100%;
      }
      #city-input {
        padding: 0.6rem 1rem;
        border: 1px solid #bdbdbd;
        border-radius: 6px;
        font-size: 1rem;
        outline: none;
        transition: border 0.2s;
      }
      #city-input:focus {
        border: 1.5px solid #6a11cb;
      }
      .btn, button {
        padding: 0.6rem 1.2rem;
        background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(106,17,203,0.08);
        transition: background 0.2s, transform 0.1s;
      }
      .btn:hover, button:hover {
        background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
        transform: translateY(-2px) scale(1.03);
      }
      #locations-dropdown {
        margin-top: 0.5rem;
        width: 100%;
        padding: 0.5rem;
        border-radius: 6px;
        border: 1px solid #bdbdbd;
        font-size: 1rem;
      }
      main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 3rem 2rem 2rem 2rem;
      }
      #weather-display {
        background: rgba(255,255,255,0.97);
        border-radius: 18px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        padding: 2rem 2.5rem 2rem 2.5rem;
        min-width: 340px;
        max-width: 95vw;
        margin-top: 1.5rem;
        font-size: 1.1rem;
        color: #333;
      }
      hr {
        border: none;
        border-top: 1px solid #e0c3fc;
        margin: 1.2rem 0 0.7rem 0;
      }