/* #region general */

:root {
    --bright-green: #66FF66;
    --dark-green: #56dd56;
}

a { text-decoration: none; color: var(--ink)}
a:hover, a:active { text-decoration: none; color: var(--dark-green); }
span { text-decoration: none; color: var(--ink) }
span:hover { text-decoration: none; color: var(--dark-green); }

/* #endregion general */

/* Fill full page with dark background */
html,
body {
    /* background-color: #242526; */
    min-height: 100vh;
}

body :not(footer):not(nav a):not(h1) {
    font-family: '04b03';
}

/* Dark mode header */
/* header {
    z-index: 200;
    background: rgba(18, 18, 20, 0.55) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

header .header-logo,
header nav a {
    color: rgba(200, 200, 205, 0.75);
}
header .header-logo:hover,
header nav a:hover {
    color: #ffffff;
}

.hamburger span {
    background: rgba(200, 200, 205, 0.75);
}

.mobile-drawer {
    background: rgba(18, 18, 20) !important;
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    z-index: 300 !important;
}

.mobile-drawer a {
    color: rgba(200, 200, 205) !important;
}
.mobile-drawer a:hover {
    color: #ffffff !important;
}

.drawer-scrim {
    z-index: 250 !important;
}

.footer-strip {
    background: rgba(18, 18, 20, 0.55) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(200, 200, 205, 0.5);
} */

/* #region blog */

main {
    display: block;
    padding-top: var(--header-h);
    padding-bottom: 32px;
    animation: fadeUp 0.6s ease 0.15s forwards;
}

#blog {
    max-width: 700px;
    margin: 50px auto 10px;
    padding: 20px;
}

.pagination {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px 20px;
    display: flex;
    gap: 1rem;
}

.pagination a {
    color: var(--muted);
    font-size: 0.85em;
}
.pagination a:hover { color: var(--bright-green); }

.post-preview {
    font-size: 0.85em;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.post-preview h2 a {
    color: var(--dark-grey);
    text-decoration: none;
}
.post-preview h2 a:hover { color: var(--dark-green); }

.post-preview small {
    color: var(--muted);
    font-size: 0.85em;
}

.post-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px calc(32px + 12px) 20px;
}

.post-content p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--muted);
    font-size: 0.85em;
}
.post-content ul,
.post-content ol {
    padding-left: 1.5em;
    margin-bottom: 15px;
}

.post-content li {
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--muted);
    font-size: 0.80em;
}

.post-content h1,
.post-content h2,
.post-content h3 {
    margin-top: 50px;
    margin-bottom: 10px;
    color: var(--dark-green);
}

.page-header {
    padding: 10px;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 0.6s ease 0.15s forwards;
}

.page-header h1 {
    font-size: clamp(3rem, 4vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;

    max-width: 300px;
    margin: 30px auto 10px;
}

.sub {
    font-family: 'mondwest';
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    font-weight: 300;
    color: var(--dark-grey);
    margin-bottom: 2.5rem;
    letter-spacing: 0.02em;

    max-width: 150px;
    margin: 30px auto 10px;
}

/* #endregion blog */

body.dark a { 
    color: var(--white);
}

body.dark a:hover, body.dark a:active { 
    color: var(--bright-green); 
}

body.dark .post-content h1,
body.dark .post-content h2,
body.dark .post-content h3 {
    color: var(--bright-green);
}

body.dark p, body.dark ul, body.dark li { 
    color: var(--off-off-white);
}

body.dark .post-preview {
    border-bottom: 1px solid var(--light-border);
}