/* html * { outline: 0.1px solid gray }*/

:root {
    --bg-intrinsic-width: 1536;
    --bg-intrinsic-height: 928;

    --screen-width: calc(min(67vw, (16 / 9) * 67vh));
    --screen-height: calc(var(--screen-width) * (9 / 16));
    --screen-top: calc(var(--bg-height) * (136 / var(--bg-intrinsic-height)));

    --bg-width: calc(var(--screen-width) * (var(--bg-intrinsic-width) / 720));
    --bg-height: calc(var(--bg-width) * (var(--bg-intrinsic-height) / var(--bg-intrinsic-width)));
    
    --paper-width: calc(min(100vw - 16px, 840px));
}

html {
    font-family: "Baskerville", Georgia, serif;
    font-size: 20px;
    line-height: 130%;
    text-shadow: 0 0 0.6px currentColor, 0 0 0.5px currentColor;
    
    overflow-wrap: break-word;
    font-kerning: normal;
    -webkit-text-size-adjust: 100%;
    
    background: black;
    color: white;
}

body {
    margin: 0;
}








#cinema {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--bg-height);
    z-index: -1;
    
    background: url('cinema.png') no-repeat center top;
    background-size: var(--bg-width) var(--bg-height);
}

#screen {
    display: block;
    
    width: var(--screen-width);
    height: var(--screen-height);
    object-fit: contain;
    
    margin: 0 auto;
    margin-top: var(--screen-top);
}

#paper {
    box-sizing: border-box;
    width: var(--paper-width);
    
    margin: 0 auto;
    margin-top: calc(var(--screen-top) * 2 + var(--screen-height));
    
    color: rgb(0 0 204);
    
    border: 16px solid transparent;
    border-image: url("paper.png") 16 fill / / 8px round;
    box-shadow: black 0 8px 160px 32px;
}
#hand {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    background: url('hand.png') no-repeat bottom right;
    background-size: contain;
    height: 480px;
    margin-top: -179px;
    background-position-x: calc(100vw / 2 + var(--paper-width) / 2 - 133px);
}
@media (prefers-color-scheme: dark) {
    #paper {
        color: rgb(187 187 255);
        border-image-source: url("paper dark.png");
    }
    #hand {
        background-image: url('hand dark.png');
    }
}
@supports not (border-image: url("paper.png") 16 fill / / 8px round) {
  #paper { background-color: white !important; color: black !important; }
}








header {
    text-align: center;
}
header a {
    display: inline-block;
    line-height: 80px;
}
main > * {
    box-sizing: border-box;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
}
main > figure {
    max-width: initial;
}
footer {
    text-align: center;
}
footer a {
    display: inline-block;
    line-height: 80px;
}






main h1 {
    margin: 0;
    font-size: 26px;
    line-height: 150%;
    font-weight: 500;
    text-align: center;

    break-inside: avoid;
    break-after: avoid;
    text-rendering: optimizeLegibility;
}

main h2 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;

    break-inside: avoid;
    break-after: avoid;
    text-rendering: optimizeLegibility;
}

main p {
    margin: 0;
    font-weight: 400;

    orphans: 3;
    widows: 3;
}

main ul, main ol {
    margin: 0;
    padding-left: 40px;
}
main > ul, main > ol {
    padding-left: 36px;
}

main figure {
    margin: 0;
    break-inside: avoid;
}
main figure img {
    display: block;
    margin: 0 auto;
}
main figure figcaption {
    font-size: 16px;
    line-height: 117%;
    font-weight: 400;
    text-align: center;
    font-style: italic;
}

main hr {
    margin: 0;
    border: 0;
}







main > *:first-child { margin-top: 0 !important; }

main h1, main h2 { margin-top: 58px; }

main p { margin-top: 15px;  }
main h1 + p, main h2 + p { margin-top: 9px; }

main ul, main ol { margin-top: 15px; }
main li + li { margin-top: 8px; }
main li > p:last-child { margin-bottom: 21px; }

main figure { margin-top: 33px; }
main figure figcaption { margin-top: 13px; }
main figure + * { margin-top: 30px !important; }

main hr { margin-top: 62px; }







a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

@supports (font: -apple-system-body) {
    a { text-decoration-thickness: 0.5px; }
}