:root {
    /* Flexoki Light */
    --flexoki-bg: #FFFCF0;
    --flexoki-ui: #F2F0E5;
    --flexoki-text: #100F0F;
    --flexoki-red: #AF3029;
    --flexoki-green: #66800B;
    --flexoki-blue: #205EA6;
    --flexoki-purple: #5E409D;
    --flexoki-brown: #724F3D;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    max-width: 560px;
    margin: 0 auto;
    background-color: var(--flexoki-bg);
    color: var(--flexoki-text);
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

h1 {
    color: var(--flexoki-text);
    font-weight: 400;
}

h3 {
    color: var(--flexoki-text);
    font-weight: 500;
}

a {
    color: var(--flexoki-text);
    text-decoration: underline;
}

a:hover {
    opacity: 0.8;
}

a[target="_blank"]::after {
    content: "↗";
    margin-left: 3px;
    display: inline-block;
    font-size: 0.8em;
    text-decoration: none;
}

.footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 0.8em;
    opacity: 0.7;
    line-height: 1;
}

.post {
    max-width: 100%;
}

.post-date {
    color: var(--flexoki-text);
    opacity: 0.7;
    margin-top: -1em;
    margin-bottom: 2em;
    font-size: 0.9em;
}