body {
    font-family: 'Barlow Semi Condensed', sans-serif;
}

header {
    text-align: center;
    color: black;
}

.smallIcon{
    height: 3em;
}

.fivedayforecast {
    margin: 0;
}

.fivedayforecast div{
    border: thin black solid;
    box-shadow: ;
    padding: 0 0 0 .25em;
    background-color: rgb(4, 4, 100);
    color: green;
    border-radius: .5em;
    margin: .25em;
}

.fivedayforecast p {
    margin-top: .25em;
    margin-bottom: .25em;
}

.fivedayforecast p:first-of-type {
    color:white;
}

.fivedayforecast p span {
    color: white;
}

.maindisplay {
    border: thin grey solid;
    border-radius: .5em;
    background-color: rgb(114, 153, 224);
    margin: 0;
    box-shadow: 10px 5px 5px black;
}

.jumbotron {
    background-image: linear-gradient(to right, rgb(114, 153, 224), rgb(4, 4, 100));
    font-weight: 700;
    font-size: 3em;
}

form {
    font-weight: bolder;
    font-size: 1.25em;
}

.label {
    font-weight: bolder;
    font-size: 1.25em;

}

#searchButton {
    background-color: rgb(4, 4, 100);
    color: white;
    border: none;
}
#searchButton:hover {
    background-color: #6c757d;;
    color: white;
}

.uvLow{
    background-color: green;
    color: white;
    padding: .15em;
    border-radius: .5em;
}

.uvMed{
    background-color: yellow;
    color: black;
    padding: .15em;
}

.uvHigh{
    background-color: orange;
    color: white;
    padding: .15em;
}

.uvVeryHigh{
    background-color: red;
    color: white;
    padding: .15em;
}

.uvExtreme{
    background-color: violet;
    color: white;
    padding: .15em;
}