/*top title area*/
nav {
    background-color:#293136;
    color: white;
    margin-top: 0;
    text-align: center;
    padding: 5px;
    position: fixed;
    width: 100%;
}
/*side naviation properties*/
.sidenav {
    background-color: rgb(240, 240, 240);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 225px;
    margin-top: 66px;
}

/*header 2*/
h2 {
    padding-top: 10px;
    font-size: larger;
    text-align: center;
}

/*input properties*/
#city {
    margin-left: 10px;
}

/*button properties*/
#cityBtn {
    margin-right: 10px;
}

/*recent searches properties*/
#recent {
    width: 12.75rem;
    margin-left: 10px;
}

/*top forecast*/
#cityInfo {
    margin-top: 100px;
    margin-left: 255px;
    margin-right: 55px;
    padding: 20px;

}

/*5-day forecast container*/
#forecast {
    margin-top: 50px;
    margin-left: 255px;
    margin-right: 50px;

}

/*weather card properties*/
#weather-4, #weather-12, #weather-20, #weather-28, #weather-36 {
    padding-top: 15px;
    width: 180px;
    height: 200px;
    margin: 5px;
    color: white;
    font-weight: bold
}

/*city name properties*/
#cityName {
    font-size: larger;
    font-weight: bold;
    margin-bottom: 5px;
}

/*added margin for spacing between text*/
#currentTemp, #humidity, #windSpeed, #UVIndex {
    margin-bottom: 20px;
} 

/*h7 properties*/
#h7 {
    padding-bottom: 15px;
    font-size: x-large;
    font-weight: bold;
}