@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.page-content {
    width: 100%;
}

.w {
    margin: 0 auto;
    max-width: 640px;
    width: 100%;
}

/* Style the navigation */
ul {
    list-style: none;
    padding: 0;
}

ul li {
    margin: 10px 0;
}

ul ul {
    margin-left: 20px;
    margin-top: 5px;
}

ul ul li {
    margin: 5px 0;
}

/* Style links */
a {
    color: #0000FF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Style dates in post list */
ul li span {
    color: black;
    font-size: 0.9em;
}

/* Style articles */
article {
    line-height: 1.6;
    margin-top: 20px;
}

article h1 {
    margin-bottom: 20px;
    color: #333;
}

pre,
.chroma {
    background: #eff1f5 !important;
    color: #4c4f69 !important;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 15px 0;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre !important; /* Force pre-formatting for exact alignment */
    line-height: 1.5 !important; /* Consistent vertical spacing */
}

/* Ensure tokens inside don't inherit layouts that break things */
.chroma span {
    display: inline !important;
    font-size: 1em !important; /* Reset any global span font-size */
}

/* Chroma syntax highlighting classes - Catppuccin Latte */
.chroma * { color: #4c4f69; } /* Fallback to Text Color */
.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt,
.chroma .kc {
    color: #8839ef;
}

/* Keywords - Mauve */
.chroma .s,
.chroma .s1,
.chroma .s2,
.chroma .sb,
.chroma .sc,
.chroma .sd,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr {
    color: #40a02b;
}

/* Strings - Green */
.chroma .c,
.chroma .c1,
.chroma .cm,
.chroma .cp,
.chroma .cs {
    color: #9ca0b0;
    font-style: italic;
}

/* Comments - Overlay0 */
.chroma .nf,
.chroma .fm {
    color: #1e66f5;
}

/* Functions - Blue */
.chroma .n,
.chroma .na,
.chroma .nb,
.chroma .nc,
.chroma .nd,
.chroma .ni,
.chroma .ne,
.chroma .nl,
.chroma .nn,
.chroma .nt,
.chroma .nv,
.chroma .nx,
.chroma .vc,
.chroma .vg,
.chroma .vi {
    color: #4c4f69;
}

/* Names/Vars - Text */
.chroma .o,
.chroma .ow {
    color: #04a5e5;
}

/* Operators - Sky */
.chroma .m,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo,
.chroma .mb,
.chroma .il {
    color: #fe640b;
}

/* Numbers - Peach */
.chroma .p,
.chroma .pi {
    color: #179299;
}

/* Punctuation - Teal */

pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0;
}

code {
    background: #f0f0f0;
    color: #333;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Home Page Custom Centering */
.home-page .w {
    text-align: center;
}

.home-page header h1 {
    margin-top: 0;
}

.home-page ul:last-child {
    margin-bottom: 0;
}