body{
    margin:auto;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}
h1 {
    max-width: 70%;
    margin:auto;
    margin-top: 8vh;
    font-family:"Sen", sans-serif;
    font-weight:700;
    font-style: normal;
    font-size: 6rem;
    color:#ffffff;
    text-shadow:3px 3px 4px #000000;
    text-align: center;
}
h2 {
    max-width: 60%;
    margin:auto;
    font-family:"Dancing Script", sans-serif;
    font-weight:800;
    font-style: normal;
    color:#ffffff;
    text-shadow:1px 1px 2px #000000;
    text-align: center;
    font-size: 2rem;
}
a {
    text-decoration:none;
}
.wrapper {
    margin:auto;
}
#gdpr {
    display: none;
    position:fixed;
    z-index:3;
    bottom: 0;
    width: 100%;
    background-color:darkblue;
    opacity: 0.9;
    color: #ffffff;
    font-size: 1rem;
    text-align:center;
    padding: 15px;
    padding-left: 35px;
    padding-right: 35px;
}
.heading {
    height:auto;
    width:100%;
    background-color:darkblue;
    border-bottom:darkred 4px solid;
    font-family:"Sen", sans-serif;
    font-weight:700;
    display:flex;
    flex-direction:row;
    position:fixed;
}
.heading a:link, a:valid, a:hover, a:visited {
    color:#ffffff;
}
.heading a:active {
    color:darkred;
}
.logo {
    width:200px;
    padding:1.5rem;
}
.openbtn {
    display:none;
}
.sidepanel  {
    width:0;
    position:fixed;
    z-index:1;
    height:auto;
    top:0;
    right:0;
    background-color:darkblue;
    border-bottom:darkred 4px solid;
    overflow-x: hidden;
    transition:0.5s;
    padding-top:60px;
    padding-bottom:40px;
}
.sidepanel a {
    padding:8px 8px 8px 32px;
    text-decoration:none;
    font-size:25px;
    color:#e2e2e2;
    display:block;
    transition:0.3s;
}
.sidepanel a:hover {
    color:#f1f1f1;
}
.sidepanel .closebtn {
    position:absolute;
    top:0;
    right:25px;
    font-size:3rem;
}
#dt-menu {
    width:85%;
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    font-size:1.1rem;
    padding:2rem;
}
.search-container {
    width:15rem;
    height:1.5rem;
    display:flex;
    flex-direction:row;
    float:right;
}
.search {
    width:80%;
    font-size:1rem;
    border:none;
}
.btn-search {
    height:auto;
    width:20%;
    background-color:darkgrey;
    border: none;
}
.btn-search:hover {
    background-color:darkred;
    color:#ffffff;
}
.hero-home {
    width:100%;
    height:60vh;
    margin:auto;
    background-color:darkblue;
    background: url(../img/hero_home.jpg) no-repeat center;
    background-size: cover;
    border-bottom: darkblue 2px solid;
    padding:0.1rem;
    padding-top:6rem;
}
.hero-breakfast {
    width:100%;
    height:60vh;
    margin:auto;
    background-color:darkblue;
    background: url(../img/hero_breakfast.jpg) no-repeat center;
    background-size:cover;
    border-bottom: darkblue 2px solid;
    padding:0.1rem;
    padding-top:6rem;
}
.hero-mains {
    width:100%;
    height:60vh;
    margin:auto;
    background-color:darkblue;
    background: url(../img/hero_mains.jpg) no-repeat center;
    background-size:cover;
    border-bottom: darkblue 2px solid;
    padding:0.1rem;
    padding-top:6rem;
}
.hero-desserts {
    width:100%;
    height:60vh;
    margin:auto;
    background-color:darkblue;
    background: url(../img/hero_desserts.jpg) no-repeat center;
    background-size:cover;
    border-bottom: darkblue 2px solid;
    padding:0.1rem;
    padding-top:6rem;
}
.hero-lunch {
    width:100%;
    height:60vh;
    margin:auto;
    background-color:darkblue;
    background: url(../img/hero_lunch.jpg) no-repeat center;
    background-size:cover;
    border-bottom: darkblue 2px solid;
    padding:0.1rem;
    padding-top:6rem;
}
.hero-regional {
    width:100%;
    height:60vh;
    margin:auto;
    background-color:darkblue;
    background: url(../img/hero_regional.jpg) no-repeat center;
    background-size:cover;
    border-bottom: darkblue 2px solid;
    padding:0.1rem;
    padding-top:6rem;
}
.body-wrapper {
    width:auto;
    height:auto;
    display:flex;
    flex-direction:column;
}
.main-content {
    display:flex;
    flex-direction: column;
    width:auto;
    height:auto;
    margin:auto;
    padding:8px;
    text-align:center;
}
.blerb {
    width:80%;
    margin:auto;
    text-align: left;
}
.share-content {
    margin:auto;
}
.recipe-wrapper {
    display:flex;
    flex-direction:row;
    width:80%;
    margin:auto;
}
.ingredients {
    width:30%;
    text-align:left;
}
.method {
    text-align:left;
}
.popular {
    width:auto;
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.pop-wrapper {
    width:auto;
    height:auto;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
.pop-item {
    width:250px;
    height:auto;
    flex-direction: column;
    padding: 2.5vh;
}
.pop-img {
    width:250px;
    height:250px;
    overflow: hidden;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border: darkblue 1px solid;
    text-align: center;
}
.pop-img img {
    width:150%;
    overflow: hidden;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.pop-title {
    width:250px;
    height:auto;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    border: darkblue 1px solid;
    background-color: #ffffff;
    font-family:"Sen", sans-serif;
    font-weight: 800;
}
.pop-title a {
    color:darkblue;
    font-weight: 800;
}
.pop-desc {
    width:252px;
    display:flex;
    justify-content: space-around;
    font-family:"Sen", sans-serif;
    font-weight: 300;
    background-color: darkblue;
    color:#ffffff;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.pop-prep {
    width:auto;
}
.pop-serves {
    width:auto;
}
.email-signup {
    width:100vw;
    height:auto;
    padding-top: 45px;
    padding-bottom: 45px;
    background: linear-gradient(to top,#4a6433,#9ce169);
    /*background: rgb(35,38,152);
    background: linear-gradient(147deg, rgba(35,38,152,1) 6%, rgba(253,29,29,1) 50%, rgba(255,255,255,1) 98%);*/  
    text-align:center;
    justify-content: center;
    color:#ffffff;
}
.email-input {
    height:3rem;
    width:22rem;
    font-size: 1rem;
}
.signup-btn {
    height:3.4rem;
    width:6rem;
    background-color:darkgrey;
    border: none;
}
.signup-btn:hover {
    background-color:darkred;
    color:#ffffff;
}
.side-content {
    width:auto;
    height:auto;
    padding:1rem;
}
.side-content a {
    color:darkblue;
}
.side-content li {
    list-style-type:none;
}
footer {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width:auto;
    height:30vh;
    padding:2rem;
    background-color:darkblue;
    color: #ffffff;
    font-weight:600;
    text-align:center;
}
.column {
    height:auto;
    display:flex;
    flex-direction: row;
    text-align: center;
}
.column ul {
    list-style-type: none;
    text-align: left;
    padding: 0;
    float: left;
}
.column a:link {
    text-decoration: none;
    color: #ffffff;
} 
.column a:visited {
    text-decoration: none;
    color: #ffffff;
} 
.column :hover {
    text-decoration: none;
    color: #ffffff;
}
.column a:active {
    text-decoration: none;
    color: #ffffff;
}
.socials img {
    width:45px;
}
@media only screen and (max-width:1445px) {
    h1 {
        font-size: 4rem;
    }
    .search-container {
        display:none;
    }
    .popular {
        width:auto;
        justify-content:space-evenly;
    }
    .pop-desc {
        font-size: 75%;
    }
}
@media only screen and (max-width: 800px) {
    #dt-menu {
        display:none;
    }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1rem;
    }
    #gdpr {
        font-size: small;
    }
    .hero {
        background-size:cover;
    }
    .body-wrapper {
        display:flex;
        flex-direction: column;
    }
    .email-input {
        height:2.9rem;
        width:12rem;
    }
    .sidepanel {
        border-bottom:darkred 6px solid;
    }
    .openbtn {
        display:block;
        font-size:3rem;
        cursor:pointer;
        background-color:darkblue;
        color:white;
        padding:10px 15px;
        border:none;
        position:absolute;
        right:0;
        top:0;
    }
    .recipe-wrapper {
        display:flex;
        flex-direction:column;
    }
    .ingredients {
        width:100%;
    }
    .method {
        width:100%;
    }
    .popular {
        display:flex;
        flex-direction: column;
    }
    footer {
        height: auto;
        flex-direction: column;
    }
    footer p {
        text-align: left;
    }

}