:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

  --primary-color: #000;
  --second-color: #aaa700;
  --third-color: #ae4832;
  --forth-color: #287bc9;
  --second-bg-color: #1e1e1e;
  --primary-font-color: #000;

  --header-height: 60px;
}

body {
  font-size: 14px;
  margin: 0;
}

@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

figure,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

/* 全局的文章列表样式 */
.article-items {
  line-height: 2rem;
  display: flex;
  align-items: baseline;

  > a {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* 全局的视频列表样式 */
.video-items {
  & > h3 {
    padding: 10px 0;
  }
}
.error-box {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;

  @media screen and (max-width: 600px) {
    width: 100%;
    overflow-x: auto;
  }
}

[data-wrap="margin-wrap"] {
  margin: 10px auto;
}

.content-wrap {
  display: flex;

  .left-out-link {
    width: 180px;
    display: flex;
    padding-top: 20px;

    & > div {
      flex: 1;
      align-self: self-start;
      border-right: 1px solid #ccc;
    }
  }
}

.jplife-layout {
  background-color: #eee;
}

.initial-style {
  figure,
  ul,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: revert;
    padding: revert;
    list-style: revert;
    text-decoration: revert;
  }
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 4px; /* 轨道圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块背景色 */
  border-radius: 4px; /* 滑块圆角 */
}

/* 鼠标悬浮在滑块上时 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬浮时的背景色 */
}