:root{
    --gray: #666;
    --gray-transparent: #6660;
    --highlight: #af8;
    --bkg: #000;
    /* --bkg: #282828; */
    --text: #ccc;
    /* --text: #ddd; */
    --warn: #ed8;
    --error: #fa8;
}

*{
    padding: 0;
    margin: 0;
}


body{
    background: var(--bkg);
    color: var(--text);
    min-height: 100vh;
}
h1{
    text-align: center;
}
main{
    max-width: 90vw;
    width: 600px;
    margin: 0 auto;
    /* border: 1px solid white; */
}
#distChooserBox{
    padding: 10px;
    text-align: center;
}
#distChooser{
    padding: 6px;
    border-radius: 6px;
    background: var(--gray);
    color: var(--text);
}

input{
    background: var(--gray);
    padding: 4px 10px;
    font-size: 1.15rem;
    border: none;
    border-radius: 6px;
    color: var(--text);
}
#button{
    background: var(--gray);
    color: black;
    width: 200px;
    font-family: sans-serif;
    text-align: center;
    padding: 10px;
    margin:0 auto;
    border-radius: 0px;
    transition: .25s;
    letter-spacing: 0cap;
    margin: 12px auto;
}
#button:hover{
    background: var(--highlight);
    border-radius: 10px;
    letter-spacing: .2cap;
}

.radioChooser{
    margin: 4px;
    padding: 8px;
    border: 1px solid var(--gray);
    display: flex;
    justify-content: space-around;
    border-radius: 8px;
}
.radio input{
    display: inline-block;
    flex: 1;
}
select{
    padding: 4px;
}
.input{
    display: flex;
    margin: 8px;
    justify-content: center;
}
.input div {
    width: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.radio, .check{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.radioBubble{
    background: var(--gray);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}
.radioFill{
    background: var(--gray-transparent);
    height: 10px;
    width: 10px;
    border-radius: 10px;
    transition: .25s;
}
.checked .radioFill{
    background: var(--highlight);
}
.off{
    opacity: .35;
}

#stat{
    display: none;
}

#stat .inputName{
    text-decoration: overline;
}
sub{
    margin-top: 12px;
}


.checkBox{
    background: var(--gray);
    height: 20px;
    width: 20px;
    border-radius: 4px;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}
.checkFill{
    background: var(--gray-transparent);
    height: 0;
    width: 0;
    border-radius: 2px;
    transition: .25s;
}

.checked .checkFill{
    background: var(--highlight);
    height: 10px;
    width: 10px;
}
#claimToggle{
    display: none;
}

#tools{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px;
}
#resetButton{
    background: var(--gray);
    padding: 8px;
    font-family: sans-serif;
    text-align: center;
    padding: 8px;
    border-radius: 0px;
    transition: .25s;
    letter-spacing: 0cap;
    font-size: 10pt;
    color: black;
    width: 100px;
}
#resetButton:hover{
    background: var(--warn);
    border-radius: 10px;
    letter-spacing: .2cap;
}