/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url(animate.css);
/*消除默认样式，实现页面的初始化，以便于后续的样式设置和布局*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

/* 将有序列表（ol）和无序列表（ul）的项目符号样式清除，使其无默认样式 */
ol, ul {
  list-style: none;
}

/* 清除引用（blockquote）和短引用（q）的默认引号样式 */
blockquote, q {
  quotes: none;
}

/* 移除blockquote元素前后生成的引号 */
blockquote:before, blockquote:after {
  content: '';
  content: none;
}

/* 移除q元素前后生成的引号 */
q:before, q:after {
  content: '';
  content: none;
}

/* 设置body元素的背景色为#f9b433（一种橙黄色） */
body {
  background: #000000;
  /* 针对Webkit内核（如Safari、Chrome）设置点击高亮颜色为透明，避免影响元素样式 */
  -webkit-tap-highlight-color: rgba(210, 208, 208, 0);
  /* 设置body元素内文本的行高为1，即字体大小本身的高度 */
  line-height: 1;
}
/* 设置body元素宽度为100%，并启用IE兼容的hasLayout属性（*zoom: 1）以解决某些布局问题 */
body {
  width: 100%;
  *zoom: 1;
}

/* 使用伪元素:before和:after结合display: table清除浮动，确保包含浮动元素的body元素能够正确闭合 */
body:before, body:after {
  content: "";
  display: table;
}
body:after {
  clear: both;
}

/* 设置html和body元素的高度均为100%，使页面高度与视口高度相同 */
html, body {
  height: 100%;
}

/* 重复设置html元素的高度为100%，并添加max-height: 100%以防止某些情况下高度超出 */
html {
  height: 100%;
  max-height: 100%;
}

/* 设置body元素的字体家族、字体大小、颜色及抗锯齿属性 */
body {
  /* 字体家族，按优先级从高到低列出多个备选字体 */
  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  /* 基准字体大小为1em */
  font-size: 1em;
  /* 文本颜色为#fffefe（接近白色） */
  color: #ffffff;
  /* 启用WebKit内核的抗锯齿功能，提高文本平滑度 */
  -webkit-font-smoothing: antialiased;
}

/* 设置用户选中文本（::selection）的背景色为#d400ff（一种紫色），仅适用于Webkit内核（如Chrome、Safari） */
::selection {
  background: #3400ee;
}

/* 设置用户选中文本（::-moz-selection）的背景色为#ff7f00（一种橙色），仅适用于Firefox */
::-moz-selection {
  background: #ae5700;
}

/* 为所有链接（a）设置无下划线（text-decoration: none）、默认颜色为#DF9C81，并添加鼠标悬停（hover）时的过渡效果 */
a {
  text-decoration: none;
  color: #79c7ff;
}
a:hover {
  color: #0077ff;
  /* 添加过渡效果，持续时间0.5秒，适用于不同浏览器前缀 */
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
}

/* 为h1至h5标题元素设置共同的样式，包括顶部和底部外边距、字体家族、字体粗细、颜色和抗锯齿属性 */
h1,
h2,
h3,
h4,
h5,
h5 {
  margin-top: 1.0em;
  margin-bottom: 0.5em;
  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-weight: lighter;
  color: #333333;
  -webkit-font-smoothing: antialiased;
}

/* 为h1标题单独设置顶部外边距为0、字体大小、行高和字母间距 */
h1 {
  margin-top: 0;
  font-size: 1.8em;
  line-height: 1.2em;
  letter-spacing: 0.05em;
}

/* 设置h2标题的字体大小 */
h2 {
  font-size: 1.6em;
}

/* 设置h3标题的字体大小 */
h3 {
  font-size: 1.4em;
}

/* 设置h4标题的字体大小 */
h4 {
  font-size: 1.2em;
}

/* 设置h5标题的字体大小 */
h5 {
  font-size: 1.1em;
}

/* 设置h6标题的字体大小 */
h6 {
  font-size: 1em;
}

/* 为段落（p）设置底部外边距和行高 */
p {
  margin-bottom: 1.3em;
  line-height: 1.7em;
}

/* 为加粗文本（strong）设置粗体（bold） */
strong {
  font-weight: bold;
}
/* 设置斜体样式为默认的em元素样式 */
em {
  font-style: italic;
}

/* 为blockquote元素设置整体样式，包括内边距、外边距、字体家族、字体粗细、大小、边框和背景色 */
blockquote {
  padding: 0px 10px; /* 内边距，左右10px，上下0px */
  margin: 0 0 10px; /* 外边距，上边距为0，左右边距为0，下边距为10px */
  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 字体家族 */
  font-weight: normal; /* 字体粗细为正常 */
  font-size: 1em; /* 字体大小为1em */
  border-left: 3px solid #DF9C81; /* 左边框为3像素宽的实线，颜色为#DF9C81 */
  background: white; /* 背景颜色为白色 */
}

/* 为blockquote内的最后一个段落（p:last-child）设置下外边距为0，避免与blockquote的下外边距叠加 */
blockquote p:last-child {
  margin-bottom: 0;
}
/* 设置上标（sup）元素的字体大小为0.8em，并将其垂直对齐方式设为“text-bottom”，使其与文本基线的下方对齐 */
sup {
  font-size: 0.8em;
  vertical-align: text-bottom;
}

/* 为有序列表（ol）和无序列表（ul）设置整体外边距，其中下外边距为0.3em，左外边距为1em */
ol, ul {
  margin: 0 0 0.3em 1em;
}

/* 为ol和ul内的列表项（li）设置外边距和行高 */
ol li, ul li {
  margin: 0 0 0.2em 0; /* 上下外边距为0，左右外边距为0，下外边距为0.2em */
  line-height: 1.6em; /* 行高为1.6em */
}

/* 为嵌套的ol和ul（ol ol, ol ul, ul ol, ul ul）设置外边距，其中上外边距为0.1em，下外边距为0.2em，左外边距为2em */
ol ol, ol ul, ul ol, ul ul {
  margin: 0.1em 0 0.2em 2em;
}

/* 设置有序列表（ol）的列表项标记类型为阿拉伯数字（decimal） */
ol {
  list-style-type: decimal;
}

/* 设置无序列表（ul）的列表项标记类型为实心圆点（disc） */
ul {
  list-style-type: disc;
}

/* 为表格（table）的表头（thead）中第一行（tr:first-child）设置颜色、边框和文本居中对齐 */
thead tr:first-child {
  color: #d57c58;
  border: 1px solid #DDDDDD;
  text-align: center; }

/* 设置表格表头单元格（th）的字体粗细为粗体（bold） */
th {
  font-weight: bold;
}

/* 为表格中的第一个子元素（th:first-child和td:first-child）设置内边距和边框样式 */
th:first-child, td:first-child {
  padding: 5px 10px 5px 10px; /* 上下内边距为5px，左右内边距为10px */
  border: 1px solid #DDDDDD; /* 边框为1像素宽的实线，颜色为#DDDDDD */
}

/* 为表格表头的最后一行（thead tr:last-child）中的th元素设置边框样式 */
thead tr:last-child th {
  border: 1px solid #DDDDDD; /* 边框为1像素宽的实线，颜色为#DDDDDD */
}

/* 为表格主体（tbody）中的所有数据单元格（td）设置底部边框样式和字体大小 */
tbody td {
  border-bottom: 1px solid #DDDDDD; /* 底部边框为1像素宽的实线，颜色为#DDDDDD */
  font-size: .85em; /* 字体大小为0.85em */
}

/* 为表格中的最后一个子元素（td:last-child）设置右侧内边距 */
td:last-child {
  padding-right: 10px; /* 右内边距为10px */
}

/* 为表格行（tr）和数据单元格（td）设置通用内边距和边框样式 */
tr, td {
  padding: 5px 10px; /* 上下内边距为5px，左右内边距为10px */
  border: 1px solid #DDDDDD; /* 边框为1像素宽的实线，颜色为#DDDDDD */
}

table thead tbody {
  vertical-align: middle; }
/* 为.date、.time、.author、.tags类选择器设置相同的字体大小和颜色 */
.date,
.time,
.author,
.tags {
  font-size: .8em;
  color: #c7c7c7; }
  .date a,
  .time a,
  .author a,
  .tags a {
    color: #666666; }
    .date a:hover,
    .time a:hover,
    .author a:hover,
    .tags a:hover {
    color: #d06c44; }

.excerpt {
  margin: 0;
  font-size: .9em;
  color: #999999; }

.intro {
  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 1.2em;
  font-weight: lighter;
  color: #999999; }

.block-heading {
  display: inline;
  float: left;
  width: 940px;
  margin: 0 10px;
  position: relative;
  bottom: -15px;
  font-size: .8em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px; }

/* 为.label类选择器设置样式，该类通常应用于标签或标记元素 */
.label {
  /* 设置定位方式为相对定位（relative），以便后续可能的绝对定位子元素相对于此元素定位 */
  position: relative;
  /* 设置元素为内联块级元素，使其能在行内显示，同时允许设置宽高 */
  display: inline-block;
  /* 设置内边距，上下为8px，左右为18px，为标签提供一定的空间 */
  padding: 8px 18px 9px 18px;
  /* 设置背景颜色为#DF9C81（一种暖色调） */
  background: #DF9C81;
  /* 设置圆角边框，半径为3px，使标签具有圆润外观 */
  border-radius: 3px;
  /* 设置文本居中对齐 */
  text-align: center;
  /* 设置文本颜色为白色（#FFF），与背景色形成对比 */
  color: #FFF;
}

/* 为.container类选择器设置样式，通常用于定义一个容器元素，承载网站的主要内容或布局结构 */
.container {
  /* 设置定位方式为相对定位（relative），使得容器内子元素可以相对于此容器进行定位 */
  position: relative;

  /* 设置z-index值为500，用于层叠上下文（stacking context），确保容器在垂直堆叠顺序中的位置 */
  z-index: 500;

  /* 设置容器宽度为940px，为内容提供固定的宽度 */
  width: 940px;

  /* 设置外边距为0 auto，使容器在水平方向上居中对齐 */
  margin: 0 auto;
}

/* 为.content-wrapper类选择器设置样式，通常用于包裹主要内容区域 */
.content-wrapper {
  /* 设置z-index值为800，确保内容容器在垂直堆叠顺序中的位置高于其他元素 */
  

  /* 设置内容区域宽度为父元素宽度的70% */
  width: 70%;

  /* 设置内容区域左外边距为父元素宽度的30%，实现右侧留白布局 */
  margin-left: 30%;
}

/* 为.content-wrapper__inner类选择器设置样式，通常用于进一步封装内容区域内部细节 */
.content-wrapper__inner {
  /* 设置上下外边距为0，左右外边距为10% */
  margin: 0 10%;

  /* 设置上下内边距为50px，左右内边距为0 */
  padding: 50px 0;
}

/* 为.footer类选择器设置样式，通常用于定义页面底部区域（页脚） */
.footer {
  /* 设置定位方式为绝对定位（absolute），使其相对于最近的非静态定位祖先元素定位 */
  position: absolute;

  /* 设置字体大小为父元素的70% */
  font-size: .7em;

  /* 设置文本颜色为#b3b3b3（淡灰色） */
  color: #ff0000;

  /* 将页脚固定在页面底部 */
  bottom: 0;

  /* 将页脚左边缘与父元素左边缘对齐 */
  left: 0;

  /* 设置页脚宽度为100%，使其覆盖整个父元素宽度 */
  width: 100%;
}

/* 为.avatar和.logo类选择器设置相同的样式，包括圆形边框、内边框颜色、阴影效果以及过渡动画 */
.avatar,
.logo {
  border-radius: 50%; /* 边框半径为50%，实现圆形效果 */
  border: 3px solid #FFF; /* 边框为3像素宽的实线，颜色为白色（#FFF） */
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); /* 盒阴影，模糊半径为1px，扩展半径为1px，颜色为黑色（rgba(0, 0, 0, 0.3)） */
  transition: all .5s; /* 所有属性过渡时间为0.5秒 */
}

/* 为.logo类选择器在鼠标悬停状态（hover）时设置新的边框颜色、过渡动画以及旋转效果 */
.logo:hover {
  border: 3px solid #ff0000; /* 边框颜色变为红色（#ff0000） */
  transition: all .5s; /* 所有属性过渡时间为0.5秒 */
  transform: rotate(360deg); /* 旋转360度 */
  
  /* 为不同的浏览器前缀提供旋转支持 */
  -ms-transform: rotate(360deg); /* IE 9 */
  -moz-transform: rotate(360deg); /* Firefox */
  -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
  -o-transform: rotate(360deg); /* Opera（此处可能存在笔误，应为360deg与其它浏览器保持一致） */
}


hr {
  border: none; }

.section-title__divider {
  width: 30%;
  margin: 2.2em 0 2.1em 0;
  border-top: 1px solid #DDDDDD; }

.hidden {
  display: none !important; }

.post-comments {
  border-top: 1px solid #DDDDDD;
  padding: 60px 0; }

.post-meta {
  margin: 0 0 .4em 0;
  color: #c7c7c7;
  word-wrap: break-word; }

.post-meta__date {
  margin-right: .5em; }

.post-meta__tags {
  margin-left: .4em; }

.post-meta__author {
  margin-left: 1.5em; }

.post-meta__avatar {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 .3em -.4em 0;
  border: none;
  box-shadow: none; }

.post img {
  max-width: 100%;
  margin: 0 auto;
  border-radius: 3px;
  text-align: center;
  display: block; }
.post pre {
  width: 95%;
  overflow: auto; }
.post hr {
  display: block;
  width: 30%;
  margin: 2em 0;
  border-top: 1px solid #DDDDDD; }

.panel {
  display: table;
  width: 100%;
  height: 100%; }

.panel__vertical {
  display: table-cell;
  vertical-align: middle; }

.panel-title {
  margin: 15px 0;
  font-size: 2.5em;
  letter-spacing: 4px;
  color: #FFF; }

.panel-subtitle {
  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 1.2em;
  line-height: 1.4em;
  font-weight: lighter;
  letter-spacing: 3px;
  color: #fbff00;
  -webkit-font-smoothing: antialiased; }

.panel-cover {
  display: block;
  position: fixed;
  z-index: 900;
  width: 100%;
  max-width: none;
  height: 100%;
  background: url(../images/background-cover.jpg) top left no-repeat #7b7b7bd9;
  background-size: cover; }

.panel-cover--collapsed {
  width: 30%;
  max-width: 700px; }

.panel-cover--overlay {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.377);
  background-image: -webkit-linear-gradient(-410deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9));
  background-image: linear-gradient(140deg,rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); }

.panel-cover__logo {
  margin-bottom: .2em; }

.panel-cover__description {
  margin: 0 30px; }

.panel-cover__divider {
  width: 50%;
  margin: 20px auto;
  border-top: 1px solid rgba(255, 255, 255, 0.14); }

.panel-cover__divider--secondary {
  width: 15%; }

/* 为类名为.panel-main的元素设置样式 */
.panel-main {
  /* 设置元素的显示方式为表格（table），以便使用表格布局 */
  display: table;
  /* 设置元素宽度和高度均为100%，使其填满父容器 */
  width: 100%;
  height: 100%;
  z-index: 900;
  /* 设置背景颜色为#007fd5（深蓝色），模拟天空背景 */
  background: #0199ff;
  /* 设置定位方式为相对定位，为可能的绝对定位子元素提供参照系 */
  position: relative;
  /* 隐藏元素溢出内容，防止内容超出元素边界 */
  overflow: hidden;
  /* 使用Webkit内核的CSS动画，定义名为sky_background的动画，持续时间50秒，采用ease-out缓动函数，无限循环播放 */
  -webkit-animation: sky_background 50s ease-out infinite;
  /* 使用Mozilla Firefox内核的CSS动画，与Webkit内核相同设置 */
  -moz-animation: sky_background 50s ease-out infinite;
  /* 使用Opera内核的CSS动画，与Webkit内核相同设置 */
  -o-animation: sky_background 50s ease-out infinite;
  /* 使用标准的CSS动画，与Webkit内核相同设置 */
  animation: sky_background 50s ease-out infinite;
  /* 使用Webkit内核的translate3d变换，将元素沿x、y、z轴平移（此处为原点不动），提升渲染性能 */
  -webkit-transform: translate3d(0, 0, 0);
  /* 使用Microsoft Edge和IE内核的translate3d变换，与Webkit内核相同设置 */
  -ms-transform: translate3d(0, 0, 0);
  /* 使用Opera内核的translate3d变换，与Webkit内核相同设置 */
  -o-transform: translate3d(0, 0, 0);
  /* 使用标准的translate3d变换，与Webkit内核相同设置 */
  transform: translate3d(0, 0, 0);
}

/* 为类名为.panel-main__inner的子元素设置样式 */
.panel-main__inner {
  /* 设置元素的显示方式为表格单元格（table-cell），以便与父元素（.panel-main）一起形成表格布局 */
  display: table-cell;

  /* 设置垂直对齐方式为居中（middle），使内容在垂直方向上居中 */
  vertical-align: middle;

  /* 设置定位方式为相对定位（relative），为可能的绝对定位子元素提供参照系 */
  position: relative;

  /* 设置元素的层叠顺序（z-index）为800，使其相对于其他元素具有较高的绘制优先级 */
  z-index: 800;

  /* 设置元素左右内边距为60px */
  padding: 0 60px;
}

/* 为类名为.panel-main__content的子元素设置样式 */
.panel-main__content {
  /* 设置最大宽度为620px，限制内容区域的宽度 */
  max-width: 620px;

  /* 设置内容区域水平居中，通过给左右外边距设置为自动来实现 */
  margin: 0 auto;
}

/* 为同时具有.panel-main__content和.panel-main__content--fixed类的元素设置样式 */
.panel-main__content--fixed {
  /* 设置固定宽度为480px，使内容区域在特定条件下具有固定宽度 */
  width: 480px;

  /* 添加过渡效果：当宽度发生变化时，过渡时间为1秒 */
  transition: width 1s;

  /* 添加针对Safari浏览器的Webkit私有前缀过渡效果，与标准过渡效果相同 */
  -webkit-transition: width 1s;
}

.panel-inverted {
  font-weight: 100%;
  text-align: center;
  color: #FFF;
  text-shadow: 0 1px 1px rgba(129, 129, 129, 0.41); }
  .panel-inverted a {
    color: #FFF; }

.cover-navigation {
  margin-top: 42px; }

.cover-navigation--social {
  margin-left: 30px; }

.cover-blue {
  background-color: rgba(37, 104, 163, 0.6);
  background-image: -webkit-linear-gradient(-410deg, rgba(37, 104, 163, 0.6) 20%, rgba(18, 51, 80, 0.8));
  background-image: linear-gradient(140deg,rgba(37, 104, 163, 0.6) 20%, rgba(18, 51, 80, 0.8)); }

.cover-green {
  background-color: rgba(21, 111, 120, 0.6);
  background-image: -webkit-linear-gradient(-410deg, rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8));
  background-image: linear-gradient(140deg,rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); }

.cover-purple {
  background-color: rgba(73, 50, 82, 0.6);
  background-image: -webkit-linear-gradient(-410deg, rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8));
  background-image: linear-gradient(140deg,rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); }

.cover-red {
  background-color: rgba(119, 31, 18, 0.6);
  background-image: -webkit-linear-gradient(-410deg, rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8));
  background-image: linear-gradient(140deg,rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); }

.cover-orange {
  background-color: rgba(174, 80, 4, 0.6);
  background-image: -webkit-linear-gradient(-410deg, rgba(174, 80, 4, 0.6) 20%, rgba(74, 34, 2, 0.8));
  background-image: linear-gradient(140deg,rgba(174, 80, 4, 0.6) 20%, rgba(74, 34, 2, 0.8)); }

.cover-slate {
  background-color: rgba(60, 91, 147, 0.6);
  background-image: -webkit-linear-gradient(-410deg, rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8));
  background-image: linear-gradient(140deg,rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); }

.cover-disabled {
  background: none; }

.btn, .navigation__item a {
  padding: 10px 20px;
  border: 1px solid #DF9C81;
  border-radius: 20px;
  font-size: .9em;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: none;
  color: #DF9C81;
  -webkit-font-smoothing: antialiased; }

  .btn:hover, .navigation__item a:hover {
    color: #d06c44;
    border-color: #d06c44; }

.btn-border-small {
  border: 1px solid #DF9C81;
  border-radius: 20px;
  padding: 6px 8px;
  font-size: .8em;
  margin-left: 10px; }

.btn-contribute {
  border: 1px solid #DF9C81;
  border-radius: 8px;
  background-color: #DF9C81;
  padding: 6px 8px;
  font-size: 1.1em;
  color: white;
  font-weight: bold; }

.btn-secondary {
  border-color: #5BA4E5;
  color: #5BA4E5; }

.btn-secondary:hover {
  color: #217fd2;
  border-color: #217fd2; }

.btn-tertiary {
  border-color: #999999;
  color: #999999; }

.btn-tertiary:hover {
  color: #737373;
  border-color: #737373; }

.btn-large {
  padding: 10px 24px;
  font-size: 1.1em; }

.btn-small {
  padding: 8px 12px;
  font-size: .7em; }

.btn-mobile-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(51, 51, 51, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center; }

.btn-mobile-menu__icon,
.btn-mobile-close__icon {
  position: relative;
  top: 10px;
  color: #FFF; }

/* 为nav元素（导航栏）设置样式 */
nav {
  /* 设置nav元素为内联块级元素（inline-block），使其能够在行内显示，同时保持块级元素的可设置宽高、内边距等属性的能力 */
  display: inline-block;

  /* 设置nav元素的定位方式为相对定位（relative），这将为该元素内部的任何绝对定位子元素提供参照系，这些子元素会相对于nav元素进行定位 */
  position: relative;
}
.navigation {
  display: inline-block;
  float: centor;
  position: relative;
  margin: 0;
  list-style-type: none; }

.navigation__item {
  display: inline-block;
  margin: 5px 1px 0 0;
  line-height: 1em; }
  .navigation__item a {
    display: block;
    position: relative;
    border-color: #6d6d6d;
    color: #ffffff;
    opacity: .8;
    transition:all .3s }
    .navigation__item a:hover {
      color: #000000;
      background:#ffffff;
      border-color: #ffffff;
      opacity: 1;
      transition:all .3s; }

.navigation--social a {
  border: 0px;
  padding: 6px 8px 6px 9px; }
  .navigation--social a .label {
    display: none; }
  .navigation--social a .icon {
    display: block;
    font-size: 1.7em; }

.pagination {
  display: block;
  margin: 0 0 4em 0; }

.pagination__page-number {
  margin: 0;
  font-size: .8em;
  color: #999999; }

.pagination__newer {
  margin-right: 1em; }

.pagination__older {
  margin-left: 1em; }

/* 为i元素（通常用于表示图标）设置样式 */
i {
  /* 指定i元素使用的字体家族为'entypo'，这是一个包含多种图标符号的特殊字体 */
  font-family: 'entypo';

  /* 设置字体粗细为正常（normal），取消默认的斜体样式 */
  font-weight: normal;

  /* 设置字体样式为正常（normal），取消默认的斜体样式 */
  font-style: normal;

  /* 设置i元素的字体大小为18像素，确保图标适当且一致的尺寸 */
  font-size: 18px;
}

.social {
  font-size: 22px; }

.icon-social {
  font-family: 'entypo-social';
  font-size: 22px;
  display: block;
  position: relative; }

/* 为文档中所有元素在获得焦点（focus）状态时设置样式 */
*:focus {
  /* 取消元素在聚焦时的默认轮廓线（outline），常用于消除输入框、链接等元素聚焦时的蓝色轮廓 */
  outline: none;
}

/* 为具有[data-v]属性且类名为.wechat的元素设置样式，其中"data-v"可能是Vue.js框架用于标识组件实例的特定属性 */
.wechat[data-v] {
  /* 设置元素的定位方式为相对定位（relative），为可能的绝对定位子元素提供参照系 */
  position: relative;
}
/* 为具有[data-v]属性且类名为.qrCode的元素设置样式，其中"data-v"可能是Vue.js框架用于标识组件实例的特定属性 */
.qrCode[data-v] {
  /* 默认隐藏该元素 */
  display: none;

  /* 设置定位方式为绝对定位，使其相对于最近的非static定位祖先元素定位 */
  position: absolute;

  /* 设置元素的宽度和高度均为92像素 */
  width: 92px;
  height: 92px;

  /* 将元素底部定位在其父元素下方42像素处 */
  bottom: 42px;

  /* 将元素左侧定位在其父元素左侧-28像素处，使其向左偏移 */
  left: -28px;

  /* 设置元素内文本居中对齐 */
  text-align: center;

  /* 设置背景颜色为白色（#fff） */
  background-color: #fff;
}

/* 为嵌套在具有.wechat类且具有[data-v]属性的元素内部的.triangle-down类元素设置样式 */
.wechat .qrCode .triangle-down[data-v] {
  /* 设置定位方式为绝对定位，使其相对于最近的非static定位祖先元素（.qrCode）定位 */
  position: absolute;

  /* 将元素底部定位在其父元素（.qrCode）下方-8像素处 */
  bottom: -8px;

  /* 将元素左侧定位在其父元素（.qrCode）的中心，然后通过负的margin-left属性向左移动一半宽度，使其居中对齐 */
  left: 50%;
  margin-left: -6px;

  /* 设置元素的宽度和高度为0，以便创建三角形 */
  width: 0;
  height: 0;

  /* 使用边框创建一个向上指向的三角形，其中上边框为白色（#fff），左右边框透明，宽度为6px，高度为10px */
  border-top: 10px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/* 当父元素（.wechat）处于鼠标悬停状态（hover）时，显示具有[data-v]属性的.qrCode元素 */
.wechat:hover .qrCode[data-v] {
  display: inline;
}

/* 使用媒体查询，针对屏幕宽度小于等于1100px的设备应用以下样式 */
@media all and (max-width: 1100px) {

  /* 对于类名为.panel-cover__logo的元素，设置其宽度为70px */
  .panel-cover__logo {
    width: 70px;
  }

  /* 对于类名为.panel-title的元素，设置其字体大小为2em，增大标题字号 */
  .panel-title {
    font-size: 2em;
  }

  /* 对于类名为.panel-subtitle的元素，设置其字体大小为1em，调整副标题字号 */
  .panel-subtitle {
    font-size: 1em;
  }

  /* 对于类名为.panel-cover__description的元素，设置其外边距为上/下0px，左/右10px，并缩小字体至0.9em */
  .panel-cover__description {
    margin: 0 10px;
    font-size: 0.9em;
  }

  /* 对于类名为.navigation--social的元素，设置其上外边距为5px，左外边距为0，调整布局 */
  .navigation--social {
    margin-top: 5px;
    margin-left: 0;
  }
}
@media all and (max-width: 960px) {
  .btn-mobile-menu {
    display: block; }
.qrCode[data-v] {
    left: 0px;
}

  .panel-main {
    display: table;
    position: relative; }

  .panel-cover--collapsed {
    width: 100%;
    max-width: none; }

  .panel-main__inner {
    display: table-cell;
    padding: 60px 10%; }

  .panel-cover__description {
    display: block;
    max-width: 600px;
    margin: 0 auto; }

  .panel-cover {
    width: 100%;
    height: 100%;
    background-position: center center; }
    .panel-cover.panel-cover--collapsed {
      display: block;
      position: relative;
      height: auto;
      padding: 0;
      background-position: center center; }
      .panel-cover.panel-cover--collapsed .panel-main__inner {
        display: block;
        padding: 70px 0 30px 0; }
      .panel-cover.panel-cover--collapsed .panel-cover__logo {
        width: 60px;
        border-width: 2px; }
      .panel-cover.panel-cover--collapsed .panel-cover__description {
        display: none; }
      .panel-cover.panel-cover--collapsed .panel-cover__divider {
        display: none;
        margin: 1em auto; }

  .navigation-wrapper {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    background: rgba(51, 51, 51, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
    .navigation-wrapper.visible {
      display: block; }

  .cover-navigation {
    display: block;
    position: relative;
    float: left;
    clear: left;
    width: 100%; }
    .cover-navigation .navigation {
      display: block;
      width: 100%; }
      .cover-navigation .navigation li {
        width: 80%;
        margin-bottom: .4em; }
    .cover-navigation.navigation--social {
      padding-top: 5px; }
      .cover-navigation.navigation--social .navigation li {
        display: inline-block;
        width: 25.8%; }

  .content-wrapper {
    width: 80%;
    max-width: none;
    margin: 0 auto; }

  .content-wrapper__inner {
    margin-right: 0;
    margin-left: 0; }

  .navigation__item {
    width: 100%;
    margin: 0 0 .4em 0; } }
@media all and (max-width: 340px) {
  .panel-main__inner {
    padding: 0 5%; }

  .panel-title {
    margin-bottom: .1em;
    font-size: 1.5em; }

  .panel-subtitle {
    font-size: .9em; }

  .btn, .navigation__item a {
    margin-bottom: .4em; } }
.friendsdiv {
  margin: 20px 0; }
  .friendsdiv a {
    display: inline-block;
    text-align: center;
    margin: 8px 10px; }
  .friendsdiv img {
    box-shadow: 5px 5px 12px #888888;
    margin: 10px 10px; }