:root {
 --page-bg-color: #32203a;
 --page-text-color: #d3d6b9;
 --content-bg-color: #b44d74;
 --content-border-color: black;
 --aside-title-color: #d1caa1;
 --aside-border-color: #6e003f;
 --link-color: #4a3a76;
 --link-visited-color: #de55c4;
 --nav-button-bg-color: #6f254b;
 --nav-button-text-color: #ebdccb;
 --accent-color: #e33768;
 --content-width: 100em;
 --main-flex-basis: 68%;
 --col-flex-basis: 11%;
 --hr-width: 2px;
 --hr-color: black;
 --hr-style: solid;
 --body-font: Superclarendon;
 --header-font: Candara,;
 --body-line-height: 0.9;
 --body-font-size: "1em";
 --nav-separator: " | ";
 --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;
 }

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);
 padding-top: 19px;
 }

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

h1 {
 text-align: center;
 }

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

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

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

main {
 background-color: var(--content-bg-color);
 border-color: var(--content-border-color);
 border-width: 1px;
 }

section {
 background-color: var(--content-bg-color);
 border-width: 1px;
 border-color: var(--content-border-color);
 border-radius: 6px;
 margin-bottom: 1em;
 padding: 0.5em;
 overflow: auto;
 }

section img {
 max-width: 200px;
 float: left;
 display: block;
 margin-right: 1em;
 }

.dropCap p:first-of-type::first-letter {
 font-size: 3em;
 font-weight: bold;
 float: left;
 margin-right: 0.3em;
 padding: 0.3em;
 border: 1px solid var(--nav-button-text-color);
 background-color: var(--accent-color);
 color: var(--content-bg-color);
 text-transform: uppercase;
 }

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

nav#topmenu ul {
 padding: 0px;
 margin: 0px;
 }

nav#topmenu ul li {
 list-style-type: none;
 display: inline;
 padding: 0.5em;
 margin: 0px;
 background-color: var(--nav-button-bg-color);
 color: var(--nav-button-text-color);
 border-style: outset;
 border-width: 0.25em;
 border-color: var(--nav-button-bg-color;
 }

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

nav#topmenu ul li::before {
 }

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

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: 8;
 flex-basis: var(--main-flex-basis);
 padding: 5px;
 min-width: 15em;
 }

.flex_container aside#sidebar1 {
 order: 1;
 flex-grow: 1;
 flex-basis: var(--col-flex-basis);
 }

.flex_container aside#sidebar2 {
 order: 3;
 flex-grow: 1;
 flex-basis: var(--col-flex-basis);
 }

aside#sidebar1 {
 margin-right: 0.2em;
 display: none;
 }

aside#sidebar2 {
 margin-left: 0.2em;
 }

aside#sidebar1, aside#sidebar2 {
 padding: 5px;
 border-color: var(--aside-border-color);
 border-width: 5px;
 border-style: dashed;
 border-radius: 9px;
 }

.sidebarBlock h2 {
 color: var(--aside-title-color);
 }

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

  main {
 order: 1;
 }
}

div#gal_flex {
 display: flex;
 flex-wrap: wrap;
 margin-left: auto;
 margin-right: auto;
 }

div.gallery {
 margin: 5px;
 border: 1px solid var(--aside-border-color);
 width: 160px;
 position: relative;
 }

div.gallery:hover {
 border: 1px solid var(--aside-title-color);
 }

div.gallery h2 {
 text-align: center;
 }

div.gallery img {
 max-width: 100%;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 }

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

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

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

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

footer {
 text-align: center;
 display: none;
 }