body {
    font-family: 'Montserrat', sans-serif;
    background-color: #32325D;
    margin: 0 auto;
    padding: 0 auto;
}
.wrapper{
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 15px;
    margin-top: -50px;
}

/* header */

.header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0px;
    margin: 0px  0px;
    
}
.image-header{
    width: 600px;
    border-radius: 25px;
}
.heading{
    display: flex;
    flex-direction: column;
    padding: 50px;
}
h1{
    font-size: 36px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
h2{
    font-size: 26px;
    color: #ffffff;
}

h3{
    font-size: 26px;
    color: #ffffff;
    text-align: center;
    font-family: 'Merienda', cursive;
}

.relaxMoon{
    display: flex;
}

.relax{
    background-color: #b116c969;
    padding: 10px;
    border-radius: 25px;
}
.heading-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 50px;
}

a {
    text-align: center;
    text-decoration: none;
}

.btn {
    color: #fff;
    font-size: 25px;
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: #ee8637;
    --btn-bg-2: #e4bf2b;
    --btn-bg-color: rgb(255, 255, 255);
    --radii: 0.5em;
    cursor: pointer;
    margin: 10px;
    padding: 10px 40px;
    transition: 0.8s;
    background-size: 300% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    border-radius: 25px;
    box-shadow: 0px 0px 20px rgba(70, 60, 34, 0.5), 0px 5px 5px -1px rgba(104, 89, 60, 0.3), inset 4px 4px 8px rgba(214, 207, 171, 0.5), inset -4px -4px 8px rgba(141, 114, 25, 0.35);
}

.btn:hover {
    background-position: right top;
}

.container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.recipe{
    display: flex;
    flex-direction: column;
    max-width: 300px;
    border-radius: 30px;
    margin: 15px;
    box-shadow:  25px 25px 100px #dddddd,
                -25px -25px 100px #dddddd;
}
.image-div{
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.image-recipe{
    width: 200px;
    height: 250px;
    border-radius: 10px;
    /* margin: 20px 60px; */
    box-shadow: -15px -15px 28px #e6e6e6ee, 
                15px 15px 28px #a9a9aa7a;
}
.recipe-name{
    color: #5ea14c;;
    font-size: 26px;
    text-align: center;
    padding: 5px;
}
.recipe-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    margin: 20px 30px;
    max-width: 300px;
    box-shadow: inset 5px 5px 10px #e9e8e8, 
                inset -5px -5px 10px #ececec;
}
ul{
    padding: 0px 30px 10px 30px;
}
li{
    list-style: none;
    border-bottom: 2px solid rgba(196, 196, 196, 0.301);
    padding: 8px 0px;
}
@media all and (max-width: 1301px){
    .wrapper{
        max-width: 970px;
    }
}
@media all and (max-width: 1025px){
    .wrapper{
        max-width: 970px;
    }
    .header{
        flex-direction: column;
        padding: 50px 0px;
        margin: 0px  100px;
    }
    .heading{
        padding: 20px;
    }
}
@media all and (max-width: 769px){
    .image-header{
        max-width: 450px;
        padding-top: 30px;
    }
    .heading{
        padding: 10px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .heading-btn{
        margin-top: 0px;
    }
    h1{
        font-size: 24px;
        margin: 8px;
    }
    h2{
        font-size: 24px;
        margin: 10px;
    }
    .mobile{
        display: flex;
    }
    .relax{
        background: none;
        padding: 0px;
    }
}
@media all and (max-width: 500px){
    .image-header{
        max-width: 320px;
    }
    .mobile{
        display: flex;
        flex-direction: column;
    }
    .relaxMoon{
        display: none;
    }
}
@media all and (max-width: 350px){
    .image-header{
        max-width: 250px;
    }
}