html,
body {
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  overflow: hidden;                   
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: rgb(245, 245, 245);
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overscroll-behavior: none;
}
* {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Hiragino Sans',
    sans-serif;
  box-sizing: border-box;
  line-height: 100%;
  -webkit-tap-highlight-color: transparent;
}
p {
  margin: 0;
  word-break: keep-all;
  word-wrap: break-word;
}

#main {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

#cover {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  background: white;
  transform: translate3d(0, -150%, 0);
  transition: transform 0.2s cubic-bezier(0.35, 0, 1, 0.65);
  z-index: 10;
  will-change: transform, opacity;
  contain: paint;
}
#cover.covered {
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(0, 0.35, 0.65, 1);
}
#cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#display {
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  background: rgb(245, 245, 245);
  transition:
    transform 0.5s cubic-bezier(0, 0.35, 0.65, 1),
    opacity 0.5s cubic-bezier(0, 0.35, 0.65, 1),
    filter 0.5s cubic-bezier(0, 0.35, 0.65, 1);
  will-change: transform, opacity, filter;
  transform: translate3d(0, 0, 0);
  contain: paint;
}
#display.covered {
  transform: scale(0.5);
  opacity: 0;
  filter: blur(16px);
  transition:
    transform 0.5s cubic-bezier(0.35, 0, 1, 0.65),
    opacity 0.5s cubic-bezier(0.35, 0, 1, 0.65),
    filter 0.5s cubic-bezier(0.35, 0, 1, 0.65);
  pointer-events: none;
}
#display .messages {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
#display .messages .wrapper {
  margin: 0 auto;
  max-width: 100rem;
  padding-left: 3rem;
  padding-right: 2rem;
  padding-top: 200vh;
  padding-bottom: 200vh;
}
#display .message {
  margin-bottom: 4.5rem;
  filter: blur(4px);
  opacity: 0.5;
}
#display .message.selected {
  filter: blur(0px);
  opacity: 1;
}
#display .message.translation {
  scroll-margin-top: 12rem;
}
#display .message .source {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(150, 150, 150);
  line-height: 110%;
  margin-bottom: 0.5rem;
}
#display .message .target {
  font-size: 4.5rem;
  font-weight: 700;
  color: rgb(40, 40, 40);
  line-height: 110%;
}
#display .message.image {
  scroll-margin-top: 6rem;
}
#display .message .title {
  font-size: 4.5rem;
  font-weight: 700;
  color: rgb(40, 40, 40);
  line-height: 110%;
  text-align: center;
  margin-bottom: 0.5rem;
}
#display .message .imgbox {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#display .message .imgbox img {
  height: 100%;
  object-fit: contain;
  border-radius: 1.5rem;
}

.effect {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  color: transparent;
}
.effect > .abs {
  left: 0;
  position: absolute;
}

.effect.dsc {
  perspective: 500px;
}
.effect.dsc > .abs {
  color: hotpink;
  transform-origin: 47% 58%;
  will-change: transform, filter;
  animation: dsc-chaos 680ms steps(1, end) infinite;
  text-shadow:
    0px 0px 10px black,
    0px 0px 20px red;
}

@keyframes dsc-chaos {
  0% {
    transform: translate3d(0, 0, 0) rotateX(12deg) rotateY(9deg) rotateZ(2deg)
      skew(0deg) scale(1);
    filter: blur(0);
  }
  9% {
    transform: translate3d(-0.09em, 0.04em, 0.08em) rotateX(-31deg)
      rotateY(24deg) rotateZ(-7deg) skewX(13deg) scale(1.08, 0.91);
    filter: blur(0.6px);
  }
  18% {
    transform: translate3d(0.07em, -0.08em, -0.05em) rotateX(47deg)
      rotateY(-18deg) rotateZ(11deg) skewY(-9deg) scale(0.92, 1.12);
    filter: blur(0);
  }
  31% {
    transform: translate3d(-0.03em, 0.1em, 0.14em) rotateX(-14deg)
      rotateY(39deg) rotateZ(-14deg) skew(8deg, -5deg) scale(1.13, 0.86);
    filter: blur(1px);
  }
  43% {
    transform: translate3d(0.11em, 0.02em, -0.12em) rotateX(63deg)
      rotateY(-33deg) rotateZ(5deg) skewX(-16deg) scale(0.88, 1.07);
    filter: blur(0.3px);
  }
  57% {
    transform: translate3d(-0.12em, -0.05em, 0.04em) rotateX(-42deg)
      rotateY(-12deg) rotateZ(16deg) skewY(12deg) scale(1.06, 0.94);
    filter: blur(0.8px);
  }
  68% {
    transform: translate3d(0.04em, 0.09em, 0.16em) rotateX(28deg) rotateY(51deg)
      rotateZ(-4deg) skew(-11deg, 7deg) scale(0.9, 1.14);
    filter: blur(0);
  }
  82% {
    transform: translate3d(0.13em, -0.03em, -0.08em) rotateX(-56deg)
      rotateY(17deg) rotateZ(13deg) skewX(19deg) scale(1.15, 0.89);
    filter: blur(0.5px);
  }
  93% {
    transform: translate3d(-0.05em, -0.1em, 0.1em) rotateX(19deg)
      rotateY(-46deg) rotateZ(-10deg) skewY(-14deg) scale(0.95, 1.09);
    filter: blur(1.1px);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateX(12deg) rotateY(9deg) rotateZ(2deg)
      skew(0deg) scale(1);
    filter: blur(0);
  }
}

.effect.delu > .abs {
  color: black;
  text-shadow: 0px 0px 5px purple;
  font-family: serif;
}

#display .blurfilter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#display .blurs {
  width: 100%;
  height: 6rem;
  position: absolute;
  left: 0;
}
#display .blurs.top {
  top: 0;
}
#display .blurs.bottom {
  bottom: 0;
  transform: rotate(180deg);
}
#display .blurs .blur,
#display .blurs .grad {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#display .blurs .blur:nth-child(1) {
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 30%
  );
}
#display .blurs .blur:nth-child(2) {
  backdrop-filter: blur(1px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 5%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0) 40%
  );
}
#display .blurs .blur:nth-child(3) {
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 0) 55%
  );
}
#display .blurs .blur:nth-child(4) {
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 75%
  );
}
#display .blurs .blur:nth-child(5) {
  backdrop-filter: blur(8px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}
#display .blurs .blur:nth-child(6) {
  backdrop-filter: blur(16px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 1) 100%
  );
}
#display .blurs .grad {
  background: linear-gradient(
    to top,
    rgba(245, 245, 245, 0) 0%,
    rgba(245, 245, 245, 1) 100%
  );
}