body {
    --primary: rgb(229, 136, 23);
    --bg: rgb(10, 10, 10);
    --font: "Fira Code";
    --lesser: oklab(from var(--primary) 33% none none);
    font-family: var(--font);
    font-weight: 500;
    background: var(--bg);
    color: var(--primary);
    text-shadow: 0 0 10px var(--lesser);
    margin-top: 10ex;
    font-feature-settings: "cv01", "ss07", "ss08", "ss03", "ss04", "ss05", "ss06", "zero", "onum";
    margin-bottom: 20ex;
}

@media (prefers-color-scheme: light) {
    body {
        --bg: white;
        --primary: rgb(0, 0, 0);
        --lesser: oklab(from var(--primary) 90% none none);
    }
}

inverse-c,
a {
    background-color: var(--primary);
    text-shadow: none;
    padding: 0.2ex;
    padding-inline-start: 1ex;
    padding-inline-end: 1ex;
    color: var(--bg);
}

hr:before {
    font-variant-ligatures: none;
    color: var(--primary);

    font-weight: bolder;
    content: "================================================================================================================================================================================================================================";
    border: none;
    overflow-wrap: anywhere;
}

hr {
    border: none;
    height: 1em;
}

pre {
    font-family: var(--font);
    font-weight: 500;
    line-height: 1;
}

figure>img {
    max-width: 100%;
}

img-wrapper {
    max-width: 30ex;
    display: block;
}

@media (min-width: 1020px) {
    body {
        display: grid;
        grid-template-columns: 1fr 80ex 4ex 4fr
    }
}

@media (max-width: 1020px) {
    body {
        margin: 4ex;
    }

    img-wrapper {
        max-width: 80%;
        margin-left: 10%;
    }

    td,
    th {
        font-size: 80%;
    }
}

main,
footer {
    grid-column-start: 2
}

img-wrapper {
    grid-column-start: 4;
}

figure {
    margin: 0
}

figcaption {
    font-weight: 300;
    margin: 2ex;
}

h1,
h2,
h3 {
    font-size: 100%;
    margin: 0;
}

main {
    margin-bottom: 10ex;
}

h1:before {
    content: "# "
}

h2:before {
    content: "## "
}

h3:before {
    content: "### "
}

li {
    list-style-type: "> "
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 2px solid var(--primary);
    padding: 8px;
    text-align: left;
}

table {
    border: 1px solid #333;
}

body#terms main {
    margin: 0
}

body#terms h2,
body#pricing h3 {
    margin-top: 10ex
}