html {
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}



/* NAVIGATION BAR*/
nav{
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15%;

    /* Box model */
    min-height: 13vh;

    /* Visual */
    background-color: #0B0F14;
}

#navButtonContainer{
    /* Layout */
    display: flex;
    align-items: center;
    column-gap: 0.5em;
}



/* LANDING PAGE */
#landingPage{
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: end;

    /* Box model */
    min-height: 87vh;

    /* Visual */
    background-image: url(/images/bonecaLanding.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#landingCaption{
    /* Visual */
    color: #7FFFD4;
    font-size: 80px;
}



/* ABOUT US PAGE */
#aboutUsPage{
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;

    /* Box model */
    min-height: 100vh;

    /* Visual */
    background-color: #FAF8F5;
}

#aboutUsContainer{
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* Box Model */
    width: 70%;
}

#aboutUsTextContainer{
    /* Layout */
    padding: 1em;

    /* Box model */
    max-width: 100vh;
}

#aboutUsHeader{
    /* Visual */
    font-size: 50px;
    color: #0B0F14;
}

.aboutUsText{
    /* Visual */
    font-size: 1.7em;
    color: #0B0F14;
}

#aboutUsPictureContainer{
    /* Layout */
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    padding: 1em;
    
    /* Box model */
    width: 300px;

    /* Visual */
    border-left: 2px solid #0B0F14;
}



/* PROJECTS PAGE */
#projectsPage{
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;

    /* Box model */
    min-height: 100vh;

    /* Visual */
    background-color: #FAF8F5;
}

#projectsContainer{
    /* Layout */

    /* Box model */
    width: 70%;
}

#projectsHeader{
    /* Visual */
    font-size: 50px;
    color: #0B0F14;
}

/* Verdict */
#verdictProjectContainer{
    /* Box model */
    min-height: 50vh;

    /* Visual */
    background-image: url(/images/verdictPromo.jpeg);
    background-size: cover;
    background-position: center;
}

#verdictTopContainer{
    /* Layout */
    display: flex;
    justify-content: flex-end;
    padding: 1em;

    /* Box model */
    min-height: 7vh;
}

#verdictDateContainer{
    /* Visual */
    background-color: #FAF8F5;
}

#verdictDateText{
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em;
}

#verdictBottomContainer{
    /* Layout */
    display: flex;
    align-items: flex-end;
    padding: 1em;

    /* Box model */
    min-height: 40vh;

}

#verdictNameContainer{
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em;

    /* Box model */
    min-height: 10vh;


    /* Visual */
    background-color: #0B0F14;
}

#verdictDescriptionContainer{
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em;

    /* Box model */
    min-height: 10vh;


    /* Visual */
    background-color: #FAF8F5;
}

#verdictName{
    /* Visual */
    color: #FAF8F5;
}



/* CONTACT PAGE */
#contactPage{
     /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;

    /* Box model */
    min-height: 40vh;

    /* Visual */
    background-color: #FAF8F5;
}

#contactPageContainer{
    /* Box model */
    width: 70%;
}

#contactHeader{
    /* Visual */
    font-size: 50px;
    color: #0B0F14;
}

#contactMessage{
    /* Visual */
    font-size: 1.7em;
    color: #0B0F14;
}



/* FOOTER */
#footer{
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 1em;

    /* Visual */
    background-color: #e9e8e7;
}