/* Body and Header for Weather Dashboard*/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header {
    text-align: center;
    background-color: #0077b6;
    color: #fff;
}
/* flex property for body-flex for sticky footer */
/* dispaly flex for search-area to fit based on viewheight*/
main {
    flex: 1 0 auto;
    display: flex;
}

/* Search area */
.search-area {
    float:left;
    width: 30vw;
    background-color: #caf0f8;
}
#search-header {
    font-weight: bold;
    font-size: 1.25em;
}
.fa-search {
    color: white;
}
#city-buttons button {
    width: 100%;
    text-align: left;
}


/* Results area */
.results {
    float:left;
    width: 65vw;
}
#current-weather {
    border: 1px solid #03045e;
    border-radius: 5%;
    background-color: #caf0f8;
}
/* UV index classes based on number */
#uv-index-low {
    border-radius: 10%;
    background-color: #35F632;
}
#uv-index-moderate {
    border-radius: 10%;
    background-color: #F4F553;
}
#uv-index-high {
    border-radius: 10%;
    background-color: #FF9A3F;
}
#uv-index-severe {
    border-radius: 10%;
    background-color: #F63632;
}

/* Five Day Columns */
/* For each column */
.daily {
    width: 9.5vw;
}
/* For column content */
.card {
    background-color: #0096c7;
    color: #fff;
}
.fiveDay h6 {
    font-size: .8em;
}
.fiveDay p {
    font-size: .7em;
}


/* footer */
footer {
    justify-content: end;
    background-color: #023e8a;
}
footer h6 {
    text-align: center;
    color: white;
}
footer img {
    width: 9%;
}