: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;
}

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 max-content;
    column-gap: 1em;

    *: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 3vmin;
    border-radius: 2vmin;

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

    >:nth-child(3)>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;
    }
}