body.theme-obs {
    --main-color: #000;
    --bg-color: #fffefe;
    --bg-color-contrast: #fcf4f6bb;
    --bg-color-inner: #ffffffcc;
    --bg-color-stronger: rgba(200,200,200,0.666);
    --bg-color-lesser: #ddd;

    --color-0: #35c9c9;
    --color-1: #003d3d;
    --color-2: #006f82;
    --color-3: #db6f83;
    --color-4: #f7bcae;

    --accent-color: #006f82;
    --accent-color-contrast: #003d3d;
    --border-color: #ccc;
    --border-color-inner: #ddd;
    --button-fg: #fff;

    --quiet-text-color: #666;
    --danger-color: #D35A70;
    --danger-color-l: #F0B6C0;
    --success-color: #5AD380;

    --userbutton-bg: #ffffffbb;
    --footer-bg-color: #003d3d;
    --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;

    --tab-selected-label-bg: transparent;

    --msg-color: #000;
}
body.theme-obs {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAR0lEQVQ4T2NkcHKSZ9i37yEDMiBBjBHOgQEcCnGJoRqARyGcDwJIYggDCCiEAzQxiAFEKAQDLGKM2ARJERsNxNFABIGBT4kA8W6SnWT/g/gAAAAQZGVCRzRCRDdERjBDMTM5ODU0QkVcLrOWAAAAAElFTkSuQmCC");
    background-repeat: repeat;
    image-rendering: pixelated;
}

.user-button {
    border-radius: 2px;
    padding: 0.2em 0.4em;
    line-height: 100%;
}

.account-payment-tab > label {
    border-bottom: 1px solid var(--tab-border);
}
.account-payment-tab > label span {
    opacity: 0.9;
}
.account-payment-tab [id^="tab"]:checked + label {
    border-bottom: none;
}
.account-payment-tab [id^="tab"]:checked + label span {
    opacity: 1;
}
.homepage h2 {
    color: var(--accent-color-dark);
    font-family: "steps-mono-mono";
    font-size: 3em;
    margin: 2em 1em;
}
.homepage .title h3 {
    border-bottom: 2px solid var(--home-border-color);
    font-size: 1.3em;
}
.left-menu p.menu-title {
    font-weight: bold;
}
.homepage p, .theme-obs .homepage li {
    font-size: 1.1em;
}
.formpage > div {
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-color-inner);
}

.icon-wireguard {
    /* from #0b2d4f to #003d3d */
    filter: hue-rotate(-39deg) brightness(115%);
}

ul.errorlist {
    border: 3px solid var(--danger-color);
    background-color: var(--bg-color-contrast);
    color: var(--main-color);
    font-weight: bold;
}

@media (prefers-color-scheme: light) {
    footer .quiet {
        color: var(--border-color);
    }
}
@media (prefers-color-scheme: dark) {
    body.theme-obs {
        --main-color: #eee;
        --bg-color: #141313;
        --bg-color-contrast: rgba(40,40,40,0.333);
        --bg-color-inner: rgba(0,0,0,0.333);
        --bg-color-lesser: rgba(60,60,60,0.444);
        --bg-color-stronger: rgba(60,60,60,0.666);
        --accent-color: #35c9c9;
        --accent-color-contrast: #35c9c9; /* #006f82;*/
        --border-color: #35c9c9;
        --border-color-inner: #003d3d;

        --quiet-text-color: #bbb;
        --footer-bg-color: #003d3d;
        --button-fg: #000;

        /* some elements are switched to light-mode accent for contrast */
        --accent-color-dark: #35c9c9;
        --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-contrast);
        --userbutton-bg: #003d3d;
        --userbutton-bg-hov: #35c9c9;
        --flattable-border-color: #3B8383;

        /* 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;
    }
    .formpage > div {
        border: 1px solid var(--footer-bg-color);
    }
    body.theme-obs {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAR0lEQVQ4T2NksLU9wHD4sAMDMiBBjBHOgQEcCnGJoRqARyGcDwJIYggDCCiEAzQxiAFEKAQDLGKM2ARJERsNxNFABIGBT4kA40uU+bEbh/MAAAAQZGVCRzlDRjkwMjM0ODc1MjY2RDkp/2osAAAAAElFTkSuQmCC");
    }
    .icon-wireguard {
        filter: hue-rotate(-37deg) saturate(70%) brightness(400%);
    }
    .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;
    }
}

#logo {
    font-family: "Poiret One";
    font-weight: 600;
    background: none;
    text-align: right;
}
#logo a {
    font-size: 55px;
    text-decoration: none;
    line-height: 100%;
}
#logo .obs {
    font-size: 1.159em;
    display: block;
}
#logo .net {
    display: block;
}