@font-face
{
    font-family: "OpenSans";
    src: url("../fonts/OpenSans.ttf");
}

:root
{
    --color-yellow: #fde725;
    --color-green: #35b779;
    --color-blue: #31688e;
    --color-purple: #440154;

    --color-surface: #f0f0f0;
    --color-surface-darker: #dcdcdc;
}

*:not(mjx-container *)
{
    margin: 0;
    padding: 0;

    border: none;
    outline: none;

    user-select: none;
    /* cursor: default; */

    font-size: 1em;
    font-family: "OpenSans";
    font-weight: 300;

    transition: all 0.3s ease;

    text-overflow: ellipsis;
}

body
{
    background-color: var(--color-surface);
}

input[type="checkbox"], input[type="radio"]
{
    appearance: none;

    background-color: var(--color-surface);

    width: 1em;
    height: 1em;

    vertical-align: middle;
    margin-bottom: 0.25em;

    border-radius: 100%;

    cursor: pointer;

    margin-right: 0.5vw;

    &:not(:first-of-type)
    {
        margin-left: 0.5vw;
    }

    &:checked
    {
        background-color: var(--color-purple);
    }

    &:hover
    {
        background-color: var(--color-green);
    }
}

input[type="text"], select
{
    background-color: transparent;

    color: var(--color-purple);
    border-bottom: 1px solid var(--color-purple);
    
    text-align: center;

    &[disabled]
    {
        color: black;
        border-bottom: 1px solid black;
    }

    &:not([disabled]):hover
    {
        border-bottom: 1px solid var(--color-green);
        color: var(--color-green);
    }
}

meter
{
    display: inline-block;

    border-radius: 5px;

    height: 1vh;

    background: var(--color-surface-darker);

    &::-webkit-meter-bar
    {
        background: var(--color-surface-darker);
    }

    &::-moz-meter-optimum::-moz-meter-bar, &::-webkit-meter-optimum-value
    {
        background: var(--color-green);
    }

    &:-moz-meter-sub-optimum::-moz-meter-bar, &::-webkit-meter-suboptimum-value
    {
        background: var(--color-yellow);
    }

    &:-moz-meter-sub-sub-optimum::-moz-meter-bar, &::-webkit-meter-even-less-good-value
    {
        background: var(--color-purple);
    }
}