/* onest-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/onest-v9-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* onest-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/onest-v9-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* onest-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 800;
    src: url("/fonts/onest-v9-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* onest-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Onest";
    font-style: normal;
    font-weight: 900;
    src: url("/fonts/onest-v9-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**************************************************************************************
***                                  css variables                                  ***
**************************************************************************************/

:root {
    --back: light-dark(#f9f8f4, #1a1917);
    --back-dark: light-dark(#f0eee6, #141310);
    --back-lite: light-dark(#fff, #242220);
    --fore: light-dark(#1f1e1d, #e8e4da);
    --bord: light-dark(#1f1e1d26, #e8e4da26);
    --grey: light-dark(#73726c, #9e9b93);
    --link: light-dark(#1e5fb5, #5a9fd4);
    --link-hover: light-dark(#163f80, #7db3f0);

    --font: "Onest", sans-serif;
    --font-size: 17px;
    --site-bord: 0.1rem;
    --site-line: 1.6rem;
    --site-radi: 0.25rem;
    --site-size: 64ch;
}

/**************************************************************************************
***                                globals & generics                               ***
**************************************************************************************/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: var(--back);
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--site-line);
}

body {
    background-color: var(--back);
    color: var(--fore);
    margin: 0 auto;
    max-width: var(--site-size);
    padding: 0 1rem;
    width: 100%;
}

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

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

blockquote {
    background-color: var(--back-lite);
    border: var(--site-bord) solid var(--bord);
    border-radius: var(--site-radi);
    padding: 0 1rem;
    margin: 1rem 0;

    cite,
    cite a {
        color: var(--grey);
    }
}

code {
    background-color: var(--back-lite);
    border-radius: var(--site-radi);
    font-size: 0.875rem;
    padding: 0.1rem 0.25rem;
}

h1 {
    font-weight: 900;
}

h2 {
    font-weight: 800;
}

ol,
ul {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

/**************************************************************************************
***                                   site header                                   ***
**************************************************************************************/

body > header {
    text-align: center;

    nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        list-style-type: none;

        a {
            color: var(--grey);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        li {
            background-color: var(--back-lite);
            border: var(--site-bord) solid var(--bord);
            border-radius: var(--site-radi);
            padding: 0.1rem 0.5rem;
        }
    }
}

/**************************************************************************************
***                                   site content                                  ***
**************************************************************************************/

article {
    header {
        p {
            color: var(--grey);
            margin-top: -0.5rem;

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

/**************************************************************************************
***                                   site footer                                   ***
**************************************************************************************/

body > footer {
    color: var(--grey);
    text-align: center;

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

    a:first-of-type {
        text-decoration: none;
    }
}

/**************************************************************************************
***                                 custom elements                                 ***
**************************************************************************************/

body > main img.post-feat {
    border: var(--site-bord) solid var(--bord);
    border-radius: var(--site-radi);
    display: block;
    height: auto;
    margin: 1rem 0;
    max-width: 100%;
}

body > main ul.post-list {
    list-style: none;
    padding: 0;

    li {
        align-items: center;
        border-radius: var(--site-radi);
        display: grid;
        gap: 1rem;
        grid-template-columns: auto 1fr auto;
        padding: 0.25rem;
    }

    li img {
        border: var(--site-bord) solid var(--bord);
        border-radius: var(--site-radi);
        display: block;
        height: 2.5rem;
        margin: 0;
    }

    li:hover {
        background-color: var(--back-dark);
    }

    time {
        color: var(--grey);
        white-space: nowrap;
    }
}

body > main nav.post-navs ul {
    color: var(--grey);
}

/**************************************************************************************
***                                  media queries                                  ***
**************************************************************************************/

@media screen and (max-width: 600px) {
    .desktop {
        display: none;
    }

    body > header {
        nav ul {
            background-color: var(--back-lite);
            border: var(--site-bord) solid var(--bord);
            border-radius: var(--site-radi);
            justify-content: space-between;
            gap: 0rem;

            li {
                border: none;
            }
        }
    }

    body > main ul.post-list li {
        grid-template-columns: 1fr auto;
    }

    body > footer {
        font-size: 0.875rem;
    }
}

@media print {
    :root {
        --back: #fff;
        --back-dark: #fff;
        --back-lite: #fff;
        --bord: #ccc;
        --grey: #777;
        --fore: #000;
        --link: #05a;
    }
}

@media (prefers-color-scheme: dark) {
    article img,
    ul.post-list img {
        filter: brightness(0.85);
    }
}