#webgl {
    position: fixed;
    top: 0;
    left: 0;
    font-family: 'Poppins', sans-serif;
    z-index: -1;
}
main {
    position: relative;
    min-height: 100lvh;
    padding: 30px;
}
.title {
    --textC: #ff0000;
    --shadowC: #ffec3d;
    --blend: exclusion;
    --textC2: #8cd2bd;
    --shadowC2: #5f0000;
    --blend2: multiply;
    &.mode1 {
        --textC: #b95a1f;
        --shadowC: #ff4bce;
        --blend: color-dodge;
        --textC2: #e6ff00;
        --shadowC2: #5f0503;
        --blend2: color-dodge;
    }
    &.mode2 {
        --textC: #f9001d;
        --shadowC: #92ffda;
        --blend: lighten;
        --textC2: #4d4d4c;
        --shadowC2: #3effef;
        --blend2: hard-light;
    }
    &.mode3 {
        --textC: #fdff56;
        --shadowC: #ff00e6;
        --blend: difference;
        --textC2: #bbb5b2;
        --shadowC2: #00ffb4;
        --blend2: plus-lighter;
    }
}

_::-webkit-full-page-media,
_:future,
:root .title {
    --textC: #ff4f9c;
    --shadowC: #ffec3d;
    --blend: normal;
    --textC2: #d28cb1;
    --shadowC2: #005860;
    --blend2: multiply;
    &.mode1 {
        --textC: #c2b34e;
        --shadowC: #850b63;
        --blend: color-dodge;
        --textC2: #4a4f1b;
        --shadowC2: #ff01de;
    }
    &.mode2 {
        --textC: #f44141;
        --shadowC: #92ffda;
        --blend: lighten;
        --textC2: #038486;
        --shadowC2: #3effef;
    }
    &.mode3 {
        --textC: #7f1ea4;
        --shadowC: #ff0020;
        --blend: multiply;
        --textC2: #3dfff0;
        --shadowC2: #00e0cf;
    }
}

.title > h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Lobster', cursive;
    font-size: 10rem;
    color: var(--textC);
    text-shadow: 2px 2px 2px var(--shadowC);
    mix-blend-mode: var(--blend);
    z-index: 5;
}
.title > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Lobster', cursive;
    font-size: 10rem;
    color: var(--textC2);
    text-shadow: 3px 3px 10px var(--shadowC2);
    mix-blend-mode: var(--blend2);
    opacity: 0.8;
}

.frame {
    --frameW: 20px;
    position: fixed;
    inset: 0;
    background: #fff;
    mix-blend-mode: soft-light;
    z-index: -1;
    opacity: 0.5;
}

.frame--1 {
    clip-path: polygon(
        0% 0%,
        0% 100%,
        var(--frameW) 100%,
        var(--frameW) var(--frameW),
        calc(100% - var(--frameW)) var(--frameW),
        calc(100% - var(--frameW)) calc(100% - var(--frameW)),
        var(--frameW) calc(100% - var(--frameW)),
        var(--frameW) 100%,
        100% 100%,
        100% 0px
    );
}
.frame--2 {
    clip-path: polygon(
        0% 0%,
        0% 100%,
        calc(var(--frameW) * 2) 100%,
        calc(var(--frameW) * 2) calc(var(--frameW) * 2),
        calc(100% - var(--frameW) * 2) calc(var(--frameW) * 2),
        calc(100% - var(--frameW) * 2) calc(100% - var(--frameW) * 2),
        calc(var(--frameW) * 2) calc(100% - var(--frameW) * 2),
        calc(var(--frameW) * 2) 100%,
        100% 100%,
        100% 0px
    );
}
.frame--3 {
    clip-path: polygon(
        0% 0%,
        0% 100%,
        calc(var(--frameW) * 3) 100%,
        calc(var(--frameW) * 3) calc(var(--frameW) * 3),
        calc(100% - var(--frameW) * 3) calc(var(--frameW) * 3),
        calc(100% - var(--frameW) * 3) calc(100% - var(--frameW) * 3),
        calc(var(--frameW) * 3) calc(100% - var(--frameW) * 3),
        calc(var(--frameW) * 3) 100%,
        100% 100%,
        100% 0px
    );
}
.frame--4 {
    background: #9b9b9b;
    mix-blend-mode: overlay;
    clip-path: polygon(
        0% 0%,
        0% 100%,
        calc(var(--frameW) * 4) 100%,
        calc(var(--frameW) * 4) calc(var(--frameW) * 4),
        calc(100% - var(--frameW) * 4) calc(var(--frameW) * 4),
        calc(100% - var(--frameW) * 4) calc(100% - var(--frameW) * 4),
        calc(var(--frameW) * 4) calc(100% - var(--frameW) * 4),
        calc(var(--frameW) * 4) 100%,
        100% 100%,
        100% 0px
    );
}
@media screen and (max-width: 560px) {
    .frame {
        --frameW: 8px;
    }
}

.tp-dfwv {
    /* top: 8% !important; */
}