@font-face {
    font-family: ArizonaSerif;
    src: url('../fonts/ABCArizonaSerif-Bold-Trial.otf') format('otf'),
         url('../fonts/ABCArizonaSerif-Bold-Trial.woff2') format('woff2'),
         url('../fonts/ABCArizonaSerif-Bold-Trial.woff') format('woff'),
}

@font-face {
    font-family: Diatype;
    src: url('../fonts/ABCDiatype-Regular-Trial.otf') format('otf'),
         url('../fonts/ABCDiatype-Regular-Trial.woff2') format('woff2'),
         url('../fonts/ABCDiatype-Regular-Trial.woff') format('woff'),
}

@font-face {
    font-family: STKBureau-Book;
    src: url('../fonts/STKBureauSerif-Book-Trial.otf') format('otf'),
         url('../fonts/STKBureauSerif-Book-Trial.woff2') format('woff2'),
         url('../fonts/STKBureauSerif-Book-Trial.woff') format('woff'),
}

@font-face {
    font-family: STKBureau-Light;
    src: url('../fonts/STKBureauSerif-Light-Trial.otf') format('otf'),
         url('../fonts/STKBureauSerif-Light-Trial.woff2') format('woff2'),
         url('../fonts/STKBureauSerif-Light-Trial.woff') format('woff'),
}

@font-face {
    font-family: Diatype-Mono;
    src: url('../fonts/ABCDiatypeMono-Regular-Trial.otf') format('otf'),
         url('../fonts/ABCDiatypeMono-Regular-Trial.woff2') format('woff2'),
         url('../fonts/ABCDiatypeMono-Regular-Trial.woff') format('woff'),
}

@font-face {
    font-family: Diatype-Mono-Bold;
    src: url('../fonts/ABCDiatypeMono-Bold-Trial.otf') format('otf'),
         url('../fonts/ABCDiatypeMono-Bold-Trial.woff2') format('woff2'),
         url('../fonts/ABCDiatypeMono-Bold-Trial.woff') format('woff'),
}

@font-face {
    font-family: Diatype-Bold;
    src: url('../fonts/ABCDiatype-Bold-Trial.otf') format('otf'),
         url('../fonts/ABCDiatype-Bold-Trial.woff2') format('woff2'),
         url('../fonts/ABCDiatype-Bold-Trial.woff') format('woff'),
}

@font-face {
    font-family: DiatypeExpanded-Bold;
    src: url('../fonts/ABCDiatypeExpanded-Bold-Trial.otf') format('otf'),
         url('../fonts/ABCDiatypeExpanded-Bold-Trial.woff2') format('woff2'),
         url('../fonts/ABCDiatypeExpanded-Bold-Trial.woff') format('woff'),
}

@font-face {
    font-family: Mondwest;
    src: url('../fonts/PPMondwest-Regular.otf') format('otf'),
         url('../fonts/PPMondwest-Regular.woff2') format('woff2'),
         url('../fonts/PPMondwest-Regular.woff') format('woff'),
}

@font-face {
    font-family: NeueBit;
    src: url('../fonts/PPNeueBit-Bold.otf') format('otf'),
         url('../fonts/PPNeueBit-Bold.woff2') format('woff2'),
         url('../fonts/PPNeueBit-Bold.woff') format('woff'),
}

@font-face {
    font-family: Romie;
    src: url('../fonts/RomieTrial-Regular.otf') format('otf'),
         url('../fonts/RomieTrial-Regular.woff2') format('woff2'),
         url('../fonts/RomieTrial-Regular.woff') format('woff'),
}

@font-face {
    font-family: Romie-Black;
    src: url('../fonts/RomieTrial-Black.otf') format('otf'),
         url('../fonts/RomieTrial-Black.woff2') format('woff2'),
         url('../fonts/RomieTrial-Black.woff') format('woff'),
}

@font-face {
    font-family: Romie-BoldItalic;
    src: url('../fonts/RomieTrial-BoldItalic.otf') format('otf'),
         url('../fonts/RomieTrial-BoldItalic.woff2') format('woff2'),
         url('../fonts/RomieTrial-BoldItalic.woff') format('woff'),
}

@font-face {
    font-family: Romie-Bold;
    src: url('../fonts/RomieTrial-Bold.otf') format('otf'),
         url('../fonts/RomieTrial-Bold.woff2') format('woff2'),
         url('../fonts/RomieTrial-Bold.woff') format('woff'),
}

* {
    margin:0;
    padding:0;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    font-family: Diatype;
    font-style: normal;
    line-height: 150%;
    color: #404040;
    cursor: url('../img/mouse_pointer.svg'), default;
}

.underline {
    border-bottom: solid 1px #000000;
    display:inline-block;
    margin: 0.5rem auto;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background-color: #f7f7f7;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;

   /* background-image: url(../img/destruct_texture.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/

}

a {
    color: #1511e0;
    text-transform: uppercase;
    font-family: Diatype;
    font-size: 1rem;
}

h1, h2, h3, h4, h5 {
    font-family: STKBureau-Light;
    font-style: normal;
    color: #404040;
}

#left-nav > *, #right-nav > * {
    display: inline;
}

#right-nav > *:first-child {
    margin: 0.5rem;
}

/*#left-nav > *:first-child {
    font-size: 2rem;
    font-family: Romie-Bold;
    text-transform: uppercase;
}*/

#left-nav-header {
    display: none;
    position: fixed;
    text-transform: capitalize;
    font-family: Romie-Bold;
    font-size: 24.5vw;
    line-height: 80%;
    letter-spacing: -2vw;
    bottom: 2%;
    left: -2vh;
    text-wrap: nowrap; 
    
    color: linear-gradient(90deg, #ffffff, #000000);
    -webkit-text-fill-color: rgb(255,255,255,0);
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: linear-gradient(90deg, #ffffff, #000000);
    animation: colorTransition 7.5s infinite alternate;
}

@keyframes colorTransition {
    0% {
        color: #ffffff;
    }

    25% {
        color: #ffffff;
    }
    
    75% {
        color: #d5d5d5;
    }

    100% {
        color: #d5d5d5;
    }
}

header {
    position: static;
    z-index: 200;
}

#left-nav {
    /*position: unset;
    display: inline;
    top: 0.5rem;
    left: 1rem;*/
    z-index: 200;
}

.header-icon {
    width: 2.25rem;
    display: none;
}

.header-icon:hover {
    transform: scale(1.1);
    transition: ease-in 0.3s;
    filter: opacity(0.4);
}

#right-nav {
    display: inline;
    z-index: 200;
}

.mobileImgContainer {
    margin: 2rem;
}

.mobileImgContainer:hover,.mobileImgContainer:focus {
    filter: opacity(0.7);
    -webkit-transition: filter 0.5s ease-in-out;
    -moz-transition: filter 0.5s ease-in-out;
    -ms-transition: filter 0.5s ease-in-out;
    -o-transition: filter 0.5s ease-in-out;
    transition: filter 0.5s ease-in-out;
}

.landing {
    display: none;
    position: absolute;
    left:0;
    top:-1vh;
    width: 100vw;
    height: 36vh;
}

.landing-content {
    display: block;
}

.landing-content {
    margin: 3vw;
    margin-top: 5vh;
}

.landing-content > * {
    text-align: center;
}

.project-header {
    font-size: 1.5rem;
    line-height: 150%;
}

/*styling for gifs at the bottom of process analysis*/
#desktop-responsive {
    border-radius: 25px;
    border: 1px solid #F5F3FF;
    width: 75%;
    margin: 1rem;
}

#mobile-responsive {
    border-radius: 20px;
    border: 1px solid #F5F3FF;
    height: 385px;
    width: auto;
    margin: 1rem;
}

.vid-header {
    max-height: 25vh;
}

/* Fading animation, learned from: https://www.w3schools.com/howto/howto_js_slideshow.asp */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
.fade-3 {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    animation-name: fade;
    animation-duration: 3s;
}

.fade-5 {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 5s;
    animation-name: fade;
    animation-duration: 5s;
}

.size-expand {
    -webkit-animation-name: size-expand;
    -webkit-animation-duration: 1.5s;
    animation-name: size-expand;
    animation-duration: 1.5s;
}

@keyframes size-expand {
    from {
        width: 80%;
        background-position: left;
        opacity: 0.4;
      }
    to {
        width: 100%;
        background-position: center;
        opacity: 1;
      }
} 


@-webkit-keyframes size-expand {
    from {
        width: 80%;
        background-position: left;
        }
    to {
        width: 100%;
        background-position: center;
        }
}
  
@-webkit-keyframes fade {
  from {
      opacity: .4
    }
  to {
      opacity: 1
    }
}

@keyframes fade {
  from {
      opacity: .4
    }
  to {
      opacity: 1
    }
}

.notfound-container {
    margin: 1rem 3rem;
}

#notfound-message {
    text-align: center;
    margin: 2rem;
}

footer > p {
    text-align: center;
    font-size: 0.6rem;
    text-transform: uppercase;
}

footer {
    margin: 1rem auto;
    transform: translateX(-50%, -50%);
}

.drop-shadow {
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.193);
}

.fade-in-image { 
    animation: fadeIn 3s; 
}

.fade-in {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    100% { opacity: 0; }
    0% { opacity: 1; }
}

/*#right-a {
    text-align: center;
    font-size: 0.8rem;
}*/

a:hover {
    color: #000000;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: all 50ms ease-in-out;
    -moz-transition: all 50ms ease-in-out;
    -ms-transition: all 50ms ease-in-out;
    -o-transition: all 50ms ease-in-out;
    transition: all 50ms ease-in-out;
    
}

/*#left-a {
    text-align: center;
    font-size: 0.8rem;
}*/

/*#bottom-nav {
    display: flex;          
    justify-content: space-between;
    align-items: center;
    width: 83.5vw;
    position: fixed;
    left: 8.25vw;
    bottom: 8.25vh;
}*/

.hidden {
    display: none;
    animation: fadeOut 0.7s ease-in-out;
}

.show {
    display: block;
    animation: fadeIn 0.7s ease-in-out;
}

#about-desc h2 {
    margin: 0;
    padding: 0;
}

#about-desc {
    margin: 3rem 1rem;
}

#about-text {
    margin: 1rem;
    color: #404040;
}

#about-text > p {
    line-height: 200%;
}

.about-link {
    font-size: 1rem;
    margin: 1rem;
}

#about-links {
    margin-left: 1rem;
}

#about-title, #resume-title, #about-suffix {
    font-size: 2rem;
    line-height: 100%;
    text-transform: uppercase;
}

#resume-title, #about-suffix {
    font-family: DiatypeExpanded-Bold;
}

#about-title, #about-suffix {
    color: #4811e0;
    line-height: 65%;
}

#about-heading {
    display: none;
}

#about-title {
    color: #4811e0;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #4811e0;
    font-family: DiatypeExpanded-Bold;
}

#resume-container {
    margin: 3rem;
    text-align: center;
}

#resume-img-container {
    margin: 2rem;
    margin-bottom: 1rem;
}

#resume-download {
    text-align: center;
}

.centre-a {
    display: inline-block;
}

.centre-item {
    text-align: center;
}

.capitalize-text {
    text-transform: uppercase;
}

.project-con {
    margin: 1rem;
}

.project-con > * {
    line-height: 200%;
}

.italicize {
    font-style: italic;
}

.diatype-expand {
    font-family: DiatypeExpanded-Bold;
}

p {
    font-size: 1rem;
    text-wrap: balance;
}

.bolden {
    font-weight: bolder;
}

.monospace {
    font-family: Diatype-Mono;
}

.monospace-bolden {
    font-family: Diatype-Mono-Bold;
}

.list-items {
    list-style: none;
}

.list-item {
    font-size: 1rem;
    line-height: 200%;
}

/*for phone screen images*/
.horizontal-img {
    border-radius: 16px;
    max-height: 80vh;
}

#cloverdalepaint-prototype {
    border-radius: 8px;
    max-width: 70vw;
}

#swiss-prototype-1 {
    border-radius: 8px;
    max-width: 70vw;
}

#swiss-prototype-2 {
    border-radius: 8px;
    max-width: 70vw;
}

.quote-style {
    text-transform: none;
}

#quotes-sec {
    padding: 2rem;
/* box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.116);*/
}

.img-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;  
}

.divider-margin {
    margin: 4rem;
}

.ds-img-container > * {
    margin: 1rem auto;
}

.ds-img {
    max-width: 50vw;
}

.add-bottom-margin {
    margin-bottom: 5rem;
}

.low-opacity {
    filter: opacity(0.5);
    color:#808080;
}

#click-thru {
    display: none;
}

#mobile-container {
    display: block;
}

.carousel {
    display: none;
}

#booklet-sample {
    display: block;
}

#click-overlay {
    display: none;
}

.landing-header {
    display: none;
    margin: 5rem auto;
}

#desc {
    margin-left: 0.5rem;
    color: #404040;
}

.vimeo-div {
    padding: 50% 0 0 0;
    position: relative;
    margin: 0;
}

.sub-script {
    font-size: 1.25rem;
}

.img-source:hover {
    opacity: 0.3;
}

.scroll-link {
    display: none;
    font-size: 1.25rem;
    font-family: Diatype;
    -webkit-transition-property: font-style, color, text-decoration, display;
    -moz-transition-property: font-style, color, text-decoration, display;
    -ms-transition-property: font-style, color, text-decoration, display;
    -o-transition-property: font-style, color, text-decoration, display;
    transition-property: font-style, color, text-decoration, display;

    -webkit-transition-duration: 0.55s;
    -moz-transition-duration: 0.55s;
    -ms-transition-duration: 0.55s;
    -o-transition-duration: 0.55s;
    transition-duration: 0.55s;

    position: fixed;
    bottom: 2rem;
    right: 2rem;

    text-decoration: none;
}

/*desktop styling*/
@media (min-width: 48rem){

    .circle-cursor {
        display: none;
        width: 40px;
        height: 40px;
        background-color: #1411e055;
        transition: all .1s linear;
        mix-blend-mode:color-burn;
        border-radius: 50%;
        position: absolute;
        pointer-events: none;
        z-index: 350;
    }
    
    #left-nav {
        position: fixed;
        display: block;
        top: 1rem;
        left: 1rem;
    }

    #right-nav {
        position: fixed;
        display: block;
        top: 0;
        right: 1rem;
    }

    header {
        position: fixed;
        top: 2rem;
        left: 1rem;
    }

    #about-heading {
        display: block;
    }

    .landing {
        display: block;
    }

    #mobile-container {
        display: none;
    }
    
    #left-nav-header {
        display: block;
    }

    #index-body {
        overflow: hidden;
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23707070' fill-opacity='0.34' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");

    }

    /*________SLIDER BEGINS_____*/

    #click-thru {
        width: 100%;
        height: auto;
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        background-color: transparent;
        z-index: 300;
    }

    .container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
        background-color: transparent;
    }

    #click-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: url('../img/close_cursor.svg'), default;
    }

    .imgContainer {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        -webkit-transition: 0.7s ease-in-out;
        -moz-transition: 0.7s ease-in-out;
        -ms-transition: 0.7s ease-in-out;
        -o-transition: 0.7s ease-in-out;
        transition: 0.7s ease-in-out;
        background-color: transparent;
        margin-top: 14vh;
        margin-bottom: 5vh;
    }

    #button1, #button2, #button3 {
        display: block;
    }

    #button1-page, #button2-page, #button3-page {
        display: none;
        background-color: transparent;
    }

    #button1:hover, #button2:hover, #button3:hover {
        cursor: url('../img/expand_cursor.svg'), default;
    }

    #button1, #button1-page {
        max-width: var(--link-width, auto);
        max-height: var(--link-height, auto);
    }
    
    #button2, #button2-page {
        max-width: var(--link-width2, auto);
        max-height: var(--link-height2, auto);
    }

    #button3, #button3-page {
        max-width: var(--link-width3, auto);
        max-height: var(--link-height3, auto);
    }

    .slide_div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto 0;
        background-color: transparent;
        z-index: 300;
    }

    .click_thru_img {
        position: relative;
        width: 80%;
        height: 80%;
        filter: saturate(10%);
        -webkit-transition: 0.7s ease-in-out;
        -moz-transition: 0.7s ease-in-out;
        -ms-transition: 0.7s ease-in-out;
        -o-transition: 0.7s ease-in-out;
        transition: 0.7s ease-in-out;
    }

    .slider_button {
        position: absolute;
        width: 80%;
        height: 80%;
        -webkit-transition: 50ms ease-in-out;
        -moz-transition: 50ms ease-in-out;
        -ms-transition: 50ms ease-in-out;
        -o-transition: 50ms ease-in-out;
        transition: 50ms ease-in-out;
    }


    #avalanche:target ~ .imgContainer #img1,
    #avalanche:target ~ .imgContainer #button1 {
        width: 100%;
        height: 100%;
        background-color: transparent;
        filter: saturate(100%);
        cursor: url('../img/mouse_pointer_go.svg'), default;
        background-image: url('../img/avalanche_select_img.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        animation: size-expand 0.7s;
    }

    #avalanche:target ~ .imgContainer #img1,
    #avalanche:target ~ .imgContainer #button1-page {
        display: block;
        cursor: url('../img/mouse_pointer_go.svg'), default;
    }

    #swissfilms:target ~ .imgContainer #img2,
    #swissfilms:target ~ .imgContainer #button2 {
        width: 100%;
        height: 100%;
        background-color: transparent;
        filter: saturate(100%);
        cursor: url('../img/mouse_pointer_go.svg'), default;
        background-image: url('../img/swiss_select_img.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        animation: size-expand 0.7s;
    }

    #swissfilms:target ~ .imgContainer #img2,
    #swissfilms:target ~ .imgContainer #button2-page {
        display: block;
        cursor: url('../img/mouse_pointer_go.svg'), default;
    }

    #cloverdalepaint:target ~ .imgContainer #img3,
    #cloverdalepaint:target ~ .imgContainer #button3 {
        width: 100%;
        height: 100%;
        background-color: transparent;
        filter: saturate(100%);
        cursor: url('../img/mouse_pointer_go.svg'), default;
        background-image: url('../img/cloverdale_select_img.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        animation: size-expand 0.7s;
    }

    #cloverdalepaint:target ~ .imgContainer #img3,
    #cloverdalepaint:target ~ .imgContainer #button3-page {
        display: block;
        cursor: url('../img/mouse_pointer_go.svg'), default;
    }

    #avalanche:target ~ .imgContainer {
        left: 32.5vw;
        margin-top: 14vh;
        margin-bottom: 5vh;
    }


    #swissfilms:target ~ .imgContainer {
        left: 0vw;
        margin-top: 13vh;
        margin-bottom: 5vh;
    }

    #cloverdalepaint:target ~ .imgContainer {
        left: -32.5vw;
        margin-top: 14vh;
        margin-bottom: 5vh;
    }

    /*SLIDER ENDS*/
    
    .project-header {
        font-size: 5rem;
    }

    .project-con {
        margin: 3rem;
    }

    .add-bottom-margin {
        margin-bottom: 8rem;
    }

    /*center elements in the middle*/
    .centre-container {
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center;     /* Center vertically */
        height: 100%;
    }

    /*align elements on the left*/
    .left-align-container {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        justify-content: center; /* Align items vertically within the container */
        align-items: flex-start; /* Align items to the left */
        height: 85vh;
    }

    #about-text {
        margin: 2rem 5rem;
        max-width: 55vw;
    }

    #quote-container {
        margin-top: 40vh;
    }

    .below-landing {
        margin-top: 7rem;
    }

    .white-bg {
        margin: auto 2rem;
        border-bottom: solid 1px #252525;
    }

    #avalanche-landing, #swiss-landing, #cloverdale-landing {
        margin: 0;
        z-index: -10;
    }

    .ds-img-container {
        margin: 10rem 6rem;
    }

    .ds-img {
        max-width: 25vw;
    }
    
    .shorten-text {
        max-width: 50vw;
    }

    .shorten-text-37 {
        max-width: 37vw;
    }

    .horizontal-img {
        max-height: 60vh;
    }

    .divider-margin {
        margin: 8rem;
    }
    
    #about-desc {
        margin-left: 3rem;
        margin-top: 3rem;
    }

    #resume-title {
        font-size: 4rem;
    }

    #about-title, #about-suffix {
        margin-left: 4rem;
        font-size: 6rem;
        margin-top: 2rem;
    }

    #about-suffix {
        font-size: 8rem;
    }

    #about-links {
        margin-left: 4.5rem;
    }

    .about-link {
        font-size: 1rem;
        margin: 0.5rem;
    }

    .vert-img {
        max-width: 70vw;
    }

    /*cloverdale paint carousel code*/

    #booklet-sample {
        display: none;
    }

    .carousel {
        display: block;
        position: relative;
        max-width: 45vw;
        overflow: hidden;
        margin-left: 25%;
    }

    #booklet-download {
        display: block;
    }
    
    .carousel-images {
        display: flex;
        -webkit-transition: transform 0.5s ease-in-out;
        -moz-transition: transform 0.5s ease-in-out;
        -ms-transition: transform 0.5s ease-in-out;
        -o-transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
    }
    
    .carousel-images img {
        width: 100%;
        flex-shrink: 0;
    }
    
    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 0.6rem;
        cursor: pointer;
        z-index: 100;
    }
    
    .arrow.left {
        left: 1rem;
    }
    
    .arrow.right {
        right: 1rem;
    }
    
    .counter {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px 10px;
    }

    #current-slide, #total-slides, .counter p {
        color: white;
    }

    .video-container {
        margin: 5rem 10rem;
    }

    #index-footer {
        position: fixed;
        bottom: 0.2rem;
        left: 45vw;
        text-align: center;
    }

    .landing-header {
        display: block;
        margin: 5rem auto;
    }

    .landing-content {
        display: none;
    }

    #notfound-message {
        margin: 5rem;
    }
    
    .notfound-container {
        margin: 2rem 10rem;
    }

    #desc {
        max-width: 40vw;
        margin-left: 2rem;
        font-size: 0.8rem;
    }

    .vimeo-div {
        padding: 55% 0 0 0;
        position: relative; 
        margin: 7.5rem; 
        margin-top: 0;
    }

    .scroll-link {
        font-size: 1rem;
        text-decoration: underline;
    }

    .sub-script {
        font-size: 0.8rem;
    }

    #black-header {   
        width: 100vw;
        padding: 1rem;
        display: block;
        position: fixed;
        top: 0;
        background-image: linear-gradient(to right, #757575 33%, rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 10px 1px;
        background-repeat: repeat-x;
    }

    .header-icon {
        display: block;
    }

}

@media (min-width: 58rem){
    #resume-container {
        margin-left: 5rem;
        text-align: left;
    }
}

.double-line {
    line-height: 200%;
}

.color-fade {
    -webkit-transition: color 0.7s ease-in-out;
    -moz-transition: color 0.7s ease-in-out;
    -ms-transition: color 0.7s ease-in-out;
    -o-transition: color 0.7s ease-in-out;
    transition: color 0.7s ease-in-out;
}


.poster-resize {
    max-height: 25rem;
}

/*video*/

.video-button {
    text-align: center;
    margin: 1rem 2rem;
    border: none;
    background: none;
}

.video-button > * {
    margin: 0;
    text-align: center;
    border-bottom: solid 2px #252525;
    padding: 0.25rem 0.5rem;
}

.video-button:hover > * {
    color: #808080;
    border-bottom: solid 2px #CCCCCC;
    -webkit-transition: color 0.55s;
    -moz-transition: color 0.55s;
    -ms-transition: color 0.55s;
    -o-transition: color 0.55s;
    transition: color 0.55s;
    
    -webkit-transition: border-bottom 0.55s;
    -moz-transition: border-bottom 0.55s;
    -ms-transition: border-bottom 0.55s;
    -o-transition: border-bottom 0.55s;
    transition: border-bottom 0.55s;
}

.controls {
    display: inline-block;
}

#play-icon {
    font-size: 2rem;
}

#pause-icon {
    font-size: 2.5rem;
}

.background-gradient {
    background: linear-gradient(93deg, #e4e4e4, #ffffff);
    background-size: 400% 400%;

    -webkit-animation: gradientAnimation 51s ease infinite;
    -moz-animation: gradientAnimation 51s ease infinite;
    animation: gradientAnimation 12s ease infinite;
}

@-webkit-keyframes gradientAnimation {
    0%{background-position:0% 54%}
    50%{background-position:100% 47%}
    100%{background-position:0% 54%}
}
@-moz-keyframes gradientAnimation {
    0%{background-position:0% 54%}
    50%{background-position:100% 47%}
    100%{background-position:0% 54%}
}
@keyframes gradientAnimation {
    0%{background-position:0% 54%}
    50%{background-position:100% 47%}
    100%{background-position:0% 54%}
}

.grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 110vw;
    height: 110vh;
    z-index: -300;
    background-image: repeating-linear-gradient(90deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(0deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),repeating-linear-gradient(90deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),linear-gradient(90deg, rgba(255, 255, 255, 0.09),rgba(255, 255, 255, 0.09));
}

.about-gradient {
    background: linear-gradient(93deg, #7575861a, #ffffff);
    background-size: 400% 400%;
    -webkit-animation: gradientAnimation 51s ease infinite;
    -moz-animation: gradientAnimation 51s ease infinite;
    animation: gradientAnimation 12s ease infinite;
}

/*custom scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 0.75rem;
    background-color:#ffffff;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1511e0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #000000;
    transition: background 0.7s ease-in-out;
}

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: blur(100px);
    z-index: -1000;
}

.gradient {
    position: absolute;
    border-radius: 100%;
    opacity: 1;
    mix-blend-mode: screen;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}

    
.gradient-1 {
    background-color: #4e4e4e none repeat scroll 0% 0% / auto padding-box border-box;
    width: 75vw;
    height: 100vh;
    animation-duration: 15s;
    opacity: 0.9;
    left: 60%;
    top: 40%;
    z-index: -2;
    animation-name: animation-gradient-1;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 128px;
}

.gradient-2 {
    background-color: #ffffff none repeat scroll 0% 0% / auto padding-box border-box;
    width: 75vw;
    height: 100vh;
    animation-duration: 15s;
    opacity: 0.9;
    left: 40%;
    top: 60%;
    z-index: -1;
    animation-name: animation-gradient-2;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px;
}

.gradient-3 {
    background-color: #111111 none repeat scroll 0% 0% / auto padding-box border-box;
    width: 75vw;
    height: 100vh;
    animation-duration: 15s;
    opacity: 0.9;
    left: 50%;
    top: 50%;
    z-index: -3;
    animation-name: animation-gradient-3;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px;
}

@keyframes animation-gradient-1 {
    0% {
    transform: translateY(-50%) translateX(-50%) rotate(-20deg) translateX(20%);
    }
    25% {
    transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg)
        rotate(80deg) translateX(30%);
    }
    50% {
    transform: translateY(-50%) translateX(-50%) rotate(180deg) translateX(25%);
    }
    75% {
    transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg)
        rotate(240deg) translateX(15%);
    }
    100% {
    transform: translateY(-50%) translateX(-50%) rotate(340deg) translateX(20%);
    }
}

@keyframes animation-gradient-2 {
    0% {
    transform: translateY(-50%) translateX(-50%) rotate(40deg) translateX(-20%);
    }
    25% {
    transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg)
        rotate(110deg) translateX(-5%);
    }
    50% {
    transform: translateY(-50%) translateX(-50%) rotate(210deg) translateX(-35%);
    }
    75% {
    transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg)
        rotate(300deg) translateX(-10%);
    }
    100% {
    transform: translateY(-50%) translateX(-50%) rotate(400deg) translateX(-20%);
    }
}

@keyframes animation-gradient-3 {
    0% {
    transform: translateY(-50%) translateX(-50%) translateX(-15%)
        translateY(10%);
    }
    20% {
    transform: translateY(-50%) translateX(-50%) translateX(20%)
        translateY(-30%);
    }
    40% {
    transform: translateY(-50%) translateX(-50%) translateX(-25%)
        translateY(-15%);
    }
    60% {
    transform: translateY(-50%) translateX(-50%) translateX(30%) translateY(20%);
    }
    80% {
    transform: translateY(-50%) translateX(-50%) translateX(5%) translateY(35%);
    }
    100% {
    transform: translateY(-50%) translateX(-50%) translateX(-15%)
        translateY(10%);
    }
}