.vs-horizontal {
  flex-direction: row;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.vs-horizontal.vs-flow-center {
  align-items: center;
}
.vs-horizontal.vs-flow-left {
  align-items: flex-start;
}
.vs-horizontal.vs-flow-right {
  align-items: flex-end;
}
.vs-horizontal.vs-flow-spread {
  align-items: stretch;
}
.vs-horizontal.vs-lines-left {
  justify-content: flex-start;
}
.vs-horizontal.vs-wrap {
  flex-wrap: wrap;
}
.vs-horizontal.vs-center-all {
  justify-content: center;
  align-content: center;
  align-items: center;
}
.vs-horizontal.vs-start-all {
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.vs-horizontal.vs-end-all {
  justify-content: flex-end;
  align-content: flex-end;
  align-items: flex-end;
}
.vs-horizontal.vs-stretch-all {
  align-content: stretch;
  align-items: stretch;
}
.vs-horizontal.vs-stretch-all > :not(.vs-nostretch) {
  flex-grow: 1;
}
.vs-horizontal > .vs-stretch-self {
  flex-grow: 1;
}
.vs-horizontal > .vs-shrink-self {
  flex-shrink: 1;
}
.vs-horizontal * {
  flex-grow: 1;
  flex-shrink: 1;
}
.vs-vertical {
  flex-direction: column;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.vs-vertical.vs-flow-center {
  align-items: center;
}
.vs-vertical.vs-flow-left {
  align-items: flex-start;
}
.vs-vertical.vs-flow-right {
  align-items: flex-end;
}
.vs-vertical.vs-flow-spread {
  align-items: stretch;
}
.vs-vertical.vs-lines-left {
  justify-content: flex-start;
}
.vs-vertical.vs-wrap {
  flex-wrap: wrap;
}
.vs-vertical.vs-center-all {
  justify-content: center;
  align-content: center;
  align-items: center;
}
.vs-vertical.vs-start-all {
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.vs-vertical.vs-end-all {
  justify-content: flex-end;
  align-content: flex-end;
  align-items: flex-end;
}
.vs-vertical.vs-stretch-all {
  align-content: stretch;
  align-items: stretch;
}
.vs-vertical.vs-stretch-all > :not(.vs-nostretch) {
  flex-grow: 1;
}
.vs-vertical > .vs-stretch-self {
  flex-grow: 1;
}
.vs-vertical > .vs-shrink-self {
  flex-shrink: 1;
}
.vs-vertical * {
  flex-grow: 1;
  flex-shrink: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /*font-family: ModerneFracture;*/
}
body {
  color: white;
  text-align: center;
  pointer-events: all;
  font-family: sans-serif;
  position: relative;
  z-index: 0;
}
.filters {
  font-size: 0.8rem;
  margin: 5px;
  display: flex;
  justify-content: center;
  max-width: 1034px;
  margin: auto;
}
.filters span {
  cursor: pointer;
  padding: 0.2rem;
  background-color: #333;
  color: #888;
  border-radius: 3px;
  margin: 0px 0.1rem;
  &::before{
    content: "▽";
    margin-right: 4px;
  }
  &.active::before{
    content: "▼";
  }
}
.filters span:hover {
  color: #CCC;
  background-color: #555;
}
.filters span.active {
  color: #CCC;
  background-color: rgb(20, 69, 109);
  &:hover{
    background-color: rgb(30, 100, 158);
  }
}
.gallery {
  max-width: 1034px;
  width: 100%;
  margin: auto;
  .hover-highlight{
    box-shadow: 0 0 4px 2px rgb(30, 100, 158);
  }
}
.gallery .preview :first-child {
  flex-basis: auto;
  background-size: cover;
  background-position: center;
  background-color: #111;
}
.gallery .preview p {
  margin: 0px;
  padding: 5px;
  position: relative;
  display: block;
  flex: 0 0;
  flex-basis: auto;
}
.gallery .preview {
  max-height: 256px;
  flex-basis: 256px;
  transition: height 1s, width 1s, flex-basis 1s;
}
.gallery .active .preview {
  max-height: 25vh;
  flex-basis: 25vh;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
}
.gallery .active .preview p {
  font-size: 2rem;
  text-shadow: 0 0 10px black, 0px 0px 8px black, 0px 0px 8px black;
  -webkit-margin-before: 0rem;
  -webkit-margin-after: 0rem;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  display: flex;
}
.gallery content {
  height: 0px;
  width: 0px;
  overflow: hidden;
  transition: height 1s, width 1s, flex-basis 1s;
  padding: 0 1rem;
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: #DDD;
}
.gallery content h1,
.gallery content h2,
.gallery content h3,
.gallery content h4,
.gallery content h5,
.gallery content h6,
.gallery content p,
.gallery content li,
.gallery content button,
.gallery content input,
.gallery content .button {
  line-height: 1.5;
}
@media only screen and (min-width: 1081px) {
  .gallery content body,
  .gallery content p,
  .gallery content li,
  .gallery content button,
  .gallery content input,
  .gallery content .button {
    font-size: 24px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content body,
  .gallery content p,
  .gallery content li,
  .gallery content button,
  .gallery content input,
  .gallery content .button {
    font-size: calc( 16px + ( 24 - 16 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content body,
  .gallery content p,
  .gallery content li,
  .gallery content button,
  .gallery content input,
  .gallery content .button {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1081px) {
  .gallery content h1 {
    font-size: 45px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content h1 {
    font-size: calc( 30px + ( 45 - 30 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content h1 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1081px) {
  .gallery content h2 {
    font-size: 40.5px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content h2 {
    font-size: calc( 27px + ( 40.5 - 27 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content h2 {
    font-size: 27px;
  }
}
@media only screen and (min-width: 1081px) {
  .gallery content h3 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content h3 {
    font-size: calc( 24px + ( 36 - 24 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content h3 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1081px) {
  .gallery content h4 {
    font-size: 33px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content h4 {
    font-size: calc( 22px + ( 33 - 22 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content h4 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1081px) {
  .gallery content h5 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content h5 {
    font-size: calc( 20px + ( 30 - 20 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content h5 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1081px) {
  .gallery content h6 {
    font-size: 27px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content h6 {
    font-size: calc( 18px + ( 27 - 18 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content h6 {
    font-size: 18px;
  }
}
.gallery content pre {
  line-height: 1.2;
}
@media only screen and (min-width: 1081px) {
  .gallery content pre {
    font-size: 19.2px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content pre {
    font-size: calc( 12.8px + ( 19.200000000000003 - 12.8 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content pre {
    font-size: 12.8px;
  }
}
.gallery content a {
  color: #366a99;
}
.gallery content a:hover {
  color: #679ecf;
}
.gallery content a:visited {
  color: #b6501b;
}
.gallery content .error {
  padding: 20;
  border: 5px solid #A33;
  background-color: rgba(255, 127, 127, 0.2);
  color: #F77;
  margin: 1em 0;
}
.gallery content em {
  font-style: italic;
}
.gallery content code:not(.hljs),
.gallery content strong {
  font-family: monospace, monospace;
  font-size: 1em;
  font-style: inherit;
}
.gallery content code:not(.hljs) {
  color: #a6e22e;
}
.gallery content strong {
  color: #bf79db;
}
.gallery content .expandable {
  overflow: auto;
  position: relative;
}
.gallery content .expandable:not(.expand) {
  max-height: 256px;
  overflow: hidden;
}
.gallery content .expandable:not(.expand):before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  box-shadow: inset 0 -100px 50px -50px #333;
}
.gallery content .expandable:not(.expand) pre:before {
  content: "Click to expand";
}
.gallery content .expandable pre:before {
  content: "Click to collapse";
  display: inline-block;
  margin-left: 1em;
  padding: 0.25em 1em;
  border-radius: 5px 5px 0px 0px;
  background-color: rgba(255, 255, 255, 0.3);
}
.gallery content .expandable pre:hover:before {
  color: #AAA;
  background-color: rgba(0, 0, 0, 0.3);
}
.gallery content figure.triple {
  margin: calc( 1em - 10px ) 0px;
}
.gallery content figure.triple img {
  width: calc( ( 100% / 3 ) - 20px);
  margin: 10px;
}
@media only screen and (max-width: 682px) and (min-width: 300px) {
  .gallery content figure.triple img {
    width: calc( ( 100% / 2 ) - 20px);
  }
}
@media only screen and (max-width: 299px) {
  .gallery content figure.triple img {
    width: 100%;
  }
}
.gallery content figure.quad {
  margin: calc( 1em - 10px ) 0px;
}
.gallery content figure.quad img {
  width: calc( ( 100% / 2 ) - 20px);
  margin: 10px;
}
@media only screen and (max-width: 299px) {
  .gallery content figure.quad img {
    width: 100%;
  }
}
.gallery content figure {
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.gallery content figure > img,
.gallery content figure > video,
.gallery content figure > .imgWrap {
  min-height: 50px;
  min-width: 50px;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  flex-grow: 0;
  flex-shrink: 1;
  box-shadow: 0px 5px 10px 4px #111;
  background-color: rgba(0, 0, 0, 0.3);
}
.gallery content figure[data-legend]:after {
  content: attr(data-legend);
  font-style: italic;
  text-align: center;
  white-space: pre;
  display: inline-block;
  width: 100%;
  line-height: 1.2;
  margin-top: 0.5em;
}
@media only screen and (min-width: 1081px) {
  .gallery content figure[data-legend]:after {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content figure[data-legend]:after {
    font-size: calc( 10px + ( 16 - 10 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content figure[data-legend]:after {
    font-size: 10px;
  }
}
.gallery content svg,
.gallery content canvas {
  margin: 1rem 0px;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 10px 4px black;
  width: 100%;
}
@media only screen and (orientation: landscape) {
  .gallery content svg,
  .gallery content canvas {
    max-height: 50vh;
  }
}
.gallery content p svg.icon {
  display: inline;
  position: relative;
  background-color: transparent;
  box-shadow: none;
  width: inherit;
  margin: 0px;
}
@media only screen and (min-width: 1081px) {
  .gallery content p svg.icon {
    width: 20px;
    max-height: 20px;
  }
}
@media only screen and (max-width: 1080px) and (min-width: 300px) {
  .gallery content p svg.icon {
    width: calc( 12px + ( 20 - 12 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
    max-height: calc( 12px + ( 20 - 12 ) * ( 100vw - 300px ) / ( 1080 - 300 ) );
  }
}
@media only screen and (max-width: 299px) {
  .gallery content p svg.icon {
    width: 12px;
    max-height: 12px;
  }
}
@font-face {
  font-family: Chancery;
  src: url("../fonts/urw_chancery_l_regular.ttf");
}
.gallery content .verse {
  font-family: Chancery, cursive;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.gallery content .verse * {
  display: block;
}
.gallery content .verse .flex {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.gallery content .verse .flex :last-child {
  text-align: right;
}
.gallery content .verse .flex * {
  margin-top: 0px;
}
.gallery content .verse :last-child {
  margin-bottom: 0px;
}
.gallery .active content {
  height: auto;
  width: auto;
  border-top: 16px solid #555;
}
@media only screen and (min-width: 301px) and (max-width: 1024px) {
  .gallery{
    min-width: 100dvmax !important;
  }
  
  .gallery section {
    -webkit-flex-basis: calc(40%);
    flex-basis: calc(40%);
    max-width: none;
    max-height: 50vw;
  }
}
@media only screen and (max-width: 300px) {
  .gallery section {
    -webkit-flex-basis: calc(90%);
    flex-basis: calc(90%);
    max-width: none;
    max-height: 50vw;
  }
}
section.unfinished .preview {
  opacity: 0.33;
}
section.unfinished content > :first-child::before {
  content: 'This section is still in the making and thus unfinished.';
  padding: 20;
  border: 5px solid #AA3;
  background-color: rgba(255, 255, 127, 0.2);
  color: #FF7;
  margin: 1em 0;
  display: inherit;
}

.intro {
  position: fixed;
  display: flex;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
}
.intro svg {
  width: 100%;
}
.backfloat {
  position: fixed;
  display: flex;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  justify-content: center;
  align-content: stretch;
  filter: blur(5px) grayscale(0) hue-rotate(180deg);
  -webkit-filter: blur(5px) grayscale(0) hue-rotate(180deg);
}
@media only screen and (orientation: portrait) {
  .backfloat {
    flex-direction: row;
  }
}
@media only screen and (orientation: landscape) {
  .backfloat {
    flex-direction: column;
  }
  .backfloat video {
    min-height: 100vh;
  }
}
.backfloat video {
  transition: opacity 1s;
  object-fit: cover;
  &.faded{
    opacity: 0.2;
  }
}

.gallery section {
  background-color: rgba(51, 51, 51, 0.8);
  -webkit-flex-basis: calc(248.5px);
  flex-basis: calc(248.5px);
  max-height: 256px;
  margin: 5px;
  overflow: hidden;
  transition: height 1s, width 1s;
  position: relative;
}
.gallery section{
  &:not(.active) {
    cursor: pointer;
    &:focus, &:focus-visible{
      box-shadow: 0 0 4px 2px red;
      outline: none;
    }
  }
  &:not(.active):hover{
    box-shadow: 0 0 4px 2px red;
  }

  &.active{
    -webkit-flex-basis: calc(90%);
    flex-basis: calc(90%);
    max-width: none;
    max-height: none;
    min-width: calc(90%);
    min-height: 100%;
    .menu{
      cursor: pointer;
      display: block;
      visibility: visible;
      padding: 0.5rem;
      background-color: rgba(0, 0, 0, 0.66);
    }
    .menu:hover{
      box-shadow: 0 0 4px 2px red;
    }
  }
}
.gallery section .menu {
  display: none;
  visibility: hidden;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  height: 80px;
  overflow: visible;
}
/*# sourceMappingURL=gallery.css.map */