:root
{
    --background-color: #121212;
    --foreground-color: white;
    --mid-backgroup-color: #404040;
    --input-background-color: #c0c0c0;
    --a-foreground-color: white;
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --background-color: #121212;
        --mid-backgroup-color: #404040;
        --foreground-color: white;
        --input-background-color: #c0c0c0;
        --a-foreground-color: white;
    }
}

@media (prefers-color-scheme: light)
{
    :root
    {
        --background-color: #ededed;
        --mid-backgroup-color: #c0c0c0;
        --foreground-color: black;
        --input-background-color: #c0c0c0;
        --a-foreground-color: black;
    }
}

body
{
    position: relative;
    text-rendering: optimizeLegibility;
    font-family: sans-serif;
    font-size: 90%;
    background-color: var(--background-color);
    color: var(--foreground-color);
    margin: 1vw 0;
    margin-right: 1vw 0;
}

nav
{
    width: 100%;
    font-size: 120%;
    margin-block-end: 3vw;
}

nav a:not(:last-of-type)
{
    margin-right: 1.5vw;
}

nav a:first-of-type
{
    margin-left: 1vw;
}

h3
{
    font-size: 144%;
    font-weight: bold;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-left: 0vw;
}

img
{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

header img
{
    width: calc(5vw);
    height: calc(5vw);
    max-width: 100%;
    max-height: 100%;
}

a
{
    color: var(--a-foreground-color);
    font: inherit;
}

nav a img
{
    border: 2px solid var(--foreground-color);
    border-radius: 98%;
    max-width: 75%;
}

nav a img.user,
section a img.user
{
    border: 2px solid var(--foreground-color);
}

nav a img.contributor,
section a img.contributor
{
    border: 6px solid #FFD700;
}

footer
{
    padding-top: 0.5vw;
    padding-bottom: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: 2vw;
    margin-right: 2vw;
}

footer table.about
{
    position: fixed;
    left: 1vw;
    bottom: 0;
    margin: 1vw 0;
    opacity: 0.5;
    z-index: 1;
    text-align: left;
    vertical-align: bottom;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
}

.align_left
{
    text-align: left;
}

.align_center
{
    text-align: center;
}

footer img
{
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 560px)
{
    footer img
    {
        width: 16px;
        height: 16px;
    }
}

@media only screen and (max-width: 680px)
{
    footer img
    {
        width: 24px;
        height: 24px;
    }
}

footer table.copyright
{
    position: fixed;
    right: 1vw;
    bottom: 0;
    margin: 1vw 0;
    font-size: 80%;
    opacity: 0.5;
    z-index: -1;
    text-align: right;
    vertical-align: bottom;
    min-width: fit-content;
    width: fit-content;
    white-space: nowrap;
}

section
{
    padding-top: 0.5vw;
    padding-bottom: 1vw;
    padding-left: 1vw;
    padding-right: 2vw;
    margin-left: 2vw;
    margin-right: 2vw;
    background-color: var(--background-color);
    opacity: 0.7;
    /* display: none; */
    display: block;
    /* transition: 0.2s all; */
}

/* section:target,
section#news,
section#active_timers,
section#structures_without_fuel,
section#last_update,
section#recent_usage
{
    display: block;
} */
section:hover,
section:focus
{
    opacity: 1;
}

section ul,
section li
{
    text-align: left;
}

section table
{
    width: 100%;
    font-weight: normal;
    text-align: right;
    margin: 0vw 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-collapse: collapse;
}

section table.narrow
{
    width: 50%;
}

/* section table > tbody > tr
{
    border-bottom: 10px dotted white;
} */
section table tbody tr
{
    transition: background-color 0.1s ease-in;
    background-color: var(--backgroup-color);
}

section table tbody tr:hover
{
    transition: background-color 0.1s ease-out;
    background-color: var(--mid-backgroup-color);
}

section table td
{
    min-width: min-content;
}

section table tbody
{
    width: min-content;
}

section table thead,
section table tfoot
{
    width: min-content;
    font-weight: bold;
}

section table tr.stale
{
    opacity: 0.50;
}

section table td .dow_off
{
    background-color: var(--background-color);
    color: var(--foreground-color);
    opacity: 0.50;
}

section table td .dow_on
{
    background-color: var(--foreground-color);
    color: var(--background-color);
}


/*
 * only change below here
 */

main article section {
    /* background: rgba(30, 30, 30, .9); */
    /* -webkit-backdrop-filter: blur(2px) saturate(100%); */
    /* backdrop-filter: blur(2px) saturate(100%); */
    /* padding: 30px; */
    /* position: relative; */
    width: 504px;
    /* margin: 30px; */
}

main article section form fieldset {
    display: block;
    /* border: none; */
    border-style: ridge;
    /* min-inline-size: min-content; */
    /* margin-inline: 2px; */
}

main article section .field  {
    padding: 10px 0 10px 0;
    /* position: relative; */
    /* vertical-align: middle; */
}

main article section .field label {
    /* padding: 10px 0 10px 0; */
    display: none;
}

main article section .field input {
    padding: 10px 0 10px 0;
    width: 100%;
    font-size: larger;
}

main article section .checkbox
{
    padding: 10px 0 10px 0;
}

main article section .checkbox input[type="checkbox"]
{
    margin-right: 10px;
    width: auto;
}

main article section .submit
{
    /* padding: 10px 0 10px 0; */
    /* margin-right: 5px; */
    filter: none;
    /* -webkit-appearance: none; */
}

main article section .submit .btn
{
    padding: 10px 0 10px 0;
    /* background-color: inherit; */
    /* color: inherit; */
    font-size: larger;
    width: 100%;
    -webkit-appearance: none;
}

main article section .submit a.forgot
{
    padding: 10px 0 10px 0;
    /* /* margin: 15px; */
    width: 100%;
    display: inline-block;
    text-align: right;
}

/* @media only screen and (min-width: 544px) {
    #container {
        width: 504px;
    }
} */