@font-face {
    font-family: "GeneralSans";
    src: url(/fonts/GeneralSans-Variable.woff2)format("woff2"),url(/fonts/GeneralSans-Variable.woff)format("woff");
    font-weight: 200 700;
    font-display: swap;
    font-style: normal
    size-adjust: 100%
}

@font-face {
    font-family:"GeneralSans";src:url(/fonts/GeneralSans-VariableItalic.woff2)format("woff2"),url(/fonts/GeneralSans-VariableItalic.woff)format("woff");font-weight:200 700;font-display:swap;font-style:italic;size-adjust:100%
}

:root {
    --text: #322d29;
    --dark-text: #322d29;
    --bg: #fff3eb;
    --accent-bg: #f2efe8;
    --input-bg: #fff3eb;
    --border: #322d29;
    --yellow: #fcc440;
    --gray: #736d5e;
    --mid-yellow: #bfa05a;
    --brown: #6f5849;
    --darker-yellow: #9c8349;
    --sans: 'GeneralSans', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --mono: Menlo, Consolas, Monaco, "Liberation Mono", Lucida Console, monospace;
    --content-margin: 1.5rem auto;
    --bigger-content-margin: 2.5rem auto;
    --standard-border: 3px solid var(--border)
}

html {
    scroll-behavior: smooth;
    min-height: 100%
}

body {
    color: var(--text);
    background: var(--bg);
    font-family: var(--sans);
    font-size: 1.35rem;
    line-height: 1.5;
    margin: 0
}

header {
    background: var(--accent-bg);
    padding: 1.5rem 0;
    border-bottom: var(--standard-border);
    text-align: center
}

.header-container {
    max-width: 80ch;
    display: block;
    margin: 0 auto;
    text-align: center
}

header h1 {
    font-size: 2rem;
    margin-top: -5px
}

.mobile-container {
    padding: 0 2rem;
    display: flex;
    justify-content: space-between
}

.site-logo {
    width: 4rem;
    height: auto;
    display: block;
    margin: 0 auto;
    stroke-width: 0;
    stroke: var(--text);
    fill: var(--text)
}

.sidebar-grid {
    display: grid;
    grid-gap: 2.5rem;
    grid-template-areas: "main-content""sidebar";
    max-width: 90ch;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    min-height: 100svh
}

.sidebar-grid>.main-content {
    grid-area: main-content;
    background: var(--bg);
    padding: 2rem 1rem
}

.sidebar-grid>.sidebar {
    grid-area: sidebar;
    padding: 2rem 1rem
}

.mobile-menu details,.sidebar details {
    background: var(--bg);
    margin: 0;
    box-shadow: 6px 6px 0 0 var(--border);
    transition: color .1s ease-in-out,.1s ease-in-out;
    font-size: 1.1rem;
    text-transform: uppercase
}

.mobile-menu details {
    border-radius: 8px
}

.sidebar details {
    margin-bottom: 1.5rem
}

.mobile-menu details:hover,.sidebar details:hover {
    box-shadow: none;
    background: var(--mid-yellow);
    color: var(--dark-text)
}

.mobile-menu details[open],.sidebar details[open] {
    box-shadow: none;
    background: var(--accent-bg)
}

.mobile-menu details[open]:hover,.sidebar details[open]:hover,a.home-link:hover {
    background: 0 0
}

.mobile-menu details>summary,.sidebar details>summary {
    list-style: none;
    text-align: center;
    padding: 8px 0
}

.mobile-menu details>summary::-webkit-details-marker,.sidebar details>summary::-webkit-details-marker {
    display: none
}

.mobile-summary {
    padding-top: 7px!important
}

.mobile-summary:hover,hr,mark {
    color: var(--dark-text)
}

details[open]>summary.mobile-summary {
    color: var(--text)
}

main {
    padding: 0 1rem;
    min-height: 67vh
}

a,a:visited,main img,video {
    max-width: 100%
}

main img {
    border-radius: 8px
}

main.home-container {
    max-width: 40rem;
    margin: 2rem auto
}

figcaption,figure,footer {
    text-align: center
}

figure {
    margin: 2.5rem auto
}

figcaption {
    font-size: 1rem;
    font-style: normal
}

figcaption,main,video {
    display: block
}

video {
    height: auto
}

audio,iframe,video {
    margin: var(--bigger-content-margin)
}

audio {
    width: 100%;
    padding: 0
}

iframe {
    display: block
}

footer {
    padding: 1rem 2rem;
    font-size: .9rem;
    background-color: var(--accent-bg);
    border-top: var(--standard-border)
}

footer a.button,nav a.button {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--border);
    transition: transform .15s ease,box-shadow .15s ease,background .15s ease
}

nav {
    margin: 2rem 0
}

.main-menu {
    background: var(--accent-bg);
    border: var(--standard-border);
    border-radius: 12px
}

.main-menu,.socials,.toc {
    box-shadow: 4px 4px 10px rgba(0,0,0,.1);
    padding: 1.5rem;
    position: relative;
    overflow: visible
}

.main-menu::before {
    content: "MENU";
    transform: translateX(-50%) rotate(-3deg)
}

.main-menu::before,.socials::before,.toc::before,mark {
    background: var(--yellow)
}

.post-filters,.socials,.toc {
    border-radius: 12px
}

.toc::before {
    transform: translateX(-50%) rotate(-3deg)
}

.socials::before {
    content: "SOCIALS";
    transform: translateX(-50%) rotate(3deg)
}

.toc::before {
    content: "TOC"
}

.main-menu::before,.socials::before,.toc::before {
    position: absolute;
    top: -20px;
    left: 50%;
    color: var(--dark-text);
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 2px 2px 4px rgba(0,0,0,.2)
}

nav a.button {
    display: block;
    margin: 1rem 0;
    padding: 8px 0;
    color: var(--text);
    background: var(--bg)
}

footer a.button:hover,nav a.button:hover {
    transform: translate(2px,2px);
    color: var(--dark-text);
    box-shadow: 2px 2px 0 var(--border);
    background: var(--mid-yellow)
}

nav a.button.current {
    background: var(--brown)
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
    line-height: 1.2
}

h4,h5,h6 {
    margin-bottom: 1rem
}

h1 {
    font-size: 3rem;
    margin: 0
}

h1.title {
    margin-bottom: 3rem
}

.home-container h1,h2.post-title,h3 {
    font-size: 2rem
}

h2 {
    font-size: 2.6rem;
    margin: 4rem 0 0
}

h3 {
    margin: 3rem 0 0
}

h4 {
    font-size: 1.44rem
}

h5 {
    font-size: 1.15rem
}

h6 {
    font-size: .96rem
}

h1 code,h2 code,h3 code,h4 code,h5 code,h6 code {
    font-size: inherit
}

p {
    margin: var(--content-margin)
}

h2.post-title,p.date,p.meta {
    margin: 0
}

p.date,p.meta {
    font-size: 1.1rem;
    margin-bottom: 3rem
}

.button span,p.meta span {
    padding: 0 .5rem
}

a,a:visited {
    color: var(--text);
    text-decoration-thickness: .15rem;
    word-break: break-word;
    overflow-wrap: break-word
}

a.button,a:hover {
    text-decoration: none
}

a:hover {
    text-decoration-color: var(--mid-yellow);
    background: var(--mid-yellow);
    color: var(--dark-text)
}

.post-title a {
    text-decoration: none
}

#submit,.button,nav a.button,table {
    border: var(--standard-border)
}

#submit,.button {
    color: var(--text);
    background: var(--bg);
    box-shadow: 6px 6px 0 0 var(--border);
    transition: color .1s ease-in-out,.1s ease-in-out;
    margin: 1.5rem 0;
    padding: 10px 12px;
    font-size: inherit;
    font-family: inherit
}

a.button {
    color: var(--text);
    display: inline-block
}

#submit:hover,.button:hover,.current {
    box-shadow: 0 0 0 0 var(--border);
    color: var(--dark-text)!important;
    background: var(--mid-yellow)!important;
    border-color: var(--standard-border)
}

table {
    margin: var(--bigger-content-margin);
    width: 100%
}

code,p.callout,pre,table {
    border-radius: 8px
}

p.callout::before {
    border-radius: 8px;
    transform: rotate(-3deg)
}

th {
    text-align: left;
    background: var(--gray)
}

td,th {
    padding: .2rem .4rem
}

tr:nth-child(2n) {
    background: var(--accent-bg)
}

.post-footer {
    text-align: center;
    margin: 5rem 0 2rem
}

hr {
    border-top: var(--standard-border);
    margin: 3.5rem auto;
    max-width: 60%
}

blockquote {
    font-size: 1.5rem;
    font-style: italic;
    padding: .4rem .8rem;
    border-left: 6px solid var(--border);
    opacity: 70%;
    display: block
}

cite {
    font-size: 1rem;
    font-family: var(--sans);
    font-style: normal
}

code,pre,tt,var {
    font-family: var(--mono);
    font-size: 1.1rem;
    color: var(--text);
    padding: 2px 5px
}

code,tt,var {
    border: 1px solid var(--border)
}

blockquote,pre,pre.highlight {
    margin: var(--bigger-content-margin)
}

pre,pre.highlight {
    border: var(--standard-border);
    max-width: 100%;
    padding: 1.5rem;
    max-height: 650px;
    overflow: auto;
    white-space: pre
}

.hidden,pre code {
    border: 0;
    padding: 0
}

pre code {
    font-size: 1rem;
    background: 0 0
}

code,details,kbd,pre,pre.highlight,tt,var {
    background: var(--accent-bg)
}

kbd {
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom: var(--standard-border);
    border-radius: 5px;
    padding: .1rem .25rem
}

.hidden {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px
}

.icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: .25rem;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    transform: translateY(-.1em)
}

.post-nav {
    max-width: 100%;
    padding: 0;
    display: flex;
    border-top: var(--standard-border);
    border-bottom: var(--standard-border);
    margin: 2rem auto
}

.post-nav a,summary {
    font-weight: 700
}

.post-nav p {
    padding: 2rem 0
}

.post-nav div {
    flex: 1 1 0
}

.post-nav-prev {
    text-align: left
}

.post-nav-next {
    text-align: right
}

.pagination-links {
    padding: 2rem .5rem;
    display: block
}

.post-meta {
    font-size: 1rem;
    margin: var(--bigger-content-margin)
}

details {
    border: var(--standard-border);
    margin: 3rem 0
}

summary {
    cursor: pointer;
    padding: .6rem 1rem
}

details[open] {
    padding: .6rem 1rem .75rem
}

details[open] summary {
    margin-bottom: .5rem;
    padding: 0;
    color: var(--text)
}

details[open]>:last-child {
    margin-bottom: 0
}

.callout {
    background: var(--accent-bg);
    border: var(--standard-border);
    padding: 0 1rem 2rem;
    margin: 3.5rem 0 2.5rem
}

.callout p {
    margin: 0
}

.callout p:nth-child(n+2) {
    margin-top: 1rem
}

.callout::before,.link {
    color: var(--dark-text)
}

.callout::before {
    position: relative;
    top: -1.25rem;
    padding: 2px 10px;
    content: attr(data-title);
    background: var(--mid-yellow);
    display: block;
    width: max-content;
    padding: .2rem 1rem;
    text-align: center;
    font-weight: 700
}

.callout a:hover {
    background-color: var(--mid-yellow)
}

.link {
    background: var(--yellow);
    margin: var(--bigger-content-margin);
    padding: 1.5rem 1.5rem 0;
    margin: 2.5rem 0
}

.link h1,.link h2 {
    margin: 0;
    font-size: 2.6rem
}

.search-form {
    margin: 3rem 0
}

input {
    font-family: var(--sans);
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0
}

input#name,input#search-box,input[type=submit] {
    color: var(--text);
    border: var(--standard-border)
}

input#name,input#search-box {
    padding: .7rem;
    background: var(--input-bg);
    width: 100%;
    box-sizing: border-box
}

input[type=submit] {
    background: var(--bg)
}

input#search-input {
    margin: 2rem 0 1rem
}

input[type=radio] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
    width: 1.5rem;
    height: 1.5rem;
    accent-color: var(--mid-yellow)
}

.sidebar input.button {
    width: 100%
}

input#search-box {
    border-radius: 8px
}

.socials,.toc,input.button {
    border: var(--standard-border)
}

input.button {
    display: block;
    margin: 1rem 0;
    padding: 8px 1rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text);
    border-radius: 8px;
    box-shadow: 4px 4px 0 var(--border);
    transition: transform .15s ease,box-shadow .15s ease,background .15s ease
}

.socials,.toc {
    background: var(--accent-bg);
    margin-top: 5rem
}

.socials .inner {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.5rem;
    font-size: 2.5rem;
    padding: 0;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem
}

.mobile-menu .socials,input.button {
    background: var(--bg)
}

.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.socials a:hover {
    background: 0 0
}

.socials svg:hover {
    background: 0 0;
    fill: var(--mid-yellow)
}

.brown,.brown a,.darker-yellow,.darker-yellow a,.gray,.gray a,.mid-yellow,.mid-yellow a,.yellow,.yellow a {
    border-color: var(--border);
    color: var(--dark-text)
}

.brown a.button,.darker-yellow a.button,.gray a.button,.mid-yellow a.button,.socials a:hover,.yellow a.button {
    color: var(--text)
}

.yellow {
    background: var(--yellow)
}

.gray {
    background: var(--gray)
}

.mid-yellow {
    background: var(--mid-yellow)
}

.brown {
    background: var(--brown)
}

.darker-yellow {
    background: var(--darker-yellow)
}

.yellow-hover:hover {
    background: var(--yellow)!important;
    color: var(--dark-text)
}

.gray-hover:hover {
    background: var(--gray)!important;
    color: var(--dark-text)
}

.darker-yellow-hover:hover {
    background: var(--darker-yellow)!important;
    color: var(--dark-text)
}

.brown-hover:hover {
    background: var(--brown)!important;
    color: var(--dark-text)
}

.mid-yellow-hover:hover {
    background: var(--mid-yellow)!important;
    color: var(--dark-text)
}

.sidebar div {
    padding: 0 1rem
}

.sidebar div p:first-child {
    margin: 0
}

.toc>nav {
    font-size: 1.1rem
}

.toc ul {
    list-style: none;
    padding-left: 0;
    counter-reset: item
}

.toc ul li {
    counter-increment: item;
    margin-bottom: .5rem
}

.toc ul li::before {
    content: counters(item,".")". ";
    font-weight: 700
}

.toc ul ul {
    padding-left: 2rem
}

.toc a,.toc a:hover {
    text-decoration: none
}

.image-container:hover,.toc a:hover {
    background: var(--mid-yellow)
}

.button-grid {
    margin: 2.5rem 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem
}

.button-grid a.button {
    margin: 0
}

.button-grid,.progress-container {
    text-align: center
}

.progress {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    margin-right: 20px;
    vertical-align: top
}

.image-container {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 6px 6px 0 var(--border);
    transition: transform .15s ease,box-shadow .15s ease,background .15s ease
}

.image-container:hover {
    transform: translate(2px,2px);
    box-shadow: 2px 2px 0 var(--border)
}

.image-container:active {
    transform: translate(3px,3px);
    box-shadow: none
}

.progress img {
    object-fit: cover;
    display: block;
    cursor: pointer;
    width: 100%;
    height: auto
}

.progress-bar {
    height: 5px;
    background-color: var(--yellow);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    transition: width .15s ease
}

.progress-info h3,.progress-info p {
    text-align: left;
    margin: 0
}

.progress .image-container {
    margin-top: 1rem
}

.media-review {
    display: grid;
    gap: 1.5rem;
    background: var(--accent-bg);
    border: var(--standard-border);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    border-radius: 8px;
    grid-template-columns: 150px 1fr;
    align-items: start
}

.media-cover {
    justify-self: start
}

.media-cover img {
    max-width: 100%;
    box-shadow: 6px 6px 0 var(--border)
}

.media-details {
    text-align: left
}

.media-title {
    margin-top: 0;
    font-size: 1.5rem
}

.media-details p {
    margin: .5rem 0;
    line-height: 1.4
}

.media-review-content {
    grid-column: 1/-1;
    border-top: 1px solid var(--border);
    font-style: italic
}

* {
    scrollbar-color: var(--border) var(--accent-bg)
}

@media (max-width:500px) {
    .media-review {
        grid-template-columns: 1fr;
        text-align: center
    }

    .media-cover {
        justify-self: center
    }

    .media-details,.media-review-content {
        text-align: left
    }
}

@media (min-width:768px) {
    .sidebar-grid {
        grid-template-columns: calc(30% - 1.25rem) calc(70% - 1.25rem);
        grid-template-areas: "sidebar main-content"
    }

    .mobile-menu {
        display: none
    }
}

@media (max-width:800px) {
    .main-content,.sidebar-grid {
        display: block;
        max-width: 100%;
        border: 0!important
    }

    .sidebar {
        display: none
    }

    .mobile-menu {
        display: block;
        padding: 0 1rem;
        max-width: 500px;
        margin: 0 auto
    }

    .site-logo {
        padding-bottom: 1rem
    }
}

@media only screen and (max-width:750px) {
    .post-nav {
        max-width: 100%;
        padding: 0
    }

    h1 {
        font-size: 2.5rem
    }

    h2 {
        font-size: 2.1rem
    }

    h3 {
        font-size: 1.75rem
    }

    h4 {
        font-size: 1.25rem
    }
}

@media (max-width:640px) {
    .button-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:1120px) {
    .socials .inner {
        grid-template-columns: repeat(2,1fr)
    }

    .mobile-menu .socials .inner {
        grid-template-columns: repeat(4,1fr)
    }
}

@media (max-width:380px) {
    .mobile-menu .socials .inner {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:255px) {
    .mobile-menu .socials .inner {
        grid-template-columns: repeat(1,1fr)
    }
}

@media (max-width:800px) {
    .main-menu,.socials {
        margin: 1rem;
        padding: 1rem
    }

    nav a.button {
        margin: .75rem 0;
        font-size: 1rem;
        padding: 8px 12px
    }
}

@media (prefers-color-scheme:dark) {
    :root {
        --text: #e2dcd0;
        --dark-text: #322d29;
        --bg: #322d29;
        --accent-bg: #3f3a37;
        --input-bg: #5b534d;
        --border: #6a5f58;
        --yellow: #fcc440;
        --gray: #736d5e;
        --mid-yellow: #bfa05a;
        --brown: #6f5849;
        --darker-yellow: #9c8349
    }
}

.bg,.chroma {
    color: var(--text);
    background-color: var(--dark-text)
}

.chroma {
    background-color: var(--accent-bg)
}

.chroma .err {
    color: var(--brown)
}

.chroma .lnlinks {
    outline: 0;
    text-decoration: none;
    color: inherit
}

.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0
}

.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0
}

.chroma .hl {
    background-color: #424853
}

.chroma .ln,.chroma .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: .4em;
    padding: 0 .4em;
    color: #6c6f74
}

.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn {
    color: #967e6e;
    font-weight: 700
}

.chroma .kp {
    color: #967e6e
}

.chroma .kr {
    font-weight: 700
}

.chroma .kr,.chroma .kt {
    color: #967e6e
}

.chroma .na {
    color: #9a927e
}

.chroma .nb {
    color: #967e6e
}

.chroma .nc,.chroma .no {
    color: #9a927e
}

.chroma .nd,.chroma .ni {
    color: #dfb99f
}

.chroma .ne {
    color: var(--brown)
}

.chroma .nf {
    color: #c7beb8
}

.chroma .nl,.chroma .nn,.chroma .py {
    color: #9a927e
}

.chroma .nt {
    color: #967e6e
}

.chroma .dl,.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc {
    color: var(--darker-yellow)
}

.chroma .sd {
    color: var(--border)
}

.chroma .s2 {
    color: var(--darker-yellow)
}

.chroma .se {
    color: var(--yellow)
}

.chroma .sh,.chroma .si,.chroma .sx {
    color: var(--darker-yellow)
}

.chroma .sr {
    color: var(--yellow)
}

.chroma .s1,.chroma .ss {
    color: var(--darker-yellow)
}

.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo {
    color: var(--mid-yellow)
}

.chroma .o,.chroma .ow {
    color: #967e6e
}

.chroma .ow {
    font-weight: 700
}

.chroma .p {
    color: var(--text)
}

.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cs {
    color: var(--border);
    font-style: italic
}

.chroma .cp,.chroma .cpf {
    color: var(--gray);
    font-style: italic
}

.chroma .gd {
    color: var(--brown)
}

.chroma .ge {
    font-style: italic
}

.chroma .gr {
    color: var(--brown)
}

.chroma .gh {
    color: #c7beb8;
    font-weight: 700
}

.chroma .gi {
    color: var(--darker-yellow)
}

.chroma .gp {
    color: var(--border)
}

.chroma .gp,.chroma .gs,.chroma .gu {
    font-weight: 700
}

.chroma .gu {
    color: #c7beb8
}

.chroma .gt {
    color: var(--brown)
}

::selection {
    background-color: var(--yellow);
    color: var(--dark-text)
}

::-moz-selection {
    background-color: var(--yellow);
    color: var(--dark-text)
}