/* Gallery */
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-Thin-29e3dfd3.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-ThinItalic-5443b61f.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-ThinOblique-5afd194b.woff2") format("woff2");
  font-weight: 100;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-ExtraLight-cc6488cd.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-ExtraLightItalic-b2c04173.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-ExtraLightOblique-36d4a4eb.woff2") format("woff2");
  font-weight: 200;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-Light-d17bf688.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-LightItalic-3eb979c0.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-LightOblique-8f1befa5.woff2") format("woff2");
  font-weight: 300;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-Regular-d874a5c4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-Italic-06aa9ad5.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-Oblique-a7a2ef0d.woff2") format("woff2");
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-Medium-7a7319fc.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-MediumItalic-49482366.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-MediumOblique-4ccbd3b2.woff2") format("woff2");
  font-weight: 500;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-SemiBold-346da744.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-SemiBoldItalic-55de780f.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-SemiBoldOblique-91f88e2f.woff2") format("woff2");
  font-weight: 600;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-Bold-b576d92e.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImported";
  src: url("/assets/victor-mono/VictorMono-BoldItalic-783a7548.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
@font-face {
  font-family: "VictorMonoImportedOblique";
  src: url("/assets/victor-mono/VictorMono-BoldOblique-febb78e1.woff2") format("woff2");
  font-weight: 700;
  font-style: oblique;
  font-display: swap;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss06" 1, "ss07" 1, "ss03" 0, "ss04" 0, "ss05" 0, "ss08" 0;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: VictorMonoImported, sans-serif;
  background: #000;
  color: #fff;
}

.minimap-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.minimap-container .minimap-image {
  display: block;
  max-height: 100dvh;
  max-width: 25dvw;
}
.minimap-container .minimap-viewport {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  color: red;
  font-size: 20px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.gallery {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px;
  box-sizing: border-box;
}
.gallery .art {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
}
.gallery .art .frame {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  touch-action: none;
}
.gallery .art .frame .canvas {
  position: relative;
}
.gallery .about .title {
  position: fixed;
  top: 40px;
  right: 100px;
  text-align: right;
  font-size: 20px;
  font-weight: 300;
  line-height: 20px;
}
.gallery .about .collection {
  position: fixed;
  bottom: 40px;
  right: 100px;
  text-align: right;
  font-size: 16px;
  color: #888;
  line-height: 20px;
  letter-spacing: 0.5px;
}
.gallery .about .collection em {
  font-family: VictorMonoImported;
  font-style: oblique;
}
.gallery .about .artifact {
  position: fixed;
  top: 100px;
  right: 60px;
  line-height: 20px;
  transform: rotate(-90deg);
  transform-origin: top right;
  color: #999;
  font-size: 12px;
  letter-spacing: 2px;
}

@media (max-width: 1000px), (max-height: 1000px) {
  .gallery {
    padding: 40px;
  }
  .gallery .about .title {
    font-size: 16px;
    top: 10px;
    right: 40px;
  }
  .gallery .about .collection {
    bottom: 10px;
    right: 40px;
    font-size: 14px;
  }
  .gallery .about .artifact {
    top: 40px;
    right: 30px;
  }
  .minimap-container .minimap-image {
    max-width: 15dvw;
    max-height: 60dvh;
  }
}
@media (max-width: 600px), (max-height: 600px) {
  .gallery {
    padding: 20px;
  }
  .gallery .about .title {
    font-size: 14px;
    top: 0px;
    right: 20px;
    line-height: 15px;
  }
  .gallery .about .collection {
    bottom: 0px;
    right: 20px;
    font-size: 11px;
  }
  .gallery .about .artifact {
    top: 20px;
    right: 20px;
    font-size: 9px;
  }
  .minimap-container .minimap-image {
    max-width: 10dvw;
    max-height: 60dvh;
  }
}