body {
    background-color: #F4F1EB;
    height: 100vh; 

    margin: 0%;
    padding: 0%;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows: 
        1fr
        35vh
        1fr
        1fr
        1fr
        1fr
        1fr
        60px
    ;
    grid-template-areas: 
        "header header header header header header"
        "intro intro intro intro intro intro"
        "story story story story story story"
        "meet_me meet_me meet_me meet_me meet_me meet_me"
        "niche niche niche niche niche niche"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;

       
    color: #0C0C0C;
    font-family: Inter;
    font-size: larger;
}

#intro_container {
    grid-area: intro;

    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
    
    background: url("../images/kaboompics_dramatic-background-images-of-wavering-waters-32804.jpg") repeat 0 0;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    color: #F4F1EB;
}
    #intro_container p {
        width: 50%;
    }


#story_container {
    grid-area: story;
    display: flex;
    align-items: center;
    padding: 30px 5%;
}
    #brandmarkLogo{
        width: 150px;
    }

        #storyTextBox, #storyImgBox {
            width: 50%;
        }

        #storyImgBox {
            display: flex;
            justify-content: right;
        }
            #storyImgBox img{
                width: 60%;
                filter: grayscale(20%);
            }




#meet_me_container {
    grid-area: meet_me;
    padding: 10%;
    width: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
   
    background: url("../images/Red-background-double-illustration.png") repeat 0 0;
    background-position: center;
    background-repeat: no-repeat;

    color: #F4F1EB;
    background-color: #1F030C;
}



        
@media screen and (min-width: 300px) and (max-width: 870px){
#storyImgBox img {
    width: 90%;
 }
}


@media screen and (min-width: 300px) and (max-width: 700px){
    .content_nav{
        padding-right: 12px;
    }
    .content_nav li{
        padding-left: 12px;
    }
    .label{
        display: grid;
        cursor: pointer;
        grid-column: 3;
        padding-right: 20px;
    }

    .content_nav{
        display: grid;
        grid-template-columns: 1fr;
        grid-column: 1/4;
        
        padding-left: 10px;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: all ease-in-out 0.6s;
    }
    .nav_checkbox input:checked ~ .content_nav{
        max-height: 500px;
    }
    .content_nav li{
        padding: 15px 0px;
    }


    #story_container {
        flex-direction: column;
    }
        #storyTextBox, #storyImgBox {
            width: auto;
        }


        #storyImgBox {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }


    footer {
        flex-direction: column;
        margin-top: 0%;
    }
    .mini_section {
        margin: 12px;
    }
}