@layer page {
    #credits-contributors--intro {
        background: black;
    }

    #credits-contributors--amethyst {
        background: radial-gradient(circle at top left, rgba(40, 7, 112, 0.5), transparent 40%), radial-gradient(circle at bottom right, rgba(40, 7, 112, 0.5), transparent 40%), linear-gradient(to bottom, rgba(40, 7, 112, 0.25) 0%, black 40%, black 60%, rgba(40, 7, 112, 0.25) 100%), black;
    }

    #credits-contributors--jade {
        background: radial-gradient(circle at top left, rgba(9, 82, 95, 0.5), transparent 40%), linear-gradient(to right, rgba(9, 82, 95, 0.25) 0%, black 40%, black 60%, rgba(9, 82, 95, 0.25) 100%), black;
    }

    .contributors {
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 4em;

        padding: 2em;
        width: 100%;
    }

    .contributors .contributor {
        display: flex;
        gap: 2em;

        padding: 2em;

        background: rgba(255, 255, 255, 0.03);
        border: 2px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;

        backdrop-filter: blur(4px);

        transition: 0.2s ease;
    }

    .contributors .contributor:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 20px rgba(255, 255, 255, 0.025);
    }

    .contributors .description h1 {
        margin-bottom: 0.25em;
        font-size: 2em;
    }

    .roles {
        opacity: 0.65;

        font-size: 0.8em;
        letter-spacing: 0.05em;

        margin-bottom: 1em;
    }

    .quote {
        margin-top: 1em;
        width: fit-content;

        padding: 0.5em;
        padding-left: 1em;

        opacity: 0.75;
    }

    #credits-contributors--amethyst .quote {
        border-left: 5px solid rgb(150, 100, 255);
        background: rgba(150, 100, 255, 0.25);
        box-shadow: 0 0 10px rgba(121, 61, 252, 0.25);
    }

    #credits-contributors--jade .quote {
        border-left: 5px solid rgb(100, 232, 255);
        background: rgba(100, 232, 255, 0.25);
        box-shadow: 0 0 10px rgba(100, 232, 255, 0.25);
    }

    .quote:before {
        content: '“';
    }

    .quote:after {
        content: '”';
        margin-top: 1em;
    }

    .contributors .contributor img {
        width: 7.5em;
        height: 7.5em;

        border-radius: 50%;

        flex-shrink: 0;
    }
}