:root {

  color-scheme: light dark;
 --page-bg-color: hsl(0, 4%, 90%);
 --page-text-color: #000;
 --content-bg-color: #f4e8d9;
 --aside-title-color: #dd614a;
 --aside-border-color: #172a3a;
 --link-color: #8e8efb;
 --link-visited-color: #a18cb7;
 --nav-button-bg-color: #9e7767;
 --nav-button-text-color: #ebdccb;
 --content-width: 60em;
 --main-flex-basis: 70%;
 --col-flex-basis: 10%;
 --hr-width: 2px;
 --hr-color: black;
 --hr-style: solid;
 --heading-font: "Brito-Regular", sans-serif;
 --body-font: "Brito-Regular", sans-serif;
 --body-line-height: 1.2;
 --body-font-size: 1.3em;
 --nav-separator: " | ";
 --noscroll-topbottom: 10vh;
 --noscroll-height: 80%;
 }


@font-face {
  font-family: Brito-Regular;
  src: url('https://honora.neocities.org/fonts/Brito-Regular.woff2') format('woff2');
}

body {

  color: light-dark(var(--page-text-color), #efefec);
  background-color: light-dark(var(--page-bg-color), #2b2931);
 font-family: var(--body-font);
  margin: 20px auto;
  padding: 0 15px;
 line-height: var(--body-line-height);
 font-size: var(--body-font-size);
 }

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

h1 {
 text-align: center;
 }

ul {
  border-radius: 20px;
  
  }


img {
  max-width: 100%;
  border-radius: 25px;
}

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

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

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

.logo {
  max-width: 300px;
   z-index: 1;
 
  
} 
main {
 background-color: light-dark(#f4e8d9, #2b2931);
 }
button {
  color: #fff;
  color: var(--form-text);
  background-color: #161f27;
  background-color: var(--background);
  font-family: inherit;
  font-size: inherit;
  margin-right: 6px;
  margin-bottom: 6px;
  padding: 10px;
  border: none;
  border-radius: 6px;
  outline: none;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

nav#topmenu {
 text-align: center;
 position: sticky;
 background-color: light-dark(var(--page-bg-color),#2b2931);
 z-index: 10;
 top: 0px;
 left: 0px;
 margin-left: auto;
 right: 0px;
 margin-right: auto;
 padding: 0.5em;
 border-radius: 6px;
  }

nav#topmenu ul {
 padding: 0px;
 margin: 0px;
 line-height: 55px;
 

 }

nav#topmenu ul li {
 list-style-type: none;
 display: inline;
 padding: 0.5em;
 margin: 0px;
 border-radius: 6px;
 background-color: Light-dark(#9e7767, #7a63c6);
 color: var(--nav-button-text-color);
 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }

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 img {
    max-width: 70%;
    height: auto;
    /* Maintain aspect ratio */
    flex: 1 1 auto;
    /* Allow images to grow and shrink */
    object-fit: cover;
    display: block;
      margin: 0 auto;
      
}
.flex_container main {
 order: 2;
 flex-grow: 8;
 flex-basis: var(--main-flex-basis);
 padding: 20px;
 min-width: 15em;
 border-radius: 25px;
 
 }

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

.itim-regular {
  font-family: "Itim", serif;
  font-weight: 400;
  font-style: normal;
}

aside#sidebar1 {
 margin-left: 0.5em;
 display: none;
 }

aside#sidebar2 {
 margin-right: 0.5em;
 display: none;
 }

aside#sidebar1, aside#sidebar2 {
 padding: 5px;
 }

.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: 3px double green;
 padding: 1em;
 display: grid;
 grid-template-rows: min-content 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);
 }
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
footer {
 text-align: center;
 display: none;
 }