@font-face {
    font-family: "Yoav";
    font-style: normal;
    font-weight: 400;
    /* from https://oketz.com/fonts/yoav.html */
    src: url("/theme/fonts/yoav.ttf");
    size-adjust: 140%;
}

html {
    background: url("/theme/img/rdbg.jpg");
}

main {
    margin: 0 auto;
    max-width: 80%;
}

article[full-post] {
    margin: 0 auto;
    max-width: 40em;
}

a {
    color: #f87171;
    font-family: "Yoav";
    text-underline-offset: 4px;
}

h1,
h2,
h3 {
    margin-bottom: 0;
    font-family: "Yoav";
    text-underline-offset: 6px;
}

h1 a,
h2 a,
h3 a {
    text-underline-offset: 6px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

aside {
    color: #64748b;
}

.site-title {
    text-align: center;
    font-size: 0.7rem;

    a {
        color: #b91c1c;
    }
}

a:hover {
    filter: brightness(200%);
    transition: filter 5s;
}

.grid-area-articles {
    grid-area: articles;
}

.grid-area-about {
    grid-area: about;
}

.grid-area-blogroll {
    grid-area: blogroll;
}

@media (min-width: 1024px) {
    .index-grid {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: 5fr 2fr;
        column-gap: 3rem;
        grid-template-areas:
            "articles blogroll"
            "articles about"
            "articles .";
    }
}

nav[pagination] {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: row;
    gap: 0.5rem;

    .spacer {
        width: 3.5rem;
    }
}