/* main content section for all the grid */
.content-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    width: 100%;
}

/* box for current weather info */
.current-box {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;

    height: 300px;

    margin-top: 50px;
    margin-left: 50px;
    margin-right: 30px;
}

/* air quality box */
.airquality-box{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;

    margin-top: 30px;
    margin-right: 15px;
    margin-bottom: 15px;


    margin-left: 50px;

}
/* wind box */
.wind-box{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;

    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 15px;
    margin-right: 30px;
}
/* humidty box */
.humidity-box{
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 3;

    margin-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
    margin-right: 30px;
}

/* visibility box */
.visibility-box{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 4;

    margin-top: 15px;
    margin-left: 50px;
    margin-right: 15px;
    margin-bottom: 15px;
}
/* pressure box */
.pressure-box{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;

    margin-left: 30px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 30px;
}
/* pressure another? box */
.pressure2-box{
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 4;

    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 30px;
}

/* summary box */
.summary-box{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 7;
    height: 290px;

    margin-left: 50px;
    margin-right: 30px;
    margin-top: 15px;
}
/* forecast box */
.forecast-box {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 7;

    margin-right: 40px;
    margin-top: 50px;
}