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

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

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

    --font-semibold: 600;
}

body {
    /* margin: 0; */
    font-family: Arial, Helvetica, sans-serif;
    max-width: 800px;
    margin: var(--spacing-regular) auto;
    background-color: azure;
}

h1,
h2 {
    margin: 0;
}

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

/* mobile first approach */

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "search search"
        "current current"
        "hour hour"
        "five five"
        "feels humidity"
    ;
    gap: var(--spacing-regular);
}

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

#search {
    grid-area: search;
    font-size: var(--font-large);
    padding: var(--spacing-regular);
    border-radius: var(--spacing-regular);
    background-color: antiquewhite;
}

/* styles related to current weather data */

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

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

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

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

/* styles related to hourly weather data */

#hourly-forecast {
    grid-area: hour;
    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: auto;
    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);
}

/* styles related to fiveday weather data */

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

#fiveday-forecast .fiveday-forecast-container {
    display: grid;
    grid-auto-flow: row;
}

.fiveday-forecast-container .daywise-forecast {
    display: grid;
    grid-template: auto/repeat(4, 1fr);
    gap: var(--spacing-regular);
    place-items: center;
}

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

.fiveday-forecast-container .daywise-forecast .min-temp {
    opacity: 60%;
}

.fiveday-forecast-container .daywise-forecast .max-temp {
    justify-self: end;
}

.fiveday-forecast-container .daywise-forecast .icon {
    width: 75px;
    height: 75px;
}

.fiveday-forecast-container .daywise-forecast .day {
    text-transform: capitalize;
    justify-self: start;
}

#feels-like {
    grid-area: feels;
    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"
            "hour hour five five"
            "feels humidity five five"
        ;
    }
}