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

body{
    padding: 0%;
    margin: 0%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root{
    --spacing-regular: 16px;
    --spacing-medium: 8px;
}

h1,h3, h4, p{
    margin: var(--spacing-medium) 0;
}

.container{
    max-width: 800px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "search search"
    "current current"
    "hourly hourly"
    "five-day five-day"
    "wind-speed humidity" ;
    padding: var(--spacing-regular);
    gap: var(--spacing-regular);
}

.container > input{
    grid-area: search;
    height: 2.5rem;
    border-radius: var(--spacing-regular);
    padding: 0 0.5rem;
    background-color: rgb(221, 220, 220);
    font-size: 1.5rem;
    border: none;
}

.container, .container > section{
    border-radius: var(--spacing-regular);
    text-align: center;
}

#todays_weather{
    grid-area: current;
    background-color: rgb(221, 220, 220);
}

.temp{
    font-size: 3.2rem;
    font-weight: 600;
}

.img_desc{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.img_desc > img{   
    width: 25px;
}

.img_desc > .desc{
    font-weight: 550;
    text-transform: capitalize;
    color: #48484A;
}

.high_low{
    font-weight: 500;
    margin: 5px 10px;
    opacity: 95%;
}

#hourly_forecast{
    grid-area: hourly;
    text-align: center;
    background-color: rgb(221, 220, 220);
}

.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: auto;
    grid-gap: var(--spacing-regular);
    margin: 0 5px; 
}

.hourly_container > article > .desc{
    font-size: 10px;
    text-transform: capitalize;
}

.hourly_container > article > img{
    width: 75%;
}

.hourly_container > article > p{
    font-weight: 500;
}

#five_day_forecast{
    grid-area: five-day;
    background-color: rgb(221, 220, 220);
}

.five-day-forecast-container{
    display: grid;
    grid-template-rows:repeat(auto-fill, minmax(fit-content, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(fit-content, 1fr);
    overflow-y: auto;
}

.five-day-forecast-container > article{
    display: grid;
    grid-template-columns: repeat(3, minmax(91px, 1fr));
    align-items: center;    
}

.five-day-forecast-container > article > h4{
    justify-self: start;
    text-transform: capitalize;
    padding-left: 10%;
}

.five-day-forecast-container > article > img{
    width: 60px;
    justify-self: center;
}

#wind_speed{
    grid-area: wind-speed;
    background-color: rgb(221, 220, 220);
}

#humidity{
    grid-area: humidity;
    background-color: rgb(221, 220, 220);
}

.humidity-data, .speed{
    font-weight: 500;
}

@media screen and (min-width: 768px) {
    .container{
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: 
        "search search search search"
        "current current current current"
        "hourly hourly five-day five-day"
        "wind-speed humidity five-day five-day";
        margin-top: 1rem;
    }

    #todays_weather{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    #todays_weather > h1{
        font-size: 2rem;
    }

    .img_desc > img{
        width: 85%;
    }
}