:root {

 --dark: #282A36;
 --light: #eff1f5;
  color-scheme:light dark;
 --page-bg-color: black;
 --page-text-color: light-dark(var(--light), var(--dark));
 --title-color: light-dark(yellow, darkyellow);
 --title-shadow-color: #666688;
 --title-bg-color: transparent;
 --boxhdr-shadow-color: #ee1111;
 --content-bg-color: light-dark(var(--dark), var(--light));;
 --content-border-color: cyan4f;
 --aside-title-color: light-dark(yellow, darkyellow);
 --aside-border-color: magenta;
 --aside-background-color: var(--content-bg-color);
 --link-color: light-dark(yellow, darkyellow);
 --link-visited-color: light-dark(cyan, darkcyan);
 --nav-button-bg-color: magenta;
 --nav-button-text-color: white;
 --accent-color: #00FFFF;
 --content-width: 85em;
 --main-flex-basis: 59%;
 --col-flex-basis: 15.5%;
 --hr-width: 2px;
 --hr-color: black;
 --hr-style: solid;
 --body-font: Victor;
 --header-font: Averia;
 --body-line-height: 1.2;
 --body-font-size: 1.2rem;
 --header-font-size: 2rem;
 --title-font-size: 3rem;
 --nav-separator: "-";
 --noscroll-topbottom: 5vh;
 --noscroll-height: 82%;
 --bg-image: url(images/yayayayay-dithered.png);
 --bg-image-size: auto;
 --bg-image-position: 0 0;
 --content-border-style: none;
 --content-border-radius: 6px;
 --content-border-width: 1px;
 --aside-border-style: none;
 --aside-border-radius: 5px;
 --aside-border-width: 5px;
 --block-border-style: none;
 --block-border-radius: 0;
 --block-border-width: 1px;
 --block-margin-bottom: 0px;
 /*--col-header-margin: 0.65em;*/
 --title-shadow-x: 0.2em;
 --title-shadow-y: 0.2em;
 --title-shadow-blur: 0.2em;
 --boxhdr-shadow-x: 0.2em;
 --boxhdr-shadow-y: 0.2em;
 --boxhdr-shadow-blur: 0.2em;
 --boxhdr-shadow-spread: 0;
 --boxhdr-radius: 0;
 --boxhdr-shadow-rotate: 0;
 --overlay:rgb(0,0,0,0.3);
 }

@font-face {
  font-family: BoreBlasters; /* set name */
  src: url(fonts/Bore.woff2); /* url of the font */
}

@font-face {
  font-family: Averia;
  src: url(/fonts/AveriaLibre-Bold.woff2);

}

@font-face {
  font-family:Victor;
  src: url(/fonts/VictorMono-VariableFont_wght.woff2);
  font-weight:bold;

}

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: center;
 background-attachment: var(--bg-image-scroll);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 margin:0.2rem;
 }


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);
 }

aside h2::before {
 content: "";
 position: absolute;
 z-index: 20;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 border-radius: var(--boxhdr-radius);
 rotate: var(--boxhdr-shadow-rotate);
 }

h1 {
 font-size: var(--title-font-size);
 z-index:3;
 }

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

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

header {
 text-align: left;
background-image: url("images/surge.webp");
padding-top:11rem;
background-position: left;
background-repeat: no-repeat;
overflow:hidden;
 }


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);

 }

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

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;
 z-index: 5;
 left: 0px;
 right: 0px;
 margin-left: auto;
 margin-right: auto;
 top: 0px;
 font-family:Averia;

 }

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

nav#topmenu ul li {
 list-style-type: none;
 display: inline;
 padding: 0.5em;
 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: 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;
 margin-left: auto;
 margin-right: auto;
 height: var(--noscroll-height);
 }

.flex_container main {
 order: 2;
 flex-grow: 5;
 flex-basis: var(--main-flex-basis);
 min-width: 15em;
 padding:1em;
 min-height: 30%;
 max-height:40em;
 }

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

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

aside#sidebar1 {
 margin-right: 0.2em;

 }

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

aside#sidebar1, aside#sidebar2 {
 padding: 0px;
 border-color: var(--aside-border-color);
 border-width: var(--aside-border-width);
 border-radius: var(--aside-border-radius);
 border-style: solid;

 }

aside li {
  list-style-type: none;
  padding:0.2em;
}

aside ul {
  padding-left:0.5em;
}

div.sidebarBlock {
 padding: 5px;
 background-color: var(--aside-background-color);
 border-color: var(--aside-border-color);
 border-width: var(--block-border-width);
 border-radius: var(--block-border-radius);
 margin-bottom: var(--block-margin-bottom);

 }

.sidebarBlock h2 {
 color: var(--aside-title-color);
 margin-top: var(--col-header-margin);
 margin-bottom: var(--col-header-margin);
 }

#noscroll-body {
 margin-left: auto;
 margin-right: auto;
 margin-top: var(--noscroll-topbottom);
 margin-bottom: var(--noscroll-topbottom);
 height: var(--noscroll-height);
 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);
 max-width: var(--content-width);
 border-style: var(--content-border-style);
 }

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

#noscroll-body main, #noscroll-body aside {
 height: 100%;
 overflow: auto;
 }
 
#noscroll-body main li {
margin:0.5em;
}

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

nav#topmenu ul li {
 list-style-type: none;
 display: inline-block;
 padding: 0.5em;
 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: 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 li a:hover {
  color:yellow;
 }

 nav#topmenu ul li:active {
 border-style: inset;
 }


nav#topmenu ul li::before {
 }

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

#titleheader {
 text-shadow: 5rem 3px cyan, 7rem 3.5px white, 13rem 4px yellow, 15rem 4.5px black, 19rem 5px magenta, 20rem 6px black;
 color:black;
padding:0;
margin:0;
font-family: "BoreBlasters";
font-size:5rem;
}

#burger {
    display:none;
    width:100%;
    position:absolute;
    top:0;
    z-index:100;
}

#burger summary {
    list-style-type: none;
    cursor: pointer;
    display:flex;
    padding: 0.5em;
    align-items:center;
    color:white;
    background:rgba(0, 239, 255, 0.4);
    font-family: Averia;
}

#burger summary::before, #burger[open]>summary::before {
    height:40px;
    width:40px;
    background:rgba(0 0 0 0.2);
}

#burger summary::-webkit-details-marker {
    display: none;
}

#burger summary::before {
    content: '';
    mask-image:var(--burgericon);
    -webkit-mask-image:var(--burgericon);
    mask-size:40px;
    -webkit-mask-size:40px;
}

#burger[open]>summary::before {
    content: '';
    mask-image:var(--closeicon);
    -webkit-mask-image:var(--closeicon);
    mask-size:40px;
    -webkit-mask-size:40px;
}

#burger[open] {
    position:fixed;
    background:var(--overlay);
}

#burger li {
  list-style-type: none;
  padding:0.2em;
}

.skip a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
 
.skip a:focus {
    position:static;
    width:auto;
    height:auto;
}

#burger-menu {
    height:10%;
    overflow:auto;
    z-index:-1;
    background:var(--aside-background-color);
    width:200px;
    padding: 1rem;
}

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
  width:100%;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 10em));
  grid-auto-rows: minmax(1em, 1em);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery a {
  width:50%;
}

@media screen and (max-width:900px) {
    #container {
        width:calc(100 - 20px);
        margin-left: 0p;
    }
    
    #burger {
        display:block;
    }

    main {
     order: 1;
     }

    aside#sidebar1 {
      display:none;
    }

    nav#topmenu li a {
      padding: 0.1em;
      border-width: 0.1em;
      border-radius: 0.1em;
      overflow-inline: scroll;
      font-size: 0.8em;
    }

    div.flex_container {
      flex-direction: column;
      padding:0;
    }

    .flex_container main {
      max-height:100%;
    }

    header {

      background-position:center;

    }

    #titleheader {
      font-size: 3rem;
    }

    .ezgallery a {
       width:100%;
    }
}}