#welcome {
    background-color: var(--w2);
    position: sticky;
    padding-top: 2rem;
    top: 0;
    z-index: 0;

    & .fluid-text {
        filter: url(#fluid-distort);
        text-shadow: 0 0 16px var(--p1);
    }

    & canvas {
        pointer-events: none;
    }
}

#test {
    background-color: var(--w2);
    position: relative;
    z-index: 1;
}

#about {
    background-color: var(--w1);
    position: relative;
    z-index: 1;

    & img {
        width: 100%;
        mix-blend-mode: lighten;
    }

    & a {
        display: inline-block;
        color: var(--p4);
        text-decoration: underline;
        transition: all 0.3s ease;

        &:hover {
            color: var(--p6);
            transform: scale(1.1) rotate(3deg);
        }
    }
}

/*///////////////////////*/
/*//////// footer ///////*/
/*///////////////////////*/

footer {
    color: var(--p3);
    background-color: var(--w6);
}

.linkstuff {

    & img {
        border: 2px;
        border-style: solid;
        border-color: var(--p3);
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
            transform: scale(1.1) rotate(3deg);
        }
    }

    & a {
        color: var(--p3);
        font-size: 2.5em;
        transition: all 0.3s ease;

        &:hover {
            color: var(--p4);
            transform: scale(1.1) rotate(3deg);
        }
    }

    & p a {
        font-size: 1.25em;
    }
}