:root {
    color-scheme: dark light;
    --colour-text: light-dark(#444, #c9d1d9);
    --colour-code-comment: light-dark(#3d7b7b, #928374);
    --colour-code-comment-light: light-dark(#57adad, #c4b09b);
    --colour-code-primary: light-dark(#008000, #fb4934);
    --colour-code-background: light-dark(#f8f8f8, #282828);
    scroll-behavior: smooth;
}

body {
    font:
        18px/1.5 -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    color: var(--colour-text);
}

h1,
h2,
h3 {
    line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #0d1117;
    }
    a:link {
        color: #58a6ff;
    }
    a:visited {
        color: #8e96f0;
    }
}

.highlight pre {
    overflow-x: auto;
    padding: 7px 10px 10px 10px;
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 7px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;

    svg {
        display: block;
    }

    color: var(--colour-code-comment);
    :hover {
        color: var(--colour-code-comment-light);
    }
}

.code-container {
    position: relative;
}

code {
    padding: 0.125rem 0.25rem;
    background-color: var(--colour-code-background);
}

.lower-anchor {
    position: absolute;
    visibility: hidden;
    transform: translateY(-140px);
}