:root {
  --tt: black;
  --bg: white;
  --li: yellow;
  --ca: gray;
}


header, footer {
  background-color: var(--tt);
}

body {
  background-color: var(--bg);
  /*cursor: url('https://suaniu.neocities.org/cnmc.png') 16 16, auto;*/
  user-select: none;
}

a {
  color: var(--bg);
}

a:hover {
  color: var(--li);
  /*cursor: url('https://suaniu.neocities.org/cnmc.png') 16 16, auto;*/
  cursor: pointer;
}

.card {
  color: var(--bg);
  background-color: var(--tt);
}

.card:hover {
  color: var(--bg);
  background-color: var(--ca);
}

/* 1. 容器設定：負責背景、邊框與溢出隱藏 */
.marquee-container {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #222); /* 漸層黑底 */
  border-top: 2px solid #00f2ff;    /* 霓虹藍上邊框 */
  border-bottom: 2px solid #00f2ff; /* 霓虹藍下邊框 */
  padding: 12px 0;
  white-space: nowrap;
  position: relative;
}

/* 2. 文字內容：負責動畫與霓虹發光效果 */
.marquee-content {
  display: inline-block;
  font-family: "Microsoft JhengHei", sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 0 5px #00f2ff, 0 0 10px #00f2ff; /* 霓虹發光 */
  padding-left: 100%; /* 從右側完全進入 */
  animation: scroll-left 15s linear infinite;
}

/* 3. 互動功能：滑鼠移入時暫停 */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
  cursor: pointer;
  color: #ff0055; /* 懸停時變色，增加互動感 */
  text-shadow: 0 0 10px #ff0055;
}

/* 動畫路徑設定 */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}