:root {
    --safe-top: max(2vmin, env(safe-area-inset-top));
    --safe-right: max(2vmin, env(safe-area-inset-right));
    --safe-bottom: max(2vmin, env(safe-area-inset-bottom));
    --safe-left: max(2vmin, env(safe-area-inset-left));
}

html {
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    overflow-y: scroll;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

hr {
    margin-top: 0;
    margin-bottom: 0;
    height: 1px;
    border: none;
    width: 100%;
}

table {
    border-collapse: collapse;
}

:is(table, th, td) {
    border-width: 1px;
    border-style: solid;
}

:is(th, td) {
    padding: 1vmin;
}

blockquote {
    padding: 2vmin;
}

ul {
    list-style-position: outside;
    padding-inline-start: 1.5em;
}

pre {
    white-space: pre-wrap;
    border: solid;
    padding: 2vmin;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
    padding: 0 4px;
}

.header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto;

    a {
        text-align: center;
        align-content: center;
    }

    img {
        width: 10vmin;
        height: 10vmin;
        border-radius: 50%;
        margin: 1vmin;
    }
}

.indices {
    display: grid;
    grid-template-areas: "date title";
    grid-template-columns: max-content 1fr;
    column-gap: 0.5em;

    *:nth-child(odd) {
        font-variant-numeric: tabular-nums;
    }
}

.container {
    display: grid;
    grid-template-rows: "title separator content";
}

.article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    margin-top: 1vmin;
    padding: 0;
    border-radius: 2vmin;

    a.title {
        width: fit-content;
        margin-top: 2vmin;
        margin-bottom: 2vmin;
    }

    >:not(.content) {
        margin-left: 3vmin;
        margin-right: 3vmin;
    }

    >.content {
        >blockquote {
            margin-left: 0;
            margin-right: 0;
        }

        >:not(blockquote) {
            margin-left: 3vmin;
            margin-right: 3vmin;
        }

        >div {
            margin-block-start: 1em;
            margin-block-end: 1em;
        }
    }
}

/* landscape */
@media (min-aspect-ratio: 7/5) {

    .container {
        grid-template-columns: 1fr 1fr;
        column-gap: 1em;
    }

    .article {
        >.content {
            >blockquote {
                margin-left: calc(3vmin + 0.5em);
                margin-right: calc(3vmin + 0.5em);
            }
        }
    }
}