.clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

header {
padding: 20px;
background-color: #232b31 ;
color: white;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}


main {
    float:left;
    margin-left:20px;
    padding: 10px;
}

.searchBarContainer {
    padding:10px;
    width: 100%;
}

input {
    border-radius: 5px;
border-color: lightsteelblue;
width: 75%;
}

#searchBtn {
border-radius: 5px;
border-color: lightsteelblue;
color:white;
background-color: rgb(0, 158, 231);
width: 20%;
}


button { 
margin:5px;
padding: 10px;
border: 2px;
width: 90%;
background-color: white;
height: fit-content;
}



#sidebar {
margin-left: 20px;
border: 10px;
padding: 5px;
width: 30%;
height: 800px;
background-color: rgb(227, 233, 236);
float: left;
}

.currentDayContainer {
    width: 100%;
    height: 350px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgrey;

} 

.forecastContainer {
    clear:both;
    margin-top: 20px;
    width:100%;
}

#forecastCardContainer{
    width: 100%;
    clear:both;
    display:inline-block;

}

.card {
    clear:both;
    display:inline-block;
    width: 17.5%;
    height: fit-content;
    margin-left: 20px;
    margin-top: 10px;
}