/* 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;

    top: 0px;
    left: var(--safe-area-left);
    right: var(--safe-area-right);
    bottom: 0px;

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

    overflow: hidden;

    opacity: 0.4;
}

main {
    z-index: 2;
}

#background-wrapper div {
    content: "";

    position: absolute;
    top: -80px;
    left: -80px;
    right: -80px;
    bottom: -80px;

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

    filter: blur(40px);
}

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

    --color-1: hsl(188, 100%, 83%);
    --color-2: hsl(194, 72%, 56%);
    background-image: radial-gradient(var(--color-1), var(--color-2));
}

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

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

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

    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%);
}