body{
    margin:auto;
    padding:0px;
    background-image: linear-gradient(to bottom right, rgb(144, 221, 202), rgb(83, 207, 197), rgb(60, 216, 151));
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}

h1 {
    margin: 10px 0px;
}

p, h3 {
    margin: 10px ;
    padding: 10px; 
}

.futureForecast {
    list-style: none;
    display: flex;
    margin:auto;
    padding: 0;
    justify-content: center;
    align-items: center;
}

/* li {
    font-size: 13px;
    margin: auto; 
    padding: 10px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
} */

.day {
    border: 1px solid white;
    margin: 0px 10px;
    padding: 0px;
    position: relative;
    left: -25px;
    border-radius: 10px;
    width: 125px;
}

/* Weather Search Container */
.weather-search {
    display: flex;
    float:left;
    color:rgb(255, 255, 255);
    font-size: 15px;
    width: 300px;
    margin:0px 10px;
    padding:20px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    flex-direction: column;
    border: 1px solid white;
    background-color: grey 0.2;
    box-shadow: 0 4px 8px 0 rgba(235, 217, 217, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Current Weather Container */
.current-weather{
    color: white;
    margin:30px 325px;
    padding: 10px;
    display:flex;
    width: 50%;
    justify-content: right;
    align-items: right;
    flex-direction: column;
    border-radius: 10px;
    border:1px solid white;
    background-color: grey 0.2;
    box-shadow: 0 4px 8px 0 rgba(235, 217, 217, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.city-name {
    margin: 10px 20px; 
}

/* Five Day Forecast container */
.five-day-forecast {
    display:flex;
    color: white;
    margin:0px 325px;
    padding:30px;
    left:110px;
    width:65%;
    justify-content:left;
    background-color: grey 0.2;
    flex-direction: column;
    border:1px solid white;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(235, 217, 217, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}

/* History Container CSS */
.history {
    font-size:15px; 
    margin: auto;
    padding:10px 0px;
    display: flex;
    align-items: center;
}

.history::before, .history::after {
    flex:1;
    content:'';
    padding:1px;
    width: 70px;
    background-color:rgb(255, 255, 255);
    margin:5px;
}

.historyBtn {
    margin:2px;
    width:100%;
    padding: 5px;
    border-radius: 5px;
    color: white;
    border: 1px solid white;
    background-color:cadetblue;
}