@font-face {
    font-family: 'Antonio';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/antonio/latin-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Antonio';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/antonio/latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --space-white: #f5f6fa;
    --space-black: #111111;
    --violet-creme: #ddbbff;
    --green: #33cc99;
    --magenta: #cc4499;
    --blue: #4455ff;
    --yellow: #ffcc33;
    --violet: #9944ff;
    --orange: #ff7700;
    --african-violet: #cc88ff;
    --red: #dd4444;
    --almond: #ffaa90;
    --almond-creme: #ffbbaa;
    --sunflower: #ffcc66;
    --bluey: #7788ff;
    --gray: #666688;
    --sky: #aaaaff;
    --ice: #88ccff;
    --gold: #ffaa00;
    --mars: #ff2200;
    --peach: #ff8866;
    --buttersotch: #ff9966;
    --tomato: #ff5555;
    --lilac: #cc33ff;

    --text-color: #cc77ff;
    --link-color: var(--lilac);

    --main-bg-color: var(--space-black);
    --main-fg-color: var(--text-color);

    --frame-color-top: var(--peach);
    --frame-color-bottom: var(--gold);

    --default-color: var(--violet);
    --default-color-2: var(--violet-creme);

    --success-color: var(--green);
    --success-color-2: var(--gray);

    --warning-color: var(--sunflower);
    --warning-color-2: var(--yellow);

    --danger-color: var(--mars);
    --danger-color-2: var(--tomato);

    --command-color: #5B1414;
    --operations-color: #AD722C;
    --sciences-color: #143F48;

    --command-color-2: var(--mars);
    --operations-color-2: var(--yellow);
    --sciences-color-2: var(--ice);

    --transition-duration: 200ms;
}

html, body, dl, dt, dd, input, button {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    min-height: 100%;
    background: var(--main-bg-color);
    color: var(--main-fg-color);
    display: flex;
    justify-content: center;
    padding: 0 1rem;
}

html.move,
html.move * {
    user-select: none;
    cursor: move !important;
}

html,
button {
    font-family: 'Antonio', sans-serif;
    font-size: inherit;
}

body {
    max-width: 60rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

h1, h2 {
    text-align: right;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
}

.frame-left {
    border-left: var(--frame-color-top) solid 10rem;
    padding: 1rem 0 1rem 1rem;
    margin: 0;
}

.frame-end-bl {
    border-style: solid;
    border-width: 0 0 1rem 10rem;
    border-radius: 0 0 0 7rem;
    padding: 0 0 1rem 1rem;
    position: relative;
    border-color: var(--frame-color-top);
}

.frame-end-bl:before {
    content: '';
    position: absolute;
    background: transparent;
    width: 5rem;
    height: 2rem;
    left: 0;
    bottom: 0;
    border-radius: 0 0 0 10rem;
    box-shadow: -3rem 0 0 0 var(--frame-color-top);
}

.frame-start-tl {
    position: relative;
    border: var(--frame-color-bottom) solid;
    border-width: 1rem 0 0 10rem;
    border-radius: 7rem 0 0 0;
    padding: 0 0 5rem 1rem;
    flex-grow: 1;
}

.frame-start-tl:before {
    content: '';
    position: absolute;
    background: transparent;
    width: 5rem;
    height: 2rem;
    left: 0;
    top: 0;
    border-radius: 10rem 0 0 0;
    box-shadow: -3rem 0 0 0 var(--frame-color-bottom);
    z-index: -1;
}

.frame-left aside,
.frame-start-tl aside {
    position: absolute;
    margin-left: -11rem;
    width: 10rem;
    padding: 0;
    border: var(--main-bg-color) solid;
    border-width: 0.25rem 0 0 0;
    background: var(--main-bg-color);
}

.frame-left aside {
    margin-top: -0.25rem;
}

.frame-start-tl aside {
    margin-top: 7rem;
}

.frame-start-tl aside nav ul {
    flex-direction: column;
    gap: 0;
}

.frame-left aside nav ul {
    flex-direction: row;
    gap: 0.25rem;
}

.frame-left aside nav li,
.frame-start-tl aside nav li {
    border: var(--main-bg-color) solid;
    border-width: 0 0 0.25rem 0;
}

.frame-tb {
    position: relative;
    margin: 1rem 1.75rem 1rem 1.75rem;
    text-align: center;
    border-top: solid 2rem var(--danger-color);
    border-bottom: solid 2rem var(--danger-color);
    color: var(--gray);
}

.frame-tb-tc {
    color: var(--danger-color);
    position: absolute;
    top: -2rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.frame-tb-tc h2 {
    margin: 0;
    background: var(--main-bg-color);
    height: 2rem;
    padding: 0 1rem;
    border: solid var(--danger-color-2);
    border-width: 0 0.25rem 0 0.25rem;
    position: relative;
}

.frame-tb-tc h2:before {
    position: absolute;
    content: ' ';
    top: 0;
    bottom: 0;
    right: -0.5rem;
    left: -0.5rem;
    border: solid var(--main-bg-color);
    border-width: 0 0.25rem 0 0.25rem;
}

.frame-tb-tc h2:after {
    position: absolute;
    content: ' ';
    top: 0;
    bottom: 0;
    right: -1rem;
    left: -1rem;
    border: solid var(--main-bg-color);
    border-width: 0 0.25rem 0 0.25rem;
}

.frame-tb-br {
    position: absolute;
    bottom: -2rem;
    height: 2rem;
    line-height: 2rem;
    right: 0.5rem;
    color: var(--space-white);
}

.frame-tb:before, .frame-tb:after {
    content: ' ';
    height: 2rem;
    display: block;
    margin: -2rem -1.75rem 1rem -1.75rem;
    border-radius: 1rem;
    border-left: solid 1.5rem var(--danger-color);
    border-right: solid 1.5rem var(--danger-color);
}

.frame-tb:after {
    margin: 1rem -1.75rem -2rem -1.75rem;
}

.key {
    background: var(--default-color-2);
    color: var(--main-bg-color);
    padding: 0.5rem;
    border-radius: 1rem;
}

.value {
    background: var(--default-color);
    color: var(--main-bg-color);
    padding: 0.5rem;
    border-radius: 1rem;
}

.success .key {
    background: var(--success-color-2);
}

.success .value {
    background: var(--success-color);
}

.warning .key {
    background: var(--warning-color-2);
}

.warning .value {
    background: var(--warning-color);
}

.danger .key {
    background: var(--danger-color);
}

.danger .value {
    background: var(--tomato);
}

.columns-3 {
    column-count: 3;
}

.columns-3 * {
    break-inside: avoid;
}

nav ul, ul.columns-3 {
    list-style-type: none;
    padding: 0;
}

ul.columns-3 li:before {
    content: '• ';
}

nav ul {
    gap: 1rem;
    margin: 0;
}

nav ul, nav li {
    display: flex;
}

nav ul * {
    flex-grow: 1;
}

nav a.button {
    background: var(--sky);
}

aside button,
aside a.button {
    background: var(--sunflower);
    border: none;
    border-radius: 0;
}

.frame-left aside button,
.frame-left aside a.button {
    background: var(--almond-creme);
}

a.button.command-division {
    background: var(--command-color-2);
}

a.button.operations-division {
    background: var(--operations-color-2);
}

a.button.sciences-division {
    background: var(--sciences-color-2);
}

.columns-3 .key-value-pair {
    padding: 0.25rem 0;
}

.key-value-pairs {
    display: flex;
    margin: 1rem 0;
    gap: 1rem;
}

ul.key-value-pairs {
    padding: 0;
    flex-wrap: wrap;
}

.key-value-pair {
    display: flex;
    flex-grow: 1;
    line-height: 1.25rem;
}

.key-value-pair > .key {
    border-radius: 1rem 0 0 1rem;
    margin-right: 0.25rem;
    text-align: right;
    flex-grow: 1;
    padding-left: 2.25rem;
}

.key-value-pair > .value {
    border-radius: 0 1rem 1rem 0;
}

.only-numbers .key-value-pair > .key {
    position: relative;
}

.only-numbers .key-value-pair > .key:before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    width: 1.5rem;
    height: 2.25rem;
    border-right: var(--main-bg-color) solid 0.25rem;
}

.only-numbers .key-value-pair > .value {
    border-radius: 0;
    background: none;
    color: var(--default-color);
    padding: 0 0.5rem;
    position: relative;
    font-size: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    top: -2px;
}

.only-numbers .key-value-pair:after {
    content: ' ';
    height: 2.25rem;
    width: 1.5rem;
    display: inline-block;
    background: var(--default-color-2);
    border-radius: 0 1rem 1rem 0;
}

.only-numbers .key-value-pair > .number-2-digits {
    width: 2rem;
}

.success .only-numbers .key-value-pair > .number {
    color: var(--success-color);
}

.success .only-numbers .key-value-pair:after {
    background: var(--success-color-2);
}

.warning .only-numbers .key-value-pair > .number {
    color: var(--warning-color);
}

.warning .only-numbers .key-value-pair:after {
    background: var(--warning-color-2);
}

form .buttons,
form .key-value-pairs {
    flex-direction: column;
    display: flex;
}

form .buttons button {
    align-self: flex-end;
}

form .value {
    width: 40%;
}

form .key-value-pair > .value.input {
    display: flex;
    gap: 0.5rem;
    font-size: inherit;
    top: 0;
}

form .key-value-pair > .value.input:after {
    top: 0;
}

form .value input {
    padding: 0;
    margin: 0;
    flex-grow: 1;
    border-bottom: solid var(--default-color);
    border-width: 0 0 0.25rem 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    outline: 0;
    text-align: center;
    height: 2rem;
}

form .value button {
    border-radius: 0;
    height: 2.25rem;
    padding: 0 0.5rem;
    justify-content: center;
    min-width: 3rem;
    align-items: center;
}

input[pattern] {
    letter-spacing: .5rem;
    direction: rtl;
    text-indent: -.5rem;
    text-transform: uppercase;
}

ul.inline, ul.inline li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline;
}

ul.csv > li:before {
    content: ', ';
}

ul.csv > li:first-child:before {
    content: '';
}

.number {
    text-align: right;
}

.number-2-digits {
    width: 1.5rem;
}

table {
    width: 100%;
    border-spacing: 0.25rem;
    caption-side: bottom;
}

caption {
    text-transform: uppercase;
    color: var(--sky);
}

th, td {
    text-align: left;
    padding: 0.5rem;
}

tr :first-child {
    border-radius: 1rem 0 0 1rem;
}

tr :last-child {
    border-radius: 0 1rem 1rem 0;
}

thead {
    text-transform: uppercase;
    color: var(--sky);
}

tbody tr {
    background: var(--gray);
    color: var(--space-white);
}

button,
a[href] {
    cursor: pointer;
    color: var(--link-color);
    text-decoration: none;
}

button[disabled] {
    cursor: not-allowed;
}

button:hover,
a[href]:hover {
    color: var(--space-white);
}

nav a,
aside a[href] {
    opacity: 0.3;
}

nav a.current,
nav a:hover,
aside a[href].current,
aside a[href]:hover {
    opacity: 1;
}

a[target="_blank"]:after {
    content: '🡕';
}

a[download]:after {
    content: '💾';
}

a[href^="http://"]:after,
a[href^="https://"]:after {
    content: '🌎';
}

a[href^="http://"][target="_blank"]:after,
a[href^="https://"][target="_blank"]:after {
    content: '🌎🡕';
    white-space: nowrap;
}

ul.buttons li {
    gap: 1rem;
    margin-bottom: 1rem;
}

ul.buttons li:before {
    content: '';
}

button,
a.button {
    background: var(--link-color);
    color: var(--main-bg-color);
    padding: 1rem 1rem 0.5rem 1.5rem;
    text-align: right;
    border-radius: 1rem;
    text-transform: uppercase;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    word-break: break-all;
    flex-direction: column;
}

button.success {
    transition-duration: var(--transition-duration);
    background: var(--success-color);
}

button.error {
    transition-duration: var(--transition-duration);
    background: var(--danger-color);
}

a.source {
    color: var(--green);
    text-shadow: var(--main-bg-color) 0 0 0.3rem;
}

figure {
    max-height: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    gap: 0.5rem;
}

figure img,
figure .figure-content {
    order: 0;
    max-width: calc(25% - 1.5rem);
    padding: 0.5rem;
    border: solid 0.25rem var(--main-fg-color);
}

figure figcaption {
    order: 1;
    text-align: center;
    width: 25%;
}

figure.qr-code img {
    background: var(--space-white);
    border: solid 0.5rem var(--main-bg-color);
    outline: solid 0.25rem var(--main-fg-color);
    max-width: none;
}

#pdf-viewport {
    margin-top: 1rem;
}

#pdf-viewport .figure-content {
    max-width: none;
    width: calc(100% - 1.75rem);
    padding: 0;
    border: 0.5rem solid var(--main-bg-color);
    outline: 0.25rem solid var(--main-fg-color);
    position: relative;
}

#pdf-viewport .figure-content canvas {
    width: 100%;
}

.toolbar {
    background: var(--main-bg-color);
    display: flex;
    position: absolute;
    top: 0;
    gap: 0.25rem;
    width: 100%;
    padding: 0 0 0.25rem 0;
}

.toolbar:before,
.toolbar:after {
    content: ' ';
    background: var(--default-color-2);
    border-radius: 1rem 0 0 1rem;
    width: 1.75rem;
}

.toolbar:after {
    border-radius: 0 1rem 1rem 0;
}

.toolbar button,
.toolbar .key,
.toolbar .value {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0;
    flex-grow: 1;
}

.toolbar .key {
    justify-content: flex-end;
}

.toolbar .value {
    background: none;
    color: var(--default-color);
}

time[title] {
    cursor: help;
}

.only-numbers .value.gauge-very-weak {
    color: var(--mars);
}

.only-numbers .value.gauge-weak {
    color: var(--almond);
}

.only-numbers .value.gauge-reasonable {
    color: var(--bluey);
}

.only-numbers .value.gauge-strong {
    color: var(--ice);
}

.only-numbers .value.gauge-very-strong {
    color: var(--green);
}

.hide {
    display: none;
}

:fullscreen #enable-fullscreen {
    display: none;
}

.figure-content:not(:fullscreen) #disable-fullscreen {
    display: none;
}