html, body {
    margin: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

body {
    background-color: #CCC4C4;
    margin: 12px;
}

::selection {
    background: rgb(0, 255, 13, 0.5); /* WebKit/Blink Browsers */
}
  ::-moz-selection {
    background: rgb(0, 255, 13, 0.5); /* Gecko Browsers */
}

/* .drag {
    position:absolute;
    left: 12px;
    top: 12px;
} */

#draggable {
    display:flex;

    position: fixed;
  }

.no-select {
    user-select: none;
  }

.vid {
    mix-blend-mode: difference;
    cursor: grab;
    margin-bottom: 18px;
    width: 700px;
}

.vid video {
    width: 100%;
    /* background-color: black; */
    border-radius: 8px;
    box-shadow: 0px 10px 40px rgb(0, 0, 0, 0.4);
    transition: ease-out .1s;
}

.vid video:hover {
    box-shadow: 0px 20px 40px rgb(0, 0, 0, 0.3);
    width: 710px;
    transition: ease-out .1s;
}

.vid video:active {
    box-shadow: 0px 30px 60px rgb(0, 0, 0, 0.5);
    width: 730px;
    cursor: grabbing;
}

.glob {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 80vh;
    max-width: 80vh;
    border-radius: 1000px;
    /* background-color: pink; */
    z-index: 300;
    mix-blend-mode: difference;
    pointer-events:none;
    /* filter: grayscale(20%); */
}

/* section {
    width: 1000px;
    height: 1000px;
  } */
  
  /* canvas {
    vertical-align: bottom;
  } */

.glob img {
    mix-blend-mode: difference;
    z-index: -2;
    pointer-events:none;
}

.glob-overlay {
    mix-blend-mode: saturation;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 80vh;
    min-width: 80vh;
    z-index: 400;
    border-radius: 1000px;
    background-color: rgba(146, 7, 253, 0.5);
    pointer-events:none;
}

.glob-underlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 80vh;
    min-width: 80vh;
    /* z-index: -3; */
    border-radius: 1000px;
    background-color: #CCC4C4;
    z-index: -5;
    pointer-events:none;
}


.links {
    font-family: NeueMontreal-Regular;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: black;   
    width: 100px;
    z-index: 999999;
    margin-top: 414px;
}

/* a {
    background-color: rgb(0, 255, 13, 0.5);
} */

.links a {
    -webkit-user-drag: none;
}

a:visited {
    color: black;
}

a:hover {
    color: rgb(0, 255, 13);
}

.bio {
    position: fixed;
    left: 12px;
    bottom: 12px;
    margin: 0;
    width: 535px;
    max-width: calc(100vw - 24px);
    font-family: NeueMontreal-Regular;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #6b6666;
    z-index: 999999;
}

.wordmark {
    position: absolute;
    right: 20px;
    bottom: 20px;
    pointer-events:none;
    
}

.wordmark svg {
    height: 80vh;
    mix-blend-mode: difference;
    pointer-events:none;
    filter: brightness(0.1)
}


@media only screen and (max-width: 768px) {
    html, body {
        width: 100px!important;
    }

    /* globe is wider than a phone; pin it to the screen so it doesn't stretch the page */
    .glob, .glob-overlay, .glob-underlay {
        position: fixed;
    }

    /* a little smaller on phones (desktop is 80vh) */
    .glob {
        max-height: 78vh;
        max-width: 78vh;
    }

    .glob-overlay, .glob-underlay {
        min-height: 78vh;
        min-width: 78vh;
    }

    /* one screen, no scrolling; one finger draws or drags, pinch still zooms */
    html, body {
        height: 100%;
        overflow: hidden;
        touch-action: pinch-zoom;
    }

    /* fixed width so dragging doesn't stretch the window */
    #draggable {
        touch-action: none;
        width: calc(100vw - 24px);
    }

    .bio {
        display: none;
    }

    /* links in a row along the bottom, clear of the home bar */
    .links {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(2px + env(safe-area-inset-bottom));
        width: auto;
        margin-top: 0;
        flex-direction: row;
        justify-content: space-between;
        font-size: 14px;
    }

    .vid {
        display:flex;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        justify-content: center;
    }
    
    .vid video {
        width: 100%;
        /* background-color: black; */
        border-radius: 8px;
        box-shadow: 0px 10px 40px rgb(0, 0, 0, 0.4);
        transition: ease-out .1s;
    } 

    .vid video:hover {
        width: 100%;
    }
    
    .vid video:active {
        width: 103%;
    }
}
.cursor-trail {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 1000000;
}

.cursor-tag {
    position: fixed;
    left: 0;
    top: 0;
    font-family: NeueMontreal-Regular;
    font-size: 12px;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 1000001;
    opacity: 0;
    transition: opacity .4s ease-out;
}

.cursor-tag svg {
    width: 10px;
    height: 10px;
    margin-left: 4px;
    vertical-align: -0.5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cursor-tag.show {
    opacity: 1;
    transition: none;
    animation: tag-pop .25s ease-out;
}

@keyframes tag-pop {
    from { opacity: 0; filter: blur(4px); letter-spacing: 0.4em; }
    to   { opacity: 1; filter: blur(0); letter-spacing: 0.04em; }
}

.noise {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: hard-light;
    opacity: 0.025;
    z-index: 1000002;
}

.invert {
    position: fixed;
    inset: 0;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 1000003;
    display: none;
}

.invert.on {
    display: block;
}

.marker {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* ink drawn solid, the whole layer screened at partial opacity
       so overlapping segments don't bead up */
    mix-blend-mode: screen;
    opacity: 0.8;
    z-index: 999999;
}

/* hide the "Powered by Netlify" badge Netlify injects */
#nl-badge-frame {
    display: none !important;
}

/* globe layers fade in together once the video has its first frame */
.glob, .glob-overlay, .glob-underlay {
    opacity: 0;
    transition: opacity .6s ease-out;
}

.globe-ready .glob,
.globe-ready .glob-overlay,
.globe-ready .glob-underlay {
    opacity: 1;
}

/* skull window fades in once its video has a frame */
#draggable {
    opacity: 0;
    transition: opacity .6s ease-out;
}

.skull-ready #draggable {
    opacity: 1;
}

/* typewriter: untyped text keeps its space but is invisible */
.tw-rest {
    visibility: hidden;
}

/* plain inline + zero width: no layout and no extra line-break opportunity
   (an inline-block cursor let lines wrap at the cursor) */
.tw-cursor {
    position: relative;
}

.tw-cursor::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 0.1em;
    width: 0.55em;
    height: 1em;
    background: currentColor;
}

/* stripe.dev-style trail: the newest characters are solid cells (same colour as
   the text, so the letters are hidden inside), and the one leaving the trail fades
   its cell away fast to reveal the letter. each cell is cap-height-ish with a hairline
   gap on the right, drawn as a background so it never changes the text's width */
@property --tw-block {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

.tw-trail span,
.tw-fade {
    background-image: linear-gradient(var(--tw-block), var(--tw-block));
    background-repeat: no-repeat;
    background-size: calc(100% - 1px) 0.82em;
    background-position: 0 58%;
}

.tw-trail span {
    --tw-block: currentColor;
}

.tw-fade {
    animation: tw-fade 40ms ease-in forwards;
}

@keyframes tw-fade {
    from { --tw-block: currentColor; }
    to   { --tw-block: transparent; }
}

.tw-cursor.blink::after {
    animation: tw-blink 1s steps(1) infinite;
}

@keyframes tw-blink {
    50% { opacity: 0; }
}