body.theme-cc {
    --main-color: #000;
    --msg-color: #fff;
    --bg-color: #eee;
    --bg-color-contrast: #f8f8ff;
    --bg-color-inner: #fff;
    --bg-color-lesser: #eee;
    --bg-color-stronger: #ddd;
    --accent-color: #1c619a;
    --accent-color-contrast: #005188;
    --border-color: #bbb;
    --border-color-inner: #ddd;
    --button-fg: #fff;

    --quiet-text-color: #666;
    --danger-color: #a7332f;
    --success-color: #2ea658;

    --footer-bg-color: #002d5f;
    --footer-text-color: #ddd;
    --footer-border-color: white;

    --bw-widget-border: #666;
    --bw-widget-bg: #eee;
    --bw-widget-use-bg: #bcc8d1;
    --bw-widget-high-bg: #d1b2b2;
}

.theme-cc .homepage h2 {
    text-shadow: 0px 0px 4px #4d2f0050;
    font-weight: 500;
}
.theme-cc .homepage .title h3 {
    border-bottom: 3px solid var(--home-border-color);
    border-radius: 5px;
}
.theme-cc header #logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 75px;
    padding: 0 0 0 75px;
    background: url(./bg-logo.svg) no-repeat;
    background-size: 75px;
    background-position: left center;
}
/* ok but what about the second reset */
.theme-cc header #logo > * {
    margin: 0;
    padding: 0;
}
/* i dont think he knows about the second reset */
.theme-cc header #logo h1,
.theme-cc header #logo h2 {
    font-size: 100%;
    line-height: 0.83;
}
.theme-cc header #logo h1 a {
    margin: 0px;
    font-size: 62px;
}
.theme-cc header #logo h2 a {
    display: block;
    font-size: 25px;
    letter-spacing: 0.23em;
    font-family: "Poiret One";
    font-weight: 400;
}
.theme-cc header #logo h1 a,
.theme-cc header #logo h2 a {
    color: #1c619a;
    text-decoration: none;
}

.user-button {
    padding: 0.4em 0.5em;
    line-height: 75%;
}

@media (prefers-color-scheme: dark) {
    body.theme-cc {
        --main-color: #eee;
        --bg-color: #333;
        --bg-color-contrast: #22222b;
        --bg-color-inner: #272727;
        --bg-color-lesser: #393939;
        --bg-color-stronger: #222;
        --accent-color: #35b8ff;
        --accent-color-contrast: #e1f1fa;
        --border-color: #777;
        --border-color-inner: #777;
        --quiet-text-color: #bbb;

        --footer-bg-color: #00234a;

        /* some elements are switched to light-mode accent for contrast */
        --accent-color-dark: #1c619a;
        --h1-color: var(--accent-color-dark);
        --home-border-color: var(--accent-color-dark);
        --box-border-color: var(--accent-color-dark);
        --button-bg-color: var(--accent-color-dark);

        /* more contrast adjustments */
        --userbutton-fg-hov: #000;
        --map-fill: #999;
        ----flattable-row-alt-bg: #2d2d2d;

        --bw-widget-border: #666;
        --bw-widget-bg: #222;
        --bw-widget-use-bg: var(--accent-color-dark);
        --bw-widget-high-bg: #d1b2b2;
    }
    .theme-cc .homepage h2 {
        text-shadow: 0px 0px 5px #ffd99f50;
    }
    .theme-cc header #logo {
        filter: brightness(1.9);
        /* #35b8ff */
    }
    .theme-cc .icon-wireguard {
        filter: brightness(7) saturate(0);
    }
    .no-p2p {
        color: #ca8c8d;
    }
    .no-ipv6 {
        color: #959595;
    }

    .pure-form input[type="text"],
    .pure-form input[type="password"],
    .pure-form input[type="email"],
    .pure-form input[type="url"],
    .pure-form input[type="date"],
    .pure-form input[type="month"],
    .pure-form input[type="time"],
    .pure-form input[type="datetime"],
    .pure-form input[type="datetime-local"],
    .pure-form input[type="week"],
    .pure-form input[type="number"],
    .pure-form input[type="search"],
    .pure-form input[type="tel"],
    .pure-form input[type="color"],
    .pure-form select,
    .pure-form textarea,
    input[type="text"],
    input[type="submit"]:not(.pure-form *) {
        background: #222;
        border-color: #888;
        box-shadow: inset 0 1px 3px #000;
    }
}