:root {
    --primary-text: #ffffff;
    --secondary-text: #313131;
    --background: #000000;
    --content-background: #ffffff;
    --outline-color: #323232;
    --weather-container-background: rgba(0, 0, 0, 0.29);
    --forecast-background: rgba(0, 0, 0, 0.22);
    --shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    --border: 1px solid rgba(255, 255, 255, 0.20);
    --hovercolor: #5392da;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    margin: 0;
    background: var(--background);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.background-image-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* background-* here don't affect <img> */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.weather-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 350px;
    min-height: 650px;
    padding: 1.3rem;
    border-radius: 15px;
    background: var(--weather-container-background);
    border: var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(7px);
    color: var(--primary-text);
    overflow: hidden;
}

.current-weather,
.bottom-details,
.forecast-container,
.searchContainer,
.footer {
    width: 100%;
}

.current-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#welcome-text,
#city-name,
#photographer,
#temperature,
#feelsLike,
#weatherIcon,
#weatherDescription {
    font-family: 'Montserrat', sans-serif;
}

#welcome-text {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: var(--outline-color);
}

#city-name {
    font-size: 2.7rem;
    margin-top: -1rem;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: var(--outline-color);
}

#photo-credit {
    font-size: 1rem;
    color: var(--primary-text);
    cursor: pointer;
    margin-top: -1.4rem;
}

#photo-credit:hover {
    color: var(--hovercolor);
}

#credits {
    font-size: 0.7rem;
    color: var(--primary-text);
    cursor: pointer;
}

#credits:hover {
    color: var(--hovercolor);
}

#temperature {
    font-size: 6rem;
    margin: 0.5rem 0 -1.5rem 0;
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: var(--outline-color);
}

#feelsLike {
    font-size: 1.5rem;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: var(--outline-color);
}

#mainWeatherIcon {
    min-height: 150px;
    margin: -2.3rem 0;
}

#weatherDescription {
    font-size: 1.5rem;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: var(--outline-color);
}

/* Override width for specific containers */
.weather-container .bottom-details,
.weather-container .forecast-container,
.weather-container .searchContainer {
    width: 95%;
    margin: 0.3rem;
}

.bottom-details {
    display: flex;
    justify-content: space-between;
}

.bottom-details p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.2rem 0 0.2rem 0;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: black;
}

.column-details-left,
.column-details-right {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.forecast-container {
    display: flex;
    width: 95%;
    justify-content: space-between;
    border-radius: 15px;
    background-color: var(--forecast-background);
    padding: 0.2rem;
}

.forecast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1rem;
    margin: 0.5rem 0.48rem 0.5rem 0.48rem;
    color: var(--primary-text);
}

.forecast-icon {
    height: 3rem;
}

.searchContainer {
    display: flex;
    justify-content: center;
    gap: 10%;
}

.searchContainer input {
    flex: 1;
    font-size: 1rem;
    background-color: var(--content-background);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 0.3rem;
}

.searchContainer button {
    flex: 0 0 25%;
    font-size: 1rem;
    color: var(--primary-text);
    border-radius: 10px;
    border: none;
    box-shadow: var(--shadow);
    background-image: linear-gradient(to right, #7ddae3 0%, #749ce7 51%, #53da83 100%);
    padding: 0.3rem;
    cursor: pointer;
    transition: background-position 0.5s;
    background-size: 200% auto;
}

.searchContainer button:hover {
    background-position: right center;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

#image-condition {
    text-decoration: none;
    font-size: 1rem;
}

#image-condition:hover {
    color: var(--hovercolor);
}

.footer p {
    font-size: 0.8rem;
    color: var(--secondary-text);
    margin: 0;
}

@media (max-width: 500px) {
    .weather-container {
        width: 90%;
        max-width: 280px;
        min-height: 580px;
        padding: 0.8rem;
    }

    .weather-container .bottom-details,
    .weather-container .forecast-container,
    .weather-container .searchContainer {
        width: 92%;
        margin: 0.5rem auto;
    }

    #welcome-text {
        font-size: clamp(1.6rem, 5vh, 2.2rem);
    }

    #city-name {
        font-size: clamp(1.5rem, 3.5vh, 2rem);
    }

    #temperature {
        font-size: clamp(2.8rem, 8vh, 4.5rem);
    }

    #feelsLike {
        font-size: clamp(1rem, 2vh, 1.5rem);
    }

    #weatherDescription {
        font-size: clamp(0.8rem, 1.8vh, 1.2rem);
    }

    .bottom-details p {
        font-size: 0.75rem;
    }

    .forecast-container {
        padding: 0.3rem;
    }

    .forecast-item {
        font-size: 0.7rem;
    }

    .forecast-icon {
        height: 2.5rem;
    }

    .searchContainer input,
    .searchContainer button {
        font-size: 0.9rem;
        padding: 0.25rem;
    }

    #image-condition {
        font-size: 0.9rem;
    }

    .footer p {
        font-size: 0.7rem;
    }
}