:root {
    --foreground: #071013;
    --foreground-inverted: #EDEEC0;
    --background: #FFF4E9;
    --primary: #2978A0;
    --success: #69B578;
    --danger: #EB5160;
    --secondary: #EF8A17;

    --background-accent: #EBEBEB;
    --background-accent-alternative: #7A6563;

}

html {
    background-color: var(--background);
    color: var(--foreground);

    font-family: 'Open Sans', SansSerif, sans-serif;
}

nav {
    background: var(--background-accent);
    width: 100vw;
    display: inline-flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

nav .branding {
    /*float: left;*/
    /*width: 10vw;*/
}

nav ul {
    list-style: none;
    display: inline-flex;
    gap: 1em;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

nav ul li.branding {
    vertical-align: center;
    display: inline-flex;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1.5em;
}

nav ul li.branding img {
    max-height: 5.5vh;
}

nav ul li {
    display: flex;
    align-items: center;
}

nav ul li a:not(.no-link) {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    background: inherit;
    display: flex;
    align-items: center;
    position: relative;
    transition: background-color 0.125s linear;
    text-decoration: none;
    color: var(--foreground);
    font-weight: 600;
    font-size: 1.5em;
    height: 6.8vh;
}

nav ul li a:not(.no-link):hover {
    background: var(--background);
}

nav ul li a:not(.no-link)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.4em;
    transition: inherit;
}

nav ul li a:not(.no-link):hover::after {
    background: var(--primary);
}

.no-link {
    color: inherit;
    text-decoration: inherit;
    background-color: inherit;
}

.content-container {
    width: 90vw;
    margin: auto;
    padding: 0.5em;
}

.content-container h1 {
    font-size: 2em;
}

footer {
    background-color: var(--background-accent-alternative);
    width: 100vw;
    padding-top: 1em;
    padding-bottom: 1em;
    display: inline-flex;
    justify-content: space-evenly;
}


.btn {
    color: var(--foreground-inverted);
    background-color: var(--primary);
    padding: 0.25em 0.5em;
    border: none;
    border-radius: 0.25em;
    text-decoration: none;

    cursor: pointer;
}

.btn-group {
    display: inline-flex;
    gap: 0.5em;
}

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

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

.danger-fg {
    color: var(--danger);
}

.secondary {
    background-color: var(--secondary);
    color: var(--foreground);
}


.mt-1 {
    margin-top: 0.5em;
}
.ml-1 {
    margin-left: 0.5em;
}
.mr-1 {
    margin-right: 0.5em;
}
.mb-1 {
    margin-bottom: 0.5em;
}
.mt-2 {
    margin-top: 1em;
}
.ml-2 {
    margin-left: 1em;
}
.mr-2 {
    margin-right: 1em;
}
.mb-2 {
    margin-bottom: 1em;
}


table {
    border-collapse: collapse;
    width: 100%;
}

table.fancy th, table.fancy td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.table.fancy th {
    background-color: #f2f2f2;
}

table.fancy tr:hover {
    background-color: #e1e1e1;
}

@keyframes slow-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.slow-blink {
    animation: slow-blink 4s infinite;
}

form {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    width: fit-content;
    min-width: 35%;
    max-width: 85vw;
}

form div input, form div select, form div textarea {
    width: 50%;
    float: right;
    border: solid 0.15em var(--foreground);
    border-radius: 0.25em;
    outline: none;
}

form div input[type="file"] {
    border: none;
}

form div input:focus {
    border-color: var(--primary);
}