:root {
    --tg-bg: #ffffff;
    --tg-text: #111111;
    --tg-hint: #666666;
    --tg-link: #0a84ff;
    --tg-button: #0a84ff;
    --tg-button-text: #ffffff;
    --cap-bg: #fdfdfd;
    --cap-text: #212121;
    --cap-checkbox-border: 3px solid #16161635;
}

html[data-tg-theme="dark"] {
    --tg-bg: #17212b;
    --tg-text: #f5f6f7;
    --tg-hint: #9aa8b5;
    --tg-link: #66a7ff;
    --tg-button: #66a7ff;
    --tg-button-text: #111111;
    --cap-bg: #1f2c38;
    --cap-text: #f5f6f7;
    --cap-checkbox-border: 3px solid #ffffff40;
}

* {
    --button-shadow: rgb(116, 116, 116);
    font-family: sans-serif;
}

body {
    background: var(--tg-bg);
    color: var(--tg-text);
    transition: background-color .2s ease, color .2s ease;
}

#title {
    font-family: sans-serif;
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--tg-link);
}

#title>span {
    font-weight: 300;
    color: var(--tg-text);
}


a:link,
a:visited,
a:hover,
a:active {
    color: var(--tg-link);
    text-decoration: underline;
}

cap-widget {
    --cap-background: var(--cap-bg);
    --cap-border-color: transparent;
    --cap-gap:2rem;
    --cap-color: var(--cap-text);
    --cap-checkbox-size: 25px;
    --cap-checkbox-border: var(--cap-checkbox-border);
    --cap-checkbox-border-radius: 50px;
    --cap-checkbox-background: #ffffff00;
}

cap-widget::part(attribution) {
    display: none;
}

cap-widget::part(label) {
    text-align: center;
}

#centerBox {
    margin: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#centerBox>span {
    margin: 0.3rem;
    color: var(--tg-hint);
}