@import "/static/css/dropdown.css";@import "/static/css/navbar.css";@import "/static/css/footer.css";:root {    --bg-col: #093D59;    --bg-lighter: #165e85;    --bg-darker: #072e45;    --link-col: #7ac7f7;    --hover-col: #2d467c;    --success: rgb(139, 219, 157);    --warning: #F0EE7F;    --error: #f65f5f;    --form-border: 1px dotted var(--link-col);    --solid-border: 1px solid var(--link-col);    --text-col: rgb(202, 242, 255);    --heading-font: "Archivo";    --text-font: "Archivo", sans-serif;    --gap: 8px;}@font-face {    font-family: "Archivo";    src: local("Archivo"), url("/static/fonts/Archivo-Variable.woff2") format("woff"), url("/static/fonts/Archivo-Italic-Variable.woff2") format("woff");    font-weight: 100 900;}* {    box-sizing: border-box;}html,body {    background: var(--bg-col);    color: var(--text-col);    font-family: var(--text-font);    margin-inline: auto;    max-width: 75%;    padding: var(--gap);}h1,h2,h3,h4,h5,h6 {    font-family: var(--heading-font);    font-weight: 400;}a {    color: var(--link-col);}hr {    display: block;    height: 2px;    border: 0;    border-top: 1px solid var(--text-col);    border-bottom: 3px solid var(--bg-lighter);    margin: var(--gap) 0 0 0;    padding: 0;}code {    color: white;    font-size: large;}form {    width: fit-content;    padding: var(--gap);    border: var(--form-border);    display: flex;    flex-direction: column;    align-items: baseline;    flex-wrap: wrap;    gap: var(--gap);    button[type="submit"],    input[type="submit"] {        width: 100%;    }    &>* {        margin: 0;    }    &.non-chalant {        padding: 0;        border: none;    }    &:focus-within {        *:invalid {            border-color: var(--error);        }        *:valid:not([type="submit"]) {            border-color: var(--success);        }    }}input,textarea,button,select {    border: 1px solid var(--link-col);    background-color: var(--bg-lighter);    color: var(--text-col);    padding: 2px;    border-radius: 0;    padding: var(--gap);    font: var(--font);    button:hover,    input[type="submit"]:hover {        transform: scale(101%);        background-color: var(--hover-col);        color: var(--text-col);    }    &:active:not(select, textarea, input),    input[type="submit"] {        border: 1px outset var(--link-col);        background-color: var(--text-col);        color: var(--bg-col);        box-sizing: border-box;    }    &:disabled {        background-color: var(--bg-darker);        border-color: var(--bg-lighter);        color: lightgray;    }    &:focus,    &:active {        outline: none;    }}input[type="checkbox"],input[type="radio"] {    appearance: none;    -webkit-appearance: none;    border: var(--solid-border);    width: 1rem;    height: 1rem;    background: var(--bg-lighter);    cursor: pointer;    position: relative;}input[type="checkbox"]:checked,input[type="radio"]:checked {    background-color: var(--link-col);    color: var(--bg-col);    border: 1px solid var(--text-col);}input[type="checkbox"]:checked::before,input[type="radio"]:checked::before {    content: "v";    position: absolute;    transform: translate(-50%, -50%);    left: 50%;    top: 50%;}input[type="radio"] {    border-radius: 50%;    aspect-ratio: 1/1;    margin: auto;}button,input[type="submit"] {    border-radius: 0;    border-width: 1px;    border-color: var(--link-col) var(--hover-col) var(--hover-col) var(--link-col);    border-style: solid;}hr,br {    color: var(--bg-lighter);    margin-bottom: var(--gap);}.warning,[warning] {    color: black !important;    background-color: var(--warning);    border: 1px dashed var(--warning);}.message,[message] {    background-color: var(--success);    color: var(--bg-col);    border: 1px dotted white;}.error,[error] {    background-color: var(--error);    color: var(--bg-col);    border: 1px dotted white;    padding: var(--gap);}[warning],[message],[error] {    margin: 0;}.warning,.message,.error {    margin-block: var(--gap);}.warning,[warning],.message,[message],.error,[error] {    padding: var(--gap);    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    &>* {        margin: 0;    }}.right {    margin-left: auto;}.inline {    display: flex;    flex-direction: row;    align-items: center;    gap: var(--gap);    [type="submit"] {        width: auto;    }}@media screen and (max-width: 1200px) {    body {        max-width: 97%;    }}@media screen and (max-width: 900px) {    html,    body {        max-width: 100%;        width: 100%;    }}