:root {
    --indent: 2ch;
    --text-font: 'Departure Mono';
    --code-font: 'Departure Mono';
    --alt-text-font: 'Atkinson Hyperlegible Next';
    --heading-stars: unset;
    --font-size: 1em;
}

@font-face {
    font-family: "Departure Mono";
    src: local('Departure Mono'),
         url("DepartureMono-Regular.woff2") format('woff2');
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: local("Atkinson Hyperlegible Next VF"),
         url("AtkinsonHyperlegibleNext-VariableFont_wght.ttf") format("woff2-variations");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: normal;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: local("Atkinson Hyperlegible Next VF"),
         url("AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf") format("woff2-variations");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: italic;
}

@font-face {
    font-family: 'Iosevka Web';
    src: local('Iosevka-Term-SS14'), local('Iosevka-Term'), local('Iosevka'), local('Iosevka-Custom'),
         url('Iosevka-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Iosevka Web';
    font-style: italic;
    src: local('Iosevka-Term-SS14-Italic'), local('Iosevka-Term-Italic'), local('Iosevka-Italic'), local('Iosevka-Custom-Italic'),
         url('Iosevka-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Iosevka Web';
    font-weight: bold;
    src: local('Iosevka-Term-SS14-Bold'), local('Iosevka-Term-Bold'), local('Iosevka-Bold'), local('Iosevka-Custom-Bold'),
         url('Iosevka-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Iosevka Web';
    font-style: italic;
    font-weight: bold;
    src: local('Iosevka-Term-SS14-Bold-Italic'), local('Iosevka-Term-Bold-Italic'), local('Iosevka-Bold-Italic'), local('Iosevka-Custom-Bold-Italic'),
         url('Iosevka-BoldItalic.woff2') format('woff2');
}


body {
    background: #282828;
    color: #fdf4c1;
    font-family: Merriweather;
    line-height: 1.5;
    padding: 0 1ch;
    margin: unset;
    font-family: var(--text-font), sans-serif;
    font-size-adjust: from-font;
    margin: auto;
    max-width: 50em;
    font-size: var(--font-size);
}

pre, code {
    font-family: var(--code-font), monospace;
}

#content {
    font-size:1.1em;
}

#home {
    font-size: 1.7em;
    color: #DD6F48;
    font-weight: bold;
    text-decoration: unset;
}

pre {
    background-color: #32302F;
    border: unset;
    color: #D5C4A1;
    margin-left: unset;
    margin-right: unset;
    box-shadow: 0 0 10px #0007;
    border-radius: 5px;
}

pre.src:hover:before {
    opacity: 1;
    transition: opacity .3s ease-out;
}

pre.src:before {
    display: inline;
    opacity: 0;
    transition: opacity .3s ease-out;
    margin-top: 14px;
    color: #928374;
    background-color: #32302F99;
}

code {
    background-color: #32302F;
    color: #D5C4A1;
    padding: 0px 3px;
    border-radius: 3px;
}

a {
    color: #FABD2F
}

a:visited {
    color: #B57614
}

.title {
    text-align: unset;
    margin-bottom: 0;
}

h1 {
    color: #DD6F48;
    margin-bottom: 0;
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: var(--font-size);
}

/* h1::before { */
/*     content: "*"; */
/*     margin-right: 1ch; */
/*     display: var(--heading-stars) */
/* } */

/* h1 ~ * { */
/*     margin-left: var(--indent); */
/* } */

/* h1 ~ blockquote { */
/*     margin-left: var(--indent); */
/* } */

h2 {
    color: #83A598;
    font-size: var(--font-size);
}

h2::before {
    content: "*";
    margin-right: 1ch;
    display: var(--heading-stars)
}

#table-of-contents h2::before {
    content: unset;
    margin-right: unset;
}

.outline-text-2 {
    margin-left: var(--indent);
}

.outline-3 {
    margin-left: calc(var(--indent))
}

h3 {
    color: #B8BB26;
    font-size: var(--font-size);
}

h3::before {
    content: "*";
    margin-right: 1ch;
    display: var(--heading-stars)
}

.outline-text-3 {
    margin-left: calc(var(--indent));
}

.outline-4 {
    margin-left: calc(var(--indent))
}

h4 {
    color: #427B58;
    font-size: var(--font-size);
}

h4::before {
    content: "*";
    margin-right: 1ch;
    display: var(--heading-stars)
}

.outline-text-4 {
    margin-left: calc(var(--indent));
}

.outline-5 {
    margin-left: calc(var(--indent))
}

h5 {
    color: #FE8019;
    font-size: var(--font-size);
}

h5::before {
    content: "*";
    margin-right: 1ch;
    display: var(--heading-stars)
}

.outline-text-5 {
    margin-left: calc(var(--indent));
}

.outline-6 {
    margin-left: calc(var(--indent))
}

h6 {
    color: #83A598;
    font-size: var(--font-size);
}

h6::before {
    content: "*";
    margin-right: 1ch;
    display: var(--heading-stars)
}

.outline-text-6 {
    margin-left: calc(var(--indent));
}
a > code {
    color: unset;
}


.home-nav nav {
    opacity: 1;
}

.blog-nav {
    opacity: .5;
    padding-top: var(--font-size);
    transition: opacity .5s ease-out;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--font-size);
}

.blog-nav:hover {
    opacity: 1;
    transition: opacity .5s ease-out;
}

.top-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2ch;
}

#toggle-font {
    cursor: pointer;
    border: 1px solid #fdf4c1;
    color: unset;
    background-color: unset;
    font-family: var(--alt-text-font);
}

.post-date {
    color: #7C6F64;
}

.org-src-container:has(+.example) pre {
    margin-bottom: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.org-src-container + .example {
    margin-top: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

#home-index {
    margin-top: 2em;
}

#home-index .post-date {
    white-space: nowrap;
    margin-left: var(--indent);
}

#home-index ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#home-index li {
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#home-index li h2 {
    margin-bottom: 0;
    margin-top: 0;
}

#home-index a {
    color: unset;
    text-decoration: unset;
}

#footnotes {
    border-top: 1px solid #7C6F64;
    padding-top: var(--font-size);
    font-size: .9em;
    color: #A89984;
}

.footnum, .footref {
    color: #427B58;
}

.footnum:visited, .footref:visited {
    color: #427B58;
}

#footnotes > h2 {
    display: none;
}

blockquote {
    color: #928374;
    border-left: 4px solid #7C6F64;
    padding: 1px 1ch;
    margin: unset;
}

#table-of-contents h2 {
    font-size: var(--font-size);
}

@media screen and (max-width: 600px) {
    pre {
        font-size: .9rem;
    }
    :root {
        --indent: unset;
    }
    h2::before {
        content: "*"
    }
    h3::before {
        content: "**"
    }
    h4::before {
        content: "***"
    }
    h5::before {
        content: "****"
    }
    h6::before {
        content: "*****"
    }

}