:root {
  font-family: 'LXGW WenKai', system-ui, -apple-system;
  font-weight: 400;
  --text: #1A1A1A;
  --back-color: rgba(255, 255, 255, .4)
}

html {
  min-height: 100svh;
  background-image: url(assets/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #D4D4D4;
    --back-color: rgba(0, 0, 0, 0.4);
    
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .2);
      pointer-events: none;
      z-index: 1;
    }
  }
}

/* 毛玻璃效果容器 */
.bl {
  background-color: var(--back-color);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  margin: 10px 0;
}

/* 个人信息区域 */
.info-p {
  width: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .1rem;
}

/* 头像样式 */
#avatar {
  width: 15vh;
  height: 15vh;
  border-radius: 50%;
  object-fit: cover;
  padding: 0;
  margin-top: 2rem;
}

/* 姓名样式 */
#name {
  line-height: 3rem;
  font-size: 3rem;
  font-family: 'Pacifico', sans-serif;
  color: red;
  animation: colorShift 5s linear infinite;
}

/* 色彩旋转动画 */
@keyframes colorShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* 位置信息 */
#location {
  font-size: 1rem;
  margin: 10px 0;
}

/* 位置图标 */
#location::before {
  content: '';
  display: inline-block;
  margin-right: .2rem;
  width: 1rem;
  height: 1rem;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIxIDNsLTYuNSAxOGEuNTUuNTUgMCAwIDEtMSAwTDEwIDE0bC03LTMuNWEuNTUuNTUgMCAwIDEgMC0xeiIvPjwvc3ZnPg==');
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
}

/* 水平分隔线 */
hr {
  border: none;
  height: 3px;
  background: var(--text);
}

/* 标签区域 */
#tag-line {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: 1.8rem;
  margin: 0.2rem;
}

#tag-icon {
  height: 1.8rem;
  width: auto;
  vertical-align: middle;
}

.tag-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding-left: 0;
}

.tag-li {
  list-style: none;
  padding: 2px 4px;
  margin: 0 0.2rem;
  background-color: #94B4F7;
  border-radius: 8px;
}

.tag-p {
  padding: 0.5rem 1rem;
}

/* 网站链接区域 */
#website {
  display: inline-flex;
  gap: 1rem;
}

.website {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  width: 15vh;
  margin: 0;
}

.web-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  width: 2.5rem;
  color: var(--text);
}