:root {
    --blendMode: normal;
}

html,
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

body {
}

main {
    background-image: linear-gradient(in oklab, red, yellow, pink, green, purple, orange, blue);
    height: 1000vh;
    &:before {
        background-image: linear-gradient(in oklab, black, transparent, transparent, transparent, black);
        content: '';
        display: block;
        height: 100vh;
        inset: 0;
        mix-blend-mode: var(--blendMode);
        position: fixed;
    }
    controls {
        background: #FFF5;
        backdrop-filter: blur(100px);
        bottom: 0;
        padding: 24px;
        position: fixed;
        width: 100%;
        p,
        li {
            max-width: 60ch;
        }
        p {
            margin: 0;
            padding: 0;
        }
        ul {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            list-style-type: none;
            margin: 16px 0;
            padding: 16px 0;
        }
        footer {
        }
    }
}