* {
    font-family: georgia, serif;
}

body {
    font-size:14pt;
    color: #555;
    background-color: #f9f9f9;
}

.container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: 100vh;
    margin: 0;
    width:100vw;
    height: 100vh;
    overflow:hidden;
}

#X {
    z-index:1;
    margin-left:50px;
    margin-top:60px;
    font-size:48pt;
    line-height:0;
}

#X a {
    color:#aaa;
    text-decoration:none;
    cursor:crosshair;
}

main {
    grid-row: 1;
    grid-column: 1;
    overflow:auto;
}

.content {
padding:15vh 6vw 17.5vh 6vw;
}

main h1 {
    font-size:96pt;
    margin: 0 0 0.3em 0;
    text-indent: 1.1em;
    line-height:1em;
    font-family: 'Italianno', georgia;
    color: #bbb;
}

main h1:before {
    content: "\2018";
    display:inline;
    position:relative;
    top:5pt;
    padding-right: 0.25em;
}

main h1:after {
    content: "\2019";
    display:inline;
    position:relative;
    top:5pt;
    padding-left: 0.25em;
}

#about h1 {text-indent: 1.25em;}
#about h1:before {content:none;}
#about h1:after {content:none;}
#about {margin-bottom:-15vh;}

h2 {
    font-size:48pt;
    margin: 0.8em 0 0 0;
    text-indent: 1.75em;
    line-height:0.8em;
    font-family: 'Italianno', georgia;
    color: #bbb;
}

h3 {
    text-indent:5em;
    color: #999;
    font-size:20pt;
    font-weight: normal;
    letter-spacing:0.04em;
    margin:2.5em 0;
}

#about_warning {
    display:inline;
    font-size:28pt;
margin:0 0.1em 0.05em 0;
}
    
main p {
    text-indent: 2em;
    line-height: 2.5em;
    word-spacing:0.05em;
}

#scriptformat h2 {
    font-family: "courier new", monospace;
    font-size:28pt;
    text-decoration: underline;
    margin: 1.8em 0 1.2em 3em;
}

#scriptformat p {
    font-family: "courier new", monospace;
    text-indent: 0;
    margin-top:1.5em;}

#scriptformat blockquote {
    font-family: "courier new", monospace;
    line-height: 2.5em;
    margin-left: 3em;}

.controls {
    margin:2.5em 3.5em 1.5em 1.5em;
    padding: 10px;
    background-color: #fdfdfd;
    color:#666;
    font-size:16pt;
    font-variant: small-caps;
}

.controls a {
    color: #888;
    font-size:14pt;
font-variant:normal;
font-weight: bold;
letter-spacing: initial;
}

ul {
    list-style-type:none;
    line-height:1.75em;
    margin-left:0.75em;
    text-indent:-0.75em;
}

li {margin-top:0.75em;}

aside {
    grid-row: 1;
    grid-column: 2;
    overflow: hidden;
    /* margin-right:0;
    border-left: 1px solid #b0b0b0; */
    /* max-height: 100%; */
}

.scrollContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    height: 98vh;
    padding: 1vh 0;
}

aside .button {
    padding: 5px 15px;
    border: 1px solid #f9f9f9;
    color: #555;
    cursor: crosshair;
    font-style: italic;
    opacity: 0.6;
    transition: 0.8s;

    /* display: flex; */
    /* align-items: center; */
}

aside .button:hover, aside .button.active {
    opacity: 1;
    background: white;
}

aside .icons {font-style: normal;}

aside .subtitles {
    padding-top:0.1em;
    font-size:13pt;
    font-variant:small-caps;
    font-weight: bold;
    color:#907700;
}

/* Sidebar narrows at narrower resolutions.
Kinda fucked when screen gets super-thin; solution there might have to turn into a classic collapsible mobile menu. */

@media screen and (max-aspect-ratio: 5/4) {
    aside {
        font-size:12pt;
    }
    main h1 {
        text-indent: 0em;
        text-align:center;
    }
    #about h1 {text-indent: 0em;}
    .controls {margin:2.5em 2.5em 5em 1.5em;}
}

@media screen and (max-aspect-ratio: 1/1) {
    .container {
        grid-template-columns: 1fr 30vw;
    }
}