html {
  --bg-size: 3000px;
  background-image: url("./space_background.png");
  cursor: move;
  background-size: var(--bg-size);
}

body, html {
  height: 100vh;
  width: 100vw;
  --bounce-timing: 0.8s linear(0, 0.002 0.4%, 0.007 0.8%, 0.014 1.2%, 0.028 1.7%, 0.061 2.6%, 0.109 3.6%, 0.221 5.5%, 0.488 9.5%, 0.607 11.4%, 0.718 13.4%, 0.808 15.3%, 0.884 17.3%, 0.916 18.3%, 0.946 19.4%, 0.971 20.5%, 0.992 21.6%, 1.01 22.8%, 1.024 24%, 1.036 25.4%, 1.043 26.8%, 1.047 28.3%, 1.048 30%, 1.047 31.6%, 1.043 33.5%, 1.02 40.8%, 1.01 44.5%, 1.004 48.2%, 1 52.2%, 0.998 59.5%, 1 78.7%, 1);
}

body {
  background: transparent;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

#skip-wrapper {
  display: none;
}

.img-wrapper, .music-wrapper {
  position: absolute;
  width: 250px;
}

audio {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.img-wrapper {
  display: flex;
  flex-direction: column;
  transition: transform var(--bounce-timing), box-shadow 0.2s linear, inset var(--bounce-timing), width var(--bounce-timing), height var(--bounce-timing);
  top: var(--top);
  left: var(--left);
}

.img-wrapper .img {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--darken-more);
  width: 100%;
  max-height: 300px;
  border-radius: var(--br-mid);
  transition: border-radius 0.4s ease, border-width var(--bounce-timing), transform 0.4s var(--bounce), background 0.2s linear, max-height var(--bounce-timing);
  cursor: zoom-in;
  background: transparent;
  user-select: none;
}

.img-wrapper .img img {
  width: 100%;
  object-fit: contain;
}

.img-wrapper.expanded .img {
  border-radius: 0;
  cursor: zoom-out;
  /* border-width: 0.5px; */
  background: black;
  /* backdrop-filter: blur(20px) */
  max-height: calc(100vh - 42px);
  flex-grow: 1;
}

.img-wrapper .img:active {
  transform: scale(0.975);
  border-radius: var(--br-mid);
}

.img-wrapper.expanded .img img {
  /* width: unset; */
  max-height: calc(100vh - 42px);
}

.img-wrapper.expanded {
  filter: drop-shadow(var(--shadow));
  transform: translate(-50%, -50%);
  left: calc(50% + (-1 * var(--offset-x)) + var(--left)) !important;
  top: calc(50% + (-1 * var(--offset-y)) + var(--top)) !important;
  z-index: 100;
  width: 100vw;
  height: 100vh;
}

.file-name {
  cursor: auto;
  margin-top: 5px;
  padding: 10px 25px;
  background: #271379;
  border-radius: var(--br-small);
  transition: font-size var(--bounce-timing), border-radius 0.4s ease, padding var(--bounce-timing), margin-top var(--bounce-timing), background 0.2s linear;
}

.img-wrapper.expanded .file-name {
  /* font-size: 0.5em; */
  /* padding: 10px 12.5px; */
  border-radius: 0;
  margin-top: 0;
}

.puzzle-button-wrapper {
  top: -25px;
  left: -25px;
  position: absolute;
  border-radius: var(--br-big);
  transition: background 0.1s linear, box-shadow 0.1s linear, scale var(--bounce-timing), inset var(--bounce-timing);
  z-index: 1;
}

.puzzle-button {
  transition: background 0.2s linear, inset var(--bounce-timing), transform var(--bounce-timing), opacity 0.1s linear;
  flex-shrink: 0;
  /* backdrop-filter: blur(20px); */
  /* -webkit-backdrop-filter: blur(20px); */
  transform: scale(0);
  opacity: 0;
  /* transform-origin: bottom right; */
}

.img-wrapper:hover .puzzle-button, .puzzle-button:focus-visible {
  transform: scale(1);
  opacity: 1;
}

.img-wrapper:hover .puzzle-button-wrapper, .img-wrapper:hover:has(.puzzle-button:focus-visible) .puzzle-button-wrapper {
  background: #271379;
  box-shadow: var(--shadow);
}

.img-wrapper.expanded .puzzle-button-wrapper {
  top: 10px;
  left: 10px;
}

.highlighted {
  animation: highlight 1.5s ease forwards;
}

@keyframes highlight {
  0%, 100% {
    outline: 0px solid yellow;
  }

  50% {
    outline: 10px solid yellow;
  }
}

.wormhole-wrapper {
  position: absolute;
  height: 400px;
  width: 615px;
}

.wormhole {
  height: 100%;
  mix-blend-mode: luminosity;
}

.wormhole > img {
  height: 100%;
  pointer-events: none;
}

.wormhole-wrapper {
  background-image: url("./space_background.png");
  background-position-x: calc(var(--x-pos) - var(--bg-x));
  background-position-y: calc(var(--y-pos) - var(--bg-y));
  background-size: var(--bg-size);
}