:root {
    --base: #eff1f5;
    --mantle: #e6e9ef;
    --text: #4c4f69;
    --subtext: #6c6f85;
    --lavender: #7287fd;
    --blue: #1e66f5;
    --peach: #fe640b;
    --green: #40a02b;
    --surface0: #ccd0da;
}

@media (prefers-color-scheme: dark) {
    :root {
        --base: #1e1e2e;
        --mantle: #181825;
        --text: #cdd6f4;
        --subtext: #a6adc8;
        --lavender: #b4befe;
        --blue: #89b4fa;
        --peach: #fab387;
        --green: #a6e3a1;
        --surface0: #313244;
    }
}

body {
    background-color: var(--base);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

h1, h2, h3 { color: var(--lavender); }

a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

a:hover {
    border-color: var(--blue);
}

code {
    background-color: var(--surface0);
    color: var(--peach);
    padding: 2px 6px;
    border-radius: 4px;
}

hr {
    border: 0;
    border-top: 1px solid var(--surface0);
    margin: 2rem 0;
}

.posts-list {
    list-style-type: none;
    padding: 0;
    margin: 1.5rem 0;
}

.posts-list li {
    display: flex;
    margin-bottom: 0.8rem;
    align-items: baseline;
}

.posts-list time {
    color: var(--subtext);
    font-size: 0.9rem;
    font-family: monospace;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.socials-list {
    list-style-type: none;
    padding: 0;
    margin: 1rem 0;
}

.socials-list li {
    display: flex;
    margin-bottom: 0.6rem;
    align-items: baseline;
}

.socials-list .platform {
    color: var(--subtext);
    width: 100px; /* allign names?? */
    font-weight: bold;
    flex-shrink: 0;
}