*{
    box-sizing: border-box;
}

body{
    background: linear-gradient(to top, lightblue, rgb(98, 121, 253));
    min-height: 100vh;
}


.menuBar a:active,
.recipeCard a:active{
    opacity: 0.7;
    scale: 0.99;
}

.recipe,
#aboutUs{
    background-image: url('../img/businessCardBackLeft.jpg');
    background-size: 100% 100%;
    background-position: center;

    width: min(100%, 800px);
    margin: 0 auto;
    padding: 72px 16px 24px 16px;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 2%,
        black 98%,
        transparent 100%
    );
}

    /* Mobile Navigation Menu */
    .mobileNav{
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1002;
    }

    /*hide checkbox */
    .menuCheckbox{
        display: none;
    }

    /* hamburger button */
    .menuButton{
        position: relative;
        z-index: 1003;
        display: inline-block;
        cursor: pointer;
    }

    .menuButton:active{
    transform: scale(0.96);
    }

    .menuButton span{
        display: block;
        width: 40px;
        height: 8px;
        margin: 4px;
        background-color: rgb(255, 255, 255);
        transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;
    }

    /* sliding drawer */
    .menuBar{
        position: fixed;
        top: 0;
        left: 0;
        width: 75vw;
        height: 100vh;
        padding-top: 80px;
        background-image: url('../img/businessCardBackLeft.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow-y: auto;
        max-width: 500px;

        transform: translateX(-100%);
        transition: transform 0.3s ease;

        z-index: 1001;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 0%,
            black 90%,
            transparent 100%
        );
    }

    .menuBar a{
        text-decoration: none;
        text-shadow: 0 2px 4px rgba(0,0,0,0.75);
        display: block;
        margin: 1em;
        font-size: 2em;
        color: black;
        justify-self: center;
    }

    /* actual slide-in */
    .menuCheckbox:checked ~ .menuBar{
        transform: translateX(0);
    }

    /* hamburger turns into X */
    .menuCheckbox:checked + .menuButton span:nth-child(1){
        transform: translateY(12px) rotate(45deg);
        background-color: black;
        
    }

    .menuCheckbox:checked + .menuButton span:nth-child(2){
        opacity: 0;
    }

    .menuCheckbox:checked + .menuButton span:nth-child(3){
        transform: translateY(-12px) rotate(-45deg);
        background-color: black;
    }

    /* End of Nav */

    

    #recipeListLogo{
        display: block;
        justify-self: center;

    }

    .recipeContent{
        width: 100%;
        padding: 12px;
        list-style: none;

    }

    
    .videoCard{
    background: url('../img/businessCardBackLeft.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15); 
    width: 100%;
    max-width: 700px;
    min-width: 300px;
    border: 1px solid #d8d8d8;
    background-color: rgb(129, 202, 255, 0.85);
    margin: 0 auto 12px auto;
    width: 100%;
    max-width: 700px;
    }

    .videoCardContent{
        display: grid;
        grid-template-columns: minmax(110px, 42%) 1fr;
        align-items: center;
        width: 100%;
    }

    .videoCard video{
        display: block;
        width: 100%;
    }

    .videoCard p{
        margin: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
    }


    .recipeCard:active{
        scale: 0.99;
    }

    .recipeCard{
        background-image: url('../img/businessCardBackLeft.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        padding: 12px;
        margin: 0 auto 12px auto;
        width: min(100%, 700px);
        max-width: 700px;
        background-color: rgb(129, 202, 255, 0.85);
    }

    .recipeCard a{
        display: grid;
        grid-template-columns: minmax(110px, 42%) 1fr;
        align-items: center;
        width: 100%;
        text-decoration: none;
    }

    .recipeCard img{
        display: block;
        width: 100%;
    }

    .recipeCard p{
        padding: 16px;
        color: black;
        margin: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
    }

    #businessCard{
        background-image: url('../img/businessCardBackLeft.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    #fillerSpan{
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;

    }

    .spanViewRecipe{
        display:inline-block;
        margin-top:10px;
        padding:8px 16px;
        background:#2a6db0;
        color:white;
        border-radius:6px;
        font-size:1rem;
    }

    #aboutUsBody {
        display: grid;
        
    }

    #aboutUs p{
        font-style: normal;
        font-weight: 400;
        margin: 24px;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    #aboutUs h1{
        justify-self: center;
        font-weight: bold;
        font-size: 2.2rem;
    }


    #aboutUs h2{
        margin: 24px;
        margin-top: 24px;
        font-size: 1.6rem;
        
    }

    #aboutUs img{
        display: block;
        width: 50%;
        justify-self: center;
        
    }

    #aboutUs img{
        width: 100%;
    }

    .aboutPageFood{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    @media (max-width: 820px){
        #recipeListLogo{
            display: block;
            justify-self: center;
            width: 100%;
        }
    }


    @media (min-width: 821px){

        .recipeContent{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        #aboutUsBody{
            display: grid;
            grid-template-columns: 20% 60% 20%;
        }


        #aboutUs{
            grid-column: 2;
        }

        #aboutUs #logo{
            width: 60%;
        }


        #aboutUs img{
            width: 100%;
        }


    }