:root {
    --maxPageWidth: 1600px;

    --danger: color-mix(in srgb, #be291f 75%, var(--accentInvert) 25%);
    --warning: color-mix(in srgb, #c5771d 75%, var(--accentInvert) 25%);
    --progress: color-mix(in srgb, #217bc5 75%, var(--accentInvert) 25%);
    --success: color-mix(in srgb, #24bb29 75%, var(--accentInvert) 25%);
    --purple: color-mix(in srgb, #9823b9 75%, var(--accentInvert) 25%);
    --pink: color-mix(in srgb, #c8257f 75%, var(--accentInvert) 25%);
    --teal: color-mix(in srgb, #24b683 75%, var(--accentInvert) 25%);
    --lime: color-mix(in srgb, #b1c02c 75%, var(--accentInvert) 25%);
    --indigo: color-mix(in srgb, #6a29bf 75%, var(--accentInvert) 25%);
    --cyan: color-mix(in srgb, #23cbcb 75%, var(--accentInvert) 25%);
    --gold: color-mix(in srgb, #d3ba2b 75%, var(--accentInvert) 25%);
    --silver: color-mix(in srgb, #8d8d8d 75%, var(--accentInvert) 25%);

    --rootColorBase: rgb(60, 60, 160);
    --rootColorLight: color-mix(in srgb, var(--rootColorBase) 25%, white 75%);
    --rootColorDark: color-mix(in srgb, var(--rootColorBase) 25%, black 75%);

    --transparent5: color-mix(in srgb, var(--rootColor) 95%, transparent 5%);
    --transparent10: color-mix(in srgb, var(--rootColor) 90%, transparent 10%);
    --transparent15: color-mix(in srgb, var(--rootColor) 85%, transparent 15%);
    --transparent20: color-mix(in srgb, var(--rootColor) 80%, transparent 20%);
    --transparent25: color-mix(in srgb, var(--rootColor) 75%, transparent 25%);
    --transparent30: color-mix(in srgb, var(--rootColor) 70%, transparent 30%);
    --transparent35: color-mix(in srgb, var(--rootColor) 65%, transparent 35%);
    --transparent40: color-mix(in srgb, var(--rootColor) 60%, transparent 40%);
    --transparent45: color-mix(in srgb, var(--rootColor) 55%, transparent 45%);
    --transparent50: color-mix(in srgb, var(--rootColor) 50%, transparent 50%);
    --transparent55: color-mix(in srgb, var(--rootColor) 45%, transparent 55%);
    --transparent60: color-mix(in srgb, var(--rootColor) 40%, transparent 60%);
    --transparent65: color-mix(in srgb, var(--rootColor) 35%, transparent 65%);
    --transparent70: color-mix(in srgb, var(--rootColor) 30%, transparent 70%);
    --transparent75: color-mix(in srgb, var(--rootColor) 25%, transparent 75%);
    --transparent80: color-mix(in srgb, var(--rootColor) 20%, transparent 80%);
    --transparent85: color-mix(in srgb, var(--rootColor) 15%, transparent 85%);
    --transparent90: color-mix(in srgb, var(--rootColor) 10%, transparent 90%);
    --transparent95: color-mix(in srgb, var(--rootColor) 5%, transparent 95%);
    
    --accent5: color-mix(in srgb, var(--rootColor) 95%, var(--accent) 5%);
    --accent10: color-mix(in srgb, var(--rootColor) 90%, var(--accent) 10%);
    --accent15: color-mix(in srgb, var(--rootColor) 85%, var(--accent) 15%);
    --accent20: color-mix(in srgb, var(--rootColor) 80%, var(--accent) 20%);
    --accent25: color-mix(in srgb, var(--rootColor) 75%, var(--accent) 25%);
    --accent30: color-mix(in srgb, var(--rootColor) 70%, var(--accent) 30%);
    --accent35: color-mix(in srgb, var(--rootColor) 65%, var(--accent) 35%);
    --accent40: color-mix(in srgb, var(--rootColor) 60%, var(--accent) 40%);
    --accent45: color-mix(in srgb, var(--rootColor) 55%, var(--accent) 45%);
    --accent50: color-mix(in srgb, var(--rootColor) 50%, var(--accent) 50%);
    --accent55: color-mix(in srgb, var(--rootColor) 45%, var(--accent) 55%);
    --accent60: color-mix(in srgb, var(--rootColor) 40%, var(--accent) 60%);
    --accent65: color-mix(in srgb, var(--rootColor) 35%, var(--accent) 65%);
    --accent70: color-mix(in srgb, var(--rootColor) 30%, var(--accent) 70%);
    --accent75: color-mix(in srgb, var(--rootColor) 25%, var(--accent) 75%);
    --accent80: color-mix(in srgb, var(--rootColor) 20%, var(--accent) 80%);
    --accent85: color-mix(in srgb, var(--rootColor) 15%, var(--accent) 85%);
    --accent90: color-mix(in srgb, var(--rootColor) 10%, var(--accent) 90%);
    --accent95: color-mix(in srgb, var(--rootColor) 5%, var(--accent) 95%);

}

@media (prefers-color-scheme: light) {
    :root {
        --rootColor: var(--rootColorDark);
        --accent: white;
        --accentInvert: black;
    }
}

@media (prefers-color-scheme: dark) {
   :root {
        --rootColor: var(--rootColorLight);
        --accent: black;
        --accentInvert: white;
    }
}

@font-face {
    font-family: 'Inter';
    src: url('/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

html { color-scheme: light dark; font-size: 14px; color: var(--rootColor); }

body, header, main, footer, h1, h2, h3, h4, h5, p { margin: 0; padding: 0; }
body { display: flex; flex-direction: column; width: 100%; min-height: 100vh; overflow: hidden; overflow-y: auto; }
body header, body main, body footer { display: flex; justify-content: center; width: calc(100%- 1.5rem); padding: 0.75rem; }
body header,
body footer { min-height: 1.5rem; background-color: var(--accent75); color: var(--accent15); }
body main { flex: 1; }
body header > .content, body main > .content, body footer > .content { width: 90%; max-width: var(--maxPageWidth);}

h1 { color: var(--accent5); }
h2 { color: var(--accent15); }
h3 { color: var(--accent20); }
h4, h5 { color: var(--accent25); }

.row { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.gapL { display: flex; gap: 0.75rem; }
.gapS { display: flex; gap: 0.325rem; }
.borderRadiusL { border-radius: 1.3rem; }
.borderRadiusS { border-radius: 0.75rem; }
.border { border: 1px solid var(--accent15); }
.paddingL { padding: 0.75rem; }
.paddingS { padding: 0.325rem; }
.paddingRecL { padding: 0.75rem 1.3rem; }
.paddingRecS { padding: 0.325rem 0.75rem; }
.alignItems { display: flex; align-items: center; }
.justifyContent { display: flex; justify-content: center; }

.imgcont { display: flex; justify-content: center; align-items: center; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
.imgcont img { height: auto; max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; user-drag: none; user-select: none; }
.imgcont, .imgcont img { border-radius: 0.75rem; }

.box { border: var(--border); background-color: var(--transparent95); }
.box .heading { margin-bottom: 0.75rem; border-bottom: 1px solid var(--accent65); padding-bottom: 0.325rem; }
.box.success { background-color: color-mix(in srgb, var(--success) 15%, transparent 85%) !important; }
.box.warning { background-color: color-mix(in srgb, var(--warning) 15%, transparent 85%) !important; }
.box.danger { background-color: color-mix(in srgb, var(--danger) 15%, transparent 85%) !important; }
.box.progress { background-color: color-mix(in srgb, var(--progress) 15%, transparent 85%) !important; }
.box.purple { background-color: color-mix(in srgb, var(--purple) 15%, transparent 85%) !important; }
.box.pink { background-color: color-mix(in srgb, var(--pink) 15%, transparent 85%) !important; }
.box.teal { background-color: color-mix(in srgb, var(--teal) 15%, transparent 85%) !important; }
.box.lime { background-color: color-mix(in srgb, var(--lime) 15%, transparent 85%) !important; }
.box.indigo { background-color: color-mix(in srgb, var(--indigo) 15%, transparent 85%) !important; }
.box.cyan { background-color: color-mix(in srgb, var(--cyan) 15%, transparent 85%) !important; }
.box.gold { background-color: color-mix(in srgb, var(--gold) 15%, transparent 85%) !important; }
.box.silver { background-color: color-mix(in srgb, var(--silver) 15%, transparent 85%) !important; }

.button, .button * { color: var(--accent15) !important; }
.button:hover, .button:hover * { color: var(--accent5) !important; }
.button { padding: 0.5rem 0.75rem; background-color: var(--accent65); border-radius: 0.25rem; cursor: pointer; transition: all 0.1s ease; border: none; box-shadow: none; font-size: 1rem; display: flex; align-items: center; justify-content: center; font-weight: 700; -webkit-user-select: none; -ms-user-select: none; user-select: none; flex-shrink: 0; }
.button:focus, .button:hover { background-color: var(--accent75); }
.button.square { padding: unset !important; width: 2.25rem; height: 2.25rem; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.button.success, .button.success * { color: var(--accentInvert) !important; }
.button.success { background-color: color-mix(in srgb, var(--success) 85%, var(--accent) 15%); }
.button.success:hover { background-color: color-mix(in srgb, var(--success) 75%, var(--accent) 25%); }
.button.warning, .button.warning * { color: var(--accentInvert) !important; }
.button.warning { background-color: color-mix(in srgb, var(--warning) 85%, var(--accent) 15%); }
.button.warning:hover { background-color: color-mix(in srgb, var(--warning) 75%, var(--accent) 25%); }
.button.danger, .button.danger * { color: var(--accentInvert) !important; }
.button.danger { background-color: color-mix(in srgb, var(--danger) 85%, var(--accent) 15%); }
.button.danger:hover { background-color: color-mix(in srgb, var(--danger) 75%, var(--accent) 25%); }

.clean { color: unset !important; }

a { text-decoration: none; color: inherit; }
a:link, a:visited { color: var(--success); transition: all 0.1s ease; font-weight: 500; border: none; cursor: pointer; }
a:link:hover, a:visited:hover, a:link:active, a:visited:active { color: color-mix(in srgb, var(--success) 50%, var(--accentInvert) 50%); }
a.sublink { color: gray !important; font-size: 0.85rem; font-style: italic; }

.textarea { resize: vertical; min-height: 4rem; overflow: auto; white-space: pre-wrap; word-wrap: break-word; display: inline-block; width: 100%; }
.textarea span { display: flex; align-items: center; vertical-align: middle; margin: 0 0.1rem; line-height: 1; }
.textarea img { display: block; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--transparent65); width: 22px; height: 22px; margin-right: 0.25rem; transition: accent-color 0.1s; }
input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color: var(--white50); }

input[type="file"] { color: var(--white35); background-color: var(--transparent85); border: none; display: flex; align-content: center; padding: 0.25rem 0.5rem; }
input[type="file"]::file-selector-button { background-color: var(--transparent65); color: var(--white85); border: none; border-radius: 0.25rem; cursor: pointer; transition: background-color 0.1s; }
input[type="file"]::file-selector-button:hover { background-color: var(--transparent50); }

input[type="checkbox"] { width: 16px; height: 16px; }
input[type="date"], input[type="time"], input[type="datetime-local"] { padding: 0.5rem; }
textarea { width: 100%; }

input:disabled, textarea:disabled { background-color: var(--transparent95); color: var(--white50); border-color: var(--transparent85); cursor: not-allowed; opacity: 0.6; }

.dropzone { border: 2px dashed var(--transparent75); padding: 0.5rem; border-radius: 0.75rem; text-align: center; cursor: pointer; min-height: 70px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; flex-wrap: wrap; }

select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--transparent85); color: var(--white5); padding: 0.55rem 1rem; border: 1px solid var(--transparent65); border-radius: 0.25rem; font-size: 0.9rem; cursor: pointer; outline: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 19' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 12px; padding-right: 1.5rem !important; }
select:hover { background-color: var(--transparent85); }
select:focus { border-color: var(--progress); }
select::-ms-expand { display: none; }

.spinner { width: 20px; height: 20px; border: 3px solid var(--transparent85); border-top: 3px solid var(--transparent35); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

:target { outline: inherit !important; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background-color: var(--scrollbar-track); border-radius: 6px; }

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }