/*
    Instance variables
*/

:root {
    --color-fill: ghostwhite;
    --color-fill-washed: lavender;
    --color-text: black;
    --color-link: royalblue;
    --color-link-alt: blueviolet;
    --color-accent: #AD96E4;
    --color-accent-light: #D5C5F5;
    --color-accent-deep: #6E4CB5;
    --color-border-hard: dimgray;
    --color-border-medium: silver;
    --color-border-soft: gainsboro;
    --color-hint: slategray;
    --color-hint-accented: #6E4CB5;
    --color-form-valid: forestgreen;
    --color-form-warning: goldenrod;
    --color-form-invalid: crimson;

    --fonts: 'Helvetica Neue', Helvetica, Verdana, Tahoma, 'Open Sans', Arial, sans-serif;
    --gap: min(4ch, 3vw);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fill: #1E1E1E;
        --color-fill-washed: #222929;
        --color-text: ghostwhite;
        --color-link: lightskyblue;
        --color-link-alt: plum;
        --color-accent: #9774BF;
        --color-accent-light: #BDA3E3;
        --color-accent-deep: #634A9D;
        --color-border-hard: gainsboro;
        --color-border-medium: silver;
        --color-border-soft: dimgray;
        --color-hint: lavender;
        --color-hint-accented: #BDA3E3;
        --color-form-valid: green;
        --color-form-warning: darkgoldenrod;
        --color-form-invalid: firebrick;
    }
}

/*
    Default site style
*/

:root, html, body {
    background: var(--color-fill);
    color: var(--color-text);
    font-family: var(--fonts);
    margin: 0;
    box-sizing: border-box;
}

body {
    width: max-content;
    min-width: 100%;
    accent-color: var(--color-accent);
}

* {
    box-sizing: inherit;
    font-family: inherit;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-soft) var(--color-fill);
}

form {
    position: relative;
    display: flex;
    padding: 0 16px;
    min-width: min(100vw, 600px);
    width: 100%;
    flex-direction: column;
    align-items: start;
    gap: 0.2rem;
}

form label::before, form [type="submit"] {
    content: "";
    margin-top: 0.4rem;
    display: block;
}

form [type="checkbox"], fieldset [type="checkbox"] {
    width: 1em;
    height: 1em;
}

.nopass-check {
    height: 1em;
}

.nopass-check span {
    vertical-align: middle;
    display: none;
}

.nopass-check>.True+span {
    display: inline-block;
}

form .valid,
form .invalid,
form .warning {
    outline-width: 1px;
    outline-style: solid;
}

form .valid {
    outline-color: var(--color-form-valid);
}

form .invalid {
    outline-color: var(--color-form-invalid);
}

form .warning {
    outline-color: var(--color-form-warning);
}

textarea, input, select {
    margin: 0;
    outline: none;
    font-size: inherit;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

label, img, a, figcaption {
    user-select: none;
    -webkit-user-select: none;
}

[target="_blank"]::after {
    display: inline-block;
    content: "\2197";
    border: 0.1em solid;
    border-radius: 20%;
    height: 0.5em;
    vertical-align: text-bottom;
    width: 0.5em;
    font-size: larger;
    line-height: 0;
}

a {
    color: var(--color-link);
}

:visited {
    color: var(--color-link-alt);
}

.link:not([href]) {
    text-decoration: 1px dotted underline;
    cursor: pointer;
}

img[data-rating="e"], img[data-rating="m"] {
    filter: contrast(0.01);
}

.table {
    display: table;
}

.table>form {
    display: table-row;
}

.table .col {
    display: table-cell;
    vertical-align: middle;
    padding: 4px;
    border-top: 1px solid var(--color-border-soft);
}

/*
    Transitions
*/

.all-circular {
    transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}