html {
    font-size: 62.5%;
    /* scroll-snap-type: y mandatory; */
}

html::-webkit-scrollbar {
    display: none;
}

body {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    background-color: #f2f6f9
}


.background {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #f2f6f9;
    opacity: 1;
    background-image: linear-gradient(30deg, #d3d3d3 12%, transparent 12.5%, transparent 87%, #d3d3d3 87.5%, #d3d3d3), linear-gradient(150deg, #d3d3d3 12%, transparent 12.5%, transparent 87%, #d3d3d3 87.5%, #d3d3d3), linear-gradient(30deg, #d3d3d3 12%, transparent 12.5%, transparent 87%, #d3d3d3 87.5%, #d3d3d3), linear-gradient(150deg, #d3d3d3 12%, transparent 12.5%, transparent 87%, #d3d3d3 87.5%, #d3d3d3), linear-gradient(60deg, #d3d3d377 25%, transparent 25.5%, transparent 75%, #d3d3d377 75%, #d3d3d377), linear-gradient(60deg, #d3d3d377 25%, transparent 25.5%, transparent 75%, #d3d3d377 75%, #d3d3d377);
    background-size: 36px 63px;
    background-position: 0 0, 0 0, 18px 32px, 18px 32px, 0 0, 18px 32px;
    z-index: -10;
}

/* -------------------------------------------------------------------------------------------navSticky---------------------------------------------------------------------------- */

.navBar {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 10vh;
    background-color: #000000;
    color: #f2f6f9;
    font-size: 5rem;
    text-align: center;
    z-index: 999;
}

.navBarGrid {
    position: relative;


    font-size: 2rem;
    left: 30%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0% 0%;

    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "barProjectOne barProjectTwo barProjectThree barProjectFour barProjectFive";
    width: 70%;
    height: 100%;
}

.barProjectOne {
    grid-area: barProjectOne;

    height: 100%;
    width: 100%;
}

.barProjectTwo {
    grid-area: barProjectTwo;

    height: 100%;
    width: 100%;
}

.barProjectThree {
    grid-area: barProjectThree;

    height: 100%;
    width: 100%;
}

.barProjectFour {
    grid-area: barProjectFour;

    height: 100%;
    width: 100%;
}

.barProjectFive {
    grid-area: barProjectFive;

    height: 100%;
    width: 100%;
}


#barText {
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    text-decoration: none;
    color: #f2f6f9;
    font-family: "major-mono-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    transition: all 0.5s;
}

#barProject {
    background-color: none;
    transition: all 0.5s;
}

#barText:hover {
    text-decoration: line-through;
}

#barProject:hover {
    background-color: #f2f6f9;

}

#barProject:hover #barText {
    color: #000000;
}

/* -------------------------------------------------------------------------------------------HeroHeader---------------------------------------------------------------------------- */

.heroDPD {

    width: 100vw;
    height: 90vh;

    margin-bottom: 1%;

    text-align: center;
    bottom: 0;
    color: #f2f6f9;
    filter: grayscale();


    /* background-color: #58575a; */
}

.heroDPD video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.heroDPD img{
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.heroDPDText {
    position: absolute;
    width: fit-content;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    font-size: 10rem;
    font-family: "major-mono-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    z-index: 15;
    color: #f2f6f9;
    background-color: #000000;

}

#heroDPDText {
    text-decoration: none;
    color: #f2f6f9;
}

.heroDPDText:hover {
    text-decoration: line-through;
    color: #f2f6f9;
}

.heroDPD:hover {
    filter: none;
}

/* -------------------------------------------------------------------------------------------RationaleSection---------------------------------------------------------------------------- */

.explainerSection {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 1vh 0vw;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "problemStatement"
        "problemStatement2"
        "solutionStatement"
        "solutionStatement2"
        "rationaleStatement"
        "carouselStatement";
    width: 100%;
    height: 400vh;

    font-family: "cofo-sans-mono-variable", sans-serif;
    font-variation-settings: 'wght' 400;
    font-style: normal;

}

.problemStatement {
    display: grid;

    width: 100%;
    height: 100%;

    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 1vw;
    grid-auto-flow: row;
    grid-template-areas:
        "problemText problemText1_2";
    grid-area: problemStatement;
}

.problemText {
    grid-area: problemText;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 40vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;
}

.problemText1_2 {
    grid-area: problemText1.2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 40vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;
}


.problemStatement2 {
    display: grid;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    width: 100%;
    height: 100%;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 1vw;
    grid-auto-flow: row;
    grid-template-areas:
        "problemText2 problemImage";
    grid-area: problemStatement2;
}

.problemText2 {
    grid-area: problemText2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 40vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;

}

.problemImage {
    grid-area: problemImage;
    background-color: #58575a;
    color: #f2f6f9;
    text-decoration: none;

    width: 100%;
    height: 100%;

}

.problemImage img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.problemImage video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.solutionStatement {
    display: grid;

    width: 100%;
    height: 100%;


    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "solutionText solutionText";
    grid-area: solutionStatement;
}

.solutionText {
    grid-area: solutionText;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 90vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;

}

.solutionStatement2 {
    display: grid;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    width: 100%;
    height: 100%;


    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "solutionText2 solutionImage";
    grid-area: solutionStatement2;
}

.solutionText2 {
    grid-area: solutionText2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 40vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;

}

.solutionImage {
    grid-area: solutionImage;
    background-color: #58575a;
    color: #f2f6f9;
    text-decoration: none;

    width: 100%;
    height: 100%;

}

.solutionImage img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.solutionImage video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.rationaleStatement {
    grid-area: rationaleStatement;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    width: 100%;
    height: 100%;

}

.rationaleText {
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 90vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;
}

.carouselStatement {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "gridImg1 gridImg2 gridImg3"
        "gridImg4 gridImg5 gridImg6"
        "gridImg7 gridImg8 gridImg9";

    grid-area: carouselStatement;
    backdrop-filter: blur(8px);
    color: #000000;
    text-decoration: none;

    width: 100vw;
    height: auto;
    margin-bottom: 0.5%;

}


.gridImg1 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg2 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg3 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg4 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg5 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg6 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg7 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg8 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.gridImg9 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.explainerSectionSection2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 1vh 0vw;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "problemStatementSection2"
        "problemStatement2Section2"
        "solutionStatementSection2"
        "solutionStatement2Section2"
        "rationaleStatementSection2"
    ;
    width: 100vw;
    height: 300vh;

    font-family: "cofo-sans-mono-variable", sans-serif;
    font-variation-settings: 'wght' 400;
    font-style: normal;

}

.problemStatementSection2 {
    display: grid;

    width: 100%;
    height: 100%;

    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 1vw;
    grid-auto-flow: row;
    grid-template-areas:
        "problemTextSection2 problemTextSection2";
    grid-area: problemStatementSection2;
}

.problemTextSection2 {
    grid-area: problemTextSection2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 90vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;
}

.problemStatement2Section2 {
    display: grid;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    width: 100%;
    height: 100%;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 1vw;
    grid-auto-flow: row;
    grid-template-areas:
        "problemText2Section2 problemImageSection2";
    grid-area: problemStatement2Section2;
}

.problemText2Section2 {
    grid-area: problemText2Section2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 40vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;

}

.problemImageSection2 {
    grid-area: problemImageSection2;
    background-color: #58575a;
    color: #f2f6f9;
    text-decoration: none;

    width: 100%;
    height: 100%;

}

.problemImageSection2 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.problemImageSection2 video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.solutionStatementSection2 {
    display: grid;

    width: 100%;
    height: 100%;


    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "solutionTextSection2 solutionTextSection2";
    grid-area: solutionStatementSection2;
}

.solutionTextSection2 {
    grid-area: solutionTextSection2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 90vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;

}

.solutionStatement2Section2 {
    display: grid;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    width: 100vw;
    height: 100%;


    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "solutionText2Section2 solutionImageSection2";
    grid-area: solutionStatement2Section2;
}

.solutionText2Section2 {
    grid-area: solutionText2Section2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 40vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;

}

.solutionImageSection2 {
    grid-area: solutionImageSection2;
    background-color: #58575a;
    color: #f2f6f9;
    text-decoration: none;

    width: 100%;
    height: 100%;

}

.solutionImageSection2 img {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.solutionImageSection2 video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;
    z-index: 0;
}

.rationaleStatementSection2 {
    grid-area: rationaleStatementSection2;
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;

    width: 100%;
    height: 100%;



}

.rationaleTextSection2 {
    background-color: #d3d3d3;
    color: #000000;
    text-decoration: none;
    width: 90vw;
    height: fit-content;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    text-align: justify;
    text-justify: inter-word;
    padding-left: 5vw;
    padding-right: 5vw;
}




.explainerVideo {
    width: 100vw;
    height: 90vh;
    background-color: #d3d3d3;
    margin-top: 1%;
}

.explainerVideo video {
    position: relative;
    width: auto;
    height: 80vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

/* -------------------------------------------------------------------------------------------footer-------------------------------------------------------------------------------- */

.footer {
    bottom: 0;
    width: 100vw;
    height: 10vh;
    background-color: #000000;
}

.screenWarning {
    display: none;

    width: 100vw;
    height: 100vh;

    font-family: "novecento-sans-wide", sans-serif;
    font-weight: 100;
    font-style: normal;
    text-align: center;
    font-size: 2rem;

}

.screenWarningText {

    position: relative;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


@media only screen and (max-width : 1700px) {

    #contentPage {
        display: none;
    }

    #warningPage {
        display: block;
    }
}

@media only screen and (min-width: 2000px) {

    #bodyText {
        font-size: 3rem;
    }



}