:root {
  --bg:rgb(255, 255, 255);
  --bg-blur: rgba(250, 250, 246, 0.4);
}
/*
这段CSS代码定义了根元素的背景颜色和带模糊效果的导航栏背景颜色。具体来说，--bg变量定义了网站主要背景颜色为RGB值(250, 250, 246)，
而--bg-blur变量定义了带模糊效果的导航栏背景颜色为RGBA值(250, 250, 246, 0.4)。
最后，body选择器使用var()函数将--bg变量应用于整个网站的主要背景。如果您想要更改网站的背景颜色，您可以在此文件中编辑--bg变量的值为所需的颜色即可*/

body { /* Body */
  background: var(--bg); /* 使用var()函数将--bg变量应用于整个网站的主要背景 */
}
  
  /* Navbar */ /* 导航栏 */
  
  .Navbar { /* 导航栏 */
  display: flex; /* 将导航栏的子元素排成一行 */
  align-items: center; /* 将导航栏的子元素垂直居中 */
  font-size: 16px; /* 导航栏的字体大小 */
  position: fixed; /* 将导航栏固定在屏幕上方 */
  top: 0; /* 将导航栏固定在屏幕上方 */
  left: 0; /* 将导航栏固定在屏幕上方 */
  z-index: 999; /* 将导航栏固定在屏幕上方 */
  width: 100%; /* 将导航栏的宽度设置为100% */
  height: 55px; /* 将导航栏的高度设置为50px */
  padding: 10px 20px; /* 将导航栏的内边距设置为10px 20px */
  /* Background blur stuff. */ /* 背景模糊效果 */
  background-color: var(--bg-blur); /* 将导航栏的背景颜色设置为--bg-blur变量的值 */
  -webkit-backdrop-filter: blur(20px); /* 使用-webkit-backdrop-filter属性为导航栏添加背景模糊效果 */
  backdrop-filter: blur(20px); /* 使用backdrop-filter属性为导航栏添加背景模糊效果 */
  overflow-x: auto; /* 将导航栏的子元素溢出部分设置为自动 */
} 

.Navbar a { /* 导航栏的链接 */
  color: inherit; /* 将导航栏的链接的颜色设置为继承 */
  text-decoration: none; /* 将导航栏的链接的文本装饰设置为无 */
} 

.Navbar a:last-child > .Navbar__Btn { /* 导航栏的最后一个链接的子元素 */
  /* .nav padding 20px */ /* 将导航栏的内边距设置为20px */
  margin-right: 20px; /* 将导航栏的外边距设置为20px */
}

.Navbar__Btn { /* 导航栏的按钮 */   
  border-radius: 0.25rem; /* 将导航栏的按钮的边框半径设置为0.25rem */
  padding: 0 6px; /* 将导航栏的按钮的内边距设置为0 6px */
  line-height: 1.8125; /* 将导航栏的按钮的行高设置为1.8125 */
  transition: background 30ms ease-in-out 0s; /* 将导航栏的按钮的背景颜色的过渡效果设置为30ms ease-in-out 0s */
  /* For centering inline image */ /* 用于居中内联图像 */
  display: flex; /* 将导航栏的按钮的子元素排成一行 */
  align-items: center; /* 将导航栏的按钮的子元素垂直居中 */
}

.Navbar__Btn:hover { /* 导航栏的按钮的鼠标悬停效果 */
  background: rgba(55, 53, 47, 0.08); 
}

.Navbar__Btn:active { /* 导航栏的按钮的鼠标按下效果 */
  background: rgba(55, 53, 47, 0.16);
}

.Navbar__Btn > span { /* 导航栏的按钮的子元素 */
  white-space: nowrap; /* 将导航栏的按钮的子元素的空白设置为不换行 */
} 

.Navbar__Btn > span:not(:first-child) { /* 导航栏的按钮的子元素的非第一个子元素 */
  margin-left: 6px; 
}

.Navbar__Delim { /* 导航栏的分隔符 */
  margin: 0 3px; 
  color: rgba(55, 53, 47, 0.4);
}

/* Common */

.Header,
.PageRoot,
.ArticleList { /* 头部，页面根，文章列表 */
  /* width: 900px; */
  width: 970px;
  max-width: 100%;
  margin: 0px auto;
  padding: 0px 96px; 
  margin-right:10%;
}

/* For mobile devices */ /* 用于移动设备 */
@media only screen and (max-width: 900px) {
  .Header,
  .PageRoot,
  .ArticleList,
  .utterances { /* 头部，页面根，文章列表 */
    max-width: 87.5%;
    padding-left: 0px;
    padding-right: 0px;
    /* margin-right: 25%; */
  }
}

/* Header */

.Header a { /* 头部的链接 */
  color: inherit; /* 将头部的链接的颜色设置为继承 */
  text-decoration: none; /* 将头部的链接的文本装饰设置为无 */
}

.Header__Cover { /* 头部的封面 */
  position: absolute; /* 将头部的封面的位置设置为绝对定位 */
  top: 0;
  right: 0;
  /* Firefox need this while Chrome doesn't. */ /* Firefox需要这个，而Chrome不需要。 */
  left: 0;
  z-index: -1;
}

.Header__Cover > img { /* 头部的封面的图片 */
  height: calc(30vh + 50px); /* 将头部的封面的图片的高度设置为calc(30vh + 50px) */
  width: 100%; 
  object-fit: cover; /* 将头部的封面的图片的对象适配设置为覆盖 */
}

.Header__Spacer { /* 头部的间距 */
  margin-top: 30vh;
}

.Header__Spacer--NoCover { /* 头部的间距--无封面 */
  margin-top: calc(50px + 2.5rem);
}

.Header__Icon { /* 头部的图标 */
  line-height: 1.1; /* 将头部的图标的行高设置为1.1 */
  /* On Android Firefox, emoji can't be displayed if font-size > 77px. */ /* 在Android Firefox上，如果字体大小大于77px，则无法显示表情符号。 */
  font-size: 75px;
}

.Header__Title { /* 头部的标题 */
  margin-top: -1rem;
  margin-bottom: 0.25em;
  line-height: 1.2;
  text-align: left;
  font-size: 2.5em;
  letter-spacing: -0.005em;
  background-color: rgba(255, 255, 255, 0.55); /* 设置背景颜色为半透明灰色 */
  border-radius: 15px
}

.Header > *:last-child { /* 头部的最后一个子元素 */
  margin-bottom: 2.5rem;
}

.Header__DescBigQuoteMark { /* 头部的大引号 */
  font-size: 1.2em;
  line-height: 0;
}

/* DateTagBar */

.DateTagBar { /* 日期标签栏 */
  font-size: 0.9rem;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
}

.DateTagBar__Item {  /* 日期标签栏的项目 */
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 2px 6px;
  border-radius: 0.25rem;
}

.DateTagBar__Date { /* 日期标签栏的日期 */
  color: hsla(45, 2%, 40%, 1);
  padding-left: 0px;
  padding-right: 8px;
}

.DateTagBar__Tag { /* 日期标签栏的标签 */
  font-size: 0.85rem;
  white-space: nowrap;
}

.DateTagBar__Tag--default { /* 日期标签栏的标签--默认 */
  color: rgb(50, 48, 44);
  background: rgba(227, 226, 224, 0.5);
}

.DateTagBar__Tag--gray { /* 日期标签栏的标签--灰色 */
  color: rgb(50, 48, 44);
  background: rgb(227, 226, 224);
}

.DateTagBar__Tag--brown { /* 日期标签栏的标签--棕色 */
  color: rgb(68, 42, 30);
  background: rgb(238, 224, 218);
}

.DateTagBar__Tag--orange {
  color: rgb(73, 41, 14);
  background: rgb(250, 222, 201);
}

.DateTagBar__Tag--yellow {
  color: rgb(64, 44, 27);
  background: rgb(253, 236, 200);
}

.DateTagBar__Tag--green {
  color: rgb(28, 56, 41);
  background: rgb(219, 237, 219);
}

.DateTagBar__Tag--blue {
  color: rgb(24, 51, 71);
  background: rgb(211, 229, 239);
}

.DateTagBar__Tag--purple {
  color: rgb(65, 36, 84);
  background: rgb(232, 222, 238);
}

.DateTagBar__Tag--pink {
  color: rgb(76, 35, 55);
  background: rgb(245, 224, 233);
}

.DateTagBar__Tag--red {
  color: rgb(93, 23, 21);
  background: rgb(255, 226, 221);
}

.DateTagBar__Tag > a { /* 日期标签栏的标签的链接 */
  border: none; /* 将日期标签栏的标签的链接的边框设置为无 */
}

/* Article */

.Article { /* 文章 */
  margin: 2rem 0; /* 将文章的外边距设置为2rem 0 */
}

.Article a { /* 文章的链接 */
  color: inherit;
  text-decoration: none;
}

.Article__Title { /* 文章的标题 */
  margin: 0; 
  padding-bottom: 0.5rem;
  line-height: 1.5; /* 将文章的标题的行高设置为1.5 */
  font-size: 1.4rem; /* 将文章的标题的字体大小设置为1.4rem */
  font-weight: 600; /* 将文章的标题的字体粗细设置为600 */
  letter-spacing: -0.01em;  /* 将文章的标题的字母间距设置为-0.01em */
}

.Article__Title > a { /* 文章的标题的链接 */
  border-bottom: 2px solid hsl(45, 8%, 85%); /* 将文章的标题的链接的下边框设置为2px solid hsl(45, 8%, 85%) */
} 

.Article__Title > a:not(:first-child) { /* 文章的标题的链接的非第一个子元素 */
  margin-left: 5px; 
}

.Article__Title > a:hover { /* 文章的标题的链接的鼠标悬停效果 */
  border-bottom: 2px solid hsl(45, 8%, 55%); /* 将文章的标题的链接的下边框设置为2px solid hsl(45, 8%, 55%) */
}

.Article__Desc { /* 文章的描述 */
  padding-bottom: 0.5rem;
}

/* PageRoot (content body) */

.PageRoot { /* 页面根 */
  padding-bottom: 0;
  padding-top: 0;
  /* margin-right:10%; */
}

/* Footer */

.Footer { /* 页脚 */
  display: flex; /* 将页脚的子元素排成一行 */
  flex-wrap: wrap; /* 将页脚的子元素换行 */
  align-items: center; /* 将页脚的子元素垂直居中 */
  justify-content: center; /* 将页脚的子元素水平居中 */
  font-size: 14px;
  padding: 5rem 3rem; /* 将页脚的内边距设置为1rem 3rem */
  color: rgba(55, 53, 47, 0.6);
}

.Footer > div:nth-child(2) { /* 页脚的第二个子元素 */
  margin: 0 3px;
}

.Footer a { /* 页脚的链接 */
  color: rgba(55, 53, 47);
}


@media only screen and (max-width: 680px) { /* 用于移动设备 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  .Navbar {
    box-shadow: rgba(15, 15, 15, 0.1) 0px 1px 0px, transparent 0px 0px 0px;
  }
  .Navbar__Btn {
    font-size: 14px;
  }
  .Header__Icon {
    font-size: 55px;
  }
  .Header__Cover > img {
    height: calc(30vh + 30px);
  }
}

/* 用于不支持背景模糊效果的浏览器 */
@supports (not (backdrop-filter: blur(20px))) and 
  (not (-webkit-backdrop-filter: blur(20px))) {  
  .Navbar { 
    background-color: var(--bg);
  }
}

.inline-img-icon { /* 内联图像图标 */
  height: 1.2em;
  /* Setting width prevents content shifting after image loaded. */
  width: 1.2em;
  vertical-align: sub;
}