@font-face {
    font-family: 'Crimson Text';
    src: url('/static/font/CrimsonText-Regular.ttf');
}

@font-face {
    font-family: 'Crimson Text';
    font-weight: bold;
    src: url('/static/font/CrimsonText-Bold.ttf');
}

@font-face {
    font-family: 'Crimson Text';
    font-style: italic;
    src: url('/static/font/CrimsonText-Italic.ttf');
}

@font-face {
    font-family: 'Cousine';
    font-weight: bold;
    src: url('/static/font/Cousine-Bold.ttf');
}

@font-face {
    font-family: 'Cousine';
    src: url('/static/font/Cousine-Regular.ttf');
}

@font-face {
    font-family: 'Cousine';
    font-style: italic;
    src: url('/static/font/Cousine-Italic.ttf');
}

html {
    font-size: 14pt;
}

body {
    background-color: #a3d2f0;
    font-family: 'Crimson Text', sans-serif;
    margin: 0;
    box-sizing: border-box;
}

body.nightmode {
    background-color: #080204;
}

a {
    color: #345e80;
    text-decoration: underline;
}

body.nightmode a {
    color: #89c0c4;
}

a:hover {
    color: #042a4a;
}

body.nightmode a:hover {
    color: #306778;
}

#page {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    box-sizing: border-box;
    background-color: white;
    box-shadow: -1px 0px 10px #00000040;
}

body.nightmode #page {
    background-color: #252a30;
    box-shadow: -1px 0px 10px #FFFFFF10;
}

#site_nav {
    display: flex;
    align-items: center;
    background: #0A162B;
    background: linear-gradient(0deg, 
            rgba(10, 22, 43, 1) 0%, 
            rgba(28, 56, 112, 1) 100%
    );
    color: white;
    padding: 10px 50px 10px 50px;
    gap: 1.5rem;
}

body.nightmode #site_nav {
    background: #040717;
    background: linear-gradient(0deg, rgba(4, 7, 23, 1) 0%, rgba(5, 31, 84, 1) 100%);
    color: #ced1d6;
}

#site_nav a {
    display: block;
    color: white;
    text-decoration: underline;
}

body.nightmode #site_nav a {
    color: #ced1d6;
}

#site_nav a.site_name {
    font-weight: bold;
    font-size: 125%;
    text-decoration: none;
}

#site_nav a:hover {
    color: #93cef5;
}

body.nightmode #site_nav a:hover {
    color: #8496b3;
}

#site_nav hr {
    flex-grow: 1;
    display: block;
    background: none;
    border: none;
}

#site_nav button {
    border: none;
    background: none;
    cursor: pointer;
}

#site_nav button svg {
    fill: white;
    color: white;
    display: block;
    width: 24px;
    height: 24px;
}

#site_nav button:hover svg {
    fill: #add8f0;
    color: #add8f0;
}

body.nightmode #day_button_face {
    display: none;
}

body:not(.nightmode) #night_button_face {
    display: none;
}

#trifold {
    display: flex;
}

#trifold_nav {
    min-width: 300px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 100px;
    padding-bottom: 45px;
    font-size: 85%;
    display: flex;
    flex-direction: column;
    gap: 1.0rem;
}

body.nightmode #trifold_nav {
    color: #c2cad1;
}

#trifold_nav h1 {
    font-size: 125%;
    font-weight: bold;
}

#toc {
    margin-left: -10px;
}

#toc h1 {
    padding-left: 10px;
}

#toc ul {
    list-style-type: none;
    padding-left: 15px;
}

#toc a {
    padding-left: 25px;
    text-indent: -25px;
    display: block;
    text-decoration: none;
}

#toc a:hover {
    text-decoration: underline;
}

.recent-article {
    text-decoration: none;
    padding: 10px 0px;
    display: block;
    position: relative;
}

.recent-article .title {
    font-size: 100%;
    font-weight: bold;
    text-align: left;
}

.recent-article::after {
    content: ' ';
    border-bottom: 1px solid #c4e1f5;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 12rem;
}

body.nightmode .recent-article::after {
    border-bottom: 1px solid #46556b;
}

.recent-article:last-child::after {
    border-bottom: none;
}

.trifold_nav_category_count {
    opacity: 80%;
}

body.nightmode #article {
    color: #c2cad1;
}

#article {
    flex-grow: 1;
    margin-top: 1rem;
}

#trifold_asides {
    min-width: 300px;
}


#article h1 {
    font-size: 170%;
    font-weight: bold;
}

#article h2 {
    font-size: 140%;
    font-weight: bold;
}

#article h3 {
    font-size: 125%;
    font-weight: bold;
    font-style: italic;
}

#article h1.title {
    font-weight: bold;
    text-align: center;
    font-size: 200%;
}

#article .section-number {
    opacity: 50%;
    font-size: 80%;
    padding-right: 0.5em;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
}

#article .attribution {
    font-style: italic;
    margin-left: 1rem;
}

#article .attribution::before {
    content: '\000D\2014  ';
}

#article p {
    text-align: justify;
}

#article blockquote {
    border-left: 3px solid #dae4f5;
    margin-left: 2.5rem;
    padding-left: 0.5rem;
}

body.nightmode #article blockquote {
    border-left: 3px solid #415d85;
}

#article hr, #trifold_nav hr {
    text-align: center;
    height: auto;
    border: none;
    background: none;
    color: black;
}

body.nightmode #article hr, body.nightmode #trifold_nav hr {
    color: #c2cad1;
}

#trifold_nav hr {
    opacity: 50%;
}

#article hr::before, #trifold_nav hr::before {
    content: '\25C6   \25C6   \25C6   \25C6   \25C6';
}

.aside-container {
    float: right;
    display: inline-block;
    position: relative;
}

.aside {
    font-size: 85%;
    position: absolute;
    padding-right: 10px;
    padding-left: 5px;
    border-left: 3px solid #dae4f5;
    width: 275px;
    max-width: 275px;
    left: 25px;
    top: 0;
    box-sizing: border-box;
}

body.nightmode .aside {
    border-left: 3px solid #415d85;
}

#article .aside p {
    text-align: left;
}

.aside p:first-child {
    margin-top: 3px;
    padding-top: 0;
}

.aside p:last-child {
    margin-bottom: 3px;
    padding-bottom: 0;
}


#article code {
    font-family: 'Cousine';
    font-size: 80%;
}

#article pre {
    background-color: #e4f2f0;
    border-radius: 5px;
    padding: 10px;
    overflow-x: auto;
}

body.nightmode #article pre {
    background-color: #121314;
}

#article :not(pre) > code {
    background-color: #d1e3e0;
    border-radius: 5px;
    padding: 2px 4px;
}

body.nightmode #article :not(pre) > code {
    background-color: #191a1c;
}

.hljs-keyword {
    font-weight: bold;
    color: #2d5180;
}

body.nightmode .hljs-keyword {
    color: #5e84b5;
}

.hljs-string, .hljs-number {
    color: #8f4e0d;
}

body.nightmode .hljs-string,
body.nightmode .hljs-number {
    color: #c4833d;
}

.hljs-built_in, .hljs-section {
    color: #7c2282;
}

body.nightmode .hljs-built_in,
body.nightmode .hljs-section {
    color: #ac49b3;
}

.hljs-meta, .hljs-meta .hljs-keyword {
    color: #0f7017;
    font-weight: normal;
}

body.nightmode .hljs-meta,
body.nightmode .hljs-meta .hljs-keyword
{
    color: #649e6d;
}

.hljs-comment {
    font-style: italic;
    color: #525252;
}

body.nightmode .hljs-comment {
    color: #696969;
}

.hljs-title,
.hljs-attr {
    color: #054d49;
}

body.nightmode .hljs-title,
body.nightmode .hljs-attr {
    color: #62a3a0;
}

.hljs-section {
    font-weight: bold;
}

.hljs-type {
    color: #70600f;
    font-weight: bold;
}

body.nightmode .hljs-type {
    color: #ad9a66;
}

#article_nav {
    display: flex;
}

.article_nav_side {
    width: 5.5rem;
}

.article_nav_meta {
    flex-grow: 1;
    text-align: center;
    font-style: italic;
    opacity: 80%;
}

.article_nav_meta_sep {
    width: 1rem;
    text-align: center;
    display: inline-block;
}

/*
.article .aside {
    background-color: #bfcedb;
    font-style: italic;
    color: #282f36;
    border-left: 5px solid #4a5763;
    padding: 0px 5px;
}
*/

.article_list {
    list-style-type: none;
}

.article_list li {
    margin-top: 0.5rem;
}

.article_list a {
    text-decoration: none;
    /* display: block; */
    margin-top: 0.35rem;
}

.article_list .article_name {
    font-weight: bold;
    font-size: 125%;
}

.article_list .article_date {
    color: #444444;
    font-style: italic;
}

body.nightmode .article_list .article_date {
    color: #999999;
}

@media (width <= 1500px) {
    #page {
        margin-top: 0;
    }
}

@media (width <= 1300px) {
    #trifold {
        flex-direction: column-reverse;
    }

    #article {
        flex-grow: 0;
        padding-left: 50px;
        padding-right: 50px;
        box-sizing: border-box;
    }

    .aside-container {
        float: right;
        margin-left: 15px;
    }

    .aside {
        display: block;
        position: static;
    }

    #toc {
        display: none;
    }

    #trifold_nav {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
    }

    #trifold_nav #recent, #trifold_nav #categories {
        width: 50%;
        max-width: 300px;
    }

    #trifold_nav #categories {
        padding-left: 3rem;
    }

    #trifold_nav hr {
        margin: 0;
    }

    #trifold_nav hr::before {
        display: block;
        height: 80%;
        align-self: stretch;
        width: 1px;
        background-color: white;
        content: ' ';
    }

    #toc_div {
        display: none;
        
    }

    #site_nav {
        gap: 0.5rem;
        padding: 10px 15px 10px 15px;
        flex-wrap: wrap;
    }
}

@media (width < 500px) {
    #article {
        padding-left: 10px;
        padding-right: 10px;
    }

    #article h1 {
        font-size: 135%;
    }

    #article h2 {
        font-size: 120%;
    }

    #article h3 {
        font-size: 110%;
    }

    #article h1.title {
        font-size: 150%;
    }

    #article pre code {
        font-size: 65%;
    }

    .aside-container {
        display: block;
        float: none;
    }

    .aside {
        width: 100%;
        padding-right: 35px;
        margin-right: 0;
        max-width: unset;
    }


    #trifold_nav {
        flex-direction: column;
    }

    #article_nav {
        flex-wrap: wrap;
    }

    .article_nav_side {
        flex-grow: 1;
    }

    .article_nav_meta {
        flex-grow: 1;
        order: -1;
        width: 100%;
    }
}