* {
    --active: rgb(43, 43, 48);
    --active-inner: #f3f3f3;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #a3a3a3;
    --border-hover: #f3f3f3;
    --background: rgb(255, 255, 255);
    --background-secondary: rgb(230, 230, 230);
    --disabled: rgb(43, 43, 48);
    --disabled-inner: #rgb(43, 43, 48);
    --text: #000;
}

@media (prefers-color-scheme: dark) {
    * {
        --active: rgb(43, 43, 48);
        --active-inner: #f3f3f3;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #f3f3f3;
        --border-hover: #f3f3f3;
        --background: rgb(31, 32, 39);
        --background-secondary: rgb(43, 43, 48);
        --disabled: rgb(43, 43, 48);
        --disabled-inner: #rgb(43, 43, 48);
        --text: #f3f3f3;
    }
}

html, body {
    padding: 0;
    margin: 0;
    background-color: var(--background);
    color: var(--text);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
}

.turbolinks-progress-bar {
    height: 5px;
    background-color: rgb(52, 52, 175);
}

a, a:hover, a:active, a:visited {
    color: var(--text);
}

body {
    padding-top: 60px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--background);
}

hr {
    width: auto;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    margin: 16px 8px;
}

h1 {
    margin: 16px 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

#header-logo {
    display: block;
    padding: 16px;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
}

.header-menu {
    list-style: none;
    display: flex;
    flex-direction: row;
}

.header-menu .header-menu--item {
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    display: inline-block;
    padding: 16px;
    text-decoration: none;
}

.header-menu .header-menu--item:hover {
    background-color: var(--background-secondary);
}

.layout-center {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

form {
    display: flex;
    flex-direction: column;
    /* max-width: 50vh; */
    width: 600px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

form .required {
    font-size: 14px;
    font-style: italic;
    color: rgb(255, 100, 100);
    align-self: flex-end;
}

form .optional {
    font-size: 14px;
    font-style: italic;
    align-self: flex-end;
}

form label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

input, textarea, button {
    background-color: var(--background-secondary);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px;
    margin: 8px;
    border-radius: 4px;
}

textarea {
    resize: vertical;
}

label {
    padding: 8px;
}

input:active, textarea:active, button:active {
    background-color: rgb(33, 33, 38);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox], input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0 8px 0 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background-secondary));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    input[type=checkbox]:after, input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    input[type=checkbox]:checked, input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    input[type=checkbox]:disabled, input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }
    input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }
    input[type=checkbox]:disabled+label, input[type=radio]:disabled+label {
        cursor: not-allowed;
    }
    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }
    input[type=checkbox]:focus, input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }
    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
        width: 21px;
    }
    input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
        opacity: var(--o, 0);
    }
    input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
        --o: 1;
    }
    input[type=checkbox]+label, input[type=radio]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }
    input[type=checkbox]:not(.switch) {
        border-radius: 7px;
    }
    input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }
    input[type=checkbox]:not(.switch):checked {
        --r: 43deg;
    }
    input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px;
    }
    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }
    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }
    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }
    input[type=radio] {
        border-radius: 50%;
    }
    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }
    input[type=radio]:checked {
        --s: .5;
    }
}