/* These will be visible everywhere, even inside Shadow Roots */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*@import url('GildaDisplay-Regular.ttf');*/

@font-face {
    font-family: "test";
    src: url("GildaDisplay-Regular.ttf");
    text-rendering: optimizeLegibility;
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-font: "Lexend";
    
    --work-bg-color: #17a77e;
    --work-tx-color: #fefaeb;
    --photo-bg-color: #fefaeb;
    --photo-tx-color: #ab3218;
    --about-bg-color: #fdfdfd;
    --about-tx-color: #062976;
    --contact-bg-color: #f2f2f2;
    --contact-tx-color: black;

    --bg-color: var(--about-bg-color);
    --tx-color: var(--work-tx-color);

    --tau: 400ms;

    --title-width: 100dvw;
}

/* Global resets for the light DOM (body, html) */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    pointer-events: auto;
}

canvas {
    display: block !important;
    visibility: visible !important;
}

#portfolio {
    position: relative;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    opacity: 1;
    transition: opacity var(--tau);
    pointer-events: none;
}