@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

:root {
  font-size: 15px;
}

body {
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  min-height: 100vh;
  /* 黑白渐变背景 */
  background-color: #f5f5f5;
  background-image:        
    radial-gradient(closest-side, rgba(220, 220, 220, 0.9), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(180, 180, 180, 0.7), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(120, 120, 120, 0.5), rgba(255, 255, 255, 0));
  background-size: 
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax;
  background-repeat: repeat;
  animation: 10s movement linear infinite;
  position: relative;
  color: #222; /* 确保默认文字颜色为深色 */
}

/* 通过伪元素创建浮动矩形 */
body::before,
body::after,
body div::before,
body div::after {
  content: "";
  position: fixed;
  background: rgba(255, 255, 255, 0.60); /* 降低透明度确保文字可读 */
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px);
  pointer-events: none;
  z-index: -1; /* 确保在内容下方 */
  animation: float 25s infinite ease-in-out;
}

body::before {
  width: 120px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  transform: rotate(15deg);
}

body::after {
  width: 150px;
  height: 100px;
  top: 60%;
  left: 70%;
  animation-delay: 5s;
  transform: rotate(-10deg);
}

body div::before {
  width: 80px;
  height: 120px;
  top: 30%;
  left: 50%;
  animation-delay: 10s;
  transform: rotate(5deg);
}

body div::after {
  width: 200px;
  height: 60px;
  top: 70%;
  left: 30%;
  animation-delay: 15s;
  transform: rotate(-15deg);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-30px) translateX(10px) rotate(5deg);
  }
  40% {
    transform: translateY(20px) translateX(-15px) rotate(-5deg);
  }
  60% {
    transform: translateY(-10px) translateX(20px) rotate(3deg);
  }
  80% {
    transform: translateY(15px) translateX(-10px) rotate(-3deg);
  }
}

@keyframes movement {
  0%, 100% {
    background-size: 
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax;
  }
  25% {
    background-size: 
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0vmax -20vmax;
  }
  50% {
    background-size: 
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0vmax;
  }
  75% {
    background-size: 
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0vmax;
  }
}

/* 内容区域增强可读性 */
#navigator, .blogStats, .content-area {
  background-color: rgba(245, 245, 245, 0.7); /* 半透明白色背景 */
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

a {
  color: #111 !important;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #000 !important;
  text-decoration: underline;
}

td.CalTodayDay {
  font-size: 17px !important;
  font-weight: 100 !important;
  color: #000 !important;
}