@layer reset {
    /* taken piecemeal from:
  https://www.joshwcomeau.com/css/custom-css-reset/
  https://piccalil.li/blog/a-more-modern-css-reset/
 */

    *, *::before, *::after {
        box-sizing: border-box;
    }

    *:not(dialog) {
        margin: 0;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
                     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
                     sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Prevent font size inflation */
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
    }

    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }
}

:root {
    --slate: rgb(5.38% 8.67% 13.57%);
    --green: #00ad84; // lch(62.5 58.97 150.794785)
    font-size: 16px;
}

body {
    background: var(--slate);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2em;
}

a:link {
    text-decoration: none;
    color: var(--green);
}

h1 {
    font-size: calc(1.5 * 1.5 * 1rem);
    margin-block-start: 0.5em;
    margin-block-end: 1em;
}