:root {
  --cursor-x: 0px;
  --cursor-y: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background-color: #f2eee4;
  background-image: url("t%C5%82o.png");
  background-position: center;
  background-repeat: repeat;
  background-size: 2500px 2500px;
  color: #2f1d13;
  font-family: Georgia, "Times New Roman", serif;
}

body::before {
  content: none;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(24px, 7vw, 96px);
}

.title-art,
.promise-art {
  display: block;
  position: absolute;
  left: 50%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 18px rgba(50, 25, 12, 0.18));
}

.title-art {
  top: 42vh;
  width: min(88vw, 1179px);
  max-width: 1179px;
  transform: translate3d(calc(-50% + var(--cursor-x)), calc(-50% + var(--cursor-y)), 0);
  transition: filter 250ms ease;
  will-change: transform;
}

.promise-art {
  top: calc(42vh + 43px + clamp(132px, 22vh, 188px));
  width: min(46vw, 614px);
  max-width: 614px;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 12px rgba(50, 25, 12, 0.14));
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .page {
    padding-inline: 22px;
  }

  .title-art {
    width: min(90vw, 1179px);
    transform: translate3d(-50%, -50%, 0);
  }

  .promise-art {
    top: calc(42vh + 43px + 118px);
    width: min(56vw, 614px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-art {
    transform: translate3d(-50%, -50%, 0);
  }
}