
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/MatterSQ-Regular.woff2') format('woff2'),
            url('../fonts/MatterSQ-Regular.woff') format('woff'),
            url('../fonts/MatterSQ-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter Med';
            src: url('../fonts/MatterSQ-Medium.woff2') format('woff2'),
            url('../fonts/MatterSQ-Medium.woff') format('woff'),
            url('../fonts/MatterSQ-Medium.ttf') format('truetype');
            font-weight: 500;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter Med';
            src: url('../fonts/MatterSQ-Medium.woff2') format('woff2'),
            url('../fonts/MatterSQ-Medium.woff') format('woff'),
            url('../fonts/MatterSQ-Medium.ttf') format('truetype');
            font-weight: medium;
            font-style: normal;
        }

        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/MatterSQ-Light.woff2') format('woff2'),
            url('../fonts/MatterSQ-Light.woff') format('woff'),
            url('../fonts/MatterSQ-Light.ttf') format('truetype');
            font-weight: 100;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/MatterSQ-Light.woff2') format('woff2'),
            url('../fonts/MatterSQ-Light.woff') format('woff'),
            url('../fonts/MatterSQ-Light.ttf') format('truetype');
            font-weight: 300;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter Semi';
            src: url('../fonts/MatterSQ-SemiBold.woff2') format('woff2'),
            url('../fonts/MatterSQ-SemiBold.woff') format('woff'),
            url('../fonts/MatterSQ-SemiBold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/Matter-Bold.woff2') format('woff2'),
            url('../fonts/Matter-Bold.woff') format('woff'),
            url('../fonts/Matter-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/Matter-Bold.woff2') format('woff2'),
            url('../fonts/Matter-Bold.woff') format('woff'),
            url('../fonts/Matter-Bold.ttf') format('truetype');
            font-weight: 900;
            font-style: normal;
        }
        body{
            padding:0;
            margin: 0;
            font-size: calc(15px + 0.390625vw); 
            font-family: Matter SQ; 
            background-color: #fafafa;
            /* background-color: coral; */
        }
        a{
            color: #000000;
        }
        a:visited{
            color: #000000;
        }
        #scrollContainer{
            width: 5.2vw;
            height: 100vh;
            position: fixed;
            top: 0;
            right: 0;
        }
        #scrollProgressContainer{
            width: 5.2vw;
            height: 15vh;
            position: relative;
            margin-top: 42.5vh;
            align-content: center;
            align-items: center;
            overflow: hidden;
        }
        #scrollMask{
            position: absolute;
            top: 0;
            height: 15vh;
            width: 1vw;
            margin-left: 2.1vw;
            border-radius: 25px;
            background: #000;
        }
        #scrollBar{
            position: absolute;
            top: 0;
            height: 15vh;
            width: 1.75vh;
            margin-left: calc((5.2vw - 1.75vh) / 2);
            border-radius: 25px;
            background: #e8e8e8;
        }
        #scrollProgress{
            position: absolute;
            top: 10%;
            height: 1.75vh;
            width: 1.75vh;
            margin-left: calc((5.2vw - 1.75vh) / 2);
            border-radius: 50%;
            background-color: #000;
        }
        #sideBar{
            width: 5.2vw;
            height: 100vh;
            position: fixed;
            right: 0;
            top: 0;
        }
        #navMenu{
            height: 100%;
            width: 100%;
            top:0;
            left: 0;
        }
         #menuLinks{
            transform: rotate(90deg);
            width: 95vh;
            height: 5.2vw;
            position: relative;
            text-align: right;
            top: calc(47.5vh - 2.6vw);
            left: calc((47.55vh - 2.6vw) * -1);
            font-size: 1.6em;
            line-height: 5.2vw;
            /* text-transform: uppercase; */
            font-weight: medium;
         }
        #main{
            height: 100%;
            min-height: 100%;
            padding-top: 0;
            padding-bottom: 0;
            position: relative;
        }
        #main-content{
            height: fit-content;
            min-height: 100%;
            margin: 5.2vw;
            margin-top: 0;
            margin-bottom: 0;
        }
        #header{
            /* height: 32vh; */
            height: fit-content;
            top: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 3.2136vw;               
            padding: 0;
            font-size: 1em;
            margin-bottom: 6vh;
        }
    
        #container{
            width: 100%;
            position:relative;
            top: 0;
            padding: 0;
        }

        #bottomNav{
            height: fit-content;
            width: 100%;
            margin-top: 6vh;
            padding-bottom: 6vh;

        }

        #navLinks{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 3.2136vw;          
        }
        #backLink{
            text-align: left;
        }
        #homeLink{
            text-align: center;
        }
        #nextLink{
            text-align: right;
        }
        #footer{
            margin-top: 6vh;
            padding-bottom: 8vh;
            /* border-top: solid;
            border-color: rgba(0, 0, 0, 1); */
            height: fit-content;
        }
        #footer-content{
            margin-top: 3vh;
            padding: 0;
        }
        #contact{
            padding: 0;
        }
        #contact ul{
            text-decoration: none;
            padding: 0;
            margin: 0;
            list-style: none;
            list-style-type: none;
        }
        #contact li{
            text-decoration: none;
            display: block;
            float: left;
            list-style: none;
            padding: 0;
            padding-right: 2vw;
            margin: 0;
        }
        #ident{
            height: fit-content;
            margin-bottom: 1.3vh;
        }
        #info{
            display: grid;
            grid-template-columns: 1fr 1fr;
            height:fit-content;
        }
        #copyright{
            text-align: right;
            font-size: 1em;
            line-height: 7.2vh;
            font-weight: 100;
        }
        .project-title, .project-info{
            margin-top: 4.575vw;
            font-size: 1em;
        }
        .project-header{
            font-weight: bold;
            font-size: 3.2em;
            padding: 0;
            margin: 0;          
        }    
        .project-header h1{           
            font-size: 3.2em;
            padding: 0;
            margin: 0;
        }
        .project-body{
            font-weight: 100;
            font-size: 1.6em;
            padding: 0;
            margin: 0;
        }
        .project-body p{
            padding: 0;
            margin: 0;
            line-height: 1.025rem;
        }
        .info-body{
            font-weight: 100;
            font-size: 1.6em;
            padding: 0;
            margin: 0;
        }
        .info-body p{
            padding: 0;
            margin: 0;
            line-height: 1.025rem;
        }
        .info-tags{
            font-weight: medium;
            /* font-weight: 500; */
            font-size: 1.6em;
            padding: 0;
            margin: 0;
        }
        .info-tags p{
            padding: 0;
            margin: 0;
            line-height: 1.025rem;
        }
        .bodyCopy{
            /* font-size: 1.333em; */
            font-size: 1.2444em;
            font-weight: 100;
            /* line-height: 1.375em; */
            line-height: 1.28em;
            margin: 0;
            padding: 0;
            margin-bottom: 0.75em;      
        }
        .bodyCopy p{
            margin: 0;
            padding: 0;         
        }
        .hero{
            width: 100%;
            display: flex;
            margin: 0;
            margin-bottom: 6vh;
            padding: 0;      
        }
        .hero img{
            width:100%;
            height: auto;
            margin: 0;
            padding: 0;      
        }
        .section-header{
            width: 100%;
            height: auto;
            position: relative;
            font-size: 4.2666666667em;
            /* font-weight: 500; */
            letter-spacing: -0.02em;
            padding: 0;
            margin: 0;
        }
        .section-header h1{
            padding: 0;
            margin: 0;
            font-weight: bold;
        }
       .two_col{
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0;
            
       }
       .two_col_txt{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3.2136vw;
        position:relative;
        top: 0;
       }
       .two_col img{
            width: 100%;
            height: auto;
            display: block;
       }
       .three_col{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0; 
       }
       .three_col img{
            width: 100%;
            height: auto;
            display: block;
       }
       .four_col{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0; 
       }
       .four_col img{
            width: 100%;
            height: auto;
            display: block;
       }
       .two_col_wideRight{
            display: grid;
            grid-template-columns: 1fr 2fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0;
       }
       .two_col_wideLeft{
            display: grid;
            grid-template-columns: 2fr 1fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0;
       } 
        .two_col_wideRight img{
            width: 100%;
            height: auto;
       }
       .two_col_wideLeft img{
            width: 100%;
            height: auto;
       }
       .three_col_wideLeft{
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0;
       } 
       .three_col_wideRight{
            display: grid;
            grid-template-columns: 1fr 1fr 2fr;
            column-gap: 3.2136vw;
            position:relative;
            top: 0;
       } 
       .three_col_wideRight img{
            width: 100%;
            height: auto;
       }
       .three_col_wideLeft img{
            width: 100%;
            height: auto;
       }
       .padding_single{
        padding-bottom: 6vh;
       }
       .padding_double{
        padding-bottom: 12vh;
       }
       .vidAutoSize{
        width: 100%;
        height: auto;
       }
       .navLink{
        font-family: 'Matter Semi';
        font-size: 1.6em;
        font-weight: 700;
        letter-spacing: -0.02em;
        cursor: pointer; 
       }
       .navLink a{
        text-decoration: none;
       }
       .arrow {
        height: 1vh;
        width: 1vh;
        border: solid black;
        border-width: 0 0.14em 0.14em 0;
        display: inline-block;
        padding: 0.1em;
      }
      
      .right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        position: relative;
        left: -0.14em;
      }
      .left {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        position: relative;
        left: 0.14em;
      }
      .rotatedLeft{
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        position: relative;
        left: 0.14em;
      }
      .rotatedRight{
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: relative;
        left: 0.14em;
      }
      .contact-header{
        /* font-family: 'Matter Semi'; */
        font-size: 1.2em;
        font-weight:500;
        letter-spacing: -0.015em;
        padding:0;
        margin: 0;
      }
      .identTitle{
        font-size: 6em;
        font-weight: bold;
        letter-spacing: -0.05em;
        padding: 0;
        margin: 0;
        /* margin-top: -3vh; */
      }
      .identTitle h1{
        padding: 0;
        margin: 0;
      }
      .identSub{
        /* font-family: 'Matter Semi'; */
        font-size: 2em;
        font-weight:500;
        letter-spacing: -0.015em;
        padding:0;
        margin: 0;
    }
    .identSub h2{
        margin: 0;
        padding: 0;
    }
    .contactLink{
        /* font-family: 'Matter Semi'; */
        font-weight: 100;
        font-size: 1em;
    }
    .contactLink h2{
        padding: 0;
        margin: 0;
        /* font-family: 'Matter Semi'; */
        font-weight: 100;
        font-size: 1em;
    }
    .contactLink a{
        text-decoration: underline;
        text-underline-offset:1vh;
    }
    .videoBox{
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
    }
    .playBtn{
        width: 0;
        height: 0;
        border-top: 6vh solid transparent;
        border-left: 10vh solid rgba(255,255,255,0.9);
        border-bottom: 6vh solid transparent;
        position: absolute;
        top: calc((100% - 10vh) /2);
        left: calc((100% - 6vh) /2);
    }


      /* ------ Mobile ------- */
       @media screen and (max-width: 800px) {
 
        #header{
            /* height: fit-content; */
            margin-bottom: 5vh;
            display: flex;
            flex-direction: column;
        }

        .project-body{
            font-size: 2em;
        }

        .info-body{
            margin-bottom: 2vh;
        }

        .info-body, .info-tags{
        font-size: 1.4em;
        }

        .two_col, .two_col_wideLeft, .two_col_wideRight, .three_col, .three_col_wideLeft, .three_col_wideRight, .four_col{
            display: flex;
            flex-direction: column;
            gap: 6vh;
        }

        .hero{
            width: 100%;
            display: flex;
            margin: 0;
            margin-bottom: 5vh;
            padding: 0;      
        }

        .padding_single{
            padding-bottom: 5vh;
        }

        .padding_double{
            padding-bottom: 10vh;
        }

        .bodyCopy{
            font-size: 1em;
            font-weight: 100;
            line-height: 1.375em;
            margin: 0;
            padding: 0;
            margin-bottom: 0.75em;      
        }

        .two_col_txt{
            display: flex;
            flex-direction: column;
       }

        .section-header{
        line-height: 0.85em;
        font-size: 4em;
       }
       .identTitle{
        line-height: 0.85em;
        padding-bottom: 0.75vh;
       }
        #contact ul{
        text-decoration: none;
        padding: 0;
        margin: 0;
        list-style:none;
        list-style-type: none;
    }
        #contact li{
        text-decoration: none;
        /* display: block;
        float: left; */
        float: none;
        list-style: none;
        padding: 0;;
        margin: 0;
    }
        #info{
            display: flex;
            flex-direction: column;
            text-align: left;
        }
        #copyright{
            text-align: left;
        }
        .descender{
            line-height: 0.95em !important;
        }
       }

       @media screen and (max-width: 700px) {
        #header{
            height: fit-content;
            margin-bottom: 5vh;
        }

        .hero{
            width: 100%;
            display: flex;
            margin: 0;
            margin-bottom: 5vh;
            padding: 0;      
        }

        .padding_single{
            padding-bottom: 5vh;
        }

        .padding_double{
            padding-bottom: 10vh;
        }

        .bodyCopy{
            font-size: 1.333em;
            font-weight: 100;
            line-height: 1.375em;
            margin: 0;
            padding: 0;
            margin-bottom: 0.75em;      
        }

        .two_col_txt{
            display: flex;
            flex-direction: column;
        }
       }
       @media screen and (max-width: 400px) {
        .section-header{
            line-height: 0.85em;
            font-size: 3.9em;
        }
       }