:root {
    --light-blue: #74b9ff;
    --blue: #0984e3;

    --light-purple: #a29bfe;
    --purple: #6c5ce7;
}

html {
    background: #fcfcfc;
}
html, body {
    font-family: 'MS PGothic', 'Courier New', monospace;
    color: #2d3436;
    font-size: 18px;
}

#main {
    max-width: 60rem;
    width: calc(100% - 0.5rem);
    margin: 0 auto;

    #header {
        border-top: 1px dashed var(--light-blue);
        border-left: 1px dashed var(--light-blue);
        border-right: 1px dashed var(--light-blue);
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        background: white;
        font-size: 22px;
        color: var(--blue);
    }

    #nav {
        padding: 0.25rem 0.5rem 1rem 0.5rem;
        border-bottom: 1px dashed var(--light-blue);
        background: white;
        border-left: 1px dashed var(--light-blue);
        border-right: 1px dashed var(--light-blue);
        display: flex;
        gap: 0.25rem;

        .link:not(:last-of-type):after {
            content: '|';
            margin-left: 0.25rem;
        }
    }

    #body {
        margin-top: 1rem;

        background: white;
        border: 1px dashed var(--light-blue);
        padding: 1rem;

        h2 {
            margin-bottom: 0.5rem;
        }
    }
}

h2 {
    font-size: 22px;
    padding: 0;
    margin: 0;
}

h3 {
    font-size: 1rem;
    margin: 0 0 1rem 0;
    padding: 0;
    font-weight: bold;
}

p {
    padding: 0;
    margin: 0;
    line-height: 1.5rem;
    padding-left: 2rem;
}

p:not(:last-child) {
    margin-bottom: 1rem;
}

li:not(:last-of-type) {
    margin-bottom: 1rem;
}

a {
    color: var(--blue);
    text-decoration: underline dotted;
}

.article {
    >h3:before {
        content: '«';
        padding-right: 0.5rem;
    }
    >h3:after {
        padding-left: 0.5rem;
        content: '»';
    }

    >h3 {
        margin-top: 1rem;
    }
}

pre {
    overflow-x: scroll;
    font-family: 'MS Gothic', 'Courier New', monospace;
    &.code {
        padding-left: 1rem;
        margin-left: 1rem;
        border-left: 1px solid grey;
    }
}

span.code {
    border: 1px dashed var(--blue);
    padding: 0.1rem 0.25rem;
}

span.comment {
    color: var(--blue);
}