:root {
    --dark-grey: #555555;
    --light-grey: #A0A0A0;
    --dark-gray: #555555;
    --light-gray: #A0A0A0;

    --very-dark-grey: #303030;
    --very-light-grey: #E0E0E0;
    --very-dark-gray: #303030;
    --very-light-gray: #E0E0E0;

    --light-green: #A9FFA5;
    --dark-green: #58CD50;

    --light-yellow: #FFCCA5;
    --dark-yellow: #AA9950;

    --light-red: #FFA9A5;
    --dark-red: #FF5850;

    --light-blue: #9099FF;
    --dark-blue: #3830FF;
}

body {
    margin: auto;
    font-family: Tahoma, Verdana, Arial, sans-serif;
}

html { color-scheme: light dark; }

hr {
    height: 1px;
    border-width: 0;
    color: gray;
    background-color: gray;
}

hr.three-quarters-width {
    width: 75%;
}

hr.half-width {
    width: 50%;
}

#site-wrapper {
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 1vh;
    max-width: 95vw;
    width: 1080px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

#main-body {
    min-height: 90.95vh;
    padding-bottom: 2vh;
}

#main-body .flex-container .flex-item {
    width: 100%;
}

#site-header {
    margin-bottom: 2vh;
    padding-bottom: 0.25vh;
    border-bottom: 1px solid gray;
}

#logo {
    text-align: left;
    padding-left: 1vw;
    align-items: center;
    display: flex;
}

.flex-container {
    display: flex;
}

.flex-item-third-one {
    order: 0;
    flex-grow: 1;
    text-align: center;
}

.flex-item-third-two {
    order: 1;
    flex-grow: 2;
    text-align: center;
}

.flex-item-left {
    order: 0;
    flex-grow: 1;
    text-align: left;
}

.flex-item-right {
    order: 1;
    flex-grow: 1;
    text-align: right;
}

table {
    border: 1px;
    width: 100%;
    border-spacing: 0px;
}

td {
    border: 1px solid light-dark(var(--dark-grey), var(--light-grey));
    padding-left: .5vw;
    padding-right: .5vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

table thead tr td {
    text-align: center;
}

table thead {
    background-color: light-dark(var(--very-light-grey), var(--very-dark-grey));
    color: light-dark(black, white);
}

#subtext {
    color: light-dark(var(--dark-grey), var(--light-grey));
    font-size: 0.8em;
}

.subtext {
    color: light-dark(var(--dark-grey), var(--light-grey));
    font-size: 0.8em;
}

code {
    font-family: 'Courier New', Courier, monospace;
    background-color: light-dark(var(--very-light-grey), var(--very-dark-grey));
    border: 1px solid light-dark(var(--light-grey), var(--dark-grey));
}

.centered {
    text-align: center;
}

.color-green {
    color: light-dark(var(--dark-green), var(--light-green));
}

.color-yellow {
    color: light-dark(var(--dark-yellow), var(--light-yellow));
}

.color-red {
    color: light-dark(var(--dark-red), var(--light-red));
}

.color-blue {
    color: light-dark(var(--dark-blue), var(--light-blue));
}

li {
    padding-top: 2px;
    padding-bottom: 2px;
}

#footer {
    margin-top: 2vh;
    padding-top: 1vh;
    min-height: 3vh;
    border-top: 1px solid gray;
}

#footer .flex-container {
    align-items: center;
}

#footer-left {
    text-align: left;
    color: light-dark(var(--dark-grey), var(--light-grey));
    font-size: 0.8em;
}

#footer-right {
    text-align: right;
}