:root {

  color-scheme: light dark;
 --page-bg-color: #eed6c5;
 --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: 75%;
 --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.6;
 --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), #0e0e1c);
 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: #41adff;

 text-decoration: none;
  padding-bottom: .1em; 
 

  line-height: 1.5;

  background: url("../img/ul.svg") no-repeat bottom / 100% .5em;

}


a:hover {
color: #41adff;


  padding-bottom: .1em; 
 

  line-height: 1.5;

  background: url("../img/ul.svg") no-repeat bottom / 115% .5em;

}


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

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

main {
 background-color: light-dark(#f4e8d9, #0e0e1c);
 }
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), #0e0e1c);
 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%;
}





title-block, aside {
    display: block;
    float: left;
    position: absolute;
    margin-left: 0;
    left: 2.5rem;
    width: calc(2.5rem * 3);
    text-align: right;
    list-style-type: none;
    clear:both; margin-bottom: 1rem;
    font-variant-numeric: normal;
}

@media all and (min-width:1200px) {
    aside {
        left : 0;
        width: calc(2.5rem * 4);
    }
}

@media all and (max-width:520px) {
    title-block, aside { float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;}

    aside {
        background: #fefefe;
        padding: 0.3rem 0.5rem;
        width: 90%;
        border: 1px solid #ccc;
        border-left: 3px solid #ccc;
    }

    aside > p:last-child {
        margin-bottom: 0;
    }
}


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