:root,
::backdrop {
    --light-bg: #fff;
    --light-accent-bg: #e2e2e254;
    --light-text: #4E4F51;
    --light-text-light: #585858;
    --light-border: #898EA4;
    --light-accent: #0dd3ff;
    --light-accent-hover: #0dd3ff;
    --light-accent-text: var(--light-bg);
    --light-code: #d81b60;
    --light-preformatted: #444;
    --light-marked: #77B7E4;
    --light-disabled: #efefef;
}

:root,
::backdrop {
    --bg: var(--light-bg);
    --accent-bg: var(--light-accent-bg);
    --text: var(--light-text-bg);
    --text-light: var(--light-text-light);
    --border: var(--light-border);
    --accent: var(--light-accent);
    --accent-hover: var(--light-accent-hove);
    --accent-text: var(--light-bg);
    --code: var(--light-code);
    --preformatted: var(--light-preformatted);
    --marked: var(--light-marked);
    --disabled: var(--light-disabled);
}

.link-external:after {
    margin-left: 4px;
    content: "\2197";
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
}


/* Dark theme - Same as light for now */
@media (prefers-color-scheme: dark) {
    :root,
    ::backdrop {
        color-scheme: dark;
        --bg: var(--light-bg);
        --accent-bg: var(--light-accent-bg);
        --text: var(--light-text);
        --text-light: var(--light-text-light);
        --border: var(--light-border);
        --accent: var(--light-accent);
        --accent-hover: var(--light-accent-hove);
        --accent-text: var(--light-bg);
        --code: var(--light-code);
        --preformatted: var(--light-preformatted);
        --marked: var(--light-marked);
        --disabled: var(--light-disabled);
    }

    @media only screen and (max-width: 720px) {
        h1 {
            font-size: 1.15rem;
        }

        h2, h3, h4 {
            font-size: 1.0rem;
        }
    }

    @media only screen and (max-width: 720px) {
        header > nav a {
            border: none;
            padding: 0;
            text-decoration: underline;
            line-height: 1;
        }

        header > nav .button {
            border: none;
            padding: 0;
            text-decoration: underline;
            line-height: 1;
            background-color: transparent;
            color: var(--light-accent); !important;
        }
    }

    h1 {
        color: #646567;
        font-size: 1.44rem;
    }

    h2, h3, h4, h5 {
        color: #646567;
        font-size: 1.15rem;
    }

    main > nav {
        text-align: center;
    }

    body > footer {
        padding: 0;
    }

    section {
        margin: 1.5rem 0;
        padding: 0.5rem 1rem
    }

    hr {
        height: 0.01rem !important;
    }

   

    .icon {
        vertical-align: sub;
        padding-right: .25rem;
        display: inline-block;
        width: 1em;
        height: 1.3em;
        margin-right: 0.2rem;
        stroke-width: 0;
        stroke: currentColor;
        fill: currentColor;
    }
}