/* ===== Base ===== */
:root {
  --card-width-sm: 400px;
  --card-width-md: 420px;
  --card-width-lg: 460px;
  --card-width-research: 700px;
  --card-width-blog: 600px;
  --card-width-photo: 600px;
  --card-width-apps: 420px;
  --card-width-link: 460px;
  --shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  --font: 'Merriweather', Arial, serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  cursor: url("../pic/cursor_pink.gif"), auto;

  background: url("https://kate0115.net/pic/pattern.png") repeat;
  background-color: gray !important;
}


/* 2. 顶层 (#bg-layer)：预先反色好的黑背景，默认看不见 */
#bg-layer {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;

  background: url("https://kate0115.net/pic/pattern.png") repeat;

  filter: invert(100%);
  opacity: 0;

  z-index: 0;

  pointer-events: none;
}



#copyright {
  width: 100%; color: grey; text-align: center; font-family: var(--font);
}

/* Links */
a:link, a:visited { color: black; text-decoration: none; }
.a-hover:hover { color: white; background: pink; border-radius: 5px; }

/* Hide Mastodon identity link */
#mastodon { visibility: hidden; }

/* Buttons / Inputs */
button { background: transparent; border: none; padding: 0; cursor: pointer; }
input {
  border: none; outline: none; font-size: 16px; font-family: var(--font); background: transparent;
}

/* Marker blink target */
#marker { color: black; font-size: 13px; }

/* Guess text */
#guess {
  width: 460px; height: 25px; text-align: center; margin: 0 auto;
  color: pink; font-size: 16px; font-family: var(--font);
}

/* ===== Scrollbar ===== */
/* 1. 使用通配符 *，不管滚动条长在哪个元素上，统统生效 */
*::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  background: transparent !important; /* 关键：防止浏览器默认的灰色背景 */
}

/* 2. 轨道强制透明 */
*::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 3. 滑块样式 (半透明黑) */
*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  background-clip: content-box !important;
  border: 1px solid transparent !important; /* 让滑块稍微细一点 */
}

/* 4. 鼠标悬停 */
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* 5. 针对 Firefox 的修正 */
section, article, main {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  background: gray;
}

/* ===== Return button ===== */
.return-btn {
  position: absolute;
  top: 7px;      /* 距离顶部 15px */
  left: 20px;     /* 距离左边 20px */
  z-index: 200;   /* 必须比 iframe 高，否则点不到 */
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  color: #dcdcde;    /* 灰色文字 */
  font-weight: bold;
  transition: color 0.3s;
}

.return-btn:hover {
  color: #4f94d4;
}

/* ===== Google logo colors ===== */
.google-logo {
    font-size: 100px; /* Logo 大小 */
    font-weight: bold;
    letter-spacing: -4px; /* 字母间距稍微紧凑一点，更像原版 */
    user-select: none; /* 防止被选中，像图片一样 */
  }

  /* 颜色定义 - 使用 Google 官方 Hex 色值 */
  .blue {
    color: #4285F4;
  }

  .red {
    color: #EA4335;
  }

  .yellow {
    color: #FBBC05;
  }

  .green {
    color: #34A853;
  }