/* Shamelessly stolen from https://ludic.mataroa.blog/ */
:root {
    font-family: sans-serif;
    line-height: 1.5;

    color-scheme: light dark;

    /* this colour is only used in dark mode */
    --dark-mode-color: #212529;

    --link-color: #1175e2;
    --ascent-color: #006cdf;
    --dark-grey-color: #757575;
    --light-grey-color: #eff1f5;
    --airy-grey-color: #fafafa;
    --green-color: #26bd60;
    --red-color: #ff0000;
    --purple-color: #cd1ecd;
}

/* dark mode
 * create a new color (dark-mode-color)
 * override existing colors */
@media (prefers-color-scheme: dark) {
    :root {
        color: #fff;
        background: var(--dark-mode-color);

        --link-color: #70b3ff;
        --dark-grey-color: #78828a;
        --light-grey-color: #353535;
        --airy-grey-color: #2b2b2b;
        --purple-color: #dd47ec;
    }
}

body {
    max-width: 40em;
    margin: 0 auto;
    padding: 0 1rem;
    width: auto;
    font-size: 1rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

nav {
    border-bottom: 2px solid var(--light-grey-color);
    margin-top: 16px;
}

footer {
    border-top: 2px solid var(--light-grey-color);
    margin-left: auto;
    margin-right: auto;
    margin-top: 56px;
    margin-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--dark-grey-color);
}

.main-body {
    color: var(--dark-grey-color);
    margin: 0 0 24px;
}

.post-list span {
    padding-right: 4px;
}

h1 {
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--light-grey-color);
    margin: 16px 0;
}

h2,
h3 {
    font-weight: 500;
    margin: 16px 0;
}

a {
    color: var(--link-color);
}

blockquote {
    border-left: 4px solid var(--light-grey-color);
    padding-left: 16px;
    margin-left: 0;
    color: var(--dark-grey-color);
}