:root{
    --color-1: rgb(240, 255, 254);
    --color-2: rgb(192, 229, 254);
    --color-3: rgb(144, 204, 254);
    --color-4: rgb(96, 178, 254);
    --color-5: rgb(48, 153, 254);
    --color-6: rgb(0, 127, 254);
    --main-text: rgb(0, 0, 20);
    --main-bg: var(--color-1);
    --radio-wrap-bg: var(--color-2);
    --radio-bg: var(--color-3);
    --button-bg : var(--color-4);
    --radio-active: var(--color-5);
    --radio-out: 3px;
    --radio-rad-out: 13px;
    --radio-rad-in: 10px;
    --input-wrap: 16px;
}
body{
    color: var(--main-text);
    background-color: var(--main-bg);
}
h1{
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: x-large;
}
button{
    color: var(--main-text);
}
.inputWrap{
    display: flex;
    flex-direction: column;
    background-color: var(--radio-wrap-bg);
    border-radius: var(--input-wrap);
    border: var(--radio-wrap-bg) 3px solid;
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 4px;
}
.inputWrap > div:first-child{
    padding-left: 6px;
    padding-right: 6px;
}
.radioDiv{
    background-color: var(--radio-bg);
    border-radius: var(--radio-rad-out);
    border: var(--radio-out) solid var(--radio-bg);
    gap: var(--radio-out);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
}
.radioDiv > input[type=radio]{
    display: none;
}
.radioDiv > input[type=radio] + label{
    border-radius: var(--radio-rad-in);
    padding: var(--radio-out);
    flex: 1;
    text-align: center;
    transition: 0.3s;
    user-select: none;
}
.radioDiv > input[type=radio] + label:active{
    outline: 2px solid var(--color-6);
}
.radioDiv > input[type=radio]:checked + label{
    background-color: var(--radio-active);
}
.buttonRow{
    display: flex;
    gap: var(--radio-out);
    background-color: var(--radio-bg);
    border-radius: var(--radio-rad-out);
    border: 3px transparent solid;
}
.buttonRow > button{
    flex: 1;
    background-color: var(--button-bg);
    font-size: medium;
    border: var(--button-bg) 3px solid;
    border-radius: var(--radio-rad-in);
    box-sizing: border-box;
    user-select: none;
    transition: 0.3s;
}
.buttonRow > button:active{
    outline: 2px solid var(--color-6);
}
.checkboxRow{
    background-color: var(--radio-bg);
    border-radius: var(--radio-rad-out);
    border: 3px solid transparent;
    display: flex;
    gap: var(--radio-out);
}
.checkboxRow > input[type=checkbox]{
    display: none;
}
.checkboxRow > label{
    border-radius: var(--radio-rad-in);
    border: 3px solid transparent;
    flex: 1;
    text-align: center;
    transition: 0.3s;
}
.checkboxRow > label:active{
    outline: 2px solid var(--color-6);
}
.checkboxRow > input[type=checkbox]:checked + label{
    background-color: var(--radio-active);
}
@media (prefers-color-scheme: dark) {
    :root{
        color-scheme: dark;
        --color-1: rgb(0, 0, 0);
        --color-2: rgb(0, 27, 135);
        --color-3: rgb(0, 88, 179);
        --color-4: rgb(16, 137, 199);
        --color-5: rgb(32, 184, 218);
        --color-6: rgb(48, 231, 237);
        --main-text: rgb(250, 250, 255);
    }
}