@font-face
{
    font-family: 'dos';
    src: url('fonts/dosvga.ttf');
}

@font-face
{
    font-family: 'unifont';
    src: url('fonts/unifont.otf');
}

@media (prefers-color-scheme: light)
{
    :root
    {
        --page-bg-color: #ece3cc;
        --page-text-color: #53676d;
        --title-color: #53676d;
        --title-bg-color: transparent;
        --content-bg-color: #fbf3db;
        --content-border-color: #0072d4;
        --link-color: #0072d4;
        --link-color-visited: #8762c6;
        --link-color-hover: #d2212d;
        --nav-button-bg-color: #fbf3db;
        --nav-button-text-color: #3a4d53;
        --nav-dropdown-bg-color: rgba(251, 243, 219, 0.85);

        --content-width: 65em;
        --main-flex-basis: 70%;
        --col-flex-basis: 10%;
        --hr-width: 2px;
        --hr-color: #53676d;
        --hr-style: solid;

        --body-font: 'Nimbus Mono PS', 'Courier New', monospace;
        --header-font: 'dos', 'Nimbus Mono PS', 'Courier New', monospace;
        --body-line-height: 1.4;
        --body-font-size: 1.2rem;
        --header-font-size: 1.7rem;
        --title-font-size: 2rem;

        --noscroll-topbottom: 10vh;
        --noscroll-height: 80%;

        --bg-image: none;
        --bg-image-repeat: repeat;
        --bg-image-size: auto;
        --bg-image-position: 0 0;
        --bg-image-scroll: scroll;

        --content-border-style: solid;
        --content-border-radius: 0px;
        --content-border-width: 3px;
        --block-border-style: none;
        --block-border-radius: 0px;
        --block-border-width: 1px;
        --block-margin-bottom: 0px;
        --col-header-margin: 0.65em;
    }
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --page-bg-color: #252525;
        --page-text-color: #b9b9b9;
        --title-color: #b9b9b9;
        --title-bg-color: transparent;
        --content-bg-color: #181818;
        --content-border-color: #368aeb;
        --link-color: #368aeb;
        --link-color-visited: #a580e2;
        --link-color-hover: #ed4a46;
        --nav-button-bg-color: #181818;
        --nav-button-text-color: #dedede;
        --nav-dropdown-bg-color: rgba(24, 24, 24, 0.85);

        --content-width: 65em;
        --main-flex-basis: 70%;
        --col-flex-basis: 10%;
        --hr-width: 2px;
        --hr-color: #b9b9b9;
        --hr-style: solid;

        --body-font: 'Nimbus Mono PS', 'Courier New', monospace;
        --header-font: 'dos', 'Nimbus Mono PS', 'Courier New', monospace;
        --body-line-height: 1.4;
        --body-font-size: 1.2rem;
        --header-font-size: 1.7rem;
        --title-font-size: 2rem;

        --noscroll-topbottom: 10vh;
        --noscroll-height: 80%;

        --bg-image: none;
        --bg-image-repeat: repeat;
        --bg-image-size: auto;
        --bg-image-position: 0 0;
        --bg-image-scroll: scroll;

        --content-border-style: solid;
        --content-border-radius: 0px;
        --content-border-width: 3px;
        --block-border-style: none;
        --block-border-radius: 0px;
        --block-border-width: 1px;
        --block-margin-bottom: 0px;
        --col-header-margin: 0.65em;
    }
}

body
{
    background-color: var(--page-bg-color);
    color: var(--page-text-color);
    font-family: var(--body-font);
    line-height: var(--body-line-height);
    font-size: var(--body-font-size);
    background-image: var(--bg-image);
    background-repeat: var(--bg-image-repeat);
    background-size: var(--bg-image-size);
    background-position: var(--bg-image-position);
    background-attachment: var(--bg-image-scroll);
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: var(--header-font);
    background-color: var(--title-bg-color);
    color: var(--title-color);
    position: relative;
    z-index: 1;
}

h2,
h3,
h4,
h5,
h6
{
    font-size: var(--header-font-size);
}

h1
{
    text-align: center;
    font-size: var(--title-font-size);
}

a
{
    color: var(--link-color);
}

a:visited
{
    color: var(--link-color-visited);
}

a:hover
{
    color: var(--link-color-hover);

}

header
{
    text-align: center;
    padding-bottom: 0.5em;
}

main
{
    background-color: var(--content-bg-color);
    border-color: var(--content-border-color);
    border-width: var(--content-border-width);
    border-radius: var(--content-border-radius);
    border-style: var(--content-border-style);
}

.horizontal /* use in a ul li list, to lay out
elements horizontally */
{
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
    max-width: max-content;
    flex-wrap: wrap;
    gap: var(--margin);
}

/*  CONTENT IMAGES */

.img-resize /* Use this for individual images */
{
    object-fit: contain;
    max-width: 100%;
}

.img-mirror /* Mirrors an image */
{
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.img-border /* Adds border to image */
{
    border-width: 2px;
    border-style: solid;
    border-color: var(--content-border-color);
}

.images /* use in a div, to make the images appear
horizontally */
{
    display: flex;
    width: calc(100% + 5px + 5px);
    margin-left: -5px;
    margin-right: -5px;
}

.images img
{
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0;
    overflow: hidden;
}

nav#topmenu
{
    text-align: center;
    position: static;
    background-color: var(--page-bg-color);
    z-index: 10;
    left: 0px;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    right: 0px;
    padding: 0.75em;
}

nav#topmenu ul
{
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75em;
}

nav#topmenu ul li
{
    list-style-type: none;
    padding: 0.1em;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: var(--nav-button-bg-color);
    color: var(--nav-button-text-color);
    border-radius: 0px;
    border-style: solid;
    border-width: var(--content-border-width);
    border-color: var(--content-border-color);
    text-decoration: underline;
    position: relative;
}

nav#topmenu li a
{
    text-decoration: none;
    color: var(--nav-button-text-color);
    padding: 0.1em;
    display: block;
}

nav#topmenu a:link
{
    color: var(--nav-button-text-color);
}

nav#topmenu a:visited
{
    color: var(--nav-button-text-color);
}

nav#topmenu a:hover
{
    color: var(--link-color-hover);
}

nav#topmenu ul li::before {}

nav#topmenu ul li:first-child::before
{
    content: "";
}

nav#topmenu ul ul
{
    display: none;
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 0;
    background-color: var(--nav-dropdown-bg-color);
    border-style: var(--content-border-style);
    border-width: var(--content-border-width);
    border-color: var(--content-border-color);
    border-radius: var(--content-border-radius);
    padding: 0.25em 0;
    margin: 0;
    list-style-type: none;
    min-width: 12em;
    z-index: 20;
}

nav#topmenu ul li:hover > ul
{
    display: block;
}


nav#topmenu ul li::after
{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.4rem;
    background: transparent;
    z-index: 19;
}

nav#topmenu ul ul li
{
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
}

nav#topmenu ul ul li a
{
    display: block;
    padding: 0.5em 1em;
    color: var(--nav-button-text-color);
    text-decoration: none;
    white-space: nowrap;
}

div.flex_container
{
    display: flex;
    flex-flow: wrap;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.flex_container main
{
    order: 2;
    flex-grow: 5;
    flex-basis: var(--main-flex-basis);
    padding: 10px;
    min-width: 15em;
}

@media screen and (max-width: 35em)
{

    main
    {
        order: 1;
    }
}

#noscroll-body
{
margin-left: auto;
margin-right: auto;
margin-top: var(--noscroll-topbottom);
margin-bottom: var(--noscroll-topbottom);
height: var(--noscroll-height);
padding: 1em;
display: grid;
grid-template-rows: min-content min-content 1fr min-content;
border-color: var(--content-border-color);
border-width: var(--content-border-width);
border-radius: var(--content-border-radius);
}

#noscroll-body .flex_container
{
height: 100%;
overflow: hidden;
}

#noscroll-body main,
{
    padding: 3px;
    height: 100%;
    overflow: auto;
}

hr
{
    border-top-width: var(--hr-width);
    border-color: var(--hr-color);
    border-style: var(--hr-style);
}