/* IBM Plex Mono font-face declarations */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
/* End IBM Plex Mono font-face declarations */

body {
    font: inherit;
    font-family: "IBM Plex Mono", monospace;
}

time.post-item-meta {
    white-space: nowrap;
    flex-shrink: 1;
}

.wrapper {
    max-width: -webkit-calc(1440px - (30px * 2));
    max-width: calc(1440px - (30px * 2))
}

.navbar {
    height: auto;
    max-width: calc(1440px - (30px * 2));
    max-width: -webkit-calc(1440px - (30px * 2));
    border-bottom: none;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

.no-margin-left {
    margin-left: 0 !important;
}

#resume-preview dl.item-header {
    /*padding-top: 20px;*/
}

.mermaid.no-text {
    color: transparent;
    font-size: 0;
}

.container {
    max-width: 1440px;
}

.cluster span, .cluster-label span {
    /*color: #000 !important;*/
}

/* Backbone CSS for Resume Template 1 */

/* Basic */

#resume-preview a {
    text-decoration: none;
}

#resume-preview {
    text-align: justify;
}

#resume-preview .underlined {
    text-decoration: underline;
}

#resume-preview .last-name, #resume-preview .resume-header-title {
    font-weight: lighter;
}

#resume-preview [data-scope="vue-smart-pages"][data-part="page"] {
    background-color: white;
    color: black;
    text-align: justify;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#resume-preview p,
#resume-preview li,
#resume-preview dl {
    margin: 0;
}

/* Headings */

#resume-preview h1,
#resume-preview h2,
#resume-preview h3 {
    font-weight: bold;
}

#resume-preview h1 {
    font-size: 2.13em;
}

#resume-preview h2,
#resume-preview h3 {
    padding-bottom: 10px;
    margin-bottom: 5px;
    font-size: 1.3em;
}

#resume-preview h2 {
    font-size: 1.5em;
}

#resume-preview h2 {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

/* Lists */

#resume-preview ul,
#resume-preview ol {
    padding-left: 1.5em;
    margin: 0.2em 0;
}

#resume-preview ul {
    list-style-type: circle;
}

#resume-preview ol {
    list-style-type: decimal;
}

/* Definition Lists */

#resume-preview dl {
    display: flex;
}

#resume-preview dl dt,
#resume-preview dl dd:not(:last-child) {
    flex: 1;
}

/* Tex */

#resume-preview :not(span.katex-display) > span.katex {
    font-size: 1em !important;
}

/* SVG & Images */

#resume-preview svg.iconify {
    vertical-align: -0.2em;
}

#resume-preview img {
    max-width: 100%;
}

/* Header */

#resume-preview .resume-header {
    text-align: center;
}

#resume-preview .resume-header h1 {
    text-align: center;
    line-height: 1;
    margin-bottom: 8px;
}

#resume-preview .resume-header-item:not(.no-separator)::after {
    content: " | ";
}

/* Citations */

#resume-preview [data-scope="cross-ref"][data-part="definitions"] {
    padding-left: 1.2em;
}

#resume-preview [data-scope="cross-ref"][data-part="definition"] p {
    margin-left: 0.5em;
}

#resume-preview [data-scope="cross-ref"][data-part="definition"]::marker {
    content: attr(data-label);
}

#resume-preview [data-scope="cross-ref"][data-part="reference"] {
    font-size: 100%;
    top: 0;
}

/* Dark & print mode */
/* You might want to comment out the following lines if you change the background or text color. */

.dark #resume-preview [data-scope="vue-smart-pages"][data-part="page"] {
    background-color: hsl(213, 12%, 15%);
    color: hsl(216, 12%, 84%);
}

@media print {
    .dark #resume-preview [data-scope="vue-smart-pages"][data-part="page"] {
        background-color: white;
        color: black;
    }
}

.text-center p {
    text-align: center;
}

p.text-center {
    display: block;
    width: 100%;
}

.bio {
    padding-top: 30px;
}

@media print {
    .no-print, .footer {
        display: none;
    }
}

#resume-preview .underline-links a {
    text-decoration: underline;
}

@media print {
    body {
        color: black !important;
    }
}

.pagination {
    text-align: center;
    /*margin: 2rem 0;*/
    margin: 10px 0;
}

.pagination .pager {
    list-style: none;        /* remove bullet points */
    display: flex;           /* put items on one row */
    justify-content: center; /* center them horizontally */
    gap: 1.5rem;             /* space between links */
    padding: 0;              /* remove default padding */
    margin: 0;               /* remove default margin */
}

.pagination .pager li {
    display: inline;         /* ensure inline behavior */
}

.pagination .pager a {
    text-decoration: none;
    font-weight: 500;
    color: var(--text-color, #333);
    transition: color 0.2s ease;
}

.pagination .pager a:hover {
    color: var(--accent-color, #007acc);
}

@media(min-width: 768px) {
    .pagination .pager a {
        font-size: 1.1rem;
    }

    /* Base reset */
    .trigger-container,
    .trigger-container ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Top-level menu */
    .trigger-container {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        position: relative;
    }

    /* Top-level links */
    .trigger-container > li > a.menu-link {
        text-decoration: none;
        color: var(--text-color, #333);
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .trigger-container > li > a.menu-link:hover, .trigger-container > li:focus-visible > a.menu-link {
        color: var(--accent-color, #007acc);
    }

    .trigger-container > li:focus-visible {
        outline: none;
    }

    /* Submenu container */
    .trigger-container li {
        position: relative;
    }

    /* Child menu (dropdown) */
    .trigger-container li ul {
        display: none;
        position: absolute;
        top: 100%; /* below the parent */
        left: 0;
        background: var(--background, #fff);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        min-width: 160px;
        z-index: 1000;
    }

    /* Show submenu on hover/focus */
    .trigger-container li:hover > ul,
    .trigger-container li:focus-within > ul,
    .trigger-container li:focus > ul {
        display: block;
    }

    /* Submenu items */
    .trigger-container li ul li {
        display: block;
    }

    .trigger-container li ul {
        background: #eee;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .trigger-container li ul a.menu-link {
        display: block;
        padding: 0.5rem 1rem;
        white-space: nowrap;
        color: var(--text-color, #333);
        text-decoration: none;
    }

    .trigger-container li ul a.menu-link:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--accent-color, #007acc);
    }

    /* Separator styling */
    .trigger-container .menu-separator span {
        color: var(--text-color, #999);
    }



}

.header {
    margin-top: 50px;
}

.resume-header.header {
    margin-top: 0;
}

.author .author-bio {
    max-width: 640px;
}

.post-meta time {
    margin-right: 0;
}

@media(max-width: 768px) {
    .menu ul {
        flex-direction: column;
    }
    a#mode {
        margin-top: 10px;
    }
    .post-item .post-item-title {
        max-width: inherit;
    }

    .post-item {
        flex-direction: column;
        align-items: baseline;
        text-align: justify;
    }

    .post-item time {
        font-style: italic;
        color: #666;
    }

    .menu .menu-icon {
        margin-right: 10px;
    }

    a#mode {
        display: inline-block;
    }
}

div.page-content {
    text-align: justify;
}

/* Yesterweb */

:root {
    --bg: #111111;
    --amber-bg: #ffb000af;
    --amber-bg-dark: #432a079c;
    --text: #ffb000;
    --accent: #ffcc00;
    --accent-glow: #ffdd5e;
    --text-dark: #432a07;
}

/* General typesetting for dark mode */

html.dark body {
    color: var(--text);
    background-color: var(--bg);
}

html, body {
    overflow: auto;             /* scrolling still works */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE / Edge Legacy */
}

body::-webkit-scrollbar, html::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, new Edge */
}

html.dark strong, html.dark b, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark a:hover, html.dark .page-content a:hover, html.dark .page-content a:hover, html.dark .page-content a:active,
html.dark .page-content a:focus {
    color: var(--accent-glow)
}

html.dark li>code, html.dark p>code {
    background-color: var(--amber-bg-dark);
    color: var(--text);
}

html.dark .page-content a {
    color: var(--text);
}

.glow {
    text-shadow:
            0 0 1px var(--accent-glow),    /* inner glow */
            0 0 1px var(--accent-glow),   /* middle glow */
            0 0 1px var(--accent-glow),   /* outer glow */
            0 0 1px var(--accent-glow);   /* extra halo */
}

pre>code {
    margin-left: inherit;
    margin-right: inherit;
}

.page-content {
    padding-top: 0;
}

/* Header and Navbar */

.menu .trigger {
    float: left;
    margin-left: 0;
}

pre.banner {
    display: inline-block;
    margin-bottom: 0;
}
pre.banner, pre.banner-motd {
    font-size: 0.3rem;
    background-color: inherit;
    padding: 0;
    border: none;
    overflow-x: auto;
    color: var(--text);
    outline: none;
}

pre.banner-motd {
    font-size: 0.6rem; line-height: 1.2;
    display: block;
    margin-top: 0;
}

pre {
    border-radius: 0;
    border: solid 1px var(--text);
    outline: solid 1px var(--text);
    outline-offset: 3px;
}

html.dark .navbar .menu .menu-link.active {
    background-color: var(--amber-bg);
    color: var(--text-dark);
}

html.dark .navbar .menu .menu-link.blurry {
    font-weight: bolder;
    color: var(--accent-glow);
}

html.dark .navbar .menu .menu-link {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--text);
}

.dark .trigger-container li ul a.menu-link:hover {
    background-color: var(--amber-bg);
    color: var(--text-dark);
}

html.dark .navbar .menu .menu-link:focus-visible {
    outline-color: var(--accent-glow);
    outline-offset: 0;
    outline-width: 2px;
    background-color: var(--amber-bg);
    color: var(--text-dark);
}

html.dark .navbar .menu .menu-link:focus {
    color: var(--text-dark);
}

.cursor {
    display: inline-block;
    width: 10px;
    height: 20px;
    margin-left: 5px;
    animation: blink 1.5s step-end infinite;
}

.menu .menu-link {
    display: inline-block;
    padding: 0 20px;
    /*margin-bottom: -1px;*/
}

.menu ul {
    margin: 0;
    margin-left: -1px;
}

.navbar {
    margin-bottom: 0;
    padding-bottom: 0;
}

.posts-item-note, .header-title {
    border: 2px solid var(--text);
    padding: 10px;
    background-color: var(--amber-bg-dark);
}

html.dark .posts-item-note, html.dark .header-title {
    color: var(--text);
    margin-bottom: 0;
    margin-top: 0;
}

.wrapper, .header-title {
    padding: 0;
    border: 2px solid var(--text);
}

.page-content .header, .list-page .header {
    margin-top: 0;
}

/* Content Areas */

main.homepage-main, main.list-main {
    padding: 10px;
}

main.content-main {
    padding: 20px;
}

.homepage-section, .list-page .page-content {
    border: 2px dotted var(--text);
    border-top: 0;
}

.homepage-main .homepage-section {
    margin-bottom: 20px;
}

.homepage-main .homepage-section:last-child {
    margin-bottom: 0;
}

.homepage-section h3 {
    margin-top: 0;
}

html.dark .post-item, html.dark a.post-item {
    text-decoration: none;
}

.post-item {
    padding: 5px;
}

html.dark .post-item, html.dark a.post-item {
    color: var(--text);
}

html.dark .post-item:hover {
    background-color: var(--amber-bg);
    color: var(--text-dark);
}

html.dark a:focus, html.dark a.post-item:focus-visible {
    outline-color: var(--accent-glow);
    outline-offset: 0;
    outline-width: 2px;
    background-color: var(--amber-bg);
    color: var(--text-dark);
    transition: outline-color 0.2s ease;
    animation: blink-selection 2s ease-in-out infinite;
}

html.dark .post-item:not(:first-child), html.dark .post-item:hover {
    border: none;
}

html.dark a.post-item:hover, html.dark .post-item:hover time {
    color: var(--text-dark);
}

html.dark main.page-content .post-meta {
    color: var(--text);
}

.wrapper.post main.page-content {
    padding: 10px;
}

.wrapper.post main.page-content .post-meta {
    padding: 10px;
    border: 2px dotted var(--text);
    border-top: none;
    font-style: italic;
}

.page-content h1 {
    font-size: 20px;
}

.wrapper.post article > .page-content {
    padding: 10px;
}

html.dark blockquote {
    border-color: var(--accent-glow);
    color: var(--accent);
}

/* Pagination and footer */

.pagination .pager a {
    color: var(--text);
    padding: 5px;
}

html.dark .pagination .pager a:hover {
    background-color: var(--amber-bg);
    color: var(--text-dark);
}

html.dark .footer .footer_copyright {
    color: var(--text);
}

html.dark #totop {
    background: var(--bg);
    color: var(--text);
    border-radius: 0;
    border: 1px solid var(--text);
}

footer.footer {
    display: block;
    position: absolute;
    width: 100vw;
    margin-top: 0;
    margin-bottom: 10px;
    bottom: 0;
    left: 0;
}

.footer-spacer {
    margin-bottom: 150px;
}

.no-text-decoration {
    text-decoration: none;
}

.no-text-decoration:focus {
    outline: none;
}


@keyframes glowPulse {
    0%, 100% {
        box-shadow: 3px 3px 6px #00ff00,
        3px 3px 12px #ff0000;
    }
    50% {
        box-shadow: 0 0 2px var(--accent);
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink-selection {
    0% {
        background-color: var(--amber-bg);
        color: var(--text-dark)
    }
    30%, 70% {
        background-color: transparent;
        color: var(--text);
    }
    100% {
        background-color: var(--amber-bg);
        color: var(--text-dark)
    }
}

/* phosphor grid pattern */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 191, 0, 0.12) 1px, transparent 1px);
    background-size: 4px 4px;
    mix-blend-mode: screen;
    opacity: 0.8;
    animation: glow-background 1.5s ease-in-out infinite;

}

@keyframes glow-background {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}
/*
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">\
<text x="0" y="10" font-size="10" font-family="IBM Plex Mono" fill="rgba(255,191,0,1)">░</text>\
</svg>');
    background-repeat: repeat;
    background-size: 10px 10px;
    mix-blend-mode: screen;
    opacity: 1;
}*/

.statusbar {
    /*border-bottom: 1px solid var(--accent-glow);*/

    padding: 2px 6px;
    margin-bottom: 5px;
    text-align: center;
    letter-spacing: 1px;
}

.flip {
    transform: scaleX(-1);
    display: inline-block;
}

.show-keys b {
    animation: glow 1.5s ease-in-out infinite;
}

.show-keys.active b, .show-keys.blurry b {
    animation: none;
}

html.dark a b {
    color: inherit;
    font-weight: inherit;
}

html.dark a:hover b {
    color: inherit;
}

html.dark a.active b {
    color: var(--text-dark);
}

@keyframes glow {
    0%, 100% {
        /*text-shadow: 1px -1px 1px var(--accent-glow);*/
        color: inherit
    }
    50% {
        /*text-shadow: 0px -1px 3px var(--accent-glow);*/
        color: var(--accent-glow);
    }
}

@media (min-width: 768px) {
    .no-desktop {
        display: none;
    }

    .dark .trigger-container li ul {
        background: var(--bg);
        border-color: var(--text);
        border-radius: 0;
    }

}

@media(max-width: 767px) {
    .post-item time {
        color: var(--accent-glow);
    }

    .no-mobile {
        display: none;
    }

    main.homepage-main, main.list-main, .wrapper.post main.page-content {
        padding: 3px;
    }
    .wrapper.post main.page-content .page-content {
        padding: 5px;
    }

    html.dark .navbar .menu {
        background: none;
        border: none;
        left: auto;
        float: right;
    }

    html.dark .navbar .menu .trigger {
        left: 0;
    }

    .banner {
        z-index: 1;
    }

    body {
        padding: 0 10px;
    }

    body .navbar pre {
        padding: 0 10px;
    }

    #totop {
        bottom: 20px;
        right: 20px;
    }

    .wrapper.post {
        padding: 0;
    }

    .wrapper.post article > .page-content {
        padding: 0;
    }

    html.dark .navbar .menu .menu-link.no-click-mobile {
        pointer-events: none;
        text-decoration: none;
    }

    .menu-icon {
        border: 2px solid var(--text);
    }

    .post-item .post-item-title, .post-item time {
        font-size: 13px;
    }

}