/* Grid Layout */
body {
    display: grid;
}

/*
    For smaller screens, we don't show the table of contents
*/
@media(max-width: 72rem) {
    body {
        grid-template-areas:
            'header'
            'nav'
            'main'
            'footer'
        ;
        grid-template-rows: auto auto 1fr auto;
    }

    nav {
        /*
            Not only do we hide the table of contents, but we must set
            the width, height, and padding to 0 so it doesn't adversely
            affect the layout.
        */
        visibility: hidden;
        max-width: 0;
        max-height: 0;
        padding: 0 0 0 0;
    }
}

/*
    For larger screens, we show the table of contents on the right
*/
@media(min-width: 72rem) {
    body {
        grid-template-areas:
            'header header'
            'main nav'
            'footer footer'
        ;
        grid-template-columns: 1fr auto;
    }

    nav,
    nav>p,
    nav>h1 {
        border: unset;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

header {
    grid-area: header;
    border-bottom: 2px solid black;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

/* End Grid Layout */



/* Global styles */
html {
    font-family: sans-serif;
    font-size: 100%;
}

body {
    font-size: 1.25rem;
    line-height: 1.5em;
    background-color: #fdf2e3;
    background-image: linear-gradient(to right, #fdf2e3, #ffe3be);
}



/* Page Header Styles */
header {
    border-bottom: 2px solid black;
}



/* Page footer styles */
footer {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    text-align: center;
    padding: 1rem 0 1rem 0;
}


/* Table of Contents */
nav {
    background-color: #f7dcca;
    border-style: solid;
    border-color: #c7af91;
    border-width: 0 1px 0 1px;
}

.toc_title {
    text-align: revert;
}

.toc_h1 {
    line-height: normal;
}

.toc_h2 {
    line-height: normal;
    padding-left: 0.75em;
}

.toc_h3 {
    line-height: normal;
    padding-left: 1.5em;
}



/* Main article styles */
main {
    grid-area: main;
    word-wrap: break-word;
    padding: 0 1.25rem 0 1.25rem;
}

article {
    margin-left: auto;
    margin-right: auto;
    max-width: 55rem;
    word-wrap: break-word;
    padding: 0 1.25rem 1.25rem 1.25rem;
}



/* Headings */
article section h1:first-child,
nav h1:first-child {
    /*
        Tweak for first heading in article and TOC heading so they line up
    */
    margin-top: 1rem;
}

h1 {
    margin-top: 1.0em;
    text-align: center;
    font-size: 1.5em;
    /* 30px / 20px(page font size) = 1.5em */
    line-height: 1.0em;
    /* 30px / 30px = 1.0em */
}

h2 {
    margin-top: 1.0em;
    text-align: center;
    font-size: 1.375em;
    /* 27.5px / 20px = 1.375em */
    line-height: 1.0909em;
    /* 30px / 27.5px = 1.0909em (ratio to h1 line height) */
}

h3 {
    margin-top: 1.0em;
    text-align: center;
    font-size: 1.25em;
    line-height: 1.2em;
}

h4 {
    margin-top: 1.0em;
    font-size: 1.125em;
    line-height: 1.333em;
    font-style: italic;
}



/* Titles */
.title {
    font-size: 1.6em;
    margin-bottom: 1.0em;
    text-align: center;
}

.subtitle {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: .5em;
}



/* Sections */
article section:first-child {
    /*
        Hide overline from the first section as the underline of the header
        suffices.
    */
    border-top: none;
}

section {
    border-top: 2px solid black;
}

section>section {
    border-top: 2px dashed darkgray;
}

section>section>section {
    border-top: 2px dotted darkgray;
}

aside {
    border: 1px dashed black;
    border-radius: 6px;
    padding: 0.5em 1.0em 0.5em 1.0em;
}

aside>p {
    font-style: italic;
}

.quote {
    margin-left: 6em;
    margin-right: 8em;
    font-family: serif;
}

span.emphasis {
    font-style: italic;
}

span.strong {
    font-weight: bold;
}

span.keyword {
    color: blue;
}

span.usertype {
    color: #2791af;
}

span.string {
    color: #a31515;
}

span.comment {
    color: #008000;
}

.bad::after {
    color: red;
    font-size: 120%;
    content: " \00274c";
}

.good::after {
    color: green;
    font-size: 160%;
    content: " \2714\fe0f";
}

.indent1 {
    padding-left: 2rem;
}

.indent2 {
    padding-left: 4rem;
}

.indent3 {
    padding-left: 6rem;
}

.indent4 {
    padding-left: 8rem;
}

div.code {
    font-family: monospace;
    font-size: 11pt;
    line-height: 100%;
}


div.dialog {
    margin-left: 1em;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    margin-right: 0;
    font-size: 90%;
    border: 1px solid black;
    border-radius: 6px;
    padding: 0.0em 0.5em 0.0em 0.5em;
}

div.sla {
    margin-left: 1em;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    font-size: 90%;
    border: 1px solid black;
    border-radius: 6px;
    padding: 0.0em 0.5em 0.0em 0.5em;
}

div.example {
    border: 1px solid black;
    border-radius: 6px 6px;
    padding: 0.5em 1.0em 0.5em 1.0em;
}

.question {
    font-style: italic;
}

pre {
    font-size: 80%;
    line-height: 1.2em;
}



/* Tables */
thead {
    font-weight: bold;
    background-color: lightgray;
}

tbody.proglang td {
    background-color: white;
    padding: .4em .4em .4em .4em;
}

td.year {
    font-family: monospace;
    font-size: larger;
}



/* Footnotes */
.footnotes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem;
    line-height: 110%;
}

.footnoteheader {
    grid-column: span 2;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 110%;
}

.footnotenumber {
    font-size: 60%;
    font-style: italic;
}

.footnotebody {
    font-size: 80%;
}

.Footnote_20_anchor {
    font-size: .7rem;
    vertical-align: super;
}

span.Footnote_20_anchor a {
    color: blue;
    font-weight: bold;
}