@import 'pygments-default.css' screen;
@import 'pygments-rrt.css' screen and (prefers-color-scheme: dark);

html {
    font-size: clamp(0.90em, 0.70em + 0.45vmin, 1.1em);
    font-family: system-ui;
}

body {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 70ch;
    line-height: 1.6;
    color: #444;
    background: #eee;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
}

h2,
h3,
h4,
h5 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

main {
    background-color: #e0e0e0;
    padding: 10px;
}

pre,
blockquote {
    background-color: #d0d0d0;
    padding: 5px;
}

table {
    width: 100%;
    margin: 1em 0;
}

table,
tr,
td {
    border: 1px solid #333;
    border-collapse: collapse;
}

td {
    padding: 5px;
}

figure {
    margin: 0;
    padding: 1em;
    border: 1px solid #d0d0d0;
}

figure img{
    border: 1px solid #c0c0c0;
}

figcaption {
    font-style: italic;
    font-size: 0.80em;
}

.admonition {
    padding: 5px;
    border: 1px solid #393939;
}

.admonition-title {
    font-weight: bold;
    text-decoration: underline;
}

.admonition.note {
    font-size: 70%;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #eee;
    }

    main {
        background-color: #2e2e2e;
    }

    a:link {
        color: lightskyblue;
    }

    a:visited {
        color: #b094b8;
    }

    a:hover {
        color: #eee;
    }

    a:active {
        color: #ff3838;
        text-decoration: none;
    }

    pre,
    blockquote {
        background-color: #222;
    }

    pre.code {
        background-color: #000;
    }

    table,
    tr,
    td {
        border-color: #444
    }

    figure {
        border: 1px solid #444;
    }

    figure img{
        border: 1px solid #393939
    }

    .admonition {
        border: 1px solid #393939;
        background-color: #444;
    }
}