/* Global variables. */
:root,
::backdrop {
    /* Set sans-serif & mono fonts */
    --sans-font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
        "Nimbus Sans L", Roboto, "Noto Sans", Arial, Helvetica,
        "Helvetica Neue", sans-serif;
    --serif-font: "Source Serif 4", serif;
    --mono-font: "Cascadia Mono", Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --standard-border-radius: 5px;

    /* Dark theme */
    color-scheme: dark;

    /*   0   0  13    33  33  33 */
    /* 231  26  21    40  42  54 */
    --bg: #212121;
    --bg: #282a36;
    /*   0   0  17    43  43  43 */
    /* 230  26  27    52  55  70 */
    --accent-bg: #2b2b2b;
    --accent-bg: #343746;
    /*   0   0  86   220 220 220 */
    /*  60   2  97   248 248 242 */
    --text: #dcdcdc;
    --text: #f8f8f2;
    /*   0   0  67   171 171 171 */
    --text-light: #ababab;

    /* 229  16  64   137 142 154 */
    /* 232  24  35    68  71  90 */
    --border: #898EA4;
    --border: #44475a;

    /*  42 100 100   255 179   0 */
    /* 225  40  64    98 114 164 */
    --accent: #6272a4;
    /*  42  40 100   255 224 153 */
    /* 265  41  98   189 147 249 */
    --accent-hover: #ffe099;
    --accent-hover: #bd93f9;
    /*  */
    --accent-text: var(--bg);
    /* 340  59  94   240  98 146 */
    --code: #f06292;
    /*   0   0  80   204 204 204 */
    --preformatted: #cccccc;

    /*  50  80 100   255 221  51 */
    --marked: #ffdd33;

    /*   0   0   7    17  17  17 */
    --disabled: #111111;
}

html {
    font-family: var(--serif-font);
    font-optical-sizing: none;
}

body {
    font-size: 3em;
    grid-template-columns: 1fr auto 1fr;
}

body>header h1 {
    font-family: "Segoe UI Variable Display";
    font-size: 3.5rem;
    font-weight: 350;
}

form {
    font-family: var(--sans-font);
}

button,
.button,
a.button,
/* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"],
label[type="button"] {
    padding: 0.2rem 1.5rem;
}

/* Add a bit of transparency so light media isn't so glaring in dark mode */
img,
video {
    opacity: 0.8;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.saved {
    color: rgb(80 250 123);
}