.not-found {
  --inspector-width: 0;

  #page-main {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .not-found {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      container-type: size;

      .bouncing-404-x {
        position: absolute;
        inset: 0 auto auto 0;
        width: min(16rem, calc(100% - 2rem));
        animation: bounce-404-x 13s -6.5s linear infinite alternate;
      }

      .bouncing-404-y {
        display: block;
        width: 100%;
        animation: bounce-404-y 9s -4.5s linear infinite alternate;
      }
    }

    #inspector {
      display: none;
    }
  }
}

@keyframes bounce-404-x {
  to {
    transform: translateX(calc(100cqw - 100%));
  }
}

@keyframes bounce-404-y {
  to {
    transform: translateY(calc(100cqh - 100%));
  }
}

@media (prefers-color-scheme: light) {
  .bouncing-404-y {
    filter: invert(1);
  }
}