html {
    background-color: #3E7DCC;
}

body {
    color: black;
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) min(72ch, calc(100% - 2rem)) minmax(1rem, 1fr);
    min-height: 100vh;

    /* font-family: system-ui, -apple-system, sans-serif; */
    font-family: 'Open Sauce Sans', sans-serif;
    line-height: 1.5rem;
    max-width: 72ch;
    margin: 0 auto;
    padding: 0;
}

main {
    background-color: #F4F5F0;
    padding: 0 1rem;
}

ul {
    padding-left: 1rem;
}

li {
    margin: 1rem 0;
}

h1, h2, h3 {
line-height: 1.5rem;
}

.side-left {
    background: linear-gradient(to right, #3E7DCC 0rem, #F4F5F0 1rem);
}

.side-right {
    background: linear-gradient(to left, #3E7DCC 0rem, #F4F5F0 1rem);
}

a {
    color: #1F004F;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #1F004F;
    }

    body {
        color: #F4F5F0;
    }
    
    main {
        background-color: black;
    }

    .side-left {
        background: linear-gradient(to right, #1F004F 0rem, black 1rem);
    }

    .side-right {
        background: linear-gradient(to left, #1F004F 0rem, black 1rem);
    }

    a {
        color: greenyellow;
    }
}