:root {
    --code-bg: #b9a2e7;
    --table-bd: #956db3;
    --main-pp: #684483;
    --a-hover: #be8ee6;

    --main-bg: #ffffff;
    --main-cl: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --code-bg: #00005C;
        --table-bd: #956db3;
        --main-pp: #A594F9;
        --a-hover: #E5D4FF;

        --main-bg: #1B2430;
        --main-cl: #D6D5A8;
    }
}

* {
    font-family: sans-serif;
    max-width: 780px;
}

body {
    background-color: var(--main-bg);
    color: var(--main-cl);
}

code {
    background-color: var(--code-bg);
    border-radius: 2px;
    padding: 2px;
}

table, tr, td, th {
    border-collapse: collapse;
    border: 2px solid var(--table-bd);
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

td {
    padding-left: 5px;
}

td:nth-child(1), th:nth-child(1) {
    max-width: 250px;
}

td:nth-child(2), th:nth-child(2) {
    max-width: 550px;
}

.flex-container {
    display: flex;
}

.about_img_container {
    padding-left: 10px;
    margin-left: 10px;
}

hr {
    color: var(--main-pp);
}

a, a:visited {
    color: var(--main-pp);
    text-decoration: underline;
    text-decoration-color: var(--main-pp);
    text-decoration-style: dotted;
}

a:hover {
    color: var(--a-hover);
}

.badge {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
    width: 88px;
    height: 31px;
}