body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: none; }

.treasure-hunt {
  height: 100vh;
  width: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content; }
  .treasure-hunt .parallax {
    flex: 1 0 100vw;
    max-width: 100vw; }
  .treasure-hunt .wp-block-group {
    --spacer: 17.5vh;
    flex: 1 0 auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 var(--spacer);
    position: relative;
    z-index: 5; }
    .treasure-hunt .wp-block-group h1 {
      margin-bottom: 2em;
      margin-top: 0;
      transform: translateX(calc(-0.5 * var(--spacer))); }
    .treasure-hunt .wp-block-group h1, .treasure-hunt .wp-block-group h2, .treasure-hunt .wp-block-group h3, .treasure-hunt .wp-block-group h4, .treasure-hunt .wp-block-group h5, .treasure-hunt .wp-block-group p, .treasure-hunt .wp-block-group ul {
      max-width: 50vh; }
  .treasure-hunt .wp-block-video {
    border: 2px solid var(--navy); }
    .treasure-hunt .wp-block-video video {
      height: 55vh;
      width: auto;
      display: block;
      max-width: 90vw; }

.treasure {
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  cursor: url("../images/magnify.png"), pointer;
  padding: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content; }
  .treasure svg {
    width: 100%;
    height: auto; }
  .treasure span {
    display: inline-block; }
  .treasure object, .treasure svg, .treasure span {
    max-height: 20vh;
    pointer-events: none; }
  .treasure:active {
    outline: none; }
  .treasure:focus {
    outline: none; }
  .treasure.token.glow {
    background: radial-gradient(#fac25a, rgba(250, 194, 90, 0) 90%); }
    @media (hover: none) {
      .treasure.token.glow {
        background: radial-gradient(#fac25a, rgba(250, 194, 90, 0) 90%); } }

.token-collection {
  position: fixed;
  top: 1rem;
  right: clamp(1rem, 25vw, 200px);
  width: calc((var(--tokenCount) * 6rem) + 2rem);
  padding: 1rem;
  display: flex; }
  .token-collection .token {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    margin: 0 0.5rem;
    position: relative;
    z-index: 1;
    cursor: pointer; }
    .token-collection .token.show {
      opacity: 1; }
  .token-collection .token svg, .token-collection > svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0; }
  .token-collection.hide {
    display: none; }
  @media screen and (max-width: 600px) {
    .token-collection {
      width: calc(100vw - 2rem);
      right: 1rem;
      overflow-x: scroll; } }

.scroll-indicator {
  --width: 5rem;
  margin: 0;
  position: fixed;
  bottom: 0;
  left: calc(50% - (var(--width) / 2)); }
  .scroll-indicator::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: var(--navy);
    z-index: 0; }
  .scroll-indicator > span {
    display: inline-block; }
  .scroll-indicator .mobile {
    display: none; }
  .scroll-indicator svg {
    position: relative;
    width: var(--width);
    height: auto;
    display: block; }
  @media (hover: none) {
    .scroll-indicator .mobile {
      display: inline-block; }
    .scroll-indicator .desktop {
      display: none; } }
  .scroll-indicator.front-page > span {
    -webkit-animation: hop 2s;
            animation: hop 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }

@-webkit-keyframes hop {
  0% {
    transform: translateY(0); }
  60% {
    transform: translateY(-30%); }
  100% {
    transform: translateY(0%); } }

@keyframes hop {
  0% {
    transform: translateY(0); }
  60% {
    transform: translateY(-30%); }
  100% {
    transform: translateY(0%); } }

sl-dialog {
  --sl-panel-background-color: transparent;
  --sl-shadow-x-large: none;
  --sl-overlay-background-color: transparent; }
  sl-dialog::part(overlay) {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px); }
  sl-dialog::part(panel) {
    position: relative; }
  sl-dialog::part(body) {
    overflow: visible; }
  sl-dialog > svg, sl-dialog > object {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-72%);
    left: 50%;
    width: 60rem;
    height: 100vh;
    max-width: 170vw;
    z-index: 0;
    pointer-events: none;
    color: var(--token-color), #fff; }
  sl-dialog .popup-inner {
    position: relative;
    max-height: 60vh;
    min-height: 60vh;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: 1fr; }
    sl-dialog .popup-inner::-webkit-scrollbar {
      width: 0px;
      background: transparent;
      /* make scrollbar transparent */ }
    sl-dialog .popup-inner img {
      max-width: 100%;
      height: auto; }
  sl-dialog .panel {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: center;
    position: relative; }
    sl-dialog .panel__inner {
      margin: auto 0; }
    sl-dialog .panel > * {
      position: relative; }
    sl-dialog .panel .background {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 100%;
      width: auto;
      -o-object-fit: contain;
         object-fit: contain;
      z-index: 0; }
    sl-dialog .panel.active {
      opacity: 1;
      pointer-events: all;
      transition-duration: 0.7s;
      transition-delay: 0.5s; }
  sl-dialog .token-spacer {
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 auto 0; }
    sl-dialog .token-spacer.stick {
      position: -webkit-sticky;
      position: sticky;
      z-index: 1;
      top: 0; }
    sl-dialog .token-spacer + .panel__inner {
      margin-top: 0; }
    sl-dialog .token-spacer.disappear {
      display: none; }
      sl-dialog .token-spacer.disappear + .panel__inner {
        margin-top: auto; }
  sl-dialog.no-token .token-spacer {
    display: none; }
    sl-dialog.no-token .token-spacer + .panel__inner {
      margin-top: auto; }
  sl-dialog .next-panel {
    text-align: right;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    padding: 0 2em;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
    color: var(--navy);
    margin: auto 0 0 auto;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0em;
    width: 100%; }
    sl-dialog .next-panel:focus, sl-dialog .next-panel:active {
      outline: none; }
    sl-dialog .next-panel svg {
      height: 1.2em;
      width: auto;
      margin-left: 0.5em; }
  sl-dialog .close-notebook {
    -webkit-appearance: none;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: none;
    position: absolute;
    top: -2rem;
    right: 1rem;
    cursor: pointer; }
    sl-dialog .close-notebook svg {
      width: 3rem;
      height: auto;
      display: block; }

.show-help-dialog {
  -webkit-appearance: none;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: none;
  position: fixed;
  top: 0.5em;
  left: 0.5em;
  cursor: pointer; }
  .show-help-dialog svg {
    width: 1.5rem;
    height: auto;
    display: block; }