/***************************\
* CSS RESET                 *
\***************************/

/* Based on https://www.joshwcomeau.com/css/custom-css-reset/ */

/* Use a more-intuitive box-sizing model. */
*, *::before, *::after {
    box-sizing: border-box;
}
  
/* Remove default margin */
* {
    margin: 0;
}

/* Typographic tweaks: 3. Add accessible line-height 4. Improve text rendering */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* 6. Remove built-in form typography styles */
input, button, textarea, select {
    font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 8. Create a root stacking context ... is unused and removed */

/***************************\
* GENERIC COMPONENTS        *
\***************************/

html {
    background-color: #fffffc;
    color: #181808;
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: #141008;
    color: #e0e0d0;
  }
}

/* https://systemfontstack.com/ */
body, .font-sans {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", emoji;
}

body {
    padding: 1rem;
    margin: 0 auto;
    max-width: 800px;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1rem;
}

header h1 {
    color: #bbb;
    font-size: 1.25rem;
}

@media (prefers-color-scheme: dark) {
    header h1 {
        color: #686860;
    }
}

h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
    outline: 1px solid #acf;
}

@media (prefers-color-scheme: dark) {
    h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
        outline: 1px solid #248;
    }
}

a[href] {
    color: #26f;
    text-decoration: underline;
    text-decoration-color: #acf;
}

a[href]:hover, a[href]:focus {
    color: #13a;
    text-decoration-color: #13a;
}

@media (prefers-color-scheme: dark) {
    a[href] {
        color: #48f;
        text-decoration-color: #248;
    }

    a[href]:hover, a[href]:focus {
        color: #6af;
        text-decoration-color: #6af;
    }
}

a.header-anchor[href] {
    font-size: 0.67em;
    opacity: 25%;
}

a.header-anchor[href]:hover, a.header-anchor[href]:focus {
    opacity: 33%;
}

hr {
    margin: 1rem 0;
}

p, ul, ol {
    margin: 0.5rem 0;
}