button, .button
{
    background-color: var(--button-color);
    padding: 10px 12px 10px 12px;
    text-align: left;
    color: #000;
    font-weight: 600;
    display: inline-block;
    vertical-align: baseline;
    min-width: 128px;
    border: none;
    line-height: inherit;
    white-space: nowrap;
    box-shadow: inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px color-mix(in lab, var(--button-color), #FFFFFF 40% ),
    inset 0px 10px 2px -8px color-mix(in lab, var(--button-color), #000000 20% ),
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
    position: relative;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
button:hover, button:focus, .button:hover, .button:focus
{
    color: #000;
    text-decoration: none;
    outline: 0;
    background-color: var(--button-color-hover);
    box-shadow: inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #fff,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 20% ),
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px color-mix(in lab, var(--button-color-hover), #FFFFFF 20% );

    filter: brightness(120%) drop-shadow(0 0 2px color-mix(in lab, var(--button-color-hover), #FFFFFF 20% ));
}
button:active, .button.active
{
    position: relative;
    padding-top: 12px;
    padding-bottom: 8px;
    vertical-align: -2px;
    box-shadow: inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px 9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -8.5px 0px -8px color-mix(in lab, var(--button-color-hover), #FFFFFF 30% ),
    0px 0px 4px 0px #000;

    background-color: color-mix(in lab, var(--button-color-hover), #000000 20% );
    filter: none;
    outline: 0;
}
button[disabled], .button[disabled]
{
    --button-color: #636363;
    --button-color-hover: #515151;
    color: #686868;
    position: relative;
    padding-top: 12px;
    padding-bottom: 8px;
    vertical-align: -2px;
    box-shadow: inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px 9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -8.5px 0px -8px color-mix(in lab, var(--button-color-hover), #FFFFFF 30% ),
    0px 0px 4px 0px #000;

    background-color: color-mix(in lab, var(--button-color-hover), #000000 20% );
    filter: none;
    outline: 0;
    cursor: not-allowed;
}
button.green, .button.green
{
    --button-color: #5eb663;
    --button-color-hover: #5eb663;
}
button.red, .button.red
{
    --button-color: #b65e5e;
    --button-color-hover: #b65e5e;
}
button.icon, .button.icon
{
    min-width: unset;
}



input, textarea
{
    vertical-align: baseline;
    font-family: inherit;
    line-height: 1.2;
    font-size: 105%;
    min-height: 36px;
    width: 100%;
    background: #8e8e8e;
    border-radius: 4px;
    padding: 6px;
    border: none;
    box-shadow: inset 0px 4px 1px -2px #000,inset 0px -4px 1px -2px #c5c5c5,inset 2px 0px 1px 0px #5f5f5f,inset -2px 0px 1px 0px #5f5f5f,inset 0px -2px 2px 0px #5f5f5f,0px 0px 4px 1px #2e2521;
    display: block;
}
input:focus
{
    outline: none;
    background: #f0dab4;
    box-shadow: inset 0px 4px 2px -2px #000,inset 0px -1px 1px 0px #74624b,inset 0px -4px 2px -2px #e0e0e0,inset 2px 0px 2px 0px #a6885c,inset -2px 0px 2px 0px #a6885c,0px 0px 4px 1px #2e2521;
}
input:user-invalid
{
    background-color: #f08686;
}
input[type="checkbox"], input[type="radio"]
{
    display: inline-block;
    height: unset;
    margin-right: 1rem;
}
.input.radio
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

pre
{
    white-space: break-spaces;
}
a.button
{
    text-decoration: none;
}
a:not(.button)
{
    color: var(--font-color);
}