*{
    box-sizing: border-box;
    font-family: sans-serif;
}


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

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

    --font-semibold: 600;
    --font-light: 450;
    --font-lightest: 380;
    background: url(./photos/01d.jpg);
    background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat;
}

/* html { 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  } */

h1,h2,h3{
    margin-top: 0;
    margin-bottom: 10px;
}
p{
    margin: var(--spacing-small);
}
body{
    max-width: 800px;
    margin: auto;
    padding: var(--spacing-regular);
}

/* mobile first approach */
.container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "search search"
    "current current"
    "hourly hourly"
    "daily daily"
    "wind humidity";
    gap: var(--spacing-regular);
    /* padding: var(--spacing-regular); */
}
.container>section{
    padding: var(--spacing-regular);
    border-radius: var(--spacing-regular);
    background-color: rgba(198, 239, 255, 0.63);
    width: 100%;
}
#search{
    grid-area: search;
    font-size: var(--font-regular);
    padding: var(--spacing-small);
    border-radius: var(--spacing-small);
}
#current_forecast{
    grid-area: current;
    text-align: center;

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

#current_forecast .description, #current_forecast .min-max-temp {
    margin-top: 0;
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
    text-transform: capitalize;
}

#hourly_forecast{
    grid-area: hourly;
    height: 100%;
}

#hourly_forecast .hourly-container{
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    text-align: center;
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
    /* height: 100%; */
}

#hourly_forecast .heading{
    text-align: center;
}
#daily_forecast{
    grid-area: daily;
    text-align: center;
}
#daily_forecast .daily-container{
    
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    gap: 10px;
    text-align: center;
    font-size: var(--font-regular);
    font-weight: var(--font-semibold);
}

.daily-container .daily-description{
    
    text-transform: capitalize;
    white-space: nowrap;
    margin: 0;
    font-weight: var(--font-semibold);
    font-size: var(--font-small);
    opacity: 0.5;
    
}
.daily-container .daily-grid-element{
    grid-area: 1;
}
.daily-container .graph{
    grid-column: 1/ 7;
    grid-row: 2;
    width: 92%;
    margin: auto
}

.daily-container .description-container{
    overflow-x: hidden;
    width: 84px;
    margin-left: 8px;
    margin-right: 8px;
}
.daily-container .date{
    font-size: var(--font-small);
    font-weight: var(--font-light);
}

#wind{
    grid-area: wind;
    text-align: center;
    font-weight: var(--font-semibold);

}
#humidity{
    grid-area: humidity;
    font-weight: var(--font-semibold);
    text-align: center;
}

@media (width>=650px){

    .container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: 
        "search search search search"
        "current current hourly hourly"
        "daily daily daily daily"
        "wind wind humidity humidity";
        gap: var(--spacing-regular);
        /* padding: var(--spacing-regular); */
    }    

    #hourly_forecast{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
   
}