@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }

@font-face{
    font-family: Serico;
    src: url('./assets/font/serico/Serico-Regular.otf')
}


@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

body{
    font-family: 'Inter', sans-serif;
    color:#FFFFFF;
    background-color: #101010;
}

/* .casestudy{
    color: #000000;
    background-color: #FFFFFF;

} */

header{
    position: fixed;
    width: 100%;
    z-index: 10;
    mix-blend-mode: difference;
}

header:hover {
    mix-blend-mode: normal;
}

p{
    font-size: 1.2rem;
    font-weight: 300;
    /* text-shadow: 0px 0px 8px #000000;  */
}

.casestudy p{
    text-shadow: none; 
}

.nav{
    text-decoration: underline;
    text-shadow: none;
    /* mix-blend-mode: difference; */

}

.nav:hover{
    cursor: pointer;
    mix-blend-mode: normal;
}

/* .nav a {
    mix-blend-mode: difference;
} */


.navMe:hover{
    background-image: url("./assets/img/me_bg.png");
}

.navNotWork:hover{
    background-image: url("./assets/img/notWork_bg.png");
}

.navIndex:hover{
    background-image: url("./assets/img/work_bg.png");
}

.previewTitle{
    font-weight: bold;
    font-size: 48pt;
}

.project{
    position: relative;
}

/* .projectTitle{
    font-family: 'Serico';
    font-weight: 600;
} */

.projectLink{
    text-decoration: underline;
    cursor: pointer;
    padding: 1rem;
    padding-left: 0;
    /* color: #000; */
    /* background-image: url("./assets/img/cta_bg.png"); */
    color: #FFCC17;


    /* Hiding the link to case studies for now */
    /* display: none; */

}

.projectLink:hover{
    color: #FFF;
    background-color: #FFCC17;
    background-image: url("./assets/img/cta_bg.png");
    transition: ease-in-out .2s;
}

.btn{
    border: solid 1px rgba(255,255,255,0);
}

.btn:hover{
    color: #fff;
    background-color:rgba(255,255,255,0);
    border: solid 1px #fff;
    transition: ease-in-out .2s;
    box-shadow: 6px 6px 0 0px #fff;
    transform: translate3d(-3px, -3px, 0px);
}

.figureImg{
    position: absolute;
    z-index: -10;
}

.figReturn{
    left:-300px; top:-220px;
}

.figCatman{
    left:250px; top:-200px;
}

.figDS{
    left:-400px; top:-220px;
}

.figThesis{
    left:200px; bottom:-200px;
}

.figStreetheart{
    bottom:-250px;
    left: 350px;
}

@media screen and (max-width: 64em) {
    .figureImg{
        left: 0px;
        right: 0px;
    }

    .figReturn{
        top: -12rem;
    }

    .figCatman{
        top: -18rem;
    }

    .figDS{
        top: -18rem;
    }

    .figStreetheart{
       bottom: -30rem;
    }
    
  }