:root {
    --ifm-color-primary: #00c1de;
    --ifm-color-primary-dark: #13c2c2;
    --ifm-color-primary-darker: #08979c;
    --ifm-color-primary-darkest: #006d75;
    --ifm-color-primary-light: #5cdbd3;
    --ifm-color-primary-lighter: #87e8de;
    --ifm-color-primary-lightest: #13c2c2;
    --ifm-code-font-size: 95%;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  }
  
  /* For readability concerns, you should choose a lighter palette in dark mode. */
  :root[data-theme='dark'] {
    --ifm-color-primary: #00c1de;
    --ifm-color-primary-dark: #36cfc9;
    --ifm-color-primary-darker: #36cfc9;
    --ifm-color-primary-darkest: #1a8870;
    --ifm-color-primary-light: #08979c;
    --ifm-color-primary-lighter: #5cdbd3;
    --ifm-color-primary-lightest: #87e8de;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  }
  .footer__item {
    width: 100px;
  }
  .footer__copyright {
    margin-top: 100px;
  }
  .wechat {
    .wechat-label {
      line-height: 2;
      cursor: pointer;
    }
    .wechat-img {
      display: none;
      position: absolute;
      width: 100px;
    }
  
    &:hover {
      .wechat-label {
         text-decoration: underline;
         color: var(--ifm-color-primary);
      }
      .wechat-img {
        display: block;
      }
    }
  }
  .hero {
    background-color: #fbfcfc !important;
    color: black !important;
  }
  .navbar--fixed-top {
    border-bottom: none !important;
    padding-left:10vw;
    padding-right: 10vw;
    height: 72px;
    // box-shadow: 5px 15px 50px rgb(0 55 79 / 20%);
    .navbar__inner {
      .github-link-logo {
        height: 24px;
        width: 24px;
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
      }
    }
  }
  .navbar__items {
    background-color: #ffffff !important;
    .navbar__brand {
      .text--truncate {
        font-size: 28px !important;
        color: var(--ifm-color-primary) !important;
      }
    }
  }
  .main-body-one {
    padding: 140px 10vw 60px 10vw;
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    .main-body-one-left {
      .button {
        background-color: var(--ifm-color-primary) !important;
      }
      .main-body-one-left-title {
        font-size: 40px;
        text-align: left;
        margin-top:16px;
      }
      .main-body-one-left-description {
        margin-top: 50px;
        text-align: left;
  
      }
      .main-body-one-left-button-panel{
        margin-top: 40px;
        margin-bottom:80px;
        text-align: left;
        .img-label-pane {
          .img-label {
            display: none;
            position: absolute;
            width: 100px;
          }
          &:hover {
            .img-label {
              display: block;
            }
          }
        }
      }
    }
    .main-body-one-right {
      position: relative;
      video {
        cursor: pointer;
        // border-radius: 4px;
        box-shadow:  0 4px 20px rgb(0 0 0 / 40%);
        object-fit:fill;
        max-width: 660px;
        margin-top: 10px;

        &:hover {
          // box-shadow:  0 4px 20px rgb(0 0 0 / 40%);
          cursor: pointer;
        } 

      }

      video::-webkit-media-controls-panel {
        background: none;
      }

      video::-webkit-media-controls-current-time-display {
         text-shadow: 0 1px 5px rgb(0 0 0 / 99%);
      }
      video::-webkit-media-controls-time-remaining-display {
         text-shadow: 0 1px 5px rgb(0 0 0 / 99%);
      }


      .offShadow {
        box-shadow: 0 0 0 transparent
      }
    }
  }
  .main-body-two {
    padding-top: 80px;
    padding-bottom: 60px;
    background-color: #f0f1f5;
    margin-top: 100px;
    .main-body-two-title {
      text-align: center;
    }
    .main-body-two-description {
      padding-left: 10vw;
      padding-right: 10vw;
      margin-top: 40px;
      display: grid;
      margin-bottom: 30px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 20px;
      grid-template-rows: 1fr 1fr;
      .description-card {
        background-color: #fff;
        //border-radius: 8px;
        padding: 48px;
        box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
        position: relative;
        cursor:pointer;
        p {
          color: black;
          text-align: left;
        }
        .card-link {
          text-align: right;
          position:absolute;
          right: 60px;
          bottom: 40px;
        }
        &:hover {
          box-shadow: 0 6px 50px rgb(0 0 0 / 30%);
          transform: scale(1.003,1.003);
          background-color: white;
          transition: transform 3s linear;
          transition: box-shadow 3s linear;
        }
      }
    }
  }
  .main-body-three {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    padding: 80px 10vw;
    height: 500px;
    .main-body-three-left {
      padding-top: 70px;
      .main-body-three-left-description {
        margin-top:60px;
        text-align: left;
      }
      .main-body-three-left-button-panel {
        text-align: left;
        margin-top:60px;
      }
    }
  }




.header-github-link {
  &:hover {
    opacity: 0.6;
  }

  &:before {
    content: '';
    width: 24px;
    height: 24px;
    display: flex;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
  }
}


