/*
    Page elements come in one of 5 sections:
    - Banner (top of page, full width)
    - Navigation (below banner on desktop, pop-out menu on mobile)
    - Body Content (main body)
    - Additional Content (below main body on destktop / hidden on mobile)
    - Footer (below everything on desktop & mobile)

    Additionally, there are media widgets than function differently depending on the device:
    - Image galleries. These are represented as thumbnails in a grid. These can be clicked/tapped to open a modal for viewing.
    - Image modal. Used to view a gallery image. Provides GUI elements or allows swiping to scroll through gallery images.
    - Comic reader. Can be used to scroll through comic pages of a chapter without needing to reload the entire web page each time.
    - Video sequence. Can play a sequence of short-form videos.
    - Marquee. Auto-scrolling sequence of images / links. Pauses on focus, and has an info overlay that can be shown/hidden.
*/
@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&display=swap");
:root {
  --col-mainA: #33BDEB;
  --col-mainB: #E6A74E;
  --col-neutral: #80606d;
  --col-light: #FFF1AD;
  --col-dark: #412f2f;
  --col-monoA: white;
  --col-monoB: black;
  --col-darkA: color-mix(in srgb, var(--col-mainA), black 66%);
  --col-darkB: color-mix(in srgb, var(--col-mainB), black 66%);
  --url-overlay: none;
}
@media screen and (max-width: 600px) {
  :root {
    font-size: medium;
  }
  :root body {
    align-items: stretch;
  }
  :root .main-container {
    align-items: stretch;
    width: 100vw;
    border-width: 0;
  }
}
@media screen and (min-width: 600px) {
  :root {
    font-size: large;
  }
  :root body {
    align-items: stretch;
  }
  :root .main-container {
    align-items: stretch;
    width: 100vw;
    border-width: 0.75rem 0;
    border-radius: 0.75rem 0.75rem 0 0;
  }
}
@media screen and (min-width: 1366px) {
  :root {
    font-size: larger;
    grid-template-columns: max(10rem, 12vw) 1fr 1fr 1fr max(10rem, 12vw);
  }
  :root .main-container {
    max-width: 1600px;
    border-width: 1rem;
    border-radius: 1rem 1rem 0 0;
  }
  :root .main-nav {
    width: max(10rem, 12vw);
    grid-row: 3;
    grid-column: 1;
  }
  :root .main-body {
    grid-row: 3;
    grid-column: 2/span 3;
  }
  :root .main-sidebar {
    width: max(10rem, 12vw);
    grid-row: 3;
    grid-column: 5;
    height: max-content;
  }
}

@font-face {
  font-family: "Shouldve Known";
  src: url("fonts/shouldve-known.ttf");
}
@font-face {
  font-family: "Super Gossip";
  src: url("fonts/super-gossip.otf");
}
* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: linear-gradient(to right, var(--col-dark) 0%, var(--col-neutral) 25%, var(--col-mainB) 50%, var(--col-mainA) 100%), linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.25)), var(--url-overlay);
  background-blend-mode: soft-light;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 101% 101%, 101% 101%, 256px 256px;
  background-attachment: fixed;
}
body .main-container {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  grid-template-rows: auto auto 1fr auto auto;
  justify-content: stretch;
  align-content: stretch;
  flex-grow: 1;
  max-width: 1366px;
  margin: auto;
  border: 1rem solid var(--col-dark);
  border-radius: 1rem 1rem 0 0;
  background-color: var(--col-dark);
  overflow: hidden;
}

Main, .main-footer, .main-sidebar, .main-body, .main-nav, .main-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

Stroke, ComicFont, .palette .paletteOption p, .main-body h3, .grid-wrapper .grid-box .foreground p, .grid-wrapper .grid-box .foreground h1:first-child, .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .fancy-box .foreground a, .fancy-box .foreground .main-nav ul li a, .main-nav ul li .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) a.button, .main-nav ul li .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav ul li .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav ul li .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav ul li .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .note:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav ul li a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav ul li a, .main-banner #tagline {
  text-shadow: 1px 0px 1px black, 0.7071067812px 0.7071067812px 1px black, 0px 1px 1px black, -0.7071067812px 0.7071067812px 1px black, -1px 0px 1px black, -0.7071067812px -0.7071067812px 1px black, 0px -1px 1px black, 0.7071067812px -0.7071067812px 1px black;
}

Shadow, .main-body .reader-rich, .main-body .reader-simple .controls, .main-body .reader-simple .page, .gallery-container .thumbnail, .fancy-box .foreground, SimpleBox .icon, .main-body .simple-box.cookies .icon, .main-body .simple-box.warn .icon, .main-body .simple-box.info .icon, .grid-wrapper .grid-box, .main-nav div span a:hover, .main-nav div span a, .main-nav div span .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav div span a, .main-nav div span .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav div span .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav div span a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav div span a.button, .main-nav div span .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav div span .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div span a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div span a.button, .main-nav div span .fancy-box .foreground a, .fancy-box .foreground .main-nav div span a, .main-nav div span .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav div span .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav div span a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav div span a.button, .main-nav div span .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav div span .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav div span a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav div span a.button, .main-nav div span .note:nth-of-type(even) a.button, .main-nav div span .gallery-summary:nth-of-type(even) a.button, .main-nav div span .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav div span .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav div span .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav div span .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav div span a.button, .gallery-summary:nth-of-type(even) .main-nav div span a.button, .note:nth-of-type(even) .main-nav div span .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav div span .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav div span a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav div span a, ComicFont, .palette .paletteOption p, .main-body h3, .grid-wrapper .grid-box .foreground p, .grid-wrapper .grid-box .foreground h1:first-child, .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .fancy-box .foreground a, .fancy-box .foreground .main-nav ul li a, .main-nav ul li .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) a.button, .main-nav ul li .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav ul li .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav ul li .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav ul li .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .note:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav ul li a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav ul li a, .main-banner #tagline {
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5333333333));
}

ComicFont, .palette .paletteOption p, .main-body h3, .grid-wrapper .grid-box .foreground p, .grid-wrapper .grid-box .foreground h1:first-child, .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .fancy-box .foreground a, .fancy-box .foreground .main-nav ul li a, .main-nav ul li .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) a.button, .main-nav ul li .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav ul li .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav ul li .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav ul li .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .note:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav ul li a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav ul li a, .main-banner #tagline {
  color: white;
  font-family: "Super Gossip", sans-serif;
  font-weight: bolder;
  text-transform: uppercase;
}

.main-banner {
  grid-area: banner;
  grid-row: 1;
  grid-column: 1/span 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 64px;
  height: 6rem;
  padding: 0;
  overflow-y: visible;
  width: inherit;
  max-width: 768px;
  margin: auto;
  background-size: contain, contain;
  background-repeat: no-repeat, no-repeat;
  background-position-y: bottom, bottom;
  background-position-x: left, right;
  pointer-events: none;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .main-banner {
    max-width: 920px;
  }
}
@media screen and (min-width: 1366px) {
  .main-banner {
    padding-top: 2rem;
    height: 10rem;
    max-width: 1366px;
  }
}
@media screen and (max-width: 920px) {
  .main-banner {
    background-image: none !important;
    justify-content: center;
  }
}
.main-banner #title {
  flex-shrink: 1;
  height: auto;
  max-height: 66%;
  max-width: 95%;
  z-index: 8;
  filter: drop-shadow(0.5px 0 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(-0.5px 0 0 black) drop-shadow(0 -0.5px 0 black) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6666666667));
  /*
  &::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
          120deg,
          transparent,
          var(--col-light),
          transparent
      );
      //mask-image: url(./themes/default/title.png);
      animation: 0.5s ease-in shine infinite;
      animation-play-state: running;
  }
  */
}
.main-banner #tagline {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
  position: relative;
  margin-top: -1rem;
  margin-bottom: 0;
  height: 2rem;
  z-index: 10;
  font-size: 20pt;
  text-align: center;
  user-select: none;
}
@media screen and (max-width: 600px) {
  .main-banner #tagline {
    display: none !important;
  }
}

@keyframes shine {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
.ticker {
  position: absolute;
  width: 100vw;
  left: 0;
  top: 0;
  background-color: rgba(170, 0, 0, 0.5019607843);
  color: white;
  z-index: 1000;
  text-align: center;
  font-size: medium;
}
.ticker a, .ticker .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .ticker a, .ticker .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .ticker .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .ticker a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .ticker a.button, .ticker .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .ticker .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .ticker a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .ticker a.button, .ticker .fancy-box .foreground a, .fancy-box .foreground .ticker a, .ticker .fancy-box .foreground .note:nth-of-type(even) a.button, .ticker .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .ticker a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .ticker a.button, .ticker .note:nth-of-type(even) .fancy-box .foreground a.button, .ticker .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .ticker a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .ticker a.button, .ticker .note:nth-of-type(even) a.button, .ticker .gallery-summary:nth-of-type(even) a.button, .ticker .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .ticker .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .ticker .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .ticker .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .ticker a.button, .gallery-summary:nth-of-type(even) .ticker a.button, .note:nth-of-type(even) .ticker .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .ticker .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .ticker a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .ticker a {
  color: white;
}

.main-nav .toggle {
  display: none;
}

.main-nav {
  padding: 0;
}
.main-nav label {
  display: flex;
  flex-direction: row;
  align-self: center;
  align-items: center;
  min-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
  background-color: transparent;
  transition: background-color 0.3s;
  cursor: pointer;
}
.main-nav label span {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--col-light);
  mask-image: url(images/ui/bars.svg);
  mask-position: center center;
  mask-repeat: no-repeat;
  transition: background-color 0.3s;
}

.main-nav:has(.toggle:checked) {
  max-height: 100vh;
}
.main-nav:has(.toggle:checked) label span {
  background-color: var(--col-mainA);
  mask-image: url(images/ui/xmark.svg);
}

.main-nav {
  grid-area: banner;
  grid-row: 2;
  grid-column: 1/span 5;
  background-color: var(--col-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  padding-bottom: 0.5rem;
  max-height: 3.5rem;
  overflow-y: hidden;
  z-index: 1;
  transition: max-height 0.3s;
}
.main-nav ul {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.main-nav ul li {
  display: block;
  height: 2.5rem;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav ul li a, .main-nav ul li .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .fancy-box .foreground a, .fancy-box .foreground .main-nav ul li a, .main-nav ul li .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav ul li .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav ul li a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav ul li .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav ul li a.button, .main-nav ul li .note:nth-of-type(even) a.button, .main-nav ul li .gallery-summary:nth-of-type(even) a.button, .main-nav ul li .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav ul li .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav ul li .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav ul li .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav ul li a.button, .gallery-summary:nth-of-type(even) .main-nav ul li a.button, .note:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav ul li .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav ul li a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav ul li a {
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: var(--col-mainA);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2666666667) 0%, transparent 50%, rgba(0, 0, 0, 0.2666666667)), linear-gradient(to bottom, transparent 95%, rgba(0, 0, 0, 0.2666666667) 95.5%);
  transition: background-color 0.2s, color 0.2s;
}
.main-nav ul li a:hover, .main-nav ul li .fancy-box:nth-of-type(even) a.button:hover, .fancy-box:nth-of-type(even) .main-nav ul li a.button:hover, .main-nav ul li .note:nth-of-type(even) a.button:hover, .main-nav ul li .gallery-summary:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .main-nav ul li a.button:hover, .gallery-summary:nth-of-type(even) .main-nav ul li a.button:hover {
  background-color: var(--col-mainB);
}
.main-nav ul li.current {
  background-color: var(--col-light);
}
.main-nav ul li.current a, .main-nav ul li.current .fancy-box:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .main-nav ul li.current a.button, .main-nav ul li.current .note:nth-of-type(even) a.button, .main-nav ul li.current .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .main-nav ul li.current a.button, .gallery-summary:nth-of-type(even) .main-nav ul li.current a.button {
  color: var(--col-dark) !important;
  background-color: transparent !important;
  background-image: none !important;
  pointer-events: none;
  filter: none;
  text-shadow: none;
}
.main-nav div {
  flex-direction: column;
  align-items: stretch;
  background-color: transparent;
  padding-top: 0.5rem;
}
.main-nav div p {
  font-family: "Super Gossip", sans-serif;
  color: white;
  text-align: center;
  height: auto;
  margin: 0 0.5rem;
  padding: 1rem 0;
}
.main-nav div span {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  min-height: 2.5rem;
}
.main-nav div span a, .main-nav div span .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav div span a, .main-nav div span .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav div span .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav div span a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav div span a.button, .main-nav div span .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav div span .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div span a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div span a.button, .main-nav div span .fancy-box .foreground a, .fancy-box .foreground .main-nav div span a, .main-nav div span .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav div span .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav div span a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav div span a.button, .main-nav div span .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav div span .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav div span a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav div span a.button, .main-nav div span .note:nth-of-type(even) a.button, .main-nav div span .gallery-summary:nth-of-type(even) a.button, .main-nav div span .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav div span .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav div span .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav div span .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav div span a.button, .gallery-summary:nth-of-type(even) .main-nav div span a.button, .note:nth-of-type(even) .main-nav div span .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav div span .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav div span a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav div span a {
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.25rem;
}
.main-nav div span a img, .main-nav div span .fancy-box:nth-of-type(even) a img, .fancy-box:nth-of-type(even) .main-nav div span a img, .main-nav div span .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button img, .main-nav div span .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button img, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav div span a.button img, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav div span a.button img, .main-nav div span .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button img, .main-nav div span .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button img, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div span a.button img, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div span a.button img, .main-nav div span .fancy-box .foreground a img, .fancy-box .foreground .main-nav div span a img, .main-nav div span .fancy-box .foreground .note:nth-of-type(even) a.button img, .main-nav div span .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button img, .fancy-box .foreground .note:nth-of-type(even) .main-nav div span a.button img, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav div span a.button img, .main-nav div span .note:nth-of-type(even) .fancy-box .foreground a.button img, .main-nav div span .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button img, .note:nth-of-type(even) .fancy-box .foreground .main-nav div span a.button img, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav div span a.button img, .main-nav div span .note:nth-of-type(even) a.button img, .main-nav div span .gallery-summary:nth-of-type(even) a.button img, .main-nav div span .note:nth-of-type(even) .comment-thread .comment-buttonPanel a img, .main-nav div span .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a img, .comment-thread .comment-buttonPanel .main-nav div span .note:nth-of-type(even) a img, .comment-thread .comment-buttonPanel .main-nav div span .gallery-summary:nth-of-type(even) a img, .note:nth-of-type(even) .main-nav div span a.button img, .gallery-summary:nth-of-type(even) .main-nav div span a.button img, .note:nth-of-type(even) .main-nav div span .comment-thread .comment-buttonPanel a img, .gallery-summary:nth-of-type(even) .main-nav div span .comment-thread .comment-buttonPanel a img, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav div span a img, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav div span a img {
  height: auto;
  width: 90%;
  transition: all 0.1s;
  filter: brightness(100%);
  z-index: inherit;
}
.main-nav div span a:hover img, .main-nav div span .fancy-box:nth-of-type(even) a.button:hover img, .fancy-box:nth-of-type(even) .main-nav div span a.button:hover img, .main-nav div span .note:nth-of-type(even) a.button:hover img, .main-nav div span .gallery-summary:nth-of-type(even) a.button:hover img, .note:nth-of-type(even) .main-nav div span a.button:hover img, .gallery-summary:nth-of-type(even) .main-nav div span a.button:hover img {
  width: 110%;
  filter: brightness(125%);
  z-index: 11;
}
.main-nav .nav-footer {
  display: none !important;
}
@media screen and (min-width: 920px) {
  .main-nav {
    padding-bottom: 0;
    max-height: 1000vh !important;
  }
  .main-nav label {
    display: none;
  }
  .main-nav ul {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
  .main-nav ul li {
    border-radius: 2rem 2rem 0 0;
    margin: 0 0.5rem;
    height: 2rem;
  }
  .main-nav div {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    background-color: var(--col-light);
  }
  .main-nav div p {
    max-width: 10rem;
    color: var(--col-dark);
  }
  .main-nav div a, .main-nav div .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav div a, .main-nav div .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav div .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav div a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav div a.button, .main-nav div .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav div .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div a.button, .main-nav div .fancy-box .foreground a, .fancy-box .foreground .main-nav div a, .main-nav div .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav div .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav div a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav div a.button, .main-nav div .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav div .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav div a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav div a.button, .main-nav div .note:nth-of-type(even) a.button, .main-nav div .gallery-summary:nth-of-type(even) a.button, .main-nav div .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav div .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav div .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav div .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav div a.button, .gallery-summary:nth-of-type(even) .main-nav div a.button, .note:nth-of-type(even) .main-nav div .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav div .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav div a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav div a {
    height: 2rem;
  }
}
@media screen and (min-width: 1366px) {
  .main-nav {
    max-height: 1000vh;
    overflow: visible;
  }
  .main-nav label {
    display: none;
  }
  .main-nav ul {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    border-radius: 1rem 0 0 1rem;
    overflow: hidden;
  }
  .main-nav ul li {
    border-radius: 0;
    margin: 0;
    height: 1.5rem;
  }
  .main-nav div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: transparent;
    padding-right: 1rem;
  }
  .main-nav div p {
    color: white;
  }
  .main-nav div a, .main-nav div .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-nav div a, .main-nav div .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-nav div .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-nav div a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-nav div a.button, .main-nav div .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-nav div .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-nav div a.button, .main-nav div .fancy-box .foreground a, .fancy-box .foreground .main-nav div a, .main-nav div .fancy-box .foreground .note:nth-of-type(even) a.button, .main-nav div .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-nav div a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-nav div a.button, .main-nav div .note:nth-of-type(even) .fancy-box .foreground a.button, .main-nav div .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-nav div a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-nav div a.button, .main-nav div .note:nth-of-type(even) a.button, .main-nav div .gallery-summary:nth-of-type(even) a.button, .main-nav div .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-nav div .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-nav div .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-nav div .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-nav div a.button, .gallery-summary:nth-of-type(even) .main-nav div a.button, .note:nth-of-type(even) .main-nav div .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-nav div .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-nav div a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-nav div a {
    height: 1.5rem;
  }
  .main-nav .nav-footer {
    display: flex !important;
  }
  .main-nav .nav-footer img {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5333333333));
    transform: scale(1.1);
    z-index: 10;
  }
}

.main-body {
  grid-area: body;
  grid-row: 3;
  grid-column: 1/span 5;
  min-height: 5vh;
  background-color: silver;
  border: 2px solid var(--col-light);
  border-bottom-left-radius: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
}
.main-body span {
  width: 100%;
  max-width: 768px;
  text-align: center;
}
@media screen and (max-width: 920px) {
  .main-body {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
  }
}
.main-sidebar {
  grid-area: sidebar;
  grid-row: 4;
  grid-column: 1/span 5;
  z-index: 1;
  padding: 0;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
}

.main-footer {
  grid-area: footer;
  grid-row: 5;
  grid-column: 1/span 5;
  align-self: flex-end;
  color: var(--col-light);
  background-color: var(--col-dark);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.main-footer div {
  width: 100%;
  max-width: 1366px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.main-footer div p {
  opacity: 0.75;
}
.main-footer div img {
  height: 5rem;
  width: auto;
  opacity: 0.75;
}
.main-footer span {
  width: 100%;
  margin-top: -1rem;
  margin-bottom: 0;
  text-align: center;
}

.grid-wrapper {
  display: grid;
  width: 100%;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 8rem 8rem 8rem 8rem;
  gap: 1rem;
}
.grid-wrapper .grid-box {
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
}
.grid-wrapper .grid-box * {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition-duration: 0.3s;
}
.grid-wrapper .grid-box .background {
  background-position: 50% 25%;
  background-size: 120%;
  transition-property: filter, background-size;
  transition-timing-function: ease-in-out;
  filter: blur(6px);
  z-index: 0;
}
.grid-wrapper .grid-box .accent {
  border: 0.33rem solid var(--col-mainA);
  background-image: linear-gradient(75deg, var(--col-mainA) 20%, rgba(0, 0, 0, 0.5333333333) 20.1%, transparent 25%), linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
  background-size: calc(100% + 10em);
  background-position-x: left;
  transition-property: background-position-x;
  z-index: 1;
}
.grid-wrapper .grid-box .foreground {
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding: 1rem;
  padding-left: 10%;
  z-index: 2;
  pointer-events: none;
  background-blend-mode: multiply;
}
.grid-wrapper .grid-box .foreground * {
  display: block;
  position: unset;
  height: fit-content;
  margin: 0 1rem;
}
.grid-wrapper .grid-box .foreground h1:first-child {
  font-family: "Shouldve Known", sans-serif;
  color: var(--col-darkA);
  text-shadow: 0.2rem 0rem 1px var(--col-mainA), 0.1732050808rem 0.1rem 1px var(--col-mainA), 0.1rem 0.1732050808rem 1px var(--col-mainA), 0rem 0.2rem 1px var(--col-mainA), -0.1rem 0.1732050808rem 1px var(--col-mainA), -0.1732050808rem 0.1rem 1px var(--col-mainA), -0.2rem 0rem 1px var(--col-mainA), -0.1732050808rem -0.1rem 1px var(--col-mainA), -0.1rem -0.1732050808rem 1px var(--col-mainA), 0rem -0.2rem 1px var(--col-mainA), 0.1rem -0.1732050808rem 1px var(--col-mainA), 0.1732050808rem -0.1rem 1px var(--col-mainA);
  filter: none;
}
.grid-wrapper .grid-box .foreground p {
  display: block;
  font-size: 1.5rem;
  text-shadow: 2px 0px 1px black, 1.4142135624px 1.4142135624px 1px black, 0px 2px 1px black, -1.4142135624px 1.4142135624px 1px black, -2px 0px 1px black, -1.4142135624px -1.4142135624px 1px black, 0px -2px 1px black, 1.4142135624px -1.4142135624px 1px black;
}
.grid-wrapper .grid-box a, .grid-wrapper .grid-box .fancy-box:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .grid-wrapper .grid-box a.button, .grid-wrapper .grid-box .note:nth-of-type(even) a.button, .grid-wrapper .grid-box .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .grid-wrapper .grid-box a.button, .gallery-summary:nth-of-type(even) .grid-wrapper .grid-box a.button {
  z-index: 2;
  cursor: pointer;
  text-decoration: none;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1333333333) 0%, transparent 100%);
}
.grid-wrapper .grid-box:nth-child(even) .accent {
  border-color: var(--col-mainB);
  background-image: linear-gradient(75deg, var(--col-mainB) 20%, rgba(0, 0, 0, 0.5333333333) 20.1%, transparent 25%), linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}
.grid-wrapper .grid-box:nth-child(even) .foreground h1 {
  color: var(--col-darkB);
  text-shadow: 0.2rem 0rem 1px var(--col-mainB), 0.1732050808rem 0.1rem 1px var(--col-mainB), 0.1rem 0.1732050808rem 1px var(--col-mainB), 0rem 0.2rem 1px var(--col-mainB), -0.1rem 0.1732050808rem 1px var(--col-mainB), -0.1732050808rem 0.1rem 1px var(--col-mainB), -0.2rem 0rem 1px var(--col-mainB), -0.1732050808rem -0.1rem 1px var(--col-mainB), -0.1rem -0.1732050808rem 1px var(--col-mainB), 0rem -0.2rem 1px var(--col-mainB), 0.1rem -0.1732050808rem 1px var(--col-mainB), 0.1732050808rem -0.1rem 1px var(--col-mainB);
}
.grid-wrapper .large .foreground h1:first-child {
  font-size: 3rem;
}
.grid-wrapper .small .background {
  filter: blur(3px);
}
.grid-wrapper .small .foreground h1 {
  font-size: 1.5rem;
}
.grid-wrapper div:hover {
  border-color: var(--col-mainB);
}
.grid-wrapper div:hover .background {
  background-size: 125%;
  filter: blur(0);
}
.grid-wrapper div:hover .accent {
  background-position-x: right;
}
@media screen and (max-width: 768px) {
  .grid-wrapper .grid-box .foreground {
    padding-left: 8%;
  }
}
@media screen and (max-width: 600px) {
  .grid-wrapper {
    grid-template-columns: auto;
    grid-template-rows: 16rem;
    grid-auto-rows: 8rem;
  }
  .grid-wrapper .grid-box {
    grid-column: 1 !important;
    align-self: stretch;
    border-radius: 0;
  }
  .grid-wrapper .grid-box .accent {
    border-left: none;
    border-right: none;
  }
  .grid-wrapper .grid-box .foreground {
    padding-left: 4%;
  }
  .grid-wrapper .box1 {
    grid-row: 1/span 1 !important;
  }
  .grid-wrapper .box2 {
    grid-row: 2/span 1 !important;
  }
  .grid-wrapper .box3 {
    grid-row: 3/span 1 !important;
  }
  .grid-wrapper .box4 {
    grid-row: 4/span 1 !important;
  }
  .grid-wrapper .box5 {
    grid-row: 5/span 1 !important;
  }
  .grid-wrapper .box6 {
    grid-row: 6/span 1 !important;
  }
  .grid-wrapper .box7 {
    grid-row: 7/span 1 !important;
  }
  .grid-wrapper .box8 {
    grid-row: 8/span 1 !important;
  }
}

.main-body h1, .main-body .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) .main-body h1, .main-body .note:nth-of-type(even) h1, .main-body .gallery-summary:nth-of-type(even) h1, .note:nth-of-type(even) .main-body h1, .gallery-summary:nth-of-type(even) .main-body h1, .main-body h1:nth-of-type(even), .main-body h2, .main-body .fancy-box:nth-of-type(even) h2, .fancy-box:nth-of-type(even) .main-body h2, .main-body .note:nth-of-type(even) h2, .main-body .gallery-summary:nth-of-type(even) h2, .note:nth-of-type(even) .main-body h2, .gallery-summary:nth-of-type(even) .main-body h2, .main-body h3 {
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2666666667));
}
.main-body h1, .main-body .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) .main-body h1, .main-body .note:nth-of-type(even) h1, .main-body .gallery-summary:nth-of-type(even) h1, .note:nth-of-type(even) .main-body h1, .gallery-summary:nth-of-type(even) .main-body h1, .main-body h1:nth-of-type(even) {
  font-family: "Shouldve Known", sans-serif;
  font-size: 2rem;
  color: var(--col-mainB);
  text-shadow: 2px 0px 1px var(--col-darkB), 1.4142135624px 1.4142135624px 1px var(--col-darkB), 0px 2px 1px var(--col-darkB), -1.4142135624px 1.4142135624px 1px var(--col-darkB), -2px 0px 1px var(--col-darkB), -1.4142135624px -1.4142135624px 1px var(--col-darkB), 0px -2px 1px var(--col-darkB), 1.4142135624px -1.4142135624px 1px var(--col-darkB);
  margin-top: 0;
  margin-bottom: 0.1em;
}
.main-body h1.alt, .main-body .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) .main-body h1, .main-body .simple-box.info h1, .main-body .note:nth-of-type(even) h1, .main-body .gallery-summary:nth-of-type(even) h1, .note:nth-of-type(even) .main-body h1, .gallery-summary:nth-of-type(even) .main-body h1, .main-body h1:nth-of-type(even) {
  color: var(--col-mainA);
  text-shadow: 2px 0px 1px var(--col-darkA), 1.4142135624px 1.4142135624px 1px var(--col-darkA), 0px 2px 1px var(--col-darkA), -1.4142135624px 1.4142135624px 1px var(--col-darkA), -2px 0px 1px var(--col-darkA), -1.4142135624px -1.4142135624px 1px var(--col-darkA), 0px -2px 1px var(--col-darkA), 1.4142135624px -1.4142135624px 1px var(--col-darkA);
}
.main-body h2, .main-body .fancy-box:nth-of-type(even) h2, .fancy-box:nth-of-type(even) .main-body h2, .main-body .note:nth-of-type(even) h2, .main-body .gallery-summary:nth-of-type(even) h2, .note:nth-of-type(even) .main-body h2, .gallery-summary:nth-of-type(even) .main-body h2 {
  font-family: "Merienda", serif;
  font-size: 1.3rem;
  color: var(--col-mainA);
  text-shadow: 2px 0px 1px var(--col-darkA), 1.4142135624px 1.4142135624px 1px var(--col-darkA), 0px 2px 1px var(--col-darkA), -1.4142135624px 1.4142135624px 1px var(--col-darkA), -2px 0px 1px var(--col-darkA), -1.4142135624px -1.4142135624px 1px var(--col-darkA), 0px -2px 1px var(--col-darkA), 1.4142135624px -1.4142135624px 1px var(--col-darkA);
}
.main-body h2.alt, .main-body .fancy-box:nth-of-type(even) h2, .fancy-box:nth-of-type(even) .main-body h2, .main-body .note:nth-of-type(even) h2, .main-body .gallery-summary:nth-of-type(even) h2, .note:nth-of-type(even) .main-body h2, .gallery-summary:nth-of-type(even) .main-body h2 {
  color: var(--col-mainB);
  text-shadow: 2px 0px 1px var(--col-darkB), 1.4142135624px 1.4142135624px 1px var(--col-darkB), 0px 2px 1px var(--col-darkB), -1.4142135624px 1.4142135624px 1px var(--col-darkB), -2px 0px 1px var(--col-darkB), -1.4142135624px -1.4142135624px 1px var(--col-darkB), 0px -2px 1px var(--col-darkB), 1.4142135624px -1.4142135624px 1px var(--col-darkB);
}
.main-body h3 {
  font-size: 1.25rem;
}
.main-body h4 {
  font-family: "Merienda", serif;
  color: var(--col-neutral);
  margin: 0.5em;
}
.main-body a, .main-body .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-body a, .main-body .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-body .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) .main-body a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) .main-body a.button, .main-body .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .main-body .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-body a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-body a.button, .main-body .fancy-box .foreground a, .fancy-box .foreground .main-body a, .main-body .fancy-box .foreground .note:nth-of-type(even) a.button, .main-body .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-body a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-body a.button, .main-body .note:nth-of-type(even) .fancy-box .foreground a.button, .main-body .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground .main-body a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-body a.button, .main-body .note:nth-of-type(even) a.button, .main-body .gallery-summary:nth-of-type(even) a.button, .main-body .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-body .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-body .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-body .gallery-summary:nth-of-type(even) a, .note:nth-of-type(even) .main-body a.button, .gallery-summary:nth-of-type(even) .main-body a.button, .note:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-body a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-body a {
  color: var(--col-mainA);
}
.main-body a:hover, .main-body .fancy-box:nth-of-type(even) a.button:hover, .fancy-box:nth-of-type(even) .main-body a.button:hover, .main-body .note:nth-of-type(even) a.button:hover, .main-body .gallery-summary:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .main-body a.button:hover, .gallery-summary:nth-of-type(even) .main-body a.button:hover {
  color: var(--col-mainB);
}
.main-body a.alt, .main-body .fancy-box:nth-of-type(even) a.button, .main-body .fancy-box:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-body .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .main-body a.button, .fancy-box:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .fancy-box:nth-of-type(even) .main-body a, .main-body .fancy-box .foreground a, .fancy-box .foreground .main-body a, .fancy-box .foreground .main-body .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .fancy-box .foreground .main-body .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) .main-body a.alt.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) .main-body a.alt.button, .main-body .note:nth-of-type(even) .fancy-box .foreground a.alt.button, .main-body .gallery-summary:nth-of-type(even) .fancy-box .foreground a.alt.button, .main-body .note:nth-of-type(even) a.button, .main-body .gallery-summary:nth-of-type(even) a.button, .main-body .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .main-body .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .main-body .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .main-body .gallery-summary:nth-of-type(even) a, .main-body .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, .main-body .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .main-body .fancy-box .foreground .note:nth-of-type(even) a.button, .main-body .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .main-body a.button, .gallery-summary:nth-of-type(even) .main-body a.button, .note:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-body a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-body a, .note:nth-of-type(even) .fancy-box:nth-of-type(even) .main-body a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) .main-body a.button, .note:nth-of-type(even) .fancy-box .foreground .main-body a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground .main-body a.button {
  color: var(--col-mainB);
}
.main-body a.alt:hover, .main-body .fancy-box:nth-of-type(even) a.button:hover, .main-body .fancy-box:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .main-body .fancy-box:nth-of-type(even) a:hover, .fancy-box:nth-of-type(even) .main-body a.button:hover, .fancy-box:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .fancy-box:nth-of-type(even) .main-body a:hover, .main-body .fancy-box .foreground a:hover, .fancy-box .foreground .main-body a:hover, .main-body .note:nth-of-type(even) a.button:hover, .main-body .gallery-summary:nth-of-type(even) a.button:hover, .main-body .note:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .main-body .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .main-body .note:nth-of-type(even) a:hover, .comment-thread .comment-buttonPanel .main-body .gallery-summary:nth-of-type(even) a:hover, .note:nth-of-type(even) .main-body a.button:hover, .gallery-summary:nth-of-type(even) .main-body a.button:hover, .note:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a:hover, .gallery-summary:nth-of-type(even) .main-body .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .main-body a:hover, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .main-body a:hover {
  color: var(--col-mainA);
}

.note, .gallery-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(45deg, var(--col-dark), color-mix(in lab, var(--col-dark) 75%, var(--col-mainB))), linear-gradient(0, rgba(0, 0, 0, 0.5333333333), rgba(0, 0, 0, 0.2));
  background-blend-mode: multiply;
  border-radius: 1rem;
  max-width: 98%;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}
.note h1, .gallery-summary h1, .note .fancy-box:nth-of-type(even) h1, .gallery-summary .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) .note h1, .fancy-box:nth-of-type(even) .gallery-summary h1, .note:nth-of-type(even) h1, .gallery-summary:nth-of-type(even) h1, .note .main-body h1:nth-of-type(even), .gallery-summary .main-body h1:nth-of-type(even), .main-body .note h1:nth-of-type(even), .main-body .gallery-summary h1:nth-of-type(even), .note h2, .gallery-summary h2, .note .fancy-box:nth-of-type(even) h2, .gallery-summary .fancy-box:nth-of-type(even) h2, .fancy-box:nth-of-type(even) .note h2, .fancy-box:nth-of-type(even) .gallery-summary h2, .note:nth-of-type(even) h2, .gallery-summary:nth-of-type(even) h2, .note h3, .gallery-summary h3, .note p, .gallery-summary p, .note div, .gallery-summary div {
  margin: 0.25rem 0.5rem;
}
.note p, .gallery-summary p {
  color: var(--col-light);
}
.note p b, .gallery-summary p b {
  color: var(--col-mainA);
}
.note span, .gallery-summary span {
  width: auto;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  align-self: center;
  margin: 0 1em;
  white-space: break-spaces;
  color: var(--col-light);
}
.note span .button, .gallery-summary span .button, .note span .comment-thread .comment-buttonPanel a, .gallery-summary span .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note span a, .comment-thread .comment-buttonPanel .gallery-summary span a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) span a.button, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) span a.button, .note:nth-of-type(even) span .comment-thread .comment-buttonPanel a.button, .gallery-summary:nth-of-type(even) span .comment-thread .comment-buttonPanel a.button, .note:nth-of-type(even) .comment-thread .comment-buttonPanel span a.button, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel span a.button, .note:nth-of-type(even) .comment-thread .comment-buttonPanel span a, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel span a, .note span button, .gallery-summary span button, .note span button.alt, .gallery-summary span button.alt, .note span .main-body .simple-box.info h1.button, .gallery-summary span .main-body .simple-box.info h1.button, .main-body .simple-box.info .note span h1.button, .main-body .simple-box.info .gallery-summary span h1.button, .note span .fancy-box:nth-of-type(even) a.button, .gallery-summary span .fancy-box:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note span a.button, .fancy-box:nth-of-type(even) .gallery-summary span a.button, .note:nth-of-type(even) span a.button, .gallery-summary:nth-of-type(even) span a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) span a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) span a.button, .note:nth-of-type(even) .fancy-box .foreground span a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground span a.button {
  margin: 0 1em;
}
.note span span, .gallery-summary span span {
  align-items: center;
  padding: 0.25em 0.5em;
  background-color: rgba(0, 0, 0, 0.5019607843);
  border-radius: 0.5em;
  color: var(--col-mainB);
}
.note span b, .gallery-summary span b {
  color: var(--col-mainA);
}
.note span img, .gallery-summary span img {
  height: 1.5em;
}
.note[hidden=true], [hidden=true].gallery-summary {
  display: none;
}
.note:nth-of-type(even), .gallery-summary:nth-of-type(even) {
  background-image: linear-gradient(45deg, var(--col-dark), color-mix(in lab, var(--col-dark) 75%, var(--col-mainA))), linear-gradient(0, rgba(0, 0, 0, 0.5333333333), rgba(0, 0, 0, 0.2));
}
SimpleBox, .main-body .simple-box.cookies, .main-body .simple-box.warn, .main-body .simple-box.info {
  border-radius: 1rem;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 0.66fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 1rem;
  padding: 1rem;
  position: relative;
}
SimpleBox *, .main-body .simple-box.cookies *, .main-body .simple-box.warn *, .main-body .simple-box.info * {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
SimpleBox .icon, .main-body .simple-box.cookies .icon, .main-body .simple-box.warn .icon, .main-body .simple-box.info .icon {
  grid-row: 1/span 3;
  grid-column: 1;
  display: flex;
  align-self: stretch;
  justify-self: stretch;
  align-items: center;
  justify-content: center;
}
SimpleBox .icon span, .main-body .simple-box.cookies .icon span, .main-body .simple-box.warn .icon span, .main-body .simple-box.info .icon span {
  height: auto;
  width: 100%;
  max-width: 5rem;
  aspect-ratio: 1/1;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}
SimpleBox h1, SimpleBox .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) SimpleBox h1, .main-body .simple-box.cookies h1, .main-body .simple-box.warn h1, .main-body .simple-box.info h1, SimpleBox .main-body h1:nth-of-type(even), .main-body SimpleBox h1:nth-of-type(even), SimpleBox .note:nth-of-type(even) h1, SimpleBox .gallery-summary:nth-of-type(even) h1, .note:nth-of-type(even) SimpleBox h1, .gallery-summary:nth-of-type(even) SimpleBox h1 {
  grid-row: 1/span 2;
  grid-column: 2/span 4;
}
SimpleBox p, .main-body .simple-box.cookies p, .main-body .simple-box.warn p, .main-body .simple-box.info p {
  grid-row: 1/span 3;
  grid-column: 2/span 4;
  font-family: "Super Gossip", sans-serif;
  text-align: center;
  display: block;
}
SimpleBox p a, SimpleBox p .fancy-box:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) SimpleBox p a.button, SimpleBox p .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) SimpleBox p a, SimpleBox p .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button, SimpleBox p .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .note:nth-of-type(even) SimpleBox p a.button, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) SimpleBox p a.button, SimpleBox p .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, SimpleBox p .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button, .note:nth-of-type(even) .fancy-box:nth-of-type(even) SimpleBox p a.button, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) SimpleBox p a.button, SimpleBox p .fancy-box .foreground a, .note:nth-of-type(even) SimpleBox p .fancy-box:nth-of-type(even) .foreground a.button, .gallery-summary:nth-of-type(even) SimpleBox p .fancy-box:nth-of-type(even) .foreground a.button, .fancy-box .foreground SimpleBox p a, .fancy-box:nth-of-type(even) .foreground SimpleBox p .note:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .foreground SimpleBox p .gallery-summary:nth-of-type(even) a.button, SimpleBox p .fancy-box .foreground .note:nth-of-type(even) a.button, SimpleBox p .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button, .fancy-box .foreground .note:nth-of-type(even) SimpleBox p a.button, .fancy-box .foreground .gallery-summary:nth-of-type(even) SimpleBox p a.button, SimpleBox p .note:nth-of-type(even) .fancy-box .foreground a.button, SimpleBox p .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button, .note:nth-of-type(even) .fancy-box .foreground SimpleBox p a.button, .gallery-summary:nth-of-type(even) .fancy-box .foreground SimpleBox p a.button, .main-body .simple-box.cookies p a, .main-body .simple-box.warn p a, .main-body .simple-box.info p a, SimpleBox p .note:nth-of-type(even) a.button, SimpleBox p .gallery-summary:nth-of-type(even) a.button, SimpleBox p .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, SimpleBox p .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel SimpleBox p .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel SimpleBox p .gallery-summary:nth-of-type(even) a, SimpleBox p .note:nth-of-type(even) a.button.alt, SimpleBox p .gallery-summary:nth-of-type(even) a.button.alt, .note:nth-of-type(even) SimpleBox p a.button, .gallery-summary:nth-of-type(even) SimpleBox p a.button, .note:nth-of-type(even) SimpleBox p .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) SimpleBox p .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) SimpleBox p a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) SimpleBox p a, .note:nth-of-type(even) SimpleBox p a.button.alt, .gallery-summary:nth-of-type(even) SimpleBox p a.button.alt {
  display: inline-block;
  text-decoration: none;
  color: var(--col-mainB);
}
SimpleBox p a:hover, SimpleBox p .fancy-box:nth-of-type(even) a:hover, .fancy-box:nth-of-type(even) SimpleBox p a:hover, SimpleBox p .fancy-box:nth-of-type(even) .note:nth-of-type(even) a.button:hover, SimpleBox p .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) a.button:hover, .fancy-box:nth-of-type(even) .note:nth-of-type(even) SimpleBox p a.button:hover, .fancy-box:nth-of-type(even) .gallery-summary:nth-of-type(even) SimpleBox p a.button:hover, SimpleBox p .note:nth-of-type(even) .fancy-box:nth-of-type(even) a.button:hover, SimpleBox p .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .fancy-box:nth-of-type(even) SimpleBox p a.button:hover, .gallery-summary:nth-of-type(even) .fancy-box:nth-of-type(even) SimpleBox p a.button:hover, SimpleBox p .fancy-box .foreground a:hover, .fancy-box .foreground SimpleBox p a:hover, SimpleBox p .fancy-box .foreground .note:nth-of-type(even) a.button:hover, SimpleBox p .fancy-box .foreground .gallery-summary:nth-of-type(even) a.button:hover, .fancy-box .foreground .note:nth-of-type(even) SimpleBox p a.button:hover, .fancy-box .foreground .gallery-summary:nth-of-type(even) SimpleBox p a.button:hover, SimpleBox p .note:nth-of-type(even) .fancy-box .foreground a.button:hover, SimpleBox p .gallery-summary:nth-of-type(even) .fancy-box .foreground a.button:hover, .note:nth-of-type(even) .fancy-box .foreground SimpleBox p a.button:hover, .gallery-summary:nth-of-type(even) .fancy-box .foreground SimpleBox p a.button:hover, .main-body .simple-box.cookies p a:hover, .main-body .simple-box.warn p a:hover, .main-body .simple-box.info p a:hover, SimpleBox p .note:nth-of-type(even) a.button:hover, SimpleBox p .gallery-summary:nth-of-type(even) a.button:hover, SimpleBox p .note:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, SimpleBox p .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel SimpleBox p .note:nth-of-type(even) a:hover, .comment-thread .comment-buttonPanel SimpleBox p .gallery-summary:nth-of-type(even) a:hover, SimpleBox p .note:nth-of-type(even) a.button.alt:hover, SimpleBox p .gallery-summary:nth-of-type(even) a.button.alt:hover, .note:nth-of-type(even) SimpleBox p a.button:hover, .gallery-summary:nth-of-type(even) SimpleBox p a.button:hover, .note:nth-of-type(even) SimpleBox p .comment-thread .comment-buttonPanel a:hover, .gallery-summary:nth-of-type(even) SimpleBox p .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .note:nth-of-type(even) SimpleBox p a:hover, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) SimpleBox p a:hover, .note:nth-of-type(even) SimpleBox p a.button.alt:hover, .gallery-summary:nth-of-type(even) SimpleBox p a.button.alt:hover {
  color: color-mix(in srgb, var(--col-mainB) 50%, white);
}
SimpleBox h1 ~ p, SimpleBox .fancy-box:nth-of-type(even) h1 ~ p, .fancy-box:nth-of-type(even) SimpleBox h1 ~ p, .main-body .simple-box.cookies h1 ~ p, .main-body .simple-box.warn h1 ~ p, .main-body .simple-box.info h1 ~ p, SimpleBox .main-body h1:nth-of-type(even) ~ p, .main-body SimpleBox h1:nth-of-type(even) ~ p, SimpleBox .note:nth-of-type(even) h1 ~ p, SimpleBox .gallery-summary:nth-of-type(even) h1 ~ p, .note:nth-of-type(even) SimpleBox h1 ~ p, .gallery-summary:nth-of-type(even) SimpleBox h1 ~ p {
  grid-row: 3/span 1;
}
SimpleBox .widget, .main-body .simple-box.cookies .widget, .main-body .simple-box.warn .widget, .main-body .simple-box.info .widget {
  grid-row: 1;
  grid-column: 1/span 5;
  height: 0;
  overflow: visible;
  display: block;
}
@media screen and (max-width: 600px) {
  SimpleBox, .main-body .simple-box.cookies, .main-body .simple-box.warn, .main-body .simple-box.info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  SimpleBox h1, SimpleBox .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) SimpleBox h1, .main-body .simple-box.cookies h1, .main-body .simple-box.warn h1, .main-body .simple-box.info h1, SimpleBox .main-body h1:nth-of-type(even), .main-body SimpleBox h1:nth-of-type(even), SimpleBox .note:nth-of-type(even) h1, SimpleBox .gallery-summary:nth-of-type(even) h1, .note:nth-of-type(even) SimpleBox h1, .gallery-summary:nth-of-type(even) SimpleBox h1 {
    padding-top: 1rem;
  }
  SimpleBox .widget, .main-body .simple-box.cookies .widget, .main-body .simple-box.warn .widget, .main-body .simple-box.info .widget {
    position: absolute;
    right: 1rem;
    top: 1rem;
  }
}

.main-body .simple-box.info {
  background-color: var(--col-mainB);
}
.main-body .simple-box.info .icon span {
  background-color: var(--col-mainA);
  mask-image: url("./images/ui/circle-info.svg");
}
.main-body .simple-box.info p {
  color: var(--col-monoB);
}
.main-body .simple-box.warn {
  background-color: #660000;
}
.main-body .simple-box.warn .icon span {
  background-color: crimson;
  mask-image: url("./images/ui/triangle-exclamation.svg");
}
.main-body .simple-box.warn h1 {
  color: crimson;
  text-shadow: none;
}
.main-body .simple-box.warn p {
  color: white;
}
.main-body .simple-box.cookies {
  background-color: var(--col-dark);
}
.main-body .simple-box.cookies .icon span {
  background-color: var(--col-mainB);
  mask-image: url("./images/ui/cookie-bite.svg");
}
.main-body .simple-box.cookies h1 {
  color: var(--col-mainB);
  text-shadow: none;
}
.main-body .simple-box.cookies p {
  color: var(--col-mainA);
}

.fancy-box {
  border-radius: 1rem;
  margin: 1rem 0;
  margin-top: 0;
  display: flex;
  padding: 1rem;
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0.25rem solid var(--col-mainB);
}
.fancy-box .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top right, var(--col-darkB), var(--col-mainB)), linear-gradient(to top, rgba(0, 0, 0, 0.6666666667), rgba(0, 0, 0, 0.5333333333));
  background-blend-mode: multiply;
  mix-blend-mode: hard-light;
  z-index: 0;
}
.fancy-box .foreground {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  height: fit-content;
  z-index: 1;
}
.fancy-box .foreground img ~ * {
  margin-left: auto;
}
.fancy-box .foreground p, .fancy-box .foreground li {
  color: white;
  font-family: "Merienda";
  font-size: 0.8rem;
}
.fancy-box .foreground h1, .fancy-box .foreground h2 {
  margin-top: 0;
  text-align: right;
}
.fancy-box .foreground h1 sub, .fancy-box .foreground h2 sub {
  color: silver;
  opacity: 0.9;
  text-shadow: none;
  font-size: medium;
  line-height: 1em;
  vertical-align: baseline;
}
.fancy-box .foreground b {
  color: color-mix(in srgb, var(--col-mainB) 50%, white);
  text-shadow: 2px 0px 1px var(--col-darkB), 1.4142135624px 1.4142135624px 1px var(--col-darkB), 0px 2px 1px var(--col-darkB), -1.4142135624px 1.4142135624px 1px var(--col-darkB), -2px 0px 1px var(--col-darkB), -1.4142135624px -1.4142135624px 1px var(--col-darkB), 0px -2px 1px var(--col-darkB), 1.4142135624px -1.4142135624px 1px var(--col-darkB);
}
.fancy-box .foreground img {
  align-self: center;
  order: 1;
  width: 12rem;
  height: min-content;
  margin-left: 3rem;
}
.fancy-box .foreground img.round {
  border: 0.25rem solid white;
  border-radius: 20rem;
  scale: 130%;
  z-index: 5;
}
.fancy-box .footer {
  order: 99;
  z-index: 2;
}
.fancy-box:nth-of-type(even) {
  border-color: var(--col-mainA);
}
.fancy-box:nth-of-type(even) h1 {
  text-align: left;
}
.fancy-box:nth-of-type(even) h2 {
  text-align: left;
}
.fancy-box:nth-of-type(even) b {
  color: color-mix(in srgb, var(--col-mainA) 50%, white);
  text-shadow: 2px 0px 1px var(--col-darkA), 1.4142135624px 1.4142135624px 1px var(--col-darkA), 0px 2px 1px var(--col-darkA), -1.4142135624px 1.4142135624px 1px var(--col-darkA), -2px 0px 1px var(--col-darkA), -1.4142135624px -1.4142135624px 1px var(--col-darkA), 0px -2px 1px var(--col-darkA), 1.4142135624px -1.4142135624px 1px var(--col-darkA);
}
.fancy-box:nth-of-type(even) .background {
  background-image: linear-gradient(to top right, var(--col-darkA), var(--col-mainA)), linear-gradient(to top, rgba(0, 0, 0, 0.6666666667), rgba(0, 0, 0, 0.5333333333));
}
.fancy-box:nth-of-type(even) .foreground img ~ * {
  order: 1;
}
.fancy-box:nth-of-type(even) .foreground img {
  order: 0;
  margin-left: 0;
  margin-right: 3rem;
}
@media screen and (max-width: 768px) {
  .fancy-box .foreground {
    flex-direction: column;
  }
  .fancy-box .foreground img[src] ~ * {
    width: 100%;
    align-items: center;
    text-align: left;
    order: 1;
  }
  .fancy-box .foreground h1, .fancy-box .foreground h2 {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
  }
  .fancy-box .foreground img {
    order: 0;
    width: 9rem;
    margin: 0 !important;
    padding: 0;
  }
  .fancy-box .foreground img.round[src] {
    scale: 100%;
  }
  .fancy-box .foreground .footer {
    order: 99;
    text-align: center;
  }
}

.button, .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) a.button, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .comment-thread .comment-buttonPanel a.button, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a.button, button, button.alt, .button.alt, button.alt, button.alt, .main-body h1.button:nth-of-type(even), .note:nth-of-type(even) h1.button, .gallery-summary:nth-of-type(even) h1.button, .note:nth-of-type(even) h2.button, .gallery-summary:nth-of-type(even) h2.button, .main-body .simple-box.info h1.button, .fancy-box .foreground a.button, .fancy-box:nth-of-type(even) h1.button, .fancy-box:nth-of-type(even) h2.button, .note:nth-of-type(even) a.button, .gallery-summary:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) a.button {
  padding: 0.25rem 0.5rem;
  font-family: "Super Gossip", sans-serif;
  font-size: medium;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color: var(--col-monoA) !important;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.75rem;
  background-color: var(--col-mainA) !important;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2666666667));
}
.button:hover, .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .note:nth-of-type(even) a.button:hover, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .comment-thread .comment-buttonPanel a.button:hover, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a.button:hover, button:hover, button.alt:hover, .main-body h1.button:hover:nth-of-type(even), .note:nth-of-type(even) h1.button:hover, .gallery-summary:nth-of-type(even) h1.button:hover, .note:nth-of-type(even) h2.button:hover, .gallery-summary:nth-of-type(even) h2.button:hover, .main-body .simple-box.info h1.button:hover, .fancy-box .foreground a.button:hover, .fancy-box:nth-of-type(even) h1.button:hover, .fancy-box:nth-of-type(even) h2.button:hover, .note:nth-of-type(even) a.button:hover, .gallery-summary:nth-of-type(even) a.button:hover, .fancy-box:nth-of-type(even) a.button:hover {
  color: var(--col-monoB) !important;
  background-color: var(--col-mainB) !important;
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.2666666667));
}

.button.alt, .comment-thread .comment-buttonPanel a.alt, .comment-thread .comment-buttonPanel .note:nth-of-type(even) a.alt.button, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) a.alt.button, .note:nth-of-type(even) .comment-thread .comment-buttonPanel a.alt.button, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a.alt.button, button.alt, button.alt, .main-body h1.button:nth-of-type(even), .note:nth-of-type(even) h1.button, .gallery-summary:nth-of-type(even) h1.button, .note:nth-of-type(even) h2.button, .gallery-summary:nth-of-type(even) h2.button, .note:nth-of-type(even) a.button, .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) a, .main-body .simple-box.info h1.button, .fancy-box .foreground a.button, .fancy-box .foreground .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .fancy-box .foreground a, .fancy-box:nth-of-type(even) h1.button, .fancy-box:nth-of-type(even) h2.button, .fancy-box:nth-of-type(even) a.button, .fancy-box:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-thread .comment-buttonPanel .fancy-box:nth-of-type(even) a {
  color: var(--col-monoB) !important;
  background-color: var(--col-mainB) !important;
}
.button.alt:hover, .comment-thread .comment-buttonPanel a.alt:hover, button.alt:hover, .main-body h1.button:hover:nth-of-type(even), .note:nth-of-type(even) h1.button:hover, .gallery-summary:nth-of-type(even) h1.button:hover, .note:nth-of-type(even) h2.button:hover, .gallery-summary:nth-of-type(even) h2.button:hover, .note:nth-of-type(even) a.button:hover, .gallery-summary:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .note:nth-of-type(even) a:hover, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) a:hover, .main-body .simple-box.info h1.button:hover, .fancy-box .foreground a.button:hover, .fancy-box .foreground .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .fancy-box .foreground a:hover, .fancy-box:nth-of-type(even) h1.button:hover, .fancy-box:nth-of-type(even) h2.button:hover, .fancy-box:nth-of-type(even) a.button:hover, .fancy-box:nth-of-type(even) .comment-thread .comment-buttonPanel a:hover, .comment-thread .comment-buttonPanel .fancy-box:nth-of-type(even) a:hover {
  color: var(--col-monoA) !important;
  background-color: var(--col-mainA) !important;
}

.carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: inherit;
  height: max-content;
  overflow-x: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  background-color: transparent;
}
.carousel .wrapper {
  max-height: 100%;
  min-width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.carousel .wrapper img {
  width: auto;
  object-fit: scale-down;
  border-radius: 0.5rem;
  transition: scale 0.1s;
  scale: 0.975;
  z-index: 1;
}
.carousel .wrapper .background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(1rem) brightness(0.25);
  object-fit: cover;
  z-index: -1;
  scale: 1 !important;
}
.carousel .wrapper:hover img {
  scale: 1;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel.wide {
  display: flex;
  width: max-content;
  height: inherit;
}
.carousel.wide .wrapper {
  max-height: unset;
  min-width: unset;
  max-width: 100%;
  min-width: 100%;
}

.carousel.tall {
  display: none;
}

@media screen and (min-width: 1366px) {
  .carousel.tall {
    display: flex;
  }
  .carousel.wide {
    display: none;
  }
}
/* COMMENT SECTION */
hyvor-talk-comments {
  --ht-color-accent: var(--col-mainA);
  --ht-color-accent-text: var(--col-monoA);
  --ht-color-box-text: var(--col-dark);
  --ht-color-box-text-light: var(--col-dark);
  --ht-color-box-secondary: var(--col-mainB);
  --ht-color-box-secondary-text: var(--col-monoB);
  --ht-box-shadow: 2px 2px .25rem #00000044;
  --ht-box-radius: 0.5rem;
  --ht-box-border: .2rem solid var(--col-dark);
  --ht-button-radius: .4rem;
  font-family: "Merienda", serif;
}

.comment-section {
  display: none;
  max-width: 1024px;
  margin: auto;
  min-height: 4rem;
  padding: 1rem;
  background-color: var(--col-contrast);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3333333333), rgba(0, 0, 0, 0.6666666667));
  border-radius: 1rem;
  color: var(--color-comments);
}

.comment-section[loaded=true] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: center;
  justify-content: center;
}

.comment-section h1, .comment-section .main-body h1:nth-of-type(even), .main-body .comment-section h1:nth-of-type(even), .comment-section .note:nth-of-type(even) h1, .comment-section .gallery-summary:nth-of-type(even) h1, .note:nth-of-type(even) .comment-section h1, .gallery-summary:nth-of-type(even) .comment-section h1, .comment-section .fancy-box:nth-of-type(even) h1, .fancy-box:nth-of-type(even) .comment-section h1, .comment-section h2, .comment-section .note:nth-of-type(even) h2, .comment-section .gallery-summary:nth-of-type(even) h2, .note:nth-of-type(even) .comment-section h2, .gallery-summary:nth-of-type(even) .comment-section h2, .comment-section .fancy-box:nth-of-type(even) h2, .fancy-box:nth-of-type(even) .comment-section h2, .comment-section h3, .comment-section h4 {
  display: block;
  text-align: center;
  margin: 0;
  color: var(--color-comments);
}

.comment-thread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 1.75rem;
  overflow: hidden;
  transition: height 0.5s ease;
  border-left: 0;
  border-radius: 0.25rem;
  width: min(100%, 960px);
  margin: auto;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
  font-family: "Merienda", serif;
}

.comment-thread .comment-thread {
  width: auto;
  margin: auto 1rem;
}

.comment-thread .comment-buttonPanel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: small;
}

.comment-thread[open=true] {
  height: fit-content;
}

.comment-thread[accent="1"][open=true] {
  border-left: 0.25rem solid var(--col-mainA);
}

.comment-thread[accent="2"][open=true] {
  border-left: 0.25rem solid var(--col-mainB);
}

/* COMMENT MESSAGES & FORMS */
.comment-thread .comment-replyForm, .comment-thread .comment-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  margin: 0.25rem;
  margin-left: 0 !important;
  padding: 1rem;
  padding-bottom: 0.25rem;
  background-color: var(--col-mainA);
  background-image: linear-gradient(to bottom right, var(--col-mainA) 60%, color-mix(in hsl, var(--col-mainA) 66%, var(--col-mainB)));
  color: var(--col-monoA);
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 2px 2px 0.25rem rgba(0, 0, 0, 0.2666666667);
}

.comment-thread .comment-message {
  cursor: pointer;
  user-select: none;
}

.comment-thread[accent="2"] > .comment-replyForm, .comment-thread[accent="2"] > .comment-message {
  background-color: var(--col-mainB);
  background-image: linear-gradient(to bottom right, var(--col-mainB) 60%, color-mix(in hsl, var(--col-mainB) 66%, var(--col-mainA)));
  color: var(--col-monoB);
}

.comment-message h3 {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5333333333);
}

.comment-message b {
  color: var(--col-contrast);
}

.comment-message i {
  color: var(--col-dark);
}

.comment-await {
  display: none;
}

.comment-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0.5rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  box-shadow: 2px 2px 0.25rem rgba(0, 0, 0, 0.2666666667);
}

@keyframes new-comment {
  from {
    filter: opacity(0%);
  }
  to {
    filter: opacity(100%);
  }
}
.comment-box[new] {
  animation-name: new-comment;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

/* COMMENT INFO */
.comment-box .comment-info {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.comment-box .comment-info img {
  height: 3rem;
  width: 3rem;
  margin: 1rem;
  border-radius: 3rem;
}

.comment-box .comment-info p#likesCounter {
  margin-left: auto;
  margin-right: 1rem;
  height: 2rem;
  vertical-align: middle;
}

.comment-box .comment-body p {
  margin: 0 1rem;
  vertical-align: middle;
}

.comment-thread[accent="1"] .comment-box b {
  color: var(--col-mainB);
}

.comment-thread[accent="2"] .comment-box b {
  color: var(--col-mainA);
}

.comment-box img.emoji {
  height: 2em;
  width: auto;
  border-radius: 0.25em;
  pointer-events: all;
}

/* COMMENT INTERACTIBLES */
.comment-interactions {
  display: block;
  font-size: small;
  width: 100%;
  text-align: right;
  color: black;
}

.comment-interactions a, .comment-interactions .note:nth-of-type(even) a.button, .comment-interactions .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .comment-interactions a.button, .gallery-summary:nth-of-type(even) .comment-interactions a.button, .comment-interactions .fancy-box .foreground a, .fancy-box .foreground .comment-interactions a, .comment-interactions .fancy-box:nth-of-type(even) a, .fancy-box:nth-of-type(even) .comment-interactions a, .comment-interactions .note:nth-of-type(even) .comment-thread .comment-buttonPanel a, .comment-interactions .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel a, .note:nth-of-type(even) .comment-thread .comment-buttonPanel .comment-interactions a, .gallery-summary:nth-of-type(even) .comment-thread .comment-buttonPanel .comment-interactions a, .comment-interactions .comment-thread .comment-buttonPanel .note:nth-of-type(even) a, .comment-interactions .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) a, .comment-thread .comment-buttonPanel .note:nth-of-type(even) .comment-interactions a, .comment-thread .comment-buttonPanel .gallery-summary:nth-of-type(even) .comment-interactions a {
  background-color: var(--col-mainA);
  color: var(--col-monoA);
  padding: 0.25rem;
  margin: 0.25rem;
  margin-bottom: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  text-decoration: none;
  font-size: min(default, 1rem);
  color: var(--col-monoA);
}

.comment-interactions a:hover, .comment-interactions .note:nth-of-type(even) a.button:hover, .comment-interactions .gallery-summary:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .comment-interactions a.button:hover, .gallery-summary:nth-of-type(even) .comment-interactions a.button:hover {
  background-color: var(--col-neutral);
}

.comment-interactions a[active=true], .comment-interactions .note:nth-of-type(even) a[active=true].button, .comment-interactions .gallery-summary:nth-of-type(even) a[active=true].button, .note:nth-of-type(even) .comment-interactions a[active=true].button, .gallery-summary:nth-of-type(even) .comment-interactions a[active=true].button {
  background-color: var(--col-mainB);
  color: var(--col-monoB);
}

/* COMMENT FORM */
.comment-thread .comment-replyForm[hidden=true] {
  display: none;
}

.comment-replyForm {
  display: flex;
  flex-direction: column;
  width: auto;
}

.comment-thread .comment-replyForm > span {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}

.comment-thread .comment-replyForm > sub {
  padding-top: 0.5rem;
}

.comment-thread .comment-replyForm input[hidden] {
  display: inline-block;
  font-size: small;
  height: 0.75rem;
}

.comment-thread .comment-replyForm > span input {
  display: inline-flex;
  width: auto;
  flex-grow: 3;
}

.comment-thread .comment-replyForm label {
  display: inline-flex;
  justify-content: center;
  width: auto;
  padding: 0.25rem auto;
  flex-grow: 2;
}

.comment-thread .comment-replyForm textarea {
  margin: 0.25rem;
  height: 4rem;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.comment-replyForm input, .comment-replyForm textarea {
  background-color: var(--col-neutral);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.6666666667));
  border: color-mix(in hsla, transparent, var(--col-contrast)) solid 2px;
  border-radius: 0.25rem;
  box-shadow: 2px 2px 0.25rem rgba(0, 0, 0, 0.2666666667);
}

.comment-replyForm input:active, .comment-replyForm textarea:active {
  border-color: var(--col-contrast);
}

.gallery-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}
.gallery-container .thumbnail {
  display: flex;
  height: 12rem;
  width: 12rem;
  align-items: center;
  justify-content: center;
  margin: 0 0.25rem;
  z-index: 10;
  cursor: pointer;
}
.gallery-container .thumbnail img {
  height: 100%;
  width: auto;
  transition: all 0.1s;
  filter: brightness(90%);
  z-index: inherit;
  pointer-events: none;
}
.gallery-container .thumbnail img[preload] {
  opacity: 0;
}
.gallery-container .thumbnail img.icon {
  align-self: center;
  justify-self: auto;
  max-width: 4rem;
  max-height: 4rem;
  border-radius: 2rem;
  object-fit: scale-down;
  pointer-events: none;
  animation: preloader linear 1s infinite;
}
.gallery-container .thumbnail:hover {
  z-index: 11;
}
.gallery-container .thumbnail:hover img {
  height: 110%;
  filter: brightness(110%);
}
.gallery-container .thumbnail a, .gallery-container .thumbnail .note:nth-of-type(even) a.button, .gallery-container .thumbnail .gallery-summary:nth-of-type(even) a.button, .note:nth-of-type(even) .gallery-container .thumbnail a.button, .gallery-summary:nth-of-type(even) .gallery-container .thumbnail a.button {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.gallery-summary {
  position: relative;
}
.gallery-summary * {
  z-index: 5;
}
.gallery-summary .background {
  position: absolute;
  left: -0.5rem;
  filter: blur(8px) saturate(0);
  mix-blend-mode: soft-light;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.gallery-summary .background img {
  object-fit: cover;
  object-position: 50% 75%;
  width: 100%;
  height: 100%;
}

.gallery-data {
  display: none;
}

@keyframes preloader {
  0% {
    transform: rotate(0deg);
    opacity: 0.66;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.33;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.66;
  }
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
}
.overlay * {
  opacity: 1;
  transition: opacity ease 0.33s;
}
.overlay *[hidden=false] {
  opacity: 1;
}
.overlay *[hidden=false] * {
  pointer-events: all;
}
.overlay *[hidden=true] {
  opacity: 0;
}
.overlay *[hidden=true] * {
  pointer-events: none;
}
.overlay .background, .overlay .foreground, .overlay .ui {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.overlay .background {
  background-color: rgba(0, 0, 0, 0.5019607843);
}
.overlay .foreground {
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.overlay .foreground[hidden=false] {
  pointer-events: all;
}
.overlay .ui {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
  padding: 0.5rem;
}
.overlay .ui a.ui-close, .overlay .ui .note:nth-of-type(even) a.ui-close.button, .note:nth-of-type(even) .overlay .ui a.ui-close.button {
  position: fixed;
  right: 0.5rem;
  top: 0.5rem;
}
.overlay .ui * {
  pointer-events: all;
}
.overlay .ui[hidden=true] * {
  pointer-events: none;
}
@media screen and (max-width: 1366px) {
  .overlay #siteUI {
    position: absolute;
  }
}

.palette {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  gap: 0.5rem;
  background-blend-mode: multiply, hard-light;
}
.palette .paletteOption {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #202020;
  border: #606060 solid 0.25rem;
  border-radius: 1rem;
  width: 10em;
  height: 4em;
  cursor: pointer;
  transform: scale(0.9);
  filter: brightness(90%);
  transition: all 0.2s;
}
.palette .paletteOption p {
  color: color-mix(in hsl, var(--col-mainA), #FFF);
  user-select: none;
}
.palette .paletteOption:hover {
  transform: scale(1);
  filter: brightness(110%);
}

/*
.paletteContainer {
    height: auto;
    width: auto;
    max-width: $breakpoint-desktop;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #00000080;
    border-radius: $link-height;
    margin-top: $border-size;
    padding: 4px;
    margin-right: $border-size;
    &[open="false"] {
        max-height: calc(($link-height + $border-size) / 2);
    }
    div.icon {
        display: block;
        background-color: var(--col-mainA);
        mask-image: url("./images/ui/palette.svg");
        height: calc($link-height / 2);
        width: calc($link-height / 2);
        cursor: pointer;
    }
    div {
        // Theme selector buttons.
        a {
            @extend Shadow;
            height: calc($link-height / 2);
            width: calc($link-height / 2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0.25rem;
            span {
                height: auto;
                width: 90%;
                transition: all .1s;
                filter: brightness(100%);
                z-index: inherit;
            }
        }
        a:hover {
            @extend Shadow;
            img {
                width: 110%;
                filter: brightness(125%);
                z-index: 11;
            }
        }
    }
    // Mobile view.
    @media screen and (max-width : $breakpoint-tablet) {
        background-color: red;
    }
    // Desktop view.
    @media screen and (min-width : $breakpoint-desktop) {
        margin-top: auto;
    }
}
*/
.main-body .reader-simple h1, .main-body .reader-simple h2, .main-body .reader-simple h3, .main-body .reader-simple h4, .main-body .reader-simple p {
  text-align: center;
}
.main-body .reader-simple .page {
  width: calc(100% + 2rem);
  max-width: 100%;
  height: max-content;
  border: 0.5rem solid var(--col-mainB);
  border-radius: 0.5rem;
}
@media screen and (max-width: 920px) {
  .main-body .reader-simple .page {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}
.main-body .reader-simple .controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  height: 5rem;
  width: auto;
  margin: auto;
  max-width: 768px;
}
.main-body .reader-simple .controls a, .main-body .reader-simple .controls .note:nth-of-type(even) a.button, .note:nth-of-type(even) .main-body .reader-simple .controls a.button {
  background-color: var(--col-mainA);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1333333333), transparent);
  background-blend-mode: multiply;
  height: 100%;
  aspect-ratio: 1/1;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 80% 80%;
}
.main-body .reader-simple .controls a:hover, .main-body .reader-simple .controls .note:nth-of-type(even) a.button:hover, .note:nth-of-type(even) .main-body .reader-simple .controls a.button:hover {
  background-color: var(--col-mainB);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1333333333), transparent);
}
.main-body .reader-simple .controls a[disabled], .main-body .reader-simple .controls .note:nth-of-type(even) a[disabled].button, .note:nth-of-type(even) .main-body .reader-simple .controls a[disabled].button {
  background-color: gray !important;
  pointer-events: none;
}
.main-body .reader-rich {
  position: relative;
  width: calc(100% + 2rem);
  margin: 0;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 0.5rem solid var(--col-mainB);
  border-radius: 0.5rem;
  max-width: 768px;
  background-color: #111;
}
@media screen and (max-width: 920px) {
  .main-body .reader-rich {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}
.main-body .reader-rich .scroll {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  overflow-x: scroll;
  scroll-behavior: auto;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
}
.main-body .reader-rich .scroll ::-webkit-scrollbar {
  display: none;
}
.main-body .reader-rich .scroll .wrapper {
  position: relative;
  min-width: 100%;
  height: max-content;
  aspect-ratio: 9/14.84;
  background-color: #111;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.main-body .reader-rich .scroll .wrapper img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.main-body .reader-rich .scroll .wrapper img.bg {
  object-fit: cover;
  filter: blur(64px);
  opacity: 0.66;
  z-index: 0;
  scale: 150%;
}
.main-body .reader-rich .scroll .wrapper img.page {
  transition: all 0.33s ease, opacity 0.5s ease, filter 0.33s ease;
  filter: blur(8px);
  opacity: 0;
  z-index: 1;
}
.main-body .reader-rich .scroll .wrapper img.page[loaded=true] {
  opacity: 0.66;
  scale: 110%;
}
.main-body .reader-rich .scroll .wrapper[selected=true] img.page[loaded=true] {
  opacity: 1;
  filter: blur(0);
  scale: 100%;
  z-index: 2;
}
.main-body .reader-rich .controls {
  position: absolute;
  left: 1rem;
  top: 0;
  width: calc(100% - 2rem);
  height: 100%;
  transition: opacity 0.5s ease;
  opacity: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 100;
}
.main-body .reader-rich .controls[visible=true] {
  opacity: 1;
}
.main-body .reader-rich .controls a.ui-button, .main-body .reader-rich .controls .note:nth-of-type(even) a.ui-button.button, .note:nth-of-type(even) .main-body .reader-rich .controls a.ui-button.button {
  height: 5rem;
  width: 5rem;
  border-radius: 5rem;
  cursor: pointer;
}
.main-body .reader-rich .controls a.ui-button#fullButton span {
  mask-image: url(./images/ui/maximize.svg);
}
.main-body .reader-rich .controls a.ui-button#prevButton span {
  mask-image: url(./images/ui/chevron-left.svg);
}
.main-body .reader-rich .controls a.ui-button#nextButton span {
  mask-image: url(./images/ui/chevron-right.svg);
}
.main-body .reader-rich .controls a.ui-button#nextButton[href] span {
  background-color: var(--col-mainA);
  mask-image: url(./images/ui/chevrons-right.svg);
}
.main-body .reader-rich .controls div.topbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  align-items: center;
  top: 1rem;
  width: 100%;
}
.main-body .reader-rich .controls div.topbar a.ui-button#pageInfo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  height: 5rem;
  border-radius: 5rem;
  width: 4rem;
  max-width: unset;
  overflow: hidden;
  color: white;
}
.main-body .reader-rich .controls div.topbar a.ui-button#pageInfo span {
  mask-image: url(./images/ui/circle-info.svg);
  width: 4rem;
}
.main-body .reader-rich .controls div.topbar a.ui-button#pageInfo p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
  white-space: nowrap;
}
.main-body .reader-rich .controls div.topbar a.ui-button#pageInfo p b {
  font-family: "Super Gossip";
  font-size: 1rem;
}
.main-body .reader-rich .controls div.topbar a.ui-button#pageInfo p i {
  font-family: "Merienda";
  font-size: 0.75rem;
}
.main-body .reader-rich .controls div.topbar a.ui-button#pageInfo:hover {
  width: 22.5rem;
}
.main-body .reader-rich .controls div.bottombar {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  bottom: 1rem;
  width: 100%;
}
.main-body .reader-rich .controls div.bottombar p {
  width: max-content;
  color: white;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.4);
  margin: 0.5rem auto;
  padding: 0.5rem;
  text-align: center;
  font-family: "Super Gossip";
  font-weight: bolder;
  user-select: none;
  transition: all 0.3s;
}
.main-body .reader-rich .controls div.bottombar .scrollbar {
  position: relative;
  margin: auto;
  width: calc(100% - 2rem);
  height: 2rem;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 1rem;
  overflow: hidden;
}
.main-body .reader-rich .controls div.bottombar .scrollbar * {
  position: absolute;
  transition: all 0.3s ease;
}
.main-body .reader-rich .controls div.bottombar .scrollbar .bg {
  left: 1rem;
  top: 0;
  width: calc(100% - 2rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-body .reader-rich .controls div.bottombar .scrollbar .rail {
  height: 0.3333333333rem;
  width: 100%;
  border-radius: 1rem;
  background-color: var(--col-darkA);
  background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.5333333333) 100%);
}
.main-body .reader-rich .controls div.bottombar .scrollbar .progress {
  left: 0;
  height: 0.3333333333rem;
  width: var(--scroll-amount);
  border-radius: 1rem;
  background-color: var(--col-mainB);
  background-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.2666666667) 100%);
}
.main-body .reader-rich .controls div.bottombar .scrollbar .thumb {
  left: var(--scroll-amount);
  height: 33%;
  aspect-ratio: 1;
  margin: auto;
  margin-left: -0.333rem;
  background-color: var(--col-mainB);
  border-radius: 1rem;
}
.main-body .reader-rich .controls div.bottombar .scrollbar:hover .progress {
  background-color: var(--col-mainA);
}
.main-body .reader-rich .controls div.bottombar .scrollbar:hover .thumb {
  background-color: var(--col-mainA);
  height: 40%;
  margin-left: -0.4rem;
}
.main-body .reader-rich .controls div.bottombar input[type=range] {
  top: 0;
  left: 1rem;
  width: calc(100% - 2rem);
  height: 100%;
  margin: auto;
  opacity: 0;
  cursor: pointer;
}
.main-body .reader-rich .controls div.bottombar input[type=range]:focus {
  outline: none;
}
.main-body .reader-rich .controls div.bottombar:hover > p, .main-body .reader-rich .controls div.bottombar:hover > .scrollbar {
  background-color: rgba(0, 0, 0, 0.7333333333);
}
.main-body .reader-rich .controls[visible=false] > * {
  pointer-events: none;
}
.main-body .reader-rich:fullscreen {
  border-width: 0;
}
.main-body .reader-rich:fullscreen .wrapper {
  height: 100vh;
  aspect-ratio: unset;
}
.main-body .reader-rich:fullscreen .wrapper img.page {
  object-fit: scale-down;
  height: 100vh;
  width: 100vw;
}
.main-body .reader-rich:fullscreen a.ui-button#fullButton span {
  mask-image: url(./images/ui/xmark.svg);
}

.widget a.ui-button, .widget .note:nth-of-type(even) a.ui-button.button, .note:nth-of-type(even) .widget a.ui-button.button, .widget .gallery-summary:nth-of-type(even) a.ui-button.button, .gallery-summary:nth-of-type(even) .widget a.ui-button.button {
  float: right;
  width: 2rem;
  max-width: 2cm;
  height: 2rem;
  max-height: 2cm;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s;
  cursor: pointer;
}
.widget a.ui-button span, .widget .note:nth-of-type(even) a.ui-button.button span, .note:nth-of-type(even) .widget a.ui-button.button span, .widget .gallery-summary:nth-of-type(even) a.ui-button.button span, .gallery-summary:nth-of-type(even) .widget a.ui-button.button span {
  display: block;
  background-color: rgba(255, 255, 255, 0.6666666667);
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 60% 60%;
  transition: all 0.3s;
}

.widget a.ui-button:hover, .widget .note:nth-of-type(even) a.ui-button.button:hover, .note:nth-of-type(even) .widget a.ui-button.button:hover {
  background-color: rgba(0, 0, 0, 0.7333333333);
}
.widget a.ui-button:hover span, .widget .note:nth-of-type(even) a.ui-button.button:hover span, .note:nth-of-type(even) .widget a.ui-button.button:hover span {
  background-color: #FFFFFF;
  mask-size: 70% 70%;
}

/*# sourceMappingURL=style.css.map */