body {
    font-family:'David Libre', serif;
    color: rgb(54, 51, 51);
    background-color: rgb(240, 240, 240);
}

header {
    background-color: rgb(100, 201, 201);
    padding: 10px;
}

.center-text {
    text-align: center;
    font-size: 30px;
}

.center {
    text-align: center;
}


.city-search{
    width: 21%;
    float: left;
    padding: 20px;
    height: 370px;
}

    .city-search input[type=text] {
        padding: 10px;
        font-size: 20px;
        font-family:'David Libre', serif;
        }

    .city-search button {
        padding: 10px;
        font-size: 20px;;
        margin-top: 8px;
        background: rgb(100, 201, 201);
        border: none;
        cursor: pointer;
        }
    .city-search section {
        height: 400px;
    }

    .section button {
        width: 300px;
        font-family:'David Libre', serif;
    }
    
     .section {
        width: 300px;
        height: 800px;
    }


.current-city {
        border: solid;
        width: 70%;
        float: left;
        margin-top: 10px;
        height: 400px;
}

    .current-city img {
        margin-bottom: -10px;
        background-color: rgb(100, 201, 201);
        height: 50px;
        width: 50px;
    }

.forecast {
        clear:both;
        height: 250px;
        width: 70%;
}

.five-day1 { 
    
    background-color: rgb(100, 201, 201);
    width: 19%;
    height: 167px;
    float: left;
    margin-left: 8px;
    margin-top: 8px;
    
}
    .five-day1 img {
        width: 90px;
        height: 90px;
        float: right;
    }

.five-day2 { 
    
    background-color: rgb(100, 201, 201);
    width: 19%;
    height: 167px;
    float: left;
    margin-left: 8px;
    margin-top: 8px;
}
    .five-day2 img {
        width: 90px;
        height: 90px;
        float: right;

    }

.five-day3 { 
    
    background-color: rgb(100, 201, 201);
    width: 19%;
    height: 167px;
    float: left;
    margin-left: 8px;
    margin-top: 8px;
}
    .five-day3 img {
        width: 90px;
        height: 90px;
        float: right;
    }

.five-day4 { 
    
    background-color: rgb(100, 201, 201);
    width: 19%;
    height: 167px;
    float: left;
    margin-left: 8px;
    margin-top: 8px;
}
    .five-day4 img {
        width: 90px;
        height: 90px;
        float: right;
    }


.five-day5 { 
    
    background-color: rgb(100, 201, 201);
    width: 19%;
    height: 167px;
    float: left;
    margin-left: 8px;
    margin-top: 8px;
}
    .five-day5 img {
        width: 90px;
        height: 90px;
        float: right;
    }

.moderate {
    background-color: rgb(159, 236, 159);
}

.high {
    background-color: rgb(241, 190, 93);
}

.very-high{
    background-color: rgb(233, 88, 88);
}

@media screen and (max-width: 1024px) {

    .forecast {
        width: 100%
    }
    .five-day1{
        width: 30%;
    }
    .five-day2{
        width: 30%;
    }
    .five-day3{
        width: 30%;
    }
    .five-day4{
        width: 30%;
    }
    .five-day5{
        width: 30%;
    }
}

@media screen and (max-width: 414px) {
    .current-city { width: 98%;
    }
    .forecast {
        width: 97%
    }
    .five-day1{
        width: 97%;
    }
    .five-day2{
        width: 97%;
    }
    .five-day3{
        width: 97%;
    }
    .five-day4{
        width: 97%;
    }
    .five-day5{
        width: 97%;
    }
}