@font-face {
    font-family: "Helvetica Now Bold";
    src: url("/fonts/HelveticaNowDisplay-Bold.woff2") format("woff2"), url("/fonts/HelveticaNowDisplay-Bold.woff") format("woff");
}

@font-face {
    font-family: "Crayon";
    src: url("/fonts/IAmTheCrayonMaster.woff2") format("woff2"), url("/fonts/IAmTheCrayonMaster.woff") format("woff");
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* html {
    scroll-behavior: initial;
}

html,
body {
    width: 100%;
    height: auto !important;
    min-height: 100%;
} */

:root {
    --font-family: "Helvetica Now Bold", Arial, Helvetica, sans-serif;
    --font-weight: normal;
    --color: #000000;
    /* --bgColor: #FFFFFF; */
    --bgColor: #F2F2F2;
    /* --margin: 1.414rem; */
    --margin: 1.284rem;
    --padding: 16px;
    --padding-bottom: 24px;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --color: #FFFFFF;
        --bgColor: #1A1A1A;
    }
} */

::selection {
    color: var(--bgColor);
    background-color: var(--color);
}

body {
    color: var(--color);
    background-color: var(--bgColor);
}

a {
    color: var(--color);
    -webkit-tap-highlight-color: transparent; 
    cursor: pointer;
    text-decoration: none;
}

p {
    font-family: var(--font-family);
    /* font-weight: var(--font-weight); */
    font-size: 1.1rem;
    color: var(--color)
}

button {
    font-family: inherit;
    font-size: inherit;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
}

button p {
    color: var(--color);
}

/* .button-underline {
    text-decoration: underline;
} */

.margin-bottom {
    margin-bottom: var(--margin);
}

.border {
    border: 1px solid #00000020;
}


.nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    height: fit-content;
    width: fit-content;
    padding: var(--padding);
    z-index: 30;
}

.nav__menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}


#under-construction--index {
    position: fixed;
    right: 15%;
    bottom: 20%;
    height: fit-content;
    cursor: default;
    /* transform: translate(-50%, -50%); */
    pointer-events: auto;
    z-index: 40;
    visibility: hidden;
}

.under-construction--mobile {
    visibility: hidden;
}

.under-construction-message {
    font-family: "Crayon", Arial, Helvetica, sans-serif;
    /* font-weight: bold; */
    font-size: 2rem;
    line-height: 1.8rem;
}


/* Index Page */

.sticker-container {
    position: relative;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100svh;
    width: 100%;
    

    /* background: url(/static/index/index_bg_test.jpg), #101010;
    background-size: auto 101vh;
    background-size: auto 101svh;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-origin: border-box; */


    z-index: 200;
    pointer-events: none;
}

.sticker {
    position: fixed;
    height: 88px;
    fill: var(--color);
    transform: translate(-50%, -50%);
    pointer-events:all;
    visibility: hidden;
}

.nav--index {
    display: flex;
    flex-direction: row;
    padding: var(--padding);
}

.nav__samuel {
    cursor: default;
}

.nav__menu .nav__samuel {
    /* font-family: "Squid Boy", Arial, Helvetica, sans-serif;
    line-height: 1.2rem;
    font-size: calc(1.1rem + 0.2rem); */
    margin-bottom: var(--margin);
}

.nav__samuel span:nth-child(1),
span:nth-child(8) {
    color: #FC3D21;
}
.nav__samuel span:nth-child(2),
span:nth-child(9) {
    color: #00CC65;
}
.nav__samuel span:nth-child(3),
span:nth-child(10) {
    color: #FF7100;
}
.nav__samuel span:nth-child(4),
span:nth-child(11) {
    color: #0093CC;
}
.nav__samuel span:nth-child(5),
span:nth-child(12) {
    color: #FFC014;
}
.nav__samuel span:nth-child(6),
span:nth-child(13) {
    color: #FE7FAB;
}
.nav__samuel span:nth-child(7) {
    color: var(--color);
}

.link--last {
    margin-top: var(--margin);
}

#under-construction--index {
    visibility: hidden;
}

.nav__projects {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: var(--padding);
}


/* Contact */

.nav--contact {
    padding-bottom: 64px;
    padding-right: 64px;
}

.info--contact {
    position: fixed;
    bottom: var(--padding-bottom);
    left: var(--padding);
    pointer-events: none;
}

#email-hint {
    visibility: hidden;
}

#email-wrap  {
    position: fixed;
    right: 0;
    bottom: 0;
    padding-top: 64px;
    padding-right: var(--padding);
    padding-bottom: var(--padding-bottom);
    padding-left: 64px;
}

.email-copied-confirmation {
    position: fixed;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* Project Page */

.grid {
    display: grid;
    grid-template-columns: 1fr minmax(560px, 0.8fr);
    column-gap: var(--padding);
    position: relative;
    padding: var(--padding) var(--padding) var(--padding-bottom) var(--padding);
    height: auto;
    width: 100%;
    pointer-events: none;
    z-index: 20;
}

.grid--full-height {
    height: 100vh;
    height: 100svh;
}

.grid--info {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100svh;
    z-index: 10;
}

.grid--info .grid__position {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.grid__info {
    padding-right: calc(var(--padding) * 4);
}

.grid__title {
    margin-bottom: var(--margin);
    width: fit-content;
    pointer-events: auto;
}

.grid__desc {
    width: fit-content;
    pointer-events: auto;
}

.grid__content {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: var(--padding);
    position: relative;
    height: auto;
    width: 100%;
}

.grid--project .grid__img {
    position: relative;
    width: 100%;
    pointer-events: auto;
}

.grid--project .grid__video {
    position: relative;
    height: auto;
    width: 100%;
    /* margin-bottom: var(--padding); */
    pointer-events: auto;
}

.grid--project .grid__video--full-height {
    padding: 25%;
}

.grid__pad {
    display: flex;
    position: relative;
    height: fit-content;
    width: 100%;
    pointer-events: auto;
}

.grid__pad.grid__pad--100 {
    padding-top: 100%;
}
.grid__pad.grid__pad--234 {
    padding-top: 234.45%;
}
.grid__pad.grid__pad--133 {
    padding-top: 133.33%;
}
.grid__pad.grid__pad--56 {
    padding-top: 56.25%;
}
.grid__pad.grid__pad--177 {
    padding-top: 177.77%;
}
.grid__pad.grid__pad--150 {
    padding-top: 150%;
}
.grid__pad.grid__pad--full-height {
    height: calc(100% - calc(var(--padding) + var(--margin)));
}

.grid__pad .grid__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.grid__pad .grid__img,
.grid__pad .grid__video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.grid__vimeo {
    position:relative;
    /* margin-bottom: var(--padding); */
    padding: 56.25% 0 0 0;
    height: fit-content;
    width: 100%;
    pointer-events: auto;
}

.grid__vimeo--square {
    padding: 100% 0 0 0;;
}

.grid__vimeo .grid__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.grid__vimeo .grid__iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

.grid__nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    width: 100%;
    pointer-events: auto;
    z-index: 20;
}

.grid__nav--abs {
    position: absolute;
    bottom: 0;
}

/* .grid__nav--navigation {
    display: none;
} */

.grid__nav.first-project {
    justify-content: flex-end;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}


/* Information Page */

/* .grid--info .grid__info.grid--information {
    padding-right: calc(var(--padding) * 4);
    max-width: none;
} */

.grid--info.grid--information,
.grid--project.grid--information {
    grid-template-columns: 1fr calc(69vh - calc(var(--padding) + var(--padding-bottom)));
}

.grid__content--information {
    position: relative;
    height: 100%;
}


.information-grid {
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
    width: 100%;
    pointer-events: auto;
}

.information-grid div {
    position: relative;
    height: 100%;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.information-grid img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    -webkit-tap-highlight-color: transparent;
}


/* Mobile */

.nav__modal-btn {
    display: none;
    position: fixed;
    top: calc(var(--padding) * 1);
    right: calc(var(--padding) * 1);
    height: 60px;
    width: 60px;
    /* mix-blend-mode: difference; */
    /* fill: #ffffff;
    fill: currentColor; */
    visibility: hidden;
    pointer-events: auto;
    z-index: 100;
}

/* .nav__modal-btn svg g {
    isolation: isolate;
}

.nav__modal-btn svg g path {
    mix-blend-mode: difference;
    fill: currentColor;
    background-color: transparent;
}  */

.sticker--menu {
    position: absolute;
    height: 60px;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

#freddie--menu {
    position: absolute;
    height: 60px;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

#global--menu {
    visibility: hidden;
}

.nav__modal {
    display: none;
    flex-direction: column;
    /* justify-content: flex-end; */
    justify-content: space-between;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    padding: var(--padding) var(--padding) var(--padding-bottom) var(--padding);
    padding-bottom: var(--padding);
    height: 100%;
    /* height: 100vh; */
    /* height: 100svh; */
    width: 100%;
    background-color: var(--bgColor);
    /* background-color: #FF0000; */
    pointer-events: auto;
    z-index: 90;
}

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

.nav__modal__spacer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


/* Media Queries */

@media (max-width: 1024px) {
    .grid {
        grid-template-columns: 1fr 1.3fr;
    }
    .grid--information {
        grid-template-columns: 1fr calc(69vh - calc(var(--padding) + var(--padding-bottom)));
    }
    .grid__info {
        padding-right: 0;
    }
}

@media (max-width: 766px) {
    :root {
        --padding: 10px;
        --margin: 1.168rem;
        /* --font-family: "Helvetica Now Bold", Arial, Helvetica, sans-serif; */
        
    }
    /* p:not(.under-construction-message) {
        font-weight: normal;
    } */
    #under-construction--index {
        position: relative;

        top: 20%;
        left: 40%;
        bottom: auto;

        padding: 27% 0 23% 0;

        z-index: 30;
    }
    .under-construction-message {
        font-size: 1.4rem;
        line-height: 1.15rem;
    }
    .sticker--desktop {
        display: none;
    }
    .sticker-container {
        position: fixed;
    }
    .nav {
        /* height: 100vh; */
        /* height: 100svh; */
        width: 100%;
        pointer-events: none;
    }
    .nav--index {
        flex-direction: column;
        position: relative;
        /* justify-content: space-between; */
        justify-content: flex-start;
        /* height: 100vh; */
        /* height: 100svh; */
        width: 100%;
    }
    .nav__menu {
        position: fixed;
    }
    .nav__menu .link {
        display: none;
    }
    .nav__modal-btn {
        display: flex;
    }
    .nav__projects {
        /* margin-top: 30vh; */
        /* margin-top: 30svh; */
        padding-left: 0;
        pointer-events: auto;
        z-index: 20;
    }
    .grid--info {
        grid-template-columns: 1fr 0;
        column-gap: 0;
        height: 98vh;
        height: 98svh;
    }
    .grid--info.grid--404 {
        padding-bottom: var(--padding);
        height: 100vh;
        height: 100svh;
    }
    .grid--info.grid--navigation {
        height: 100vh;
        height: 100svh;
        padding: var(--padding);
        padding-bottom: calc(var(--padding) * 4.6);
    }
    .grid__info {
        padding-right: 40%;
    }
    .grid--info .grid__info.grid__info--navigation {
        padding-right: 0;
    }
    .grid--project {
        grid-template-columns: 0 1fr;
        column-gap: 0;
        margin-top: calc(98vh - var(--padding));
        margin-top: calc(98svh - var(--padding));
        padding-top: 0;
        padding-right: calc(var(--padding) / 2);
        padding-bottom: var(--padding);
        padding-left: calc(var(--padding) / 2);
        height: auto;
    }
    .grid--project .grid__content {
        grid-row-gap: calc(var(--padding) / 2);
    }
    .grid__nav--abs {
        position: relative;
    }
    .grid__nav--navigation {
        position: absolute;
    }
    .grid--project.grid--navigation {
        margin-top: 0;
        padding: var(--padding);
        height: 100vh;
        height: 100svh;
    }
    .grid.grid--info.grid--information {
        grid-template-columns: 1fr 0;
        column-gap: 0;
        position: fixed;
        margin-top: 0;
        padding: var(--padding);
        height: calc(98vh - var(--padding));
        height: calc(98svh - var(--padding))
    }
    .grid.grid--project.grid--information {
        grid-template-columns: 0 1fr;
        column-gap: 0;
        position: relative;
        margin-top: calc(98vh - var(--padding));
        margin-top: calc(98svh - var(--padding));
        padding: calc(var(--padding) / 2);
        height: 100vh;
        /* height: 100svh; */
        pointer-events: auto;
    }
    .info--contact {
        top: calc(calc(var(--margin) * 2) + var(--padding));
        bottom: auto;
        padding-right: calc(var(--padding) * 8);
    }
    .email-wrap {
        bottom: calc(var(--padding * 2))
    }
}

@media (max-width: 596px) {
    #under-construction--index {
        left: 35%;
    }
    .grid--info .grid__info {
        padding-right: 0;
    }
}

@media (max-width: 425px) {
    #under-construction--index {
       left: 25%;
    }
}