:root {
      --white: #FFFFFF;
      --lightgray: #C4C2C1;
}

body {
    font-family: arial;
    background-image: url(IMG_0570.JPG);
    background-size: cover;
}

h1 {
    color: var(--white);
    margin: 1em;
}

h2 {
    align-items: center;
}

.banner{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #355E3B;
    height: 4em;
    margin-bottom: 2em;
    width: 100%;
    box-shadow: 0 10px 4px -4px black;
}

.banner2{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #355E3B;
    height: 4em;
    margin-bottom: 2em;
    width: 75%;
    box-shadow: 0 10px 4px -4px black;
}

#sideCardTitle {
    background-color: var(--white);
    border-radius: 5px;
    border: solid;
    text-align: center;
}

#inputArea {
    border-bottom:solid;
}

.form-control {
    margin-bottom: .5em;
}

.headText {
    background-color: var(--white);
}

#searchBtn {
    margin-bottom: .5em;
}

.sideCard {
    background-color: transparent;
    margin-right: 1em;
}
.cityLinks {
    margin-top: .5em;
}

.weatherInfo{
    width: 74%;
}

#weatherTitleBox {
    display: none;
    align-items: center;
    background-color: var(--white);
    border: solid;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-left: 1em;
    border-radius: 10px;
}

#city {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    padding-right: .5em;
}

#currentDayIconSection {
    align-items: center;
    width: 15%;
}

#weatherText {
    font-size: 35px;
}

#currentDay {
    font-size: 35px;
}

#currentDayImage {
    width: 75%;
}

.mainWeatherDetail{
    margin-bottom: 1em;
    border-radius: 10px;
}

.list-group {
    border: solid;
    border-radius: 10px;
    background-color: var(--white);
    font-size: 20px;
}

.list-group-item {
    background-color: var(--white);
    border: none;
}

#uv {
    border-radius: 5px;
    padding: .25em;
}

.fiveDayHdr {
    background-color: var(--white);
    display: flex;
    align-items: center;
    padding-left: 1em;
    padding-top: .5em;
    border: solid;
    border-radius: 10px;
    margin-bottom: 1em;
}

/* .miniBoxContainer {
    display: flex;
    width: 100%;
    margin-bottom: 2em;
} */

/* #day1 {
    margin-right: 1em;
    margin-left: 1em;
    width: 19%;
    border-radius: 10px;
} */

#day1Image {
    width: 50%;
    display: none;
    margin: auto;
}

/* #day2 {
    margin-right: 1em;
    width: 19%;
    border-radius: 10px;
} */

#day2Image {
    width: 50%;
    display: none;
    margin: auto;
}

/* #day3 {
    margin-right: 1em;
    width: 19%;
    border-radius: 10px;
    
} */

#day3Image {
    width: 50%;
    display: none;
    margin: auto;
}

/* #day4 {
    margin-right: 1em;
    width: 19%;
    border-radius: 10px;
} */

#day4Image {
    width: 50%;
    display: none;
    margin: auto;
}

/* #day5 {
    margin-right: 1em;
    width: 19%;
    border-radius: 10px;
} */

#day5Image {
    width: 50%;
    display: none;
    margin: auto;
}