:root {

    --black: #080808;
    --blue: #46518c;
    --blue-dark: #131626;
    --blue-light: #798cf2;
    --gray: #8c8c8c;
    --orange: #8c3503;
    --orange-dark: #260b01;
    --orange-light: #f25c05;
    --teal: #12748c;
    --teal-dark: #052026;
    --teal-light: #1ec9f2;
    --white: #f2f2f2;

}

* {

    box-sizing: border-box;

}

html {

    font-size: 18px;

}

a {

    color: var(--white);

}

.background-emphasis {

    background-color: var(--teal);
    border-radius: 5px;
    display: inline-table;
    padding: 1rem;

}

body {

    background-color: var(--blue-dark);
    color: var(--white);
    font-family: DejaVu Sans, sans-serif;
    margin: 0;
    padding: 0rem 5rem 2rem 5rem;
    text-align: center;

}

.contrast-button {

    background-color: var(--orange-light);
    border: none;
    border-radius: 5px;
    color: var(--white);
    padding: 0.3rem;

}

.contrast-button:hover {

    background-color: var(--orange);

}

.emphasis {

    color: var(--teal);

}

.floating-form {

    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin: auto;

}

.floating-form-button {

    align-self: stretch;

}

.floating-form-element {

    margin: 0.25em 0em;

}

h1 {

    font-size: 2.5rem;

}

h2 {

    color: var(--teal);
    font-size: 2rem;

}

input {

  text-align: center;

}

input[type="number"] {

    appearance: textfield;
    text-align: center;
    width: 50%;

}

input:focus {

    outline: none;

}

input::placeholder {

    text-align: center;

}

label {

    white-space: nowrap;

}

.match-button {

    background-color: inherit;
    border: none;
    color: var(--black);

}

.match-button:hover {

    background-color: var(--orange);

}

.match-button:active {

    background-color: var(--orange-dark);
    color: var(--white);

}

.nav-anchor {

    color: var(--white);
    text-decoration: none;

}

.nav-anchor:hover {

    color: var(--gray);

}

#navigation {

    width: 100%;

}

.pill {

    color: var(--black);
    float: left;
    margin: 0.2em;
    padding: 0em;
    white-space: nowrap;

}

.pill-input {

    border: none;

}

.pill-center {

    background-color: var(--orange-light);
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0.5rem;

}

.pill-left {

    background-color: var(--orange-light);
    border-top-left-radius: 0.7rem 50%;
    border-bottom-left-radius: 0.7rem 50%;
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0.5rem;

}

.pill-only {

    margin: 0.5em;

}

.pill-right {

    background-color: var(--orange-light);
    border-top-right-radius: 0.7rem 50%;
    border-bottom-right-radius: 0.7rem 50%;
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0.5rem;

}

section:not(:target) {

    display: none;

}

.small-form {

    display: inline;

}

.footer-form {

    margin-top: 1.5em;

}

table {

    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    text-align: left;

}

.td-center {

    margin: 0 25%;
    text-align: center;

}

td {

    padding: 0.25em;

}

.nav-list {

    display: flex;
    gap: 1.5rem;
    justify-content: space-evenly;
    list-style: none;

}

.nav-list li:first-child {

    display: none;

}

.submission-list {

    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.submission-item {

    align-items: center;
    display: block flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;

}

.submission-options {

    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: center;

}

thead {

    text-align: center;

}

.pill-list {

    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    justify-content: center;

}

td > .pill-list {

    justify-content: left;

}

#menu-icon-link {

    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 1rem;

}

.back-arrow {

    position: absolute;

}

.content-block {

    margin-left: auto;
    margin-right: auto;
    width: 50%;

}

th {

    padding: 0.25rem 0.5rem;

}

.collapser {

    display: none;

}

.block-content {

    max-height: 0px;
    overflow: hidden;

}

.collapser-indicator {

    display: inline-block;
    margin-left: 1rem;
    transition: transform .25s ease-in-out;

}

.collapser-open {

    display: none;
    margin-left: 1rem;

}

.collapser:checked + .collapser-label + .block-content {

    max-height: max-content;

}

.collapser:checked + .collapser-label .collapser-indicator {

    transform: rotate(90deg);

}

/* portrait */
@media screen and (max-width: 1090px) {

    .reveal * {

        display: block !important;

    }

    .nav-list {

        align-items: flex-start;
        flex-direction: column;

    }

    .nav-list li {

        display: none;

    }

    .nav-list li:first-child {

        display: block;

    }

    h1 {

        text-align: left;

    }

}