body {
    --hue: 270;
    --l-lim: 1.00;
    --s-lim: 1.00;
}

.light {
    --div-bgcolor: transparent;
    --root-bgcolor: #ffffff99;
    --page-bgcolor: #ffffff;
    --inb-sel-bgcolor: #ffffff;
    --div-shadow-color: #66666633;
    --ready-bgcolor: #66cc66;
    --ready-hcolor: #44aa44;
    --ready-acolor: #339933;
    --loading-bgcolor: #ff6666;
    --loading-hcolor: #dd5555;
    --loading-acolor: #cc3333;
    --topping-color: #ffffff;
}

.dark {
    --div-bgcolor: transparent;
    --root-bgcolor: #11111199;
    --inb-sel-bgcolor: #22222299;
    --div-shadow-color: #ffffff33;
    --ready-bgcolor: #339933;
    --ready-hcolor: #117711;
    --ready-acolor: #006600;
    --loading-bgcolor: #993333;
    --loading-hcolor: #771111;
    --loading-acolor: #660000;
    --topping-color: #cccccc;
}

button {
    background-color: var(--button-bgcolor);
    border: none;
    border-radius: 5pt;
    box-shadow: 0 1pt 3pt var(--button-shadow-color);
    box-sizing: border-box;
    font-size: 1em;
    height: 3em;
    transition: all ease-in 0.15s;
}

button:active,
button:active:hover {
    transform: translateY(2pt);
    background-color: var(--button-act-bgcolor);
}

button:hover,
button:focus-visible {
    background-color: var(--button-hover-bgcolor);
}

button#upload_button {
    width: 90%;
}

button#button_reset,
button#button_update,
button#button_download {
    width: 28.8%;
    margin: auto 1.2%;
    border-radius: 5pt;
    box-shadow: 0 1pt 3pt #66666666;
    font-size: 1em;
    height: 3em;
}

button.loading {
    background-color: var(--loading-bgcolor);
    color: var(--topping-color);
}

button.loading:hover,
button.loading:focus-visible {
    background-color: var(--loading-hcolor);
}

button.loading:active {
    transform: none;
    background-color: var(--loading-acolor);
}

button.reading {
    transition: all ease-in 0.33s;
}

button.reading:hover,
button.reading:focus-visible,
button.reading:active {
    background-color: inherit;
}

button.ready {
    background-color: var(--ready-bgcolor);
    color: var(--topping-color);
}

button.ready:hover,
button.ready:focus-visible {
    background-color: var(--ready-hcolor);
}

button.ready:active {
    background-color: var(--ready-acolor);
}

div {
    box-shadow: 0 1pt 4pt var(--div-shadow-color);
    text-align: center;
}

div.pad {
    height: 2em;
    margin-bottom: 2em;
}

*[hidden] {
    display: none;
}

div#root_div {
    background-color: var(--root-bgcolor);
    box-sizing: border-box;
    min-width: 60%;
    max-width: 100%;
}

img#img_blob {
    max-width: 90%;
    max-height: 80vh;
    border: 0;
    border-radius: 5pt;
    box-shadow: 0 0 3pt #333333cc;
}

p#text_no_img {
    text-align: center;
}

textarea.areas {
    margin: 12pt 0;
    max-height: 33vh;
    width: 90%;
    transition: inherit;
}

textarea.areas:focus-visible {
    height: 60vh;
    max-height: 60vh;
}