* {
    max-width: 100%;
}

html {
    display: flex;
    justify-content: center;
    height: 100vh;
}

a {
    color: #e17676;
    text-decoration: none;
    font-style: italic;
}

a:hover {
    border-bottom: solid #e17676;
    border-width: 2px;
}


.frame {
    border: 2px solid;
    border-radius: 14px;
    padding: 15px 15px 0;
    z-index: 11;
    position: fixed;
    width: 86%;
    height: calc(100vh - 37px);
    top: 10px;
    max-width: 900px;
    pointer-events: none;
}

.overlay {
    width: 100%;
    height: 25px;
    position: fixed;
    z-index: 10;;
    left: 0;
    background-color: #fff5c2;
    background-image: url("./billie-holiday.png");

}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

body {
    background-color: #fff5c2;
    background-image: url("./billie-holiday.png");
    width: 90%;
    max-width: 900px;
    margin: 12px;
    position: relative;
}

h1 {
    font-weight: 400;
    font-size: 42px;
    text-transform: uppercase;
    font-style: italic;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
    text-align: center;
    line-height: normal;
    font-family: 'Playfair Display', serif;
    display: block;
    margin: 0 auto;
}

main {
    grid-area: main;
    overflow-y: auto;
    border-radius: 14px;
    margin-bottom: 60px;
    /* Padding, not margin: body is stretched to one screen height and main
       overflows it, so only padding adds scroll room below the fixed footer. */
    padding-bottom: 100px;
}

main > h1::before {
    border-top: 1px solid #2f2f2f;
    content: '';
    width: 100px;
    height: 7px;
    display: block;
    margin: 0 auto;
}

main > h1::after {
    border-bottom: 1px solid #2f2f2f;
    content: '';
    width: 100px;
    height: 10px;
    display: block;
    margin: 0 auto;
}


header > h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 3em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: solid;
    padding-bottom: 12px;
    font-style: normal;
}

header {
    grid-area: header;
    margin-bottom: 15px;
    border-bottom: solid;
}

.subhead {
    display: flex;
    padding: 4px 12%;
}

.subhead > .item {
    display: flex;
    width: 100%;
    justify-content: center;
    border-radius: 12px 12px 0 0;
    padding-left: 6%;
    padding-right: 6%;
    cursor: pointer;
}


footer {
    text-align: right;
    font-size: smaller;
    position: fixed;
    bottom: 12px;
    width: 90%;
    background-color: #fff5c2;
    background-image: url("./billie-holiday.png");
    height: 52px;
    max-width: 900px;
}

footer > p {
    margin: 0;
    padding: 0;
}



#scroll-hook {
    width: 0;
    height: 0;
    bottom: 0;
    position: absolute;
}

ul {
    list-style-type: disclosure-closed;
}

figure {
    display: grid;
    border: 2px solid;
    border-radius: 14px;
    justify-items: center;
}

figcaption {
    background: #ffffff78;
    width: 100%;
    justify-content: center;
    text-align: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: 2px double;
}

code:not(.sourceCode) {
    background: #ffffff78;
    border-radius: 15px 0 15px 0;
}

a.sourceLine {
    display: inline-block;
    line-height: 1.25;
}

a.sourceLine {
    pointer-events: none;
    color: inherit;
    text-decoration: inherit;
}

a.sourceLine:empty {
    height: 1.2em;
}

.sourceCode {
    overflow: visible;
}

code.sourceCode {
    white-space: pre;
    position: relative;
}

div.sourceCode {
    margin: 1em 0;
    background: #ffffff78;
    padding: 10px;
    border-radius: 10px;
}

pre.sourceCode {
    margin: 0;
}

@media (max-width: 600px) {
    header > h1 {
        font-size: 1em !important;
    }
}

@media screen {
    div.sourceCode {
        overflow: auto;
    }
}

@media print {
    code.sourceCode {
        white-space: pre-wrap;
    }

    a.sourceLine {
        text-indent: -1em;
        padding-left: 1em;
    }
}

pre.numberSource a.sourceLine {
    position: relative;
    left: -4em;
}

pre.numberSource a.sourceLine::before {
    content: attr(title);
    position: relative;
    left: -1em;
    text-align: right;
    vertical-align: baseline;
    border: none;
    pointer-events: all;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 4em;
    color: #aaaaaa;
}

pre.numberSource {
    margin-left: 3em;
    border-left: 1px solid #aaaaaa;
    padding-left: 4px;
}

div.sourceCode {
}

@media screen {
    a.sourceLine::before {
        text-decoration: underline;
    }
}

code span.al {
    color: #ff0000;
    font-weight: bold;
}

/* Alert */
code span.an {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}

/* Annotation */
code span.at {
    color: #7d9029;
}

/* Attribute */
code span.bn {
    color: #40a070;
}

/* BaseN */
code span.bu {
}

/* BuiltIn */
code span.cf {
    color: #007020;
    font-weight: bold;
}

/* ControlFlow */
code span.ch {
    color: #4070a0;
}

/* Char */
code span.cn {
    color: #880000;
}

/* Constant */
code span.co {
    color: #60a0b0;
    font-style: italic;
}

/* Comment */
code span.cv {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}

/* CommentVar */
code span.do {
    color: #ba2121;
    font-style: italic;
}

/* Documentation */
code span.dt {
    color: #902000;
}

/* DataType */
code span.dv {
    color: #40a070;
}

/* DecVal */
code span.er {
    color: #ff0000;
    font-weight: bold;
}

/* Error */
code span.ex {
}

/* Extension */
code span.fl {
    color: #40a070;
}

/* Float */
code span.fu {
    color: #06287e;
}

/* Function */
code span.im {
}

/* Import */
code span.in {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}

/* Information */
code span.kw {
    color: #007020;
    font-weight: bold;
}

/* Keyword */
code span.op {
    color: #666666;
}

/* Operator */
code span.ot {
    color: #007020;
}

/* Other */
code span.pp {
    color: #bc7a00;
}

/* Preprocessor */
code span.sc {
    color: #4070a0;
}

/* SpecialChar */
code span.ss {
    color: #bb6688;
}

/* SpecialString */
code span.st {
    color: #4070a0;
}

/* String */
code span.va {
    color: #19177c;
}

/* Variable */
code span.vs {
    color: #4070a0;
}

/* VerbatimString */
code span.wa {
    color: #60a0b0;
    font-weight: bold;
    font-style: italic;
}

/* Warning */