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

:root {
    --spacing-regular: 16px;
    --spacing-medium: 8px; 
    
    --font-small: 0.5rem;
    --font-regular: 1rem;
    --font-large: 2rem;
    --font-xl: 4rem;

    --font-semibold: 600;
}

/* p {
    margin: 0;
} */

p {
    margin: var(--spacing-medium);
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    /* width: 400px; */
    max-width: 800px;
    /* margin: var(--spacing-regular); */
    margin: auto;
    /* justify-self: center; */
    background: rgb(210, 237, 240);
}

/* mobile first approach */
#search {
    /* width: 100%; */
    grid-area: search;
    border-radius: 5px;
    border:transparent;
    background-color: rgb(255, 228, 178);
    padding: 5px;
    font-size: var(--font-regular);
    opacity: 50%;
    padding:5px;
}

#search:focus {
    border-color: orange;
}
.container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-areas: 
    "search search"
    "current current"   
    "hourly hourly"
    "fiveday fiveday"
    "feelslike humidity";    
    gap: var(--spacing-regular);
    /* background-image: url("sky.jpg"); */
    /* background: #39a0ca; */
    /* box-shadow: 0 0 10px; */
    margin: 40px;
}

.container {
border-radius: 10px;
background: white;
}

.container, .container>article {
    /* border: 1px solid;  */
    /* box-shadow: 0 0 5px; */
    /* border-radius: var(--spacing-regular); */
    /* border-radius: 5px; */
    padding: var(--spacing-regular);
    text-align: center;
}

/* styles related to current weather data */

#current-forecast {
    grid-area: current;
}

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

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

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

/* styles related to hourly forecast */


#hourly-forecast {
    grid-area: hourly;
}

.hourly-container {
    display: grid;
    grid-template-columns: repeat(autofill,minmax(100px,1fr)); 
    grid-auto-flow: column;
    grid-auto-columns: minmax(100px, 1fr);
    /* grid-auto-columns: 50%; */
    overflow-x: auto;
    /* gap: calc(var(--spacing-regular)*2); */
    gap: var(--spacing-medium);
}

/* #hourly-forecast .hourly-container .time{

} */

#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;
}

#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-regular);
    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: 70%;
}

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

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

.five-day-forecast-container .day-wise-forecast .max-temp {
    justify-self: end;
}
#feels-like {
    grid-area: feelslike;
}

#humidity {
    grid-area: humidity;
}


@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";  
        /* background-image: url("sky.jpg"); */
    /* background: skyblue; */

        /* box-shadow: 0 0 10px;   */
    }
}

.day, .time {
    color: gray;
}

p {
color: rgb(60, 60, 60);
}

.city {
    font-size: xx-large;
    color: black;
}

.min-temp, .max-temp, .hourly-temp, .feels-like-temp {
    color:  rgba(255, 128, 0, 0.702);
}
/* Notice shown while asking for location, and when that is refused or fails.
   The page is otherwise blank until a location is known, which left visitors
   with no idea what to do. */
.geo-notice {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    border-left: 4px solid #2563eb;
}

.geo-notice--warn {
    border-left-color: #d97706;
}

.geo-notice strong {
    font-weight: 700;
}