@charset "UTF-8";

.light {
    --root-slider-active-bgcolor: hsl(var(--hue) calc(var(--s-lim) * 100) calc(var(--l-lim) * 80));
}

.dark {
    --root-slider-active-bgcolor: hsl(var(--hue) calc(var(--s-lim) * 50) calc(var(--l-lim) * 40));
}

div#root_div {
    min-width: 60%;
    max-width: 100%;
}

textarea.areas {
    margin: 0 0 1em 0;
    max-height: max(100vh, 200pt);
    width: 90%;
    transition: ease 0.333s;
}

textarea.areas:focus-visible {
    height: max(50vh, 100pt);
}

textarea.areas#jing_pwd {
    background-color: var(--art-bgcolor);
    font-family: inherit;
    margin: 0 auto;
    padding: 5pt 10pt;
    width: 90%;
    min-height: unset;
    height: calc(1em + 20pt);
}

textarea.areas#jing_pwd:focus-visible {
    height: max(20vh, 40pt);
}

div#root_div div#cont_button {
    display: grid;
    grid-template-columns: auto auto;
}

div#root_div div#content_intro {
    padding-left: calc(12pt + 2em);
    padding-right: calc(12pt + 2em);
}

div#root_div div#cont_button > button {
    margin: 0 2em;
}

div#root_div label.toggle input:checked + .slider {
    background-color: var(--root-slider-active-bgcolor);
}

div#root_div div.cont_opt span.cont_btn {
    margin-right: 1em;
}

@media screen and (max-width: 640px) {
    div#root_div div.cont_opt {
        display: grid;
        grid-template-rows: auto;
    }

    div#root_div div.cont_opt label.toggle {
        align-self: center;
        justify-self: center;
    }
}

@media screen and (min-width: 640px) {
    div#root_div div#root_opts {
        margin: auto;
        min-width: 480px;
        width: 90%;
        box-sizing: border-box;
    }

    div#root_div label:not(.toggle, .nm) {
        margin-right: 1em;
        width: 20%;
        text-align: start;
    }

    div#root_div div.cont_opt {
        display: flex;
        align-items: center;
    }

    div#root_div div.cont_opt span.cont_btn {
        margin-right: 1em;
    }
}