html {
    --background: radial-gradient(circle at right, lch(75.38 48.28 54.85), lch(78.41 34.41 22.79));
    --text-color: #122333;
    --text-color-secondary: #6a4d3b;
    --button-color: #ffd6d6;
    --dust-color: rgb(246 177 165 / 0.52);
    --keyword-gradient: linear-gradient(to right, lch(34% 60 19), lch(34% 80 309));
}

html.green {
    --background: radial-gradient(circle at right, lch(76.39% 80.18 132.97), lch(92.09% 50.23 136.6));
    --text-color: #122333;
    --text-color-secondary: #6a4d3b;
    --button-color: #d6ffe0;
    --dust-color: rgb(143 241 128 / 0.36);
    --keyword-gradient: linear-gradient(to right, lch(36.88% 54.87 133.56), lch(31.16% 44.57 124.57));
}

html.cyan {
    --background: radial-gradient(circle at right, lch(74.33% 38.06 249.76), lch(94.22% 29.72 177.95));
    --text-color: #122333;
    --text-color-secondary: #7c5c27;
    --button-color: #d6fff9;
    --dust-color: rgb(150 251 233 / 0.33);
    --keyword-gradient: linear-gradient(to right, lch(28.21% 117 302.22), lch(37.76% 113.51 308.3));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "DM Mono", monospace;
}

canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
}

html {
    color: var(--text-color);
    overflow-x: hidden;
    overflow-y: scroll;
}

h1 {
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5rem;
}

p {
    font-weight: 400;
}

body {
    background: var(--background);
}

div#slide {
    position: relative;
    width: 100vw;
    height: 100vh;
}

span.keyword {
    background: var(--keyword-gradient);
    font-weight: 500;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

button.action {
    position: absolute;
    z-index: 1;
    top: 50%;
    background: var(--button-color);
    border: none;
    display: inline-flex;

    align-items: center;
    width: 4rem;
    height: 4rem;
    padding: 0.5rem;
    border-radius: 50%;

    &#prev {
        left: 0;
        transform: translate(-50%, -50%);
        justify-content: flex-end;
    }
    &#next {
        right: 0;
        transform: translate(50%, -50%);
        justify-content: flex-start;
    }
}

div.debug.action {
    position: absolute;
    inset: 0 0 auto 0;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.875rem;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    background: rgb(218 248 242 / 0.18);
    gap: 2rem;

    & > button {
        background: rgb(218 248 242 / 0.18);
        padding: 0.25rem 0.875rem;
        border: 1px solid color-mix(var(--text-color) 40%, transparent 60%);
        border-radius: 4px;
    }
}

p.subtitle {
    color: var(--text-color-secondary);
    font-size: 0.85rem;
}

@media screen and (max-width: 800px) {
    body {
        display: grid;
        grid-template-rows: 1fr auto auto;
        grid-template-columns: 1fr 1fr;
        height: 100vh;
    }

    h1 {
        line-height: 2rem;
    }

    div#slide {
        grid-column: 1 / -1;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    button.action {
        position: initial;
        align-self: center;
        justify-self: center;
        transform: none !important;
        justify-content: center !important;
        margin: 0.5rem 10%;

        &#prev { justify-self: flex-start; }
        &#next { justify-self: flex-end; }
    }

    div.debug.action {
        position: relative;
        grid-row: 3;
        grid-column: 1 / -1;
    }
}