:root {
    --line-height: 1.5;
    --gray: #d0d0d0;
}

html {
    font-size: 16px;
    box-sizing: border-box;
}

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

body {
    font: 1rem/var(--line-height) sans-serif;
    background: #fdfdfd;
    color: #222;
    margin: 0;
    -webkit-text-size-adjust: none;
}

a {
    color: #3949AB;
    text-decoration-color: var(--gray);
}
a:hover { text-decoration-color: #999; }

q { quotes: "“" "”" "‘" "’"; }
html[lang=sv] q { quotes: "»" "«" "’" "’"; }
q:before { content: open-quote; }
q:after { content: close-quote; }

/** Semantic elements */

em em, i em { font-style: normal; }

pre, code, kbd {
    font-size: 85%;
    font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
}
code {
    //background: #dfdfdf;
    line-height: 1;
    margin: 0 1px;
    word-spacing: -3px;
}

pre i {
    color: gray;
    font-style: normal;
}

@media screen and (max-width: 600px) {
    pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

blockquote {
    font-style: italic;
}
blockquote p {
    margin: 0.5em 0;
    font-family: Georgia, serif;
}
blockquote em, blockquote i { font-style: normal; }

small {
    display: inline-block; /* for correct line-height */
}

/** Presentational elements */

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid var(--gray);
    margin-top: 1em;
}

/** Lists */

ul {
    list-style-type: "→  ";
}

ol, ul { margin-top: 3px; }
li { margin-bottom: 3px; }

/* Extra elements */

.small-note {
    background: hsl(56, 86%, 76%);
    text-align: center;
    padding: 0.7em 1em;
}
.small-note > * { margin: 0; }

.note {
    border: 1px solid var(--gray);
    padding: 0.8em 1.1em;
}
.note > *:first-child { margin-top: 0; }
.note > *:last-child { margin-bottom: 0; }
.note > p { margin: 0.4em 0; }