body {
    background-color: #e8e8e8;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-family: 'Quicksand', sans-serif;
    color: #454545;
}

main {
    flex: 1 0 auto;
  }

.header {
    background: rgb(130,216,202);
    background: linear-gradient(180deg, rgba(130,216,202,1) 45%, rgba(72,188,196,1) 100%);
    border-bottom: 2px solid white;
    height: 50px;
    text-align: center;
}

h1 {
    font-family: 'Quicksand', sans-serif;
}

#logo {
    height: 100px;
    padding-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

p {
    font-family: 'Quicksand', sans-serif;

}

#cityName {
    text-align: center;
    font-size: 20px;
    /* font-weight: bolder; */
    width: 100%;
    text-align: center;
}

#cityDate {
    text-align: center;
    font-size: 15px;
    width: 100%;
    text-align: center;
    
}

#temp {
    text-align: center;
    font-size: 40px; 
    font-weight: bolder;
}

#container {
    margin-top: 2%;
    margin-left: 20%;
    margin-right: 20%;
}

#item-div {
    background-color: rgba(255, 255, 255, 0.85);
    margin-left: 5px;
    margin-right: 5px;
    border: 2px solid #a8a8a8;
    padding: 30px;
    border-radius: 10px;
}
.city-div {
    margin-left: 10px;
}

.recipe-div {
    margin-right:10px;

}

.weather-div {
    margin-bottom: 20px;
    height: 35%;
}

#img {
    height: 50px;
}

a {
    color:white;
}

button {
    color: rgb(130,216,202);
}

.divider {
    margin-bottom: 15px;
}

.material-icons {
    margin: 3px;
}

.cardButton {
    background: rgb(130,216,202);
    background: linear-gradient(180deg, rgba(130,216,202,1) 45%, rgba(72,188,196,1) 100%);
    color: white;
    padding: 5px;
}

.card-image {
    z-index: inherit 2;
    opacity: 1;
}

#recipelink, #youtubelink {
    color:white;
}
@media (min-width: 768px) {
    #flexbox-center {
        position: relative;
        left: 3.5%;
    }

    #recipe-div {
        margin-left:5px;
    }
}


footer {
    background: rgb(130,216,202);
    background: linear-gradient(180deg, rgba(130,216,202,1) 45%, rgba(72,188,196,1) 100%);
    border-top: 2px solid white;
    height: 50px;
    text-align: center;
    color: white;
}

#defaultbackground{
    /* background-image: url("");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    background-color: #FAFAFA;
}

#belowtwenty{
    width: 100%;
    background-image: url("https://thumbs.dreamstime.com/b/winter-tree-lined-road-snow-12252339.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#twentytofourty{
    background-image: url("https://live.staticflickr.com/2173/2133594416_d60a90ee5b_b.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#fourtytosixty{
    background-image: url("https://thewallpapers.org/zoom/26704/2-spring-season-blooming-of-green-leaves--pictures.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#sixtytoeighty{
    background-image: url("https://cdn.suwalls.com/wallpapers/nature/beautiful-summer-day-39604-1920x1200.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#aboveeighty{
    background-image: url("https://thenypost.files.wordpress.com/2018/09/180910-making-rain-sahara-desert-feature.jpg?quality=80&strip=all");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}