:root {
    --bg: #000000;
    --text: #c2c3c3;
    --accent: #e60076;
    --accent-hover: #f6339a;
    --marker: #861043;
    --mtf: #ffffff;
    --hrt: #dadada;
    --bg-image: url("../bg_dark.webp");
    --bg-image-opacity: 0.1;

    color-scheme: dark;
}

:root[data-theme="1"] {
    --bg: #f1f5f9;
    --text: #1f2937;
    --accent: #c2185b;
    --accent-hover: #e91e63;
    --marker: #861043;
    --mtf: #F5A9B8;
    --hrt: #1f2937;
    --bg-image: url("../bg_light.webp");
    --bg-image-opacity: 0.18;

    color-scheme: light;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "JetBrains Mono", monospace;
    line-height: 1.6em;
    margin: 1em auto;
    max-width: 800px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: var(--bg-image) no-repeat center center;
    background-size: cover;

    opacity: var(--bg-image-opacity);
    z-index: -1;
}

main {
    padding: 1em;
}

li::marker {
    content: "* ";
    color: var(--marker);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.mtf {
    color: var(--mtf);
}

.hrt {
    color: var(--hrt);
}

.dinkus {
    text-align: center;
    user-select: none;
}

::selection {
    background: var(--accent);
    color: white;
}

.highlight {
    color: var(--accent);
}