:root {
  --salmon-01: rgb(249,226,199);
}

/* landing */

body:not(.skip-animation) .landing-wrapper {
  display: block;
}

.skip-animation .landing-wrapper {
  display: none;
}

.landing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: var(--salmon-01);
  cursor: none;
  z-index: 99;
}

.box {
  display: inline-block;
  transform: translate(-50%, -50%);
  margin: 10px;
}

.box-small {
  width: 2.5%;
  height: auto;
}

.box-medium {
  width: 9%;
  height: auto;
}

.upside-down {
  transform: translate(-50%, -50%) rotate(180deg);
}

.turn-left {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.turn-right {
  transform: translate(-50%, -50%) rotate(90deg);
}

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

.cursor {
  position: fixed;
  z-index: 999;
  transform: translate(-50%, -50%);
}

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

@media only screen and (max-width: 960px) {
  .box-small {
    width: 4%;
    height: auto;
  }
  
  .box-medium {
    width: 14%;
    height: auto;
  }

  .cursor.box-medium {
    width: 50%;
    height: auto;
  }
  
  .box-large {
    width: 50%;
    height: auto;
    transform: translate(-50%, -50%) rotate(25deg);
  }

  .cursor {
    position: fixed;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
  }
}