@property --g1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --g2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 12%;
}

@property --g3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 32%;
}

@property --g4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%;
}

#welcome {
    --g1: 0%;
    --g2: 12%;
    --g3: 32%;
    --g4: 72%;
    background: radial-gradient(circle at top,
            var(--w6) 0%,
            var(--p6) var(--g1),
            var(--p4) var(--g2),
            var(--p2) var(--g3),
            var(--p1) var(--g4));
    background-color: var(--p1);
    position: sticky;
    top: 0;
    padding-top: 2rem;
    color: var(--w7);
    text-shadow: 0 0 16px var(--p1);

    transition:
        --g1 2s cubic-bezier(.19, 1, .22, 1),
        --g2 4s cubic-bezier(.19, 1, .22, 1),
        --g3 5s cubic-bezier(.19, 1, .22, 1),
        --g4 6s cubic-bezier(.19, 1, .22, 1);
}

#welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("/img/noise.png");
    background-repeat: repeat;
    opacity: 0.5;
    mix-blend-mode: soft-light;
    z-index: 1;
}

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

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

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

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