@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Workbench:BLED,SCAN@5,-30&display=swap');*/

@font-face {
    font-family: 'Workbench';
    src: url(./assets/FeVSS05Gp6Et7FcfbPFgppRmq28.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Workbench';
  src: url(./assets/FeVSS05Gp6Et7FcfbPFg2pRm.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

::-webkit-scrollbar {
    width: 6px;
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #fffc;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    /* overflow: scroll; */
    font-family: "Workbench","IBM Plex Mono", monospace;
    font-variation-settings:
      "BLED" 10,
      "SCAN" -36;
    font-size: 18px;
    line-height: 1;
    user-select: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

p {
    margin: 0;
    padding: 0;
    min-height: 1lh;
    overflow: visible;
    --text-color: #fff;
    z-index: -1;
    /* mix-blend-mode: screen; */
}

p *, p {  
    position: relative;
    /* clip-path: path("M0,0H1000v1H0"); */
    /* mask:  linear-gradient(0deg, #fff 15%, #fff8 15%, #fff8 20%, #fff 20%, #fff 35%, #fff8 35%, #fff8 40%, #fff 40%, #fff 55%, #fff8 55%, #fff8 60%, #fff 60%, #fff 75%, #fff8 75%, #fff8 80%, #fff 80%, #fff 95%, #fff8 95%, #fff8 100%, #fff 100%); */
    /* mask:  linear-gradient(0deg, #fff 2%, #fff 16.6%, #fff8 18.6%, #fff8 25%, #fff 27%, #fff 41.6%, #fff8 43.6%, #fff8 50%, #fff 52%, #fff 66.6%, #fff8 68.6%, #fff8 75%, #fff 77%, #fff 91.6%, #fff8 93.6%, #fff8 100%); */
    color: var(--text-color);
    text-shadow: var(--text-color) 0px 0px 0.3em, var(--text-color) 0px 0px 3em;
    /* background: linear-gradient(0deg, var(--back-color) 15%, transparent 16%, transparent 19%, var(--back-color) 20%, var(--back-color) 35%, transparent 36%, transparent 39%, var(--back-color) 40%, var(--back-color) 55%, transparent 56%, transparent 59%, var(--back-color) 60%, var(--back-color) 75%, transparent 76%, transparent 79%, var(--back-color) 80%, var(--back-color) 95%, transparent 96%, transparent 99%, var(--back-color) 100%); */
    
    box-shadow: var(--back-color) 0 0 2em;
    /* filter:drop-shadow(0 0 3em var(--back-color)); */
    text-decoration-thickness: 1px;
    &::before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--back-color);
        z-index: -1;
        mask: url(./assets/screen-mask.webp);

    }
}

#root {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    white-space: pre;
    overflow: hidden;
    /* filter: blur(.6px); */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

#scroll {
    height: 100vh;
    margin-top: 0;
}

body::before {
    content: ' ';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./assets/screen-dirtiness.webp);
    /* background-size: 1024px 1024px; */
    background-size: 100% 100%;
    filter: blur(5px);
    opacity: 0.075;
    animation: overlay-appear 6s ease-in-out 1;
}

@keyframes overlay-appear {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.075;
    }
}

/*
@media (min-width: 500px) {
    #root {
        font-size: 20px;
        filter: blur(0.45px);
        font-variation-settings:
          "BLED" 10,
          "SCAN" -30;
    }
}
@media (min-width: 600px) {
    #root {
        font-size: 18px;
        filter: blur(0.3px);
        font-variation-settings:
          "BLED" 10,
          "SCAN" -23;
    }
}
@media (min-width: 800px) {
    #root {
        font-size: 16px;
        filter: blur(0.1px);
        font-variation-settings:
          "BLED" 0,
          "SCAN" -23;
    }
}*/