*,
*::after,
*::before {
    box-sizing: border-box;
}

:root{
    --spacing-medium:8px;
    --spacing-regular:16px;
    --spacing-extra:32px;

    --font-small:.5rem;
    --font-regular:1rem;
    --font-large:2rem;
    --font-xl:4rem;

    --font-semibold:600;

    --font-light:white;
    --font-dark:black;

}

h1,h2{
    margin: 0;
}

p{
    margin: var(--spacing-medium);
}

body{
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    margin: var(--spacing-regular);
    background-image: url('https://assets.msn.com/weathermapdata/1/static/background/v2.0/compactads3/Hazy%20Night.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--font-dark);
}


/* mobile first approach */
.container{
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    'search search search search'
    'current current current current'
    'hourly hourly hourly hourly'
    'fiveday fiveday fiveday fiveday'
    'feelslike feelslike humidity humidity';
    gap: var(--spacing-regular);
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: contrast(.4);
}

button:hover{
    cursor: pointer;
}

.container, .container > article{
    border: 1px solid black;
    border-radius: var(--spacing-regular);
    padding: var(--spacing-regular);

}

.container #search{
    grid-area: search;
    border-radius: var(--spacing-regular);
    font-size: var(--font-large);
    padding: var(--spacing-medium);
}




/* styles related to current weather data */

#current-forecast{
    grid-area: current;
    text-align: center;
}

#current-forecast .temp{
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
}

#current-forecast .description{
    text-transform: capitalize;
}

#current-forecast .min-max-temp, #current-forecast .description{
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
}


/* styles related to hourly forecast */

#hourly-forecast{
    grid-area: hourly;
    text-align: center;

}

#hourly-forecast .hourly-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(100px, 1fr);
    overflow-x: scroll;
    gap: var(--spacing-medium);

}


#hourly-forecast .hourly-container .icon{
    height: 100px;
    width: 100px;
    object-fit: contain;
    

}
#hourly-forecast .hourly-container .hourly-temp{
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);

}

#five-day-forecast{
    grid-area: fiveday;
    text-align: center;
}

.five-day-forecast .five-day-forecast-container{
    display: grid;
    grid-auto-flow: row;
}

.five-day-forecast-container .day-wise-forecast{
    display: grid;
    grid-template: auto / repeat(4, 1fr);
    gap: var(--spacing-medium);
    place-items: center;
}

.five-day-forecast-container .day-wise-forecast .min-temp, .five-day-forecast-container .day-wise-forecast .max-temp{
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
}

.five-day-forecast-container .day-wise-forecast .min-temp{
    opacity: 50%;
}

.five-day-forecast-container .day-wise-forecast .max-temp{
    justify-self: end;
}

.five-day-forecast-container .day-wise-forecast .icon{
    width: 50px;
    height: 50px;
}

.five-day-forecast-container .day-wise-forecast .day{
    justify-self: start;
}

#feels-like{
    grid-area: feelslike;
    text-align: center;
}
#humidity{
    grid-area: humidity;
    text-align: center;
}


@media (width >= 650px) {
    .container{
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: 
        'search search search search'
        'current current current current'
        'hourly hourly fiveday fiveday'
        'feelslike humidity fiveday fiveday'
        ;
    }


}