html, body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
  }
nav{
    text-align: center;
    padding: 10px;
    height: fit-content;
    background-color:gray;
    color: white;
    margin-bottom: 40px;
    display: flex;

}
h1{
    margin: auto;
}

p{
    margin: 5px 0;
}
h3{
    margin: 16px 0px;
}
h4{
    margin-bottom:20px;
}
button{
    background-color:#057bff;
    border: none;
    border-radius: 4px;
    height:30px;
    width: 30px;
    color:white;
    padding: 0;
}
input{
    height: 30px;
    padding: 0 0 0 5px;
    border: 1px solid lightgray;
    border-radius: 4px;

}

#search-tab{
    height: 100%;
    background-color: rgb(233, 233, 233);
    border-radius: 4px;
    padding: 20px 10px;
    
    
}
.cardContainer{
    display: flex;
    flex-wrap: wrap;
}
.location-forecast{
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 0 10px 10px 10px;
}
.location-section{
    padding: 0 10px 10px 10px;
}
.searched{
    width: 90%;
    margin-top:5px ;
    border: 1px solid lightgray;
    border-radius: 4px;
    background: gray;
    color: white;
}
.searched:hover{
    background-color: darkgray;
}
/* cards */
.card{
    margin: 5px;
    padding: 10px;
    text-align: center;
    background-color: gray;
}
.uv-index{
    background-color: rgb(255, 55, 55);
    color: white;
    padding: 3px 15px;
    border-radius: 4px;
}
.container{
    flex: 1 0 auto;
}
/* ----------- Footer styles ------------- */
footer{
    height: 120px;
    background-color: rgba(100, 100, 100);
    display: flex;
    width: 100%;
    
}

.foot-icons{ /* div */
    height: 100%;
    display: flex;
    padding: auto 7rem;
    justify-content: center;
    margin: auto;
}
.icons{
    height: 60%;
    width: auto;
    margin: auto 30px;
}
.row{
    margin: 0;
}