/* 主题主色 */
:root {
  --md-primary-fg-color: #518FC1;
  --md-primary-fg-color--light: #518FC1;
  --md-primary-fg-color--dark: #518FC1;
  --md-text-font: "LXGW WenKai";
  --md-admonition-icon--pied-piper: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc%3E Created with Pixso. %3C/desc%3E%3Cdefs%3E%3CclipPath id='clip103_2030'%3E%3Crect id='icon' width='30.000000' height='30.000000' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23clip103_2030)'%3E%3Cpath id='icon' d='M25.8 5.40002L25.8 24.6L4.20001 24.6L4.20001 5.40002L25.8 5.40002ZM9.60001 10.8L13.8 15L9.60001 19.2M15.6 19.2L21.6 19.2' stroke='%23101112' stroke-width='1.200000'/%3E%3C/g%3E%3C/svg%3E%0A");
  --md-admonition-icon--pied-piper1: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc%3E Created with Pixso. %3C/desc%3E%3Cdefs%3E%3CclipPath id='clip103_2030'%3E%3Crect id='icon' width='30.000000' height='30.000000' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23clip103_2030)'%3E%3Cpath id='icon' d='M25.8 5.40002L25.8 24.6L4.20001 24.6L4.20001 5.40002L25.8 5.40002ZM9.60001 10.8L13.8 15L9.60001 19.2M15.6 19.2L21.6 19.2' stroke='%23101112' stroke-width='1.200000'/%3E%3C/g%3E%3C/svg%3E%0A");
}

/* 目录导航缩进线 */
nav.md-nav--secondary ul {
  border-left: 1px solid lightblue;
}

/* 顶部按钮样式 */
button.md-top {
  font-family: LXGW WenKai;
  font-size: 16px;
  font-weight: lighter;
  color: #518FC1;
}

/* 标题样式 */
.ml3 {
  font-weight: 900;
  font-size: 30px;
  font-family: LXGW WenKai;
}

/* 图片圆角 */
img.img1, img.img2 {
  border-radius: 25px;
}


/* 心跳动画 */
@keyframes heart {
  0%, 40%, 80%, 100% { transform: scale(1);}
  20%, 60% { transform: scale(1.15);}
}
.heart { animation: heart 1s infinite; }

/* 自定义admonition样式 */
.md-typeset .admonition.pied-piper,
.md-typeset details.pied-piper {
  border-color: rgb(43, 155, 70);
  font-size: large;
}
.md-typeset .pied-piper > .admonition-title,
.md-typeset .pied-piper > summary {
  background-color: rgba(43, 155, 70, 0.1);
}
.md-typeset .pied-piper > .admonition-title::before,
.md-typeset .pied-piper > summary::before {
  background-color: rgb(43, 155, 70);
  -webkit-mask-image: var(--md-admonition-icon--pied-piper);
  mask-image: var(--md-admonition-icon--pied-piper);
}

.md-typeset .admonition.pied-piper1,
.md-typeset details.pied-piper1 {
  border-color: rgb(96,141,189);
  font-size: large;
  width: 100%;
  border-radius: 25px;
}
.md-typeset .pied-piper1 > .admonition-title,
.md-typeset .pied-piper1 > summary {
  background: linear-gradient(to right, #eef3fe, #fff);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  height: 45px;
}
.md-typeset .pied-piper1 > .admonition-title::before,
.md-typeset .pied-piper1 > summary::before {
  background-color: #1f1f21;
  -webkit-mask-image: var(--md-admonition-icon--pied-piper1);
  mask-image: var(--md-admonition-icon--pied-piper1);
}

/* 哔哩哔哩视频适配 */
.aspect-ratio {
  position: relative;
  width: 90%;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}

/* 视频背景 */
.video1 {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -11;
}
.video1 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 768px) {
  #video1 { display: none; }
}

/* 圆角容器 */
#rcorners1 {
  border-radius: 25px;
  background: linear-gradient(to right, #bde0f5, #dae8f1, #eeedee);
  padding: 20px;
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 16px;
}
#rcorners2, #rcorners3 {
  border-radius: 25px;
  border: 2px solid #518FC1;
  padding: 20px;
  width: 100%;
  font-size: 16px;
}
#rcorners4 {
  border-radius: 25px;
  border: 2px solid #518FC1;
  padding: 20px;
  width: 110%;
}
@media only screen and (max-width: 600px) {
  #rcorners4 {
    border: none;
    width: 100%;
  }
}

/* 图片居中容器 */
.image-container {
  text-align: center;
}
.image-container img {
  display: inline-block;
  margin: 10px;
}

/* 渐变背景 */
#grad1 {
  height: 200px;
  background: linear-gradient(to bottom right, red, yellow);
}

/* 按钮样式 */
.buttoncss, .buttoncss1 {
  border-radius: 12px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.buttoncss { background-color: #4CAF50; }
.buttoncss1 { background-color: #567fd0; }

.buttonxuan, .buttonxuan1 {
  padding: 16px 32px;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.4s;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.buttonxuan {
  background-color: #4CAF50;
  color: white;
  border: none;
}
.buttonxuan1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.buttonxuan1:hover {
  background-color: #4CAF50;
  color: white;
}


.md-header__button.md-logo img,.md-header__button.md-logo svg {
    height: 1.6rem;
}

/* 动画按钮 */
.buttonxuan2, .buttonxuan3 {
  display: inline-block;
  background-color: #ACE48E;
  color: #fff;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 300px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  border: 2px solid;
  border-radius: 25px;
}
.buttonxuan3:hover {
  background-color: #5577D1;
}
.buttonxuan2 span, .buttonxuan3 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.buttonxuan2 span:after, .buttonxuan3 span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.buttonxuan2:hover span, .buttonxuan3:hover span {
  padding-right: 25px;
}
.buttonxuan2:hover span:after, .buttonxuan3:hover span:after {
  opacity: 1;
  right: 0;
}

/* 隐藏内容 */
div.hide {
  background-color: yellow;
  padding: 20px;
}
@media screen and (max-width: 1000px) {
div.hide {
  display: none;
}
}

/* 布局 */
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
display: grid;
grid:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}


/* 变灰代码 */
/* html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);} */