:root {
    --background: #1f2021;
    --foreground: #eeeeee;
    --header-bg: #1e1f1c;
    --header-border: #3e3d32;
    --header-title: #a6e22e;
    --link: #66d9ef;
    --link-hover: #ff4f8f;
    --nav-label: #0fb0e1;
    --heading: #ffffff;
    --blockquote-border: #f92672;
    --blockquote-bg: #3e3d32;
    --blockquote-text: #e6db74;
    --code-bg: #0e0e0e;
    --code-inline-bg: #49483e;
    --post-border: #2c363f;
    --footer-bg: #1e1f1c;
    --footer-text: #75715e;
    --footer-border: #3e3d32;
    --pagination-active: white;
    --pagination-disabled: grey;
    --comment: #b6b2a0;
    --tags: #75715e;
    --comment: #bbb;
}

/* Base settings */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
table {
    border-spacing: 0;
}
table, th, td {
    border: 1px solid var(--header-border);
    border-collapse: collapse;
}
th, td {
    padding: 2pt 4pt;
}

/* Header */
header {
    background-color: var(--header-bg);
    padding: 0.75em 1.2em;
    font-size: 1.5em;
    border-bottom: 1px solid var(--header-border);
    display: flex;
    align-items: center;
}
header h1 {
    margin: 0;
    color: var(--header-title);
}
header h1 a {
    color: var(--header-title);
}

.social-icon {
    margin-left: 10px;
    color: var(--link);
    text-decoration: none;
}

.social-icon:hover {
    color: var(--link-hover);
}

#project-nav {
    padding: 5pt 20pt;
    display: block;
}
#project-nav h4 {
    font-size: 10pt;
    margin: 0;
    color: var(--nav-label)
}
.project-link {
    color: var(--link);
    text-decoration: none;
}

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

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

/* Blog post titles */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 17pt;
}

h2 {
    font-size: 15pt;
}

h3 {
    font-size: 13pt;
}

h4 {
    font-size: 12pt;
}

/* Blog content */
article {
    padding: 0.5em;
    padding-left: 0;
    word-wrap: break-word;
}

/* Paragraphs */
p {
    width: 100%;
    font-size: 11pt;
}
article ul,
article ol {
    font-size: 11pt;
    margin: 0;
    padding-left: 13pt;
}
article table {
    font-size: 10pt;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--blockquote-border);
    padding-left: 1em;
    color: var(--blockquote-text);
    background-color: var(--blockquote-bg);
}

/* Code blocks */
pre, code {
    background-color: var(--code-bg) !important;
    color: var(--foreground);
    padding: 0;
    border-radius: 8px !important;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 10pt !important;
}

.highlight pre,
.content > pre {
    padding: 1em;
}

pre code {
    background-color: transparent;
}

pre {
    margin-bottom: 1.5em;
    overflow-x: auto;
}

code {
    color: var(--foreground);
}

/* Inline code */
p code {
    background-color: var(--code-inline-bg);
    color: var(--foreground);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 10pt;
}

/* Lists */
ul, ol {
    margin-left: 2em;
    margin-bottom: 1.5em;
}

/* Time element styling */
time {
    font-size: 11pt;
    color: var(--comment);
}

/* Tags class styling */
ul.tags {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.tags li {
    display: inline;
    margin-right: 0.5em;
    font-size: 0.85em;
    color: var(--tags);
    overflow-wrap: break-word;
}

ul.tags li a {
    color: var(--tags);
    text-decoration: none;
}

ul.tags li a:hover {
    color: var(--link-hover);
}

.post_list ul.tags li {
    margin-right: 1em;
}

/* Index */
.post_list article {
    margin-left: 1.5em;
    border-top: 1px dashed var(--post-border);
}

.post_list article > time::before {
    content: "- ";
}

.post:first-of-type {
    margin-top: 8pt;
}

.post_content {
    padding-left: 10pt;
}

article:not(.post_list article) {
    padding-left: 20pt;
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 1em;
    font-size: 0.9em;
    border-top: 1px solid var(--footer-border);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    list-style-type: none;
}

.pagination .active a {
    color: var(--pagination-active);
}

.pagination .disabled a {
    color: var(--pagination-disabled);
}

#postFilter {
    padding: 8pt 20pt;
    font-size: 10pt;
    padding-top: 12pt;
    padding-bottom: 0;
}
#postFilter label {
    font-weight: bold;
    color: var(--nav-label);
}

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

@media (max-width: 600px) {
    html {
        font-size: 110%;
    }

    header {
        padding: 0.75em;
    }

    #project-nav {
        padding: 5pt 12pt;
    }

    article:not(.post_list article) {
        margin: 0.5em;
        padding: 0.2em;
        padding-left: 5pt;
    }

    .post_list article {
        margin: 0em 0.75em;
    }

    .post_list article p {
        font-size: 10pt;
    }

    #postFilter {
        padding: 8pt 12pt;
        padding-top: 12pt;
        padding-bottom: 0;
    }
}