.publication-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 30px; /* 底部外边距，用于分隔不同的研究项目 */
}
.image-box {
  flex: 0 0 30%; /* 设置容器宽度为 30% */
  margin-right: 20px; /* 图片与文字的间距 */
  position: relative; /* 为内部的绝对定位标签提供参照 */
/* **关键：添加阴影** */
/* **关键：修改阴影参数** */
  box-shadow: 0 0 15px rgba(0,0,0,0.2); /* 水平垂直偏移都为0，增加模糊半径，适当增加透明度 */
  border-radius: 5px;
  overflow: hidden;
}
.image-ratio-box {
  width: 100%; /* 宽度自适应父容器 .image-box */
  padding-top: 60%; /* 高度为宽度的 某个比例 */
  position: relative;
  overflow: hidden;
}
.research-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 宽度和高度都自适应父容器 */
  height: 100%;
  object-fit: cover; /* 填充容器，保持宽高比，裁剪多余部分 */
  border-radius: 5px;
}
.image-label {
  position: absolute; /* 绝对定位 */
  top: 5px; /* 距离顶部 10px */
  left: 5px; /* 距离左侧 10px */
  background-color: #8b0000; /* 暗红色背景 */
  color: #fff; /* 白色文字 */
  padding: 1.5px 5.5px; /* 内边距 */
  border-radius: 0px; /* 圆角 */
  font-size: 0.8em; /* 字体大小 */
  font-weight: bold; /* 加粗 */
  z-index: 10; /* 确保标签在图片上方显示 */
}
.content-box {
  flex: 1; /* 占据剩余 70% 空间 */
}
*
.content-box h4 {
  margin-top: 0; /* 移除顶部外边距 */
  margin-bottom: 5px; /* **关键**：调整标题与作者之间的间距 */
  line-height: 1.4; /* 调整行高，让标题更紧凑 */
  font-weight: bold; /* 字体加粗 */
}
.authors,
.conference {
  margin: 0; /* **关键**：移除默认的段落外边距 */
  line-height: 1.3; /* 调整行高，让文字更紧凑 */
  font-size: 0.9rem; /* 字体大小 */
  color: #555; /* 字体颜色 */
}
.conference {
  font-style: italic;
}
.icon-links {
  margin-top: 10px; /* 图标与会议信息之间的间距 */
}
.icon-links a {
  font-size: 1.5rem; /* 调整图标大小 */
  margin-right: 15px; /* 图标之间的间距 */
  color: inherit; /* **关键：让链接颜色继承父元素，而不是全局链接颜色** */
}
.icon-links a i {
  color: #555; /* **关键：设置你想要的图标颜色，例如深灰色** */
}
.news-list {
  list-style: none; /* 移除默认的列表符号 */
  padding-left: 4; /* 移除默认的左内边距 */
  margin: 20px 0; /* 顶部和底部外边距 */
}
.news-list li {
  margin-bottom: 20px; /* 每条新闻之间的间距 */
}
.news-item {
  display: flex; /* 启用 Flexbox 布局 */
  align-items: baseline; /* **将这一行修改为 baseline** 或者可以flex-start; */
}
.news-icon-date {
  flex-shrink: 0; /* 防止该容器收缩 */
  width: 150px; /* **关键**：设置图标和日期的固定宽度 */
  margin-right: 20px; /* 图标和日期与内容的间距 */
  display: flex; /* 启用 Flexbox 来对齐图标和日期 */
  align-items: center;
}
.news-icon-date i {
  font-size: 1.5rem; /* 图标大小 */
  color: #8b0000; /* **关键**：图标颜色，可以根据你的主题色调整 */
  margin-right: 1em; /* 图标和日期之间的间距 */
}
.news-date {
  font-size: 1.6rem;
  color: #555; /* 日期文字颜色 */
}
.news-content {
  flex: 1; /* 占据剩余所有空间 */
  line-height: 1.5; /* 行高，让文字更易读 */
  text-align: justify; /* **关键：添加这个属性** */
}
.conference-list {
  list-style: none; /* 移除默认的列表符号 */
  padding-left: 1; /* 移除默认的左内边距 则设为0 */
/*margin-left: 0;    /* **关键：移除左外边距** */
*
  margin: 20px 0; /* 顶部和底部外边距 */
}
*
.conference-list li {
  margin-bottom: 20px; /* 每条新闻之间的间距 */
}
.conference-item {
  display: flex; /* 启用 Flexbox 布局 */
  align-items: baseline; /* **将这一行修改为 baseline** 或者可以flex-start; */
}
.conference-icon-date {
  flex-shrink: 0; /* 防止该容器收缩 */
/* 移除或注释掉固定宽度 */
/* width: 100px; */
  width: auto; /* 让宽度自适应内容 */
  white-space: nowrap; /* **关键**：防止文字换行 */
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.conference-icon-date i {
  font-size: 1.2rem; /* 图标大小 */
  color: #555; /* **关键**：图标颜色，可以根据你的主题色调整 */
  margin-right: 8px; /* 图标和日期之间的间距 */
}
.conference-date {
  font-size: 1.6rem;
  color: #555; /* 日期文字颜色 */
}
.conference-content {
  flex: 1; /* 占据剩余所有空间 */
  line-height: 1.5; /* 行高，让文字更易读 */
}
.ta-list {
  list-style-type: disc; /* **关键**：保留默认的圆点列表符号 */
  margin: 10px 0 20px 20px; /* 调整外边距，让列表与标题保持距离 */
  padding-left: 1; /* 左内边距 */
}
.ta-list li {
  margin-bottom: 5px; /* 列表项之间的间距 */
}
.ta-item {
  display: flex; /* 启用 Flexbox */
  justify-content: space-between; /* **关键**：将内容和日期推到两端 */
  align-items: flex-start; /* 顶部对齐 */
}
.ta-content {
  flex: 1; /* 占据剩余所有空间 */
  padding-right: 10px; /* 防止内容和日期过于靠近 */
}
.ta-date {
  flex-shrink: 0; /* 防止日期被压缩 */
  font-size: 1.6rem;
  color: #555;
  white-space: nowrap; /* 确保日期在一行显示 */
}
.education-container {
/* 调整整体容器的上下边距，以匹配其他部分的间距 */
  margin: 30px 0;
}
.education-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
/* 调整列表项之间的间距 */
  margin-bottom: 20px;
}
.education-column {
  flex-shrink: 0;
  padding: 0 15px;
}
.education-left {
  flex-grow: 1;
  text-align: left;
}
.education-center {
  flex-grow: 1;
  text-align: center;
}
.education-right {
  flex-grow: 1;
  text-align: right;
}
.education-university {
/* 将字体大小调整为与 h3 类似 */
  font-size: 1.8rem;
  font-weight: bold;
}
.education-degree {
/* 将字体大小调整为与正文 p 标签一致 */
  font-size: 1.6rem;
  font-weight: normal;
  color: #555; /* 确保颜色与正文一致 */
}
.education-location,
.education-focus,
.education-year,
.education-gpa {
  font-size: 1.6rem; /* 调整字号，与正文 p 标签一致 */
  font-weight: normal;
  color: #555; /* 颜色与正文一致 */
  line-height: 1.5; /* 行高与正文一致 */
}
.education-gpa a i {
  color: #555; /* Change this to your desired color, e.g., #555 for dark gray */
  font-size: 1.5rem; /* You may want to keep the size consistent */
}
.bootcamp-container {
  margin: 30px 0;
}
.bootcamp-item {
  display: flex; /* Use Flexbox for a horizontal layout */
  justify-content: space-between; /* Space out columns evenly */
  align-items: flex-start; /* Align all columns to the top */
  margin-bottom: 0px; /* Keep space between items */
  margin-left: 20px; /* **KEY: Add this for the indent from the left** */
}
.bootcamp-left {
  flex: 1; /* Allow the left column to grow and take up space */
  padding-right: 20px; /* Add some space between the columns */
}
.bootcamp-title {
  font-size: 1.8rem; /* Matches your h2 font size */
  font-weight: bold; /* Makes the title bold */
  margin-bottom: 5px;
}
.bootcamp-details {
  list-style: disc; /* Use a disc for bullet points */
  margin-top: 0;
  margin-left: 0px;
!important /* Indent the bullet points */
  padding-left: 0;
}
!important
.bootcamp-details li {
  font-size: 1.6rem; /* Matches your body text font size */
  line-height: 1.5;
  color: #555;
  margin-bottom: 5px;
}
.bootcamp-right {
  flex-shrink: 0; /* Prevents this column from shrinking */
  text-align: right;
  font-size: 1.6rem; /* Matches your body text font size */
  line-height: 1.5;
  color: #555;
}
.bootcamp-date,
.bootcamp-location {
  white-space: nowrap; /* Prevents the text from wrapping */
}
.page article p {
  text-align: justify;
}
.custom-quote {
  position: relative;
/*font-family: Arial, serif;*/
  font-size: 1.8rem;
  font-style: normal;
  color: #8b0000 !important;
  line-height: 1.5;
/* **关键：加粗文字** */
  font-weight: bold;
/* **关键调整点** */
  max-width: 85%; /* **让它最大宽度为父容器的 100%** */
  width: 100%; /* **确保宽度为 100%** */
  margin: 40px auto; /* 保持上下外边距，左右自动居中 */
  padding: 1rem 3rem;
  background-color: #f7f7f7;
  border-left: none !important;
  text-align: justify;
/* 调整内边距，为左右两侧的引号留出空间 */
  padding-left: 6.5rem;
  padding-right: 6.5rem;
}
.custom-quote::before,
.custom-quote::after {
  position: absolute;
  font-size: 8rem;
  font-family: Arial, serif;
  color: #bdc1c4;
  opacity: 1;
}
.custom-quote::before {
  content: "“";
  left: 1rem; /* 调整左引号的水平位置 */
  top: -1.5rem; /* **这个很重要，根据引言的文字多少调整**：将左引号放在顶部 */
  transform: none; /* **移除垂直居中，让它保持在顶部** */
}
.custom-quote::after {
  content: "”";
  right: 1rem; /* 调整右引号的水平位置 */
  bottom: -5.2rem; /* **这个很重要，根据引言的文字多少调整**：将右引号放在底部 */
  top: auto; /* **关键**：移除顶部定位，让 bottom 生效 */
  transform: none; /* **移除垂直居中，让它保持在底部** */
}
.blog-heading {
  font-size: 2.2rem; /* 页面主标题 */
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 20px; /* 增加标题和正文之间的间距 */
  color: #555;
}
.blog-page-intro {
  font-size: 1.6rem; /* 正文字体大小 */
  line-height: 1.5;
  color: #555;
  margin-bottom: 30px; /* 增加正文和列表之间的间距 */
}
.blog-post-list {
  list-style: none;
  padding-left: 0;
  margin-left: 20px;
}
.blog-post-list li {
  margin-bottom: 30px; /* 增加列表项之间的间距 */
}
.blog-post-list li a {
  font-size: 1.8rem; /* 博客标题，比正文大，比主标题小 */
  font-weight: bold;
  text-decoration: underline;
  color: #2a486f;
}
.page pre,
.page .highlight {
  overflow: auto;
  margin: 0 0 1rem;
  padding: 0;
  background: #f8f8f8;
  color: #525252;
  font-size: 1.6rem;
  clear: both;
}
figure.highlight {
  position: relative;
}
.page .highlight code {
  padding: 0.2rem 0.3rem;
  word-wrap: break-word;
  font-size: 1.6rem !important;
}
.page pre {
  padding: 10px 20px;
}
.page pre code {
  padding: 0;
  background: none;
  color: #525252;
  text-shadow: none;
}
.page .highlight {
  position: relative;
  border-radius: 1px;
}
.page .highlight pre {
  margin: 0;
  padding: 8px 0;
  border: none;
}
.page .highlight .line::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page .highlight .line.marked {
  background-color: rgba(128,203,196,0.251);
}
.page .highlight table {
  position: relative;
  margin: 0;
  width: auto;
  border: none;
}
.page .highlight td {
  padding: 0;
  border: none;
}
.page .highlight .gutter pre {
  padding-right: 0.8rem;
  padding-left: 0.7rem;
  background-color: #f8f8f8;
  color: #cfd8dc;
  text-align: right;
}
.page .highlight .code pre {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 100%;
  background-color: #f8f8f8;
}
.page .highlight .line {
  height: 1rem;
}
.page .gutter {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.page .gist table {
  width: auto;
}
.page .gist table td {
  border: none;
}
.page pre .deletion {
  background: #fdd;
}
.page pre .addition {
  background: #dfd;
}
.page pre .meta {
  color: #7c4dff;
}
.page pre .comment {
  color: rgba(144,164,174,0.565);
}
.page pre .comment::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .variable,
.page pre .attribute,
.page pre .regexp,
.page pre .ruby .constant,
.page pre .xml .tag .title,
.page pre .xml .pi,
.page pre .xml .doctype,
.page pre .html .doctype,
.page pre .css .id,
.page pre .tag .name,
.page pre .css .class,
.page pre .css .pseudo {
  color: #e53935;
}
.page pre .variable::selection,
.page pre .attribute::selection,
.page pre .regexp::selection,
.page pre .ruby .constant::selection,
.page pre .xml .tag .title::selection,
.page pre .xml .pi::selection,
.page pre .xml .doctype::selection,
.page pre .html .doctype::selection,
.page pre .css .id::selection,
.page pre .tag .name::selection,
.page pre .css .class::selection,
.page pre .css .pseudo::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .tag {
  color: #c62641;
}
.page pre .tag::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .number,
.page pre .preprocessor,
.page pre .literal,
.page pre .params,
.page pre .constant,
.page pre .command {
  color: #f76d47;
}
.page pre .number::selection,
.page pre .preprocessor::selection,
.page pre .literal::selection,
.page pre .params::selection,
.page pre .constant::selection,
.page pre .command::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .built_in {
  color: #ffb62c;
}
.page pre .built_in::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .ruby .class .title,
.page pre .css .rules .attribute,
.page pre .string,
.page pre .value,
.page pre .inheritance,
.page pre .header,
.page pre .ruby .symbol,
.page pre .xml .cdata,
.page pre .special,
.page pre .number,
.page pre .formula {
  color: #0086b3;
}
.page pre .ruby .class .title::selection,
.page pre .css .rules .attribute::selection,
.page pre .string::selection,
.page pre .value::selection,
.page pre .inheritance::selection,
.page pre .header::selection,
.page pre .ruby .symbol::selection,
.page pre .xml .cdata::selection,
.page pre .special::selection,
.page pre .number::selection,
.page pre .formula::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .keyword,
.page pre .title,
.page pre .css .hexcolor {
  color: #c62641;
}
.page pre .keyword::selection,
.page pre .title::selection,
.page pre .css .hexcolor::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .function,
.page pre .python .decorator,
.page pre .python .title,
.page pre .ruby .function .title,
.page pre .ruby .title .keyword,
.page pre .perl .sub,
.page pre .javascript .title,
.page pre .coffeescript .title {
  color: #6182b8;
}
.page pre .function::selection,
.page pre .python .decorator::selection,
.page pre .python .title::selection,
.page pre .ruby .function .title::selection,
.page pre .ruby .title .keyword::selection,
.page pre .perl .sub::selection,
.page pre .javascript .title::selection,
.page pre .coffeescript .title::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
.page pre .tag .attr,
.page pre .javascript .function {
  color: #7c4dff;
}
.page pre .tag .attr::selection,
.page pre .javascript .function::selection {
  background: rgba(128,203,196,0.251);
  color: #525252;
}
* {
  -webkit-text-size-adjust: none;
}
html {
  height: 100%;
  margin: 0;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #494e52;
  font-size: 1.8em;
  line-height: 1.5;
  font-family: "Times New Roman", FangSong, STFangsong, sans-serif;
  scroll-behavior: smooth;
}
a,
span,
.btn {
  font-family: "Times New Roman", FangSong, STFangsong, sans-serif;
}
img {
  max-width: 100%;
}
blockquote {
  position: relative;
  color: #999;
  font-weight: 400;
  background-color: #f7f7f7;
  border-left: 5px solid #777;
  padding: 1rem 1rem 1rem 1.5rem;
  margin: 1rem 3rem 1rem 2rem;
}
blockquote p {
  margin: 0;
}
#page_header {
  position: relative;
  border-bottom: 2px solid #f2f3f3;
  background-color: #f8f8f8;
  -webkit-animation: intro 0.3s both;
  animation: intro 0.3s both;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  z-index: 20;
}
.header_wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  padding: 1.6rem 2rem 1rem;
  font-size: 2rem;
}
#blog_name {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
#blog_name a {
  display: block;
  margin: 0 1.6rem;
  padding: 0.8rem 0;
  color: #7a8288;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#blog_name a:hover {
  color: #8b0000;
}
@media (max-width: 34em) {
  .menus-open .menus_items {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .menus_items {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 10px;
    margin: 0;
    box-shadow: rgba(0,0,0,0.25) 0px 0px 10px;
    padding: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #f2f3f3;
    border-image: initial;
    border-radius: 4px;
    background: #fff;
    list-style: none;
    transition: all ease-in-out 0.2s;
    pointer-events: none;
  }
  .menus_items::before {
    display: block;
    content: "";
    position: absolute;
    top: -10px;
    left: calc(50% + 15px);
    width: 0px;
    z-index: 0;
    border-style: solid;
    border-width: 0px 10px 10px;
    border-color: #fff transparent;
  }
  .menus_items li {
    display: block;
    border-bottom: 1px solid #f2f3f3;
  }
  .menus_items li a {
    display: block;
    color: #7a8288;
    font-size: 1.6rem;
    margin: 0px;
    padding: 8px 15px;
    text-decoration: none;
    transition: all 0.2s ease-in-out 0s;
  }
}
.menus_icon {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 22px;
  height: 30px;
  width: 30px;
  background-color: #7a8288;
  color: #fff;
  cursor: pointer;
  padding: 0px 0.3rem;
  border-width: 0px;
  outline: none;
}
.menus-open .navicon {
  background: transparent;
}
.menus-open .navicon::before {
  transform-origin: 50% 50%;
  top: 0px;
  left: -3px;
  width: 25px;
  transform: rotate3d(0, 0, 1, 45deg);
}
.menus-open .navicon::after {
  transform-origin: 50% 50%;
  top: 0px;
  left: -3px;
  width: 25px;
  transform: rotate3d(0, 0, 1, -45deg);
}
@media (min-width: 34em) {
  .menus_items {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    clear: both;
  }
  .menus_items li {
    display: table-cell;
    vertical-align: middle;
  }
  .menus_items li a {
    position: relative;
    display: block;
    margin: 0 1.6rem;
    padding: 0.8rem 0;
    color: #7a8288;
    text-decoration: none;
  }
  .menus_items li a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background: #8b0000;
    width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
  }
  .menus_items li a:hover {
    color: #000;
  }
  .menus_items li a:hover::before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
  }
  .menus_icon {
    display: none;
  }
}
#page_main {
  min-height: 72%;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  margin-top: 3.2rem;
  margin-bottom: 6.4rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  animation: intro 0.3s both;
  animation-delay: 0.35s;
}
#page_main::after {
  clear: both;
  content: "";
  display: table;
}
.page-title {
  font-size: 3rem;
  padding: 0 1.2rem;
}
.page article {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.page article h1 {
  font-size: 3rem;
}
.page article h2 {
  font-size: 2.8rem;
}
.page article h3 {
  font-size: 2.6rem;
}
.page article p,
.page article li {
  font-size: 1.8rem;
}
.page article a {
  color: #2a486f;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.page article a:link {
  text-decoration: none;
}
.page article a:hover {
  color: #8b0000;
  text-decoration: underline;
}
.page article .highlight {
  overflow: auto;
  margin: 0 0 1rem;
  padding: 0;
  background: #f8f8f8;
  color: #525252;
  line-height: 20px;
}
.page article .gutter pre {
  padding-right: 0.8rem;
  padding-left: 0.7rem;
  background-color: #f8f8f8;
  color: #cfd8dc;
  text-align: right;
}
.page article code {
  font-family: "Times New Roman", FangSong, STFangsong, sans-serif;
  padding: 0.2rem 0.3rem;
  background: rgba(27,31,35,0.05);
  word-wrap: break-word;
}
@media screen and (min-width: 66.67em) {
  #page_main {
    max-width: 1200px;
  }
}
@media (min-width: 34em) {
  .page {
    width: 82.5%;
    float: right;
    margin-right: 0;
  }
  .page .page-title {
    padding: 0 3.6rem;
  }
  .page article {
    padding: 0 3.6rem 3.6rem;
  }
}
.side-card {
  clear: both;
  margin-bottom: 1.6rem;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.side-card .card-wrap {
  padding-left: 10px;
}
.side-card img {
  width: 100%;
}
.side-card p,
.side-card li {
  font-size: 1.4rem;
  line-height: 1.5;
}
.author-avatar {
  display: table-cell;
  vertical-align: top;
  width: 40px;
  height: 40px;
}
.author-avatar img {
  width: 100%;
  max-width: 110px;
  border-radius: 50%;
}
.author-discrip {
  display: table-cell;
  vertical-align: top;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 1;
}
.author-discrip h3 {
  margin: 0px;
  font-size: 1.8rem;
}
.author-discrip .author-bio {
  font-size: 1.2rem;
  margin: 0.3rem 0;
}
.author-links {
  display: table-cell;
  position: relative;
  vertical-align: top;
  z-index: 10;
  cursor: pointer;
}
.author-links li {
  white-space: nowrap;
  margin-bottom: 0.5em;
}
.author-links a {
  margin-bottom: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: inherit;
  font-size: 1.4rem;
  text-decoration: none;
}
.author-links button {
  margin-bottom: 0px;
}
.btn {
  display: inline-block;
  margin-bottom: 0.25em;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  background-color: #7a8288;
  cursor: pointer;
  color: #fff !important;
  padding: 0.6em 1em;
  text-decoration: none;
  border-radius: 4px;
  border-width: 0px !important;
  border-style: initial !important;
  border-color: initial !important;
  border-image: initial !important;
}
.btn:hover {
  background-color: #333;
}
.m-social-links {
  background-color: #fff;
  color: #7a8288 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #bdc1c4 !important;
  border-image: initial !important;
}
.m-social-links:hover {
  color: #fff !important;
}
.social-icons {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  width: 115px;
  margin-top: 15px;
  padding-top: 8px;
  padding-left: 10px;
  list-style-type: none;
  border: 1px solid #f2f3f3;
  border-radius: 4px;
  background: #fff;
  z-index: -1;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  cursor: default;
  transition: all ease-in-out 0.2s;
}
.social-icons::before {
  display: block;
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% + 15px);
  width: 0px;
  z-index: 0;
  border-style: solid;
  border-width: 0px 10px 10px;
  border-color: #fff transparent;
  transition: all 0.2s ease-in-out;
}
.social-icons a {
  font-size: 1.7rem;
}
.social-icons li {
  display: inline-block;
}
.social-icons .fa,
.social-icons .fas,
.social-icons .fab {
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
  width: 1.28571em;
  text-align: center;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.social-icons .fa:hover,
.social-icons .fas:hover,
.social-icons .fab:hover {
  color: #8b0000;
}
.is-open .social-icons {
  visibility: visible;
  opacity: 1;
}
.social-links {
  display: none;
  list-style-type: none;
  cursor: default;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.social-links .e-social-link {
  color: #000;
}
.social-links .e-social-link .fa,
.social-links .e-social-link .fas,
.social-links .e-social-link .fab {
  padding-right: 0.5rem;
}
.social-links .e-social-link:hover span {
  text-decoration: underline;
  color: #8b0000;
}
.cv-links {
  color: #096494 !important;
  display: inline-block;
  position: relative;
  font-size: 1.4rem;
  margin-left: 5.5rem;
}
.cv-links i {
  text-decoration: underline;
}
.cv-links i::before {
  margin-right: 0.5rem;
}
@media (min-width: 66.67em) {
  .side-card {
    padding-right: 0;
  }
}
@media (min-width: 34em) {
  .side-card {
    width: 15.25424%;
    min-width: 165px;
    float: left;
    margin-right: 1.69492%;
    opacity: 0.75;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
  }
  .side-card .card-wrap {
    padding: 10px 10px 10px 17px;
  }
  .sticky {
    clear: both;
    position: -webkit-sticky;
    position: sticky;
    top: 2em;
  }
  .sticky>* {
    display: block;
  }
  .author-avatar {
    display: block;
    width: auto;
    height: auto;
    text-align: center;
  }
  .author-avatar img {
    padding: 5px;
    border: 1px solid #f2f3f3;
  }
  .author-discrip {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    color: #000;
  }
  .author-discrip .author-bio {
    font-size: 1.4rem;
    margin-top: 8px;
    margin-bottom: 10px;
  }
  .author-links {
    display: block;
  }
  .social-icons {
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .social-icons::before {
    content: none;
  }
  .m-social-links {
    display: none;
  }
  .social-links {
    display: block;
    margin-top: 0.8rem;
    margin-bottom: 1.6rem;
    padding: 0;
  }
  .cv-links {
    margin: 0;
  }
}
#page_footer {
  clear: both;
  height: 100px;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  color: #9ba1a6;
  -webkit-animation: intro 0.3s both;
  animation: intro 0.3s both;
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  background-color: #f2f3f3;
  border-top: 1px solid #bdc1c4;
}
#page_footer a {
  color: #9ba1a6;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#page_footer a:hover {
  color: #000;
}
.footer_wrap {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  margin-top: 2em;
  padding-left: 2.5em;
  font-size: 1.28rem;
}
@media (min-width: 66.67em) {
  .footer_wrap {
    max-width: 1200px;
  }
}
@media (min-width: 34em) {
  .footer_wrap {
    padding: 0 1em 2em;
  }
}
.nav-wrap {
  position: fixed;
  bottom: 220px;
  right: 0;
  max-width: 50px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.nav-wrap.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.nav {
  height: 30px;
  width: 30px;
}
.site-nav {
  position: absolute;
  height: 30px;
  width: 30px;
  background-color: #7a8288;
  color: #fff;
  cursor: pointer;
  padding: 0px 0.3rem;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  outline: none;
}
.navicon {
  position: relative;
  width: 18px;
  height: 3px;
  background: #fff;
  margin: auto;
  transition: all 0.3s ease 0s;
}
.navicon::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0px;
  width: 18px;
  height: 3px;
  background: #fff;
  transition: all 0.3s ease 0s;
}
.navicon::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0px;
  width: 18px;
  height: 3px;
  background: #fff;
  transition: all 0.3s ease 0s;
}
.nav-open .navicon {
  background: transparent;
}
.nav-open .navicon::before {
  transform-origin: 50% 50%;
  top: 0px;
  left: -3px;
  width: 25px;
  transform: rotate3d(0, 0, 1, 45deg);
}
.nav-open .navicon::after {
  transform-origin: 50% 50%;
  top: 0px;
  left: -3px;
  width: 25px;
  transform: rotate3d(0, 0, 1, -45deg);
}
.nav_items {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 45px;
  top: -20px;
  margin: 0;
  box-shadow: rgba(0,0,0,0.25) 0px 0px 10px;
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #f2f3f3;
  border-image: initial;
  border-radius: 4px;
  background: #fff;
  list-style: none;
  transition: all ease-in-out 0.2s;
}
.nav_items li {
  display: block;
  border-bottom: 1px solid #f2f3f3;
}
.nav_items li a {
  display: block;
  color: #7a8288;
  font-size: 1.6rem;
  margin: 0px;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}
.nav_items li a:hover {
  color: #5c6266;
  background: #dee0e1;
}
.nav_items::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -10px;
  width: 0px;
  display: block;
  z-index: 0;
  border-style: solid;
  border-width: 10px 0px 10px 10px;
  border-color: transparent transparent transparent #fff;
}
.nav_items::after {
  clear: both;
  content: "";
  display: table;
}
.nav-open .nav_items {
  visibility: visible;
  opacity: 1;
}
.cd-top {
  display: block;
  width: auto;
  height: auto;
}
.cd-top i {
  display: block;
  margin-top: 3px;
  width: 30px;
  height: 30px;
  background-color: #8b0000;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  line-height: 29px;
  cursor: pointer;
}
::-webkit-scrollbar {
  width: 12px;
  height: 8px;
  background-color: #fff;
}
::-webkit-scrollbar-track {
  background-color: #fff;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(122,130,136,0.4);
}