@media (prefers-color-scheme: dark) {
    body {
        --color_a: #2d2d2d;
        --color_a7: #2d2d2dab;
        --color_a5: #2d2d2d80;
        --color_b: #212121;
        --color_c: #181818;
        --text: #e8e8e8;
        --text7: #e8e8e8ab;
        --text5: #e8e8e880;
        --text3: #e8e8e855;
        --text_r: #2c2c2c;
        --text_r7: #2c2c2cab;
        --text_r5: #2c2c2c80;
        --text_r3: #2c2c2c55;
        --theme_r: #3e97ff;
    }
}

@media (prefers-color-scheme: light) {
    body {
        --color_a: #ffffff;
        --color_a7: #ffffffab;
        --color_a5: #ffffff80;
        --color_b: #ececec;
        --color_c: #cecece;
        --text: #3d3d3d;
        --text7: #3d3d3dab;
        --text5: #3d3d3d80;
        --text3: #3d3d3d55;
        --text_r: #e8e8e8;
        --text_r7: #e8e8e8ab;
        --text_r5: #e8e8e880;
        --text_r3: #e8e8e855;
        --theme_r: #1f8bff;
    }
}

:root {
    color-scheme: light dark;
}

body {
    color: var(--text);
}

body * {
    margin: 0;
    box-sizing: border-box;
}

svg {
    fill: var(--text)
}

a {
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    color: var(--text);
}

table {
    border-collapse: collapse;
    border: 2px solid var(--color_c);
}

thead {
    background: var(--color_b);
}

th, td {
    border: 1px solid var(--color_c);
    text-align: center;
    padding: 0.2em;
}

hr {
    border: solid var(--theme_r);
    border-width: 1px 0 0 0;
    opacity: 0.5;
    margin-top: 0.2em;
}

img {
    object-fit: cover;
    max-width: 100%;
}

.spoiler {
    background: var(--text5);
    transition: background-color 0.2s ease;
}

.spoiler:hover {
    background: #0000;
}