.intro {
  height: 105vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#ship-container {
  width: min(500px, 90vw);  /* 确保在小屏幕上不会太宽 */
  height: min(500px, 90vw); /* 保持宽高比 */
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fallback-ship {
    max-width: 100%;
    height: auto;
    margin: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.footer {
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: smaller;
  line-height: 2vh;
}

a {
  text-decoration: none;
  color:#fff;
}

.row-container {
  --indicator: 1;
}

.row {
  --rotation: -45deg;
  height: 0.875lh;
  transform: translateZ(-400px) rotateX(var(--rotation)) translateZ(400px);
  transform: translateZ(calc(400px * var(--indicator)));
  opacity: calc(1 - var(--indicator));
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='29' viewBox='0 0 15 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 24.88L9.896 4H12.272L4.376 24.88H2Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: round;
  margin-inline: 0.25ch; /* 减小移动设备上的间距 */
}


.container {
  perspective: 800px;
  font-size: 1.5rem;
  width: 100%;
  overflow: hidden;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
}
.container > * {
  transform-style: preserve-3d;
}
.container > * + * {
  margin-block-start: 0.125lh;
}

body {
  background: #0a0a0a;
  color: #c8fa21;
  font-family: "Source Code Pro", monospace, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100vw;
}

pre {
  font-family: "Source Code Pro", monospace, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: auto;
  width: 38em;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: -5.5em;
  margin-left: -19em;
}

@media screen and (max-width: 640px) {
  pre {
    font-size: x-small;
    width: 90vw;    /* 改为使用视口宽度 */
    margin-left: 5vw; /* 居中显示 */
  }
  .container{
    font-size: 1em;
    width: 100%;
  }
  .row {
    margin-inline: 0.25ch; /* 减小移动设备上的间距 */
  }
  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 为 iOS 设备提供平滑滚动 */
  }
}