html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    font-family: sans-serif;
}

body {
    display: grid;
    justify-content: center;
    grid-template-rows: 2rem 1fr;
}

header {
    margin-top: 0.5rem;
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    display: flex;
    gap: 0.5rem;
}

main {
    min-width: 80vw;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0.5rem 0.25rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
}

.markdownView, .htmlView {
    padding: 1rem;
    font-size: 1.5rem;
    border-radius: 0.125rem;
}

.markdownView {
    background: lightgrey;
    font-family: "Courier Prime", serif;
}

.htmlView {
}

@media (prefers-color-scheme: dark) {
    html {
        background: #04071F;
        color: beige;
    }

    .markdownView {
        color: #000000;
    }
}