@font-face {
    font-family: charter;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    src: url('fonts/charter_regular.woff2') format('woff2');
}

@font-face {
    font-family: charter;
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    src: url('fonts/charter_italic.woff2') format('woff2');
}

@font-face {
    font-family: charter;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    src: url('fonts/charter_bold.woff2') format('woff2');
}

@font-face {
    font-family: charter;
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    src: url('fonts/charter_bold_italic.woff2') format('woff2');
}

:root {
    --primary-color: #6face8;
    --light-primary-color: rgba(111, 172, 232, 0.2);
    /* --width: 34em; */
    --width: 50em;
}

* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:separate;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
*:focus         { outline: none}
::selection       { background: #eee; opacity:1.0; color:#000; padding:10px; /* Safari */ }

/* html { background:lightgray; } */
body { background:#fff; overflow-x: hidden; margin:auto; margin-top: 2em; margin-bottom: 2em; padding:45px 90px; max-width: var(--width);}
body hr { border:1px; clear:both; color: #777; background-color: #777; height: 1px; margin: 3em 0em 3em;}

body { color: #333; font-family: "charter",BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size: 1.1rem;	line-height: 1.5; }

/* Body Defaults */
p { font-size:20px; margin-bottom: 1.5em; margin-top: 1.5em; }
body main > * { max-width: var(--width); margin-bottom: 30px }
body main > h1 { font-size:45px; text-transform: capitalize; padding-bottom:30px}
body main > h2 { font-size:30px; text-transform: capitalize; }
body main > h3 { font-size:20px; text-transform: capitalize}
body main > p {  line-height: 1.4em; font-size:18px; margin-bottom: 1em; }
body main > p b { font-weight: bold }
body main > p i { font-size:18px; font-style: italic}
p a { text-decoration: underline; text-decoration-color: var(--primary-color); }

/* Nav */
body header { font-weight: 200; max-width: var(--width); margin-top: 15px; display: block; padding-bottom: 30px; margin-bottom:30px; border-top:0px; border-bottom: #777; border-style: solid; border-bottom-width: 1px; display: flex;}
body header .site-title { font-weight: 400; font-family: "charter", Helvetica Neue, Helvetica, Arial, sans-serif; }
body header a:hover { color: var(--primary-color); }
#about-link { float: right; }

/* Footer */
footer p { max-width: 100%; font-weight: 200; font-size: smaller; margin-top: 4em; margin-bottom: 4em; padding-top: 2em; border-top-width: 1px; border-top-color: #777; border-style: solid; color: #777; }

/* Homepage About */
body main div.about > h1 { font-size: 1.8em; margin-bottom: 0.8em; font-weight: bold; font-family: "charter", Helvetica Neue, Helvetica, Arial, sans-serif; }
body main div.about > p { font-size: 1em;  }
body main div.about > p a { text-decoration: underline; text-decoration-color: var(--primary-color); }
body main div.about > p a:HOVER { text-decoration: none; background-color: var(--light-primary-color);}
.feature { 
    width: 100%; 
    margin-bottom: 4em; 
}

/* Homepage Post Lists */
body main div.post-list { padding-top: 2em;}
body main div.post-list > h3 { font-size: 1.4em; margin-bottom: 0.8em; font-weight: bold; font-family: "charter", Helvetica Neue, Helvetica, Arial, sans-serif; }
body main div.post-list > ul li { line-height: 1.8rem; font-size: 1em; list-style-type: "-"; list-style-position: outside; margin-left: 0; padding-left: 1em; margin-bottom: 0.5em; }
body main div.post-list .more { list-style-type: none; color:#777; }
body main div.post-list a {  text-decoration: underline; text-decoration-color: var(--primary-color); }
body main div.post-list a:hover { text-decoration: none; background-color: var(--light-primary-color); transition-duration: 0.1s;}

/* Glossary */
body main div.glossary > h1 { font-size: 1.8em; margin-bottom: 0.8em; font-weight: bold; }
body main div.glossary > div.term h3 { font-size: 26px; font-weight: bold; margin: -0.2em 0em 0em; }
body main div.glossary > div.term h5 { font-size: 1.1em; font-weight: demibold; font-style: italic; color: #555; }
body main div.glossary > div.term a { text-decoration: underline; text-decoration-color: var(--primary-color); }
body main div.glossary > div.term a:hover { text-decoration: none; background-color: var(--light-primary-color); transition-duration: 0.1s;}
body main div.glossary > div.term ul { margin-top: 0.4em; }
body main div.glossary > div.term ul li { list-style-type: disc; list-style-position: outside; margin-bottom: 0.4em; margin-left: 2em; color: #555;}
body main div.glossary > div.term ul li strong { font-weight: bold; }
/* Glossary Page */
body main div.glossary {
    margin-bottom: 2em; /* Space below the glossary section */
}

body main div.glossary > h1 {
    font-size: 2em; /* Larger font size for the glossary title */
    margin-bottom: 1em; /* Space below the glossary title */
    font-weight: bold; /* Bold font weight for the glossary title */
    color: #333; /* Darker color for the glossary title */
}

body main div.glossary > div.term {
    padding-bottom: 2em;
    padding-top: 2em;
    border-top: 1px solid rgb(232, 232, 232);
}

body main div.glossary > div.term h3 {
    font-size: 1.4em; /* Larger font size for term titles */
    font-weight: bold; /* Bold font weight for term titles */
    color: #444; /* Darker color for term titles */
}

body main div.glossary > div.term p {
    font-size: 1em; /* Standard font size for term descriptions */
    line-height: 1.6; /* Increased line height for readability */
    color: #555; /* Slightly darker color for term descriptions */
}

body main div.glossary > div.term a {
    text-decoration: underline; /* Underline links */
    text-decoration-color: var(--primary-color); /* Primary color for link underline */
}

body main div.glossary > div.term a:hover {
    text-decoration: none; /* Remove underline on hover */
    background-color: var(--light-primary-color); /* Light primary color background on hover */
    transition-duration: 0.1s; /* Smooth transition for hover effect */
}

body main div.glossary > div.term p.aka { margin-top: 0.3em; margin-bottom: 0.8em; font-style: italic; font-size: 1em; }


/* Post */
time { font-size: 16px; color: #777; }
article h1 { font-weight: 600; font-size: 42px; line-height: 48px; margin: -0.2em 0em 0.5em; font-family: "charter", Helvetica Neue, Helvetica, Arial, sans-serif;}
article h3 { font-size: 26px; font-style: italic; margin: -0.2em 0em 1em; }
article h4 { font-size: 22px; font-style: italic; margin: -0.2em 0em 1em; }
article img {
    width: 100%; /* Ensures image fills the container width */
    max-width: 100%; /* Prevents image from exceeding the container width */
    height: auto; /* Maintains the aspect ratio */
    margin: 1em 0em 1em; /* Adjusted for consistency */
}
article a.image-caption { font-size: smaller; }
article strong { font-weight: 700; }
article em { font-style: italic; }
article a { text-decoration: underline; text-underline-position: under; text-decoration-color: var(--primary-color); }
article a:hover { text-decoration: none; background-color: var(--light-primary-color); }
article ul {  margin-bottom: 1.5em; margin-top: 1.5em; }
article ul li { list-style-type: disc; list-style-position: outside; margin-bottom: 0.4em; margin-left: 2em; }
article ul li strong { font-weight: bold; }
article ol { margin-bottom: 1.5em; margin-top: 1.5em; } 
article ol li { list-style-type: decimal; list-style-position: outside; margin-bottom: 0.4em; margin-left: 2em; }
article ol li strong { font-weight: bold; }
article blockquote { margin: 2em 1em; padding-left: 1em; border-left: var(--primary-color); border-left-width: 4px; border-left-style: solid;}
article blockquote p { font-size: 18px; display: inline; }
article a.footnote-ref { color: var(--primary-color); vertical-align: super; font-size: 12px;}
article sup a { vertical-align: super; font-size: smaller; }
article strike { text-decoration: line-through; }
article .center { display: block; margin-left: auto; margin-right: auto; margin-top: 2em; margin-bottom: 2em; }
article .post-tag {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    display: inline-block;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 1.8;
    border-radius: 10px;
    background-color: var(--light-primary-color);
    color: var(--primary-color);
    vertical-align: middle;
}
article .footnotes { margin-top: 4em; margin-bottom: 4em; font-size: 14px; }
article .footnotes p { font-size: 14px; }


article .sidenote { margin-top: 2em; margin-bottom: 2em; border-style: solid; border-width: 1px; border-color: lightgray; padding: 1.5em; background-color:  #ebf5fb ;}
article .sidenote h1 { font-size: 18px; font-weight: 500; line-height: 36px; margin-bottom: 0.25em;}
article .sidenote h2 { font-size: 22px; font-weight: 800; margin: 0.25em; padding-bottom: 0.5em; font-family: "charter", Helvetica Neue, Helvetica, Arial, sans-serif; }
article .sidenote ul { margin: 0.5em; }
article .sidenote p { margin: 0em; font-size: 16px; margin-top: 0.5em; }
article .sidenote p:first-of-type { margin-top: 0; }

article .term { margin-top: 2em; margin-bottom: 2em; border-style: solid; border-width: 1px; border-color: lightgray; padding: 1.5em; background-color:  #ebf5fb ;}
article .term h1 { font-size: 20px; font-weight: 600; color:#333; line-height: 36px; margin-bottom: 0em;}
article .term ul { margin: 0.5em; }
article .term p.aka { margin: 0em; font-size: 16px; font-style: italic; color: #555;}
article .term div.definition p { margin-top: 0.8em; margin-bottom: 0.5em; font-size: 16px; line-height: 1.6; color: #555; }

article h1.list { font-size: 28px; line-height: 36px; }
/* Inline Code */
article .post-content code {
    font-size: 0.8em; /* Smaller font for code */
    display: inline; /* Inline display for single line code */
    padding: 0.2em 0.4em; /* Reduced padding */
    font-family: monospace; /* Consistent font for code */
    background-color: rgba(111, 172, 232, 0.2); /* Lighter background for inline code */
    border-radius: 0.2em; /* Rounded corners for aesthetic */
    word-wrap: break-word; /* Ensures wrapping inside code */
}

/* Block Code */
article .post-content pre code {
    font-size: 1em; /* Smaller font for code */   
    display: block; /* Block display for multiline code */
    white-space: pre; /* Allows line breaks and white space */
    word-wrap: break-word; /* Breaks the words at the end of the line */
    margin-top: 1em; /* Margin top for spacing */
    margin-bottom: 1em; /* Margin bottom for spacing */
    padding: 1rem; /* Padding around the text */
    border-radius: 0.2rem; /* Rounded corners for aesthetic */
    background-color: var(--light-primary-color); /* Consistent with your existing block code style */
    box-decoration-break: clone; /* Ensures decorations are cloned on each box in a fragmented context */
    overflow: auto; /* Allows scrolling for long code blocks */
}

.language-markdown.highlighter-rouge .highlight pre.highlight code {
    white-space: pre-wrap;
}

article .post-content li code {
    margin-top: 1em;
    margin-bottom: 1em;
}
article .post-content .image-caption {
    font-size: smaller;
    color: #777;
    margin-top: -2em;
    margin-bottom: 1em;
    text-align: center;
}

/* Tables */

article .post-content table {
    margin-top: 2em; margin-bottom: 2em; border-style: solid; border-width: 1px; border-color: lightgray;
    font-size: 12px; /* Smaller font for tables */
    font-family: monospace; /* Consistent font for tables */
    width: 100%; /* Full width for responsiveness */
    border-collapse: collapse; /* Collapses the borders */
    margin-top: 1em; /* Margin top for spacing */
    margin-bottom: 1em; /* Margin bottom for spacing */
}

/* Viz */

article #chart {
    width: 100%; /* or a specific width like 800px */
    max-width: 100%; /* Ensure it doesn't exceed the parent width */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Ensure proper positioning */
    overflow: visible; /* Allow overflow */
}

article #chart svg {
    overflow: visible; /* Allow overflow */
}

article .viz-chart-note{
    margin-top: 0px;
    margin-bottom: 0.5em;
    font-size: 12px;
}

/* Link Post */

article .post-link-title {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* Writing Page */
.writing-list .post-slug { padding-right: 0.5em; }
.post-meta { font-weight: 100; color:#777; }

@media (max-width: 900px) {
    body { padding: 30px}
    img  { width: 100%;}
    body main > ul.toc { columns: 1 !important }
    .col2 { columns: 1 }
    .col3 { columns: 1 }
}

/* Contact Form */

div.contact-me {
    background-color: #ebf5fb;
    padding: 1em;

}

form label {
    color: #333;
    font-size: smaller;
    font-weight: 400;
}

input[type=email], input[type=text], input[type=password] {
    width: 100%;
    padding: 12px;
    margin: 4px 0 8px;
    box-sizing: border-box;
    border: 1px solid #333;
}

textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #333;
    height: 150px;
}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

div.contact-me h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Email Formatting */

.email {
    margin: 2em 1em; 
    padding-left: 2em;
    padding-top: 0.2em;
    padding-bottom: 0.1em;
    border-left: rgba(111, 172, 232, 0.5); 
    border-left-width: 4px; 
    border-left-style: solid;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
}

.from-email {
    border-left: lightgray; 
    border-left-width: 4px; 
    border-left-style: solid;
}

.email p {
    font-size: 16px;
}

.email .email-header {
    margin-top: 1em;
    margin-bottom: 2.5em;
}

.email .email-header p {
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.3;
    color: #555;
}

#translation-notice {
    width: 100%;
    background-color: #ffffcc;
    padding: 1em;
    font-size: 18px;
    font-style: normal;
    color: #555;
    margin-bottom: 2em;
}

#persona-name {
    font-weight: bold;
    color: #444;
}

/* Email Subscription Form */
.embeddable-buttondown-form {
    background-color: #ebf5fb;
    padding: 1em;
    margin: 2em 0 0em 0;
    border-radius: 8px;
}

.embeddable-buttondown-form label {
    color: #333;
    font-size: 1em;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5em;
}

/* Add styles for the form-input container */
.form-input {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.embeddable-buttondown-form input[type="email"] {
    flex: 1;
    padding: 12px;
    margin: 4px 0;
    box-sizing: border-box;
    border: 1px solid #333;
    height: 50px;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
}

.embeddable-buttondown-form input[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 20px;
    height: 50px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    min-width: 120px;
    transition: opacity 0.2s ease;
}

.embeddable-buttondown-form input[type="submit"]:hover {
    opacity: 0.8;
}

/* Add media query for smaller screens */
@media screen and (max-width: 600px) {
    .form-input {
        flex-direction: column;
        gap: 0.5em;
    }

    .embeddable-buttondown-form input[type="submit"] {
        width: 100%;
    }
}

details > summary {
    cursor: pointer;
    margin-bottom: 0em;
    font-style: italic;
}

body main div.about details > p { font-size: 1em;  }
body main div.about details > p a { text-decoration: underline; text-decoration-color: var(--primary-color); }

.post-content table.content-table {
    border-collapse: collapse;
    width: 100%;
    margin: 2em 0;
    font-size: 16px;
    font-family: "charter", Helvetica Neue, Helvetica, Arial, sans-serif;
    table-layout: fixed;
}

.post-content table.content-table th {
    background-color: #1e3a8a;
    color: white;
    text-align: center;
    font-weight: bold;
}

.post-content table.content-table td,
.post-content table.content-table th {
    padding: 12px;
    border: 3px solid white;
}