@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

@font-face {
    font-family: main;
    src: url(/static/sitelenselikiwenasuki.ttf);
}

:root {
    --body-text-color: #333;
    --body-bg-color: #f9f9f9;
    --heading-color: #2c3e50;
    --link-color: #3498db;
    --link-hover-color: #2079b7;

    --pre-border-color: #ddd;
    --pre-bg-color: #f7f7f7;
    --pre-text-color: #333;

    --toc-bg-color: #ecf0f1;
    --toc-border-color: #3498db;

    --postamble-color: #7f8c8d;
    --postamble-border-color: #eee;

    --box-text-color: #333;

    /* Theorem */
    --theorem-bg-color: #e3f2fd;
    --theorem-border-color: #2196f3;
    --theorem-heading-color: #1976d2;
    --theorem-heading-border-color: #bbdefb;

    /* Definition */
    --definition-bg-color: #fff3e0;
    --definition-border-color: #ff9800;
    --definition-heading-color: #f57c00;
    --definition-heading-border-color: #ffe0b2;

    /* Corollary */
    --corollary-bg-color: #f3e5f5;
    --corollary-border-color: #9c27b0;
    --corollary-heading-color: #7b1fa2;
    --corollary-heading-border-color: #e1bee7;
    
    /* Proposition */
    --proposition-bg-color: #f3e5f5;
    --proposition-border-color: #9c27b0;
    --proposition-heading-color: #7b1fa2;
    --proposition-heading-border-color: #e1bee7;

    /* Proof */
    --proof-bg-color: #f7f7f7;
    --proof-border-color: #ccc;
    --proof-text-color: #333;
    --proof-q-color: #333;
}

body {
    font-family: Lora, sans-serif;
    line-height: 1.6;
    margin: 0 auto;
    padding: 20px;
    color: var(--body-text-color);
    background-color: var(--body-bg-color);
    max-width: 750px;
}

.src.src-latex-macros {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

pre {
    padding: 10px;
    overflow-x: auto;
    border: 1px solid var(--pre-border-color);
    background-color: var(--pre-bg-color);
    color: var(--pre-text-color);
    white-space: pre-wrap;
}

code, pre {
    font-family: 'Fira Code', monospace;
}

#content {
    margin-top: 20px;
}

.title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 0.5em;
    color: var(--heading-color);
}

#table-of-contents {
    background-color: var(--toc-bg-color);
    padding: 15px;
    border-left: 5px solid var(--toc-border-color);
    margin-bottom: 20px;
}

#table-of-contents h2 {
    margin-top: 0;
    font-size: 1.2em;
    color: var(--heading-color);
}

#postamble {
    font-size: 0.9em;
    color: var(--postamble-color);
    border-top: 1px solid var(--postamble-border-color);
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
}

.MathJax_Display {
    margin: 1em 0;
}

.theorem,
.definition,
.corollary,
.proposition {
    padding: 15px 20px;
    margin: 1.5em 0;
    border-radius: 4px;
    position: relative;
    color: var(--box-text-color);
}

.tok {
    font-family: main;
    font-size: 24pt;
}

.theorem::before,
.definition::before,
.corollary::before,
.proposition::before {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
    border-bottom: 1px solid;
}

.theorem {
    background-color: var(--theorem-bg-color);
    border-left: 5px solid var(--theorem-border-color);
}
.theorem::before {
    content: "Theorem";
    color: var(--theorem-heading-color);
    border-bottom-color: var(--theorem-heading-border-color);
}

.definition {
    background-color: var(--definition-bg-color);
    border-left: 5px solid var(--definition-border-color);
}
.definition::before {
    content: "Definition";
    color: var(--definition-heading-color);
    border-bottom-color: var(--definition-heading-border-color);
}

.corollary {
    background-color: var(--corollary-bg-color);
    border-left: 5px solid var(--corollary-border-color);
}
.corollary::before {
    content: "Corollary";
    color: var(--corollary-heading-color);
    border-bottom-color: var(--corollary-heading-border-color);
}

.proposition {
    background-color: var(--proposition-bg-color);
    border-left: 5px solid var(--proposition-border-color);
}
.proposition::before {
    content: "Proposition";
    color: var(--proposition-heading-color);
    border-bottom-color: var(--proposition-heading-border-color);
}

.theorem > p:first-of-type,
.definition > p:first-of-type,
.corollary > p:first-of-type,
.proposition > p:first-of-type {    
    margin-top: 0;
}

.proof {
    background-color: var(--proof-bg-color);
    border-left: 3px solid var(--proof-border-color);
    padding: 15px 20px;
    margin: 1.5em 0;
    border-radius: 4px;
    position: relative;
    color: var(--proof-text-color);
}

.proof::before {
    content: "Proof. ";
    font-weight: bold;
    display: inline;
    color: var(--proof-text-color);
}

.proof::after {
    content: " ∎";
    display: block;
    text-align: right;
    font-weight: bold;
    font-style: normal;
    margin-top: 10px;
    color: var(--proof-q-color);
}

.blog-header {
    background: var(--toc-bg-color);
    border-bottom: 1px solid var(--toc-border-color);
    padding: 10px 15px;
    margin-bottom: 20px;
    font-size: 1rem;
    text-align: left;
}

.blog-header a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
}

.blog-header a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}