CT/src/base.css

/* Animation */
#home-page,
#home-page #chat-section,
#chat-page,
#chat-page #main > div {
    animation: slide-up var(--animation-duration) ease;
}

/* Gradient */
#background-wrapper {
    position: fixed;

    inset: 0px;
    transform: scale(1.2);

    z-index: 1;
    pointer-events: none;

    overflow: hidden;

    opacity: 0.4;
    filter: blur(40px);
}

main {
    z-index: 2;
}

#background-wrapper div {
    content: "";

    position: absolute;
    inset: 0px;

    z-index: -1;
    pointer-events: none;
}

#background-wrapper #sky {
    left: -100%;
    bottom: -50%;

    background-image: radial-gradient(var(--sky-1), var(--sky-2));
}

body {
    transition:
        --sky-1 1s,
        --sky-2 5s;
}

#background-wrapper #grass-1 {
    --color-1: hsl(150, 60%, 30%);
    --color-2: hsl(150, 60%, 25%);

    filter: var(--backdrop-grass-filter);
    opacity: 0.7;

    background-image: linear-gradient(
        350deg,
        var(--color-1),
        var(--color-2) 30%,
        transparent 40%
    );
}

#background-wrapper #grass-2 {
    --color-1: hsl(110, 60%, 40%);
    --color-2: hsl(110, 60%, 35%);

    filter: var(--backdrop-grass-filter);
    opacity: 0.7;

    background-image: linear-gradient(
        9deg,
        var(--color-1),
        var(--color-2) 30%,
        transparent 35%
    );
}

body[theme="dark"] #background-wrapper {
    opacity: 0.5;
}

body[theme="dark"] #background-wrapper #sky {
    --color-1: hsl(188, 100%, 30%);
    --color-2: hsl(194, 72%, 24%);
}

body[theme="dark"] #background-wrapper #grass-1 {
    --color-1: hsl(120, 30%, 30%);
    --color-2: hsl(120, 30%, 24%);
}

body[theme="dark"] #background-wrapper #grass-2 {
    --color-1: hsl(110, 60%, 30%);
    --color-2: hsl(110, 50%, 24%);
}

/* Zoom */
.zoom {
    display: flex;
    align-items: start;
    gap: var(--large-gap);

    width: auto;
    height: auto;

    transform-origin: center;

    padding: var(--content-padding);
}