/*
    很多 UI 喜欢设置未 font-size:0.25em（以 4px 为一个网格），即全局：1rem = 4px; 1em = 14px（浏览器默认）
    但我还是喜用 1rem = 10px
*/
/* 自定义变量，通过 var(--变量名) 调用 */
:root {
  font-size: 62.5%; /* 全局的基本单位 */
  --color-card-border: #f3f1f1;
  /* 品牌色*/
  --color-yellow: #f8d331;
  --color-yellow-font: #8b4712;
  --color-orange: rgb(251, 100, 86);

  /* 中性色板 */
  --color-gray-1: #fafafa;
  --color-gray-2: #f5f5f5;
  --color-gray-3: #f0f0f0;
  --color-gray-4: #d9d9d9;
  --color-gray-5: #bfbfbf;
  --color-gray-6: #a1a0a0;
  --color-gray-7: #8c8c8c;
  --color-gray-8: #595959;
  --color-gray-9: #434343;
  --color-gray-10: #333333;
  --color-gray-11: #262626;
  --color-gray-12: #1f1f1f;

  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

  /* 颜色变量别名 */
  --layout-header-height: 50px;
  --hover-item-bgColor: var(--color-brand-2);
}

li {
  list-style: none;
}

* {
  box-sizing: border-box; /* 元素的总高度和宽度包含内边距和边框 */
  padding: 0;
  margin: 0;
}

html,
body {
  background: var(--color-common-globalBg);
  height: 100%;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

main {
  height: 100%;
  padding-top: var(--layout-header-height);
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #f68;
}

a:hover {
  color: var(--color-brand-secondary);
  color: #f89;
}

img {
  max-width: 100%;
  border-radius: 4px;
}

/* 全局通用样式 */
.common-button-middle {
  font-size: 2rem;
  background: var(--color-brand-main);
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 4rem;
  cursor: pointer;
}

.common-button-middle:hover {
  background: #333;
  color: white;
}

/* 单边阴影 - 下 */
.boxShadowBottom1px {
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px;
}

/* 单边阴影 - 上 */
.boxShadowTop2px {
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}

/* 荧光棒边框 start (注意荧光棒 z-index 设置未了 101，要在荧光棒区域显示内容需要 z-index 大于 101) */
@keyframes glowingInTheDark {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.lightStickBoardAfter {
  z-index: 101;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  left: 0px;
  top: 0px;
}

/* 荧光棒边框 end */

.gray-font {
  color: #434b57;
  opacity: 0.8;
}

/* 通用布局 */
.row1column2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.row1column2 > * {
  width: 49%;
}

@import url("global-mobile.css");