/* Import Fonts from CDN */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* Variables */
:root {
  --maincolor: red;
  --bordercl: rebeccapurple;
  --callouctcolor: dodgerblue;
  --hovercolor: rgb(214, 130, 130);
  --darkMaincolor: #50fa7b;
}

/* Global Styles */
html {
  color: #232333;
  font-size: 15px;
  /* font-family: 'Roboto Mono', 'Noto Sans SC', sans-serif; */
  font-family: 'Roboto Mono', 'Noto Sans SC'
}

body {
  display: block;
  margin: 8px;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Selection */
::selection {
  background: rgba(197, 8, 8, 0.2);
}

/* Paragraphs */
p {
  line-height: 26px;

}

/* Horizontal Rule */
hr {
  border: 0;
  border-top: 3px dotted var(--bordercl);
  margin: 1em 0;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--bordercl);
  color: #cbb9b9;
  margin: 0;
  padding-left: 1em;
}

/* Links */
a {
  border-bottom: 2px solid var(--maincolor);
  color: inherit;
  text-decoration: none;
}

a:hover {
  background-color: var(--hovercolor);
  color: #ffffff;
}

/* Unordered Lists */
ul {
  list-style: none;
  padding-left: 2ch;
}

ul li {
  text-indent: -2ch;
}

ul>li::before {
  content: '* ';
  font-weight: bold;
}

/* Images */
img {
  max-width: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* Figures */
figure {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  max-width: 100%;
}

figure img {
  max-height: 500px;
}

@media screen and (min-width: 600px) {
  figure {
    padding: 0 40px;
  }
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 0;
  line-height: 2.5em;
}

header .main {
  font-family: 'Roboto Mono',
    'Noto Sans SC';
}

header .menu {
  font-family: 'Roboto Mono',
    'Noto Sans SC';
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.2rem;
  margin-top: 2em;
}

h1::before {
  color: var(--maincolor);
  content: '# ';
}

h2::before {
  color: var(--maincolor);
  content: '## ';
}

h3::before {
  color: var(--maincolor);
  content: '### ';
}

h4::before {
  color: var(--maincolor);
  content: '#### ';
}

h5::before {
  color: var(--maincolor);
  content: '##### ';
}

h6::before {
  color: var(--maincolor);
  content: '###### ';
}

/* Metadata */
.meta {
  color: #e1cdcd;
  letter-spacing: -0.5px;
}

/* Content Containers */
.content {
  margin-bottom: 4em;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 0 1ch;
  word-wrap: break-word;
}

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.4rem dotted var(--bordercl);
  padding: 2rem 0rem;
  margin-top: 2rem;
  font-family: 'Roboto Mono',
    'Noto Sans SC';
  width: 100%;
  /* 占满一行 */
}

/* Footer Social Icons */
.social-icons {
  display: flex;
  align-items: center;
}

.social-icons a {
  margin-right: 5px;
  /* 左侧盒子中的 icon 间隔 */
}

.social-icons a:last-child {
  margin-right: 0;
  /* 最后一个 icon 不添加右边距 */
}


.soc {
  display: flex;
  align-items: center;
  border-bottom: none;
}

.border {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid;
}

/*.footer-info {*/
/*  padding: var(--footer-padding);*/
/*}*/

/* Title */
.title h1 {
  margin-bottom: 0;
}

/* Time */
time {
  color: grey;
}

/* Articles */
article .title {
  margin-bottom: 1em;
}

/* Callout */
.callout {
  background-color: var(--callouctcolor);
  color: #fff;
  padding: 1em;
}

.callout p {
  font-family: monospace;
  margin: 0;
}

.callout a {
  border-bottom: 3px solid #fff;
}

.callout a:hover {
  background-color: #fff;
  color: var(--callouctcolor);
}

/* Site Description */
.site-description {
  display: flex;
  justify-content: space-between;
}

.description {
  line-height: 1.5;
  /* 设置1.5倍行间距 */
  padding: 15px;
  /* 上下间距，根据需要调整 */
  text-indent: 4ch;
  /* 设置首行缩进4个字符 */
}

/* Tags */
.tags li::before {
  content: "🔖 ";
}

.tags a {
  border-bottom: 3px solid var(--maincolor);
}

.tags a:hover {
  color: white;
  background-color: var(--hovercolor);
}

svg {
  max-height: 15px;
}

.soc:hover {
  color: white;
}

.draft-label {
  color: var(--bordercl);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 6px;
  background-color: #f9f2f4;
}

/* Code Blocks */
code {
  direction: ltr;
  background-color: #f2efef;
  padding: .1em .2em;
  font-family: 'Fira Code', monospace;
}

/* 代码块容器 */
.code-container {
  position: relative;
  margin: 1rem 0;
  background-color: #282a36;
  /* 代码块背景颜色 */
  border-radius: 10px;
  /* 圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* 阴影效果 */
  overflow: hidden;
  /* 确保子元素不会超出容器 */
}

/* 代码头部 */
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 14px;
  background-color: #28282b;
  /* 头部背景颜色 */
  padding: 0.5rem 1rem;
  color: #fff;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
}

/* 语言标签 */
.language-label {
  font-weight: bold;
}

.copy-code {
  /* 移除默认背景和边框 */
  background: none;
  border: none;

  /* 移除默认内边距 */
  /* 移除默认字体样式 */
  font-family: inherit;
  color: inherit;

  /* 移除默认光标样式 */
  cursor: pointer;

  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  letter-spacing: 0.025rem;
}

.copy-code:hover {
  background: rgb(159, 152, 152);
}

/* Preformatted Text */
pre {
  overflow-x: auto;
  padding: 0.5em;
}

/* 代码块容器 */
.highlight {
  position: relative;
  background-color: #282a36;
  /* 背景颜色 */
  border-radius: 10px;
  /* 圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow-x: auto;
  /* 水平滚动 */

}

.highlight pre ::selection {
  background: rgba(2, 215, 197, 0.311);
  display: block;
  margin: 0;
  /* 移除默认的外边距 */
  padding: 0.2rem;
  /* 内边距 */
  font-family: 'Fira Code', monospace;
  /* 字体 */
  font-size: 14px;
  /* 字体大小 */
  line-height: 1.5;
  /* 行高 */
  color: #333;
  /* 代码颜色 */
}

.highlight pre {
  margin: 0;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.3;
  color: #f8f8f2;
  /* 代码文本颜色 */
}

.highlight pre code {
  background-color: transparent;
  color: inherit;
  margin: 0;
}

/* 行号样式 */
.highlight .lnt {
  color: #888;
  /* 行号颜色 */
  margin-right: 0.5rem;
  /* 行号与代码的间距 */
  user-select: none;
  /* 禁止选中行号 */
}

pre code {
  background-color: transparent;
  color: inherit;
  font-size: 100%;
  padding: 0;
}

/* Tables */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  font-size: large;
}

table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

/* Social Icons */
.social-icons {
  display: flex;
  flex-wrap: wrap;
}

/* Adjustments for Firefox */
@-moz-document url-prefix() {
  pre {
    line-height: 103%;
  }
}