@import url('fonts/alegreya.css');

:root {
    --stone: 232, 226, 220;
    --pimk: 199, 0, 102;
    --bloo: 37, 131, 232;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

p, ul, ol {
    margin-top: 0.2em;
}

body {
    background-color: rgb(var(--stone));
    color: rgb(var(--pimk));
    font-family: 'Alegreya', serif;
    font-size: 1.3em;
    margin: 88px 16px 32px 16px;
}

body > div {
    max-width: 500px;
    margin: auto;
}

a {
    color: rgb(var(--pimk))
}

::selection {
    background-color: rgb(var(--pimk));
    color: rgb(var(--stone));
}

hr {
    border: none;
    border-top: 3px solid rgba(var(--pimk), 0.3);
    margin: 0.9em 0;
}

footer, nav, .postInfo {
    font-size: 0.85em;
}

.postInfo {
    color: rgba(var(--pimk), 0.6);
}

.postInfo span {
    display: block;
}

.postDesc {
    margin-bottom: 0;
}

.flag {
    image-rendering: pixelated;
    padding: 0px 4px;
}

:focus-visible {
    outline-offset: 2px;
    outline: 4px solid rgb(var(--bloo));
}

ul {
    list-style-type: '> ';
}

:target {
    background-color: rgba(var(--pimk), 0.1)
}

@media print {
    :root {
        --pimk: 0, 0, 0;
    }

    body {
        background-color: none;
        font-size: 1em;
        margin: initial;
    }

    body > div {
        max-width: none;
    }

    #footnotes li a:first-of-type {
        display: none;
    }

    .fn {
        text-decoration: none;
    }
}