* {
  margin: 0;
  padding: 0;
}

body {
  background: #000000;
  min-height: 1500px;
}

/* 导航栏样式 */
.rd-navbar {
  background-color: transparent;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
}

.rd-navbar-main-outer {
  height: 0;
}

.rd-navbar,
.rd-navbar a,
.rd-navbar .dropdown-menu li a {
  color: #ffffff !important;
}

.rd-navbar .dropdown-menu {
  background-color: #000000;
}

.rd-navbar .dropdown-menu li {
  border-color: #ffffff;
}

/* 背景和段落样式 */
section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  background: linear-gradient(to top, #1A1A1A, transparent);
  width: 100%;
  height: 100px;
  z-index: 99;
}

section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1A1A1A;
  mix-blend-mode: overlay;
  z-index: 99;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 10em;
}

#road {
  z-index: 2;
}

#page-background {
    background-image: url('static/images/assets/bg.jpg'); /* 确保路径正确 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 这将使背景固定，即使页面滚动也不会移动 */
    min-height: 100vh; /* 确保至少覆盖整个视口高度 */
}

/* 修复月亮图片在宽高比小于1.3时被裁剪的问题 */
@media (max-aspect-ratio: 7/5) {
  #moon {
    object-fit: contain;
  }
}

/* 响应式样式 */
@media (max-width: 1200px) {
  #text {
    font-size: 4em;
  }
}

@media (max-width: 750px) {
  #text {
    font-size: 2em;
  }
}

@media (max-width: 640px) {
  #text {
    display: none;
  }
}