/* ---------------------------------
 *       Override CSS Framework
 * --------------------------------- */
html {
  font-size: 14px;
}
.section {
  padding: 2rem 1.5rem;
}
body {
  font-family: "PingFangSC-Regular", "Ubuntu", sans-serif;
}
.button {
  border-radius: 2px;
}
@media screen and (max-width: 768px) {
  .section {
    padding: 4.5rem 1rem;
  }
}
.card {
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.card-normal .card {
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
}
.card-normal .card + .card {
  margin-top: 1.5rem;
}
.card-normal .card.card-transparent {
  box-shadow: none;
  background: transparent;
}
.card-normal .card .card-content {
  flex: 12;
  padding: 1rem;
}
.navbar-main {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.navbar-main .navbar-item {
  padding-right: 1.5rem;
}
@media screen and (max-width: 769px) {
  .navbar-main {
    left: 0;
    position: fixed;
    right: 0;
    z-index: 30;
    top: 0;
  }
  .navbar-main .navbar-item {
    padding: 0.55rem 0.75rem;
  }
}
.footer {
  background: #fff;
}
.widget .media {
  border: none;
}
.widget .media + .media {
  margin-top: 0;
}
.pagination {
  width: 100%;
}
.article .article-meta {
  margin-bottom: 0.5rem !important;
}
.article .content {
  font-size: 1.1rem;
}
.article .content a {
  word-wrap: break-word;
}
.article .content p {
  line-height: 1.9rem;
}
/* ---------------------------------
 *         Custom modifiers
 * --------------------------------- */
.is-size-7 {
  font-size: 0.85rem !important;
}
.is-overflow-x-auto {
  overflow-x: auto !important;
}
.has-order-1 {
  order: 1;
}
.has-order-2 {
  order: 2;
}
.has-order-3 {
  order: 3;
}
.has-link-black-ter {
  transition: 0.2s ease;
}
.has-link-black-ter:hover {
  color: #3273dc !important;
}
@media screen and (max-width: 768px) {
  .has-text-centered-mobile {
    text-align: center !important;
  }
}
/* ---------------------------------
 *         Font icon fixes
 * --------------------------------- */
/* ---------------------------------
 *        Fix content elements
 * --------------------------------- */
.content h1,
.content h3 {
  font-weight: 400;
}
.content h1 {
  font-size: 1.55em;
}
.content h3 {
  font-size: 1.25em;
}
/* ---------------------------------
 *        Fix code highlight
 * --------------------------------- */
/* ---------------------------------
 *          Overflow Table
 * --------------------------------- */
/* ---------------------------------
 *            Fix Video
 * --------------------------------- */
/* ---------------------------------
 *        Fix Gist Snippet
 * --------------------------------- */
/* ---------------------------------
 *        Fix iframe and video
 * --------------------------------- */
.post-article {
  word-wrap: break-word;
  line-height: 1.8;
  letter-spacing: 0.013rem;
}
.post-article a {
  position: relative;
  white-space: normal;
  color: #4b8af3;
  background: transparent;
  text-decoration: none;
  font-weight: 500;
  word-break: break-all;
}
.post-article a::after {
  position: absolute;
  bottom: -0.2rem;
  left: 100%;
  width: 0;
  border-bottom: 0.13rem solid #4b8af3;
  content: "";
  -webkit-transition:
    width 350ms,
    left 350ms;
  -moz-transition:
    width 350ms,
    left 350ms;
  -ms-transition:
    width 350ms,
    left 350ms;
  -o-transition:
    width 350ms,
    left 350ms;
  transition:
    width 350ms,
    left 350ms;
}
.post-article a:hover::after {
  left: 0;
  width: 100%;
  -webkit-transition: width 350ms;
  -moz-transition: width 350ms;
  -ms-transition: width 350ms;
  -o-transition: width 350ms;
  transition: width 350ms;
}
p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  text-align: justify;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.ceta .tabs a {
  border-bottom-style: none;
}
.ceta .tabs a:hover {
  color: #4b8af3;
  font-weight: 500;
}
.widget .media + .media {
  margin-bottom: 0;
}
.media + .media {
  padding-top: 0;
}
.card .media:not(:last-child) {
  margin-bottom: 0;
}
body > .footer,
body > .navbar,
body > .section {
  opacity: 0;
}
:root {
  --color: #333333;
  --background: #f7f7f7;
  --cardbgcolor: #fff;
  --cardcolor: #333;
  --cardtitlecolor: #333333;
  --navbarcolor: #333333;
  --navbarbgcolor: rgba(255, 255, 255, 0.7);
  --img-default-filter: none;
  --img-hover-filter: none;
  --btn-bg-color: whitesmoke;
  --btn-color: #333333;
  --btn-hover-color: #eeeeee;
  --link-color: #1485fe;
  --link-hover-color: #1485fe;
  --code-bg-color: #f1f3f3;
  --code-default-color: #a2a1a1;
  --code-line-numbers-bg-color: #ebeded;
  --code-line-numbers-color: #888;
  --code-keyworks-color: #7012cc;
  --code-class-color: #f2777a;
  --code-cdata-color: hsl(313, 67%, 36%);
  --code-symbol-color: hsl(33, 83%, 45%);
  --code-variable-color: hsl(281, 89%, 64%);
  --code-regex-color: #e90;
  --code-deleted-color: red;
  --code-toolbar-bg-color: #ebeded;
  --code-toolbar-color: #1485fe;
  --code-line-numbers-rows-color: #888;
  --toc-dot-color: #1485fe;
  --toc-dot-active-color: #1485fe;
  --toc-dot-active-bg-color: #ebedef;
  --toc-vertical-line-color: #1485fe;
  --toc-item-bg-hover: #1485fe;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color: #ccc;
    --background: #2c2a2a !important;
    --cardbgcolor: #343232 !important;
    --cardcolor: #bcbcbc;
    --cardtitlecolor: #bcbcbc;
    --navbarcolor: #bcbcbc;
    --navbarbgcolor: rgba(52, 50, 50, 0.7);
    --img-default-filter: none;
    --img-hover-filter: none;
    --btn-bg-color: #2c2a2a;
    --btn-color: #bcbcbc;
    --btn-hover-color: #3b3c3e;
    --link-color: #1485fe;
    --link-hover-color: #1485fe;
    --code-bg-color: #2c2a2a;
    --code-default-color: #a2a1a1;
    --code-line-numbers-bg-color: #403e3e;
    --code-line-numbers-color: #888;
    --code-keyworks-color: #c9c;
    --code-class-color: #f2777a;
    --code-cdata-color: hsl(313, 67%, 36%);
    --code-symbol-color: hsl(33, 83%, 45%);
    --code-variable-color: hsl(281, 89%, 64%);
    --code-regex-color: #e90;
    --code-deleted-color: red;
    --code-toolbar-bg-color: #454545;
    --code-toolbar-color: #fff;
    --code-line-numbers-rows-color: #888;
    --toc-dot-color: #1485fe;
    --toc-dot-active-bg-color: rgba(255, 255, 255, 0.2);
    --toc-dot-active-color: #1485fe;
    --toc-vertical-line-color: #888;
    --toc-bg-bg-hover: #321;
  }
}
/* Light mode */
html {
  background: var(--background);
  color: var(--color);
}
body > .footer,
body > .navbar {
  background-color: var(--cardbgcolor);
  color: var(--cardcolor);
}
a:hover {
  color: var(--link-color);
}
.content a {
  color: var(--link-color);
}
.content a:hover {
  color: var(--link-hover-color);
  font-weight: 400;
}
.card {
  background-color: var(--cardbgcolor);
  color: var(--cardcolor);
}
.card .title {
  color: var(--color) !important;
}
pre {
  background-color: var(--code-bg-color) !important;
  color: var(--color) !important;
}
.card .content/*.card .title a{*/
/*    color: var(--cardtitlecolor) !important;*/
/*}*/ {
  background-color: var(--cardbgcolor);
  color: var(--cardcolor);
}
.navbar-item {
  color: var(--navbarcolor);
}
.has-link-black-ter {
  color: var(--cardtitlecolor) !important;
}
.button {
  background-color: var(--btn-bg-color) !important;
  color: var(--btn-color) !important;
}
.button:hover {
  background-color: var(--btn-hover-color) !important;
}
.level .level-item.button {
  background-color: var(--cardbgcolor) !important;
  border-color: var(--cardbgcolor) !important;
  color: var(--color) !important;
}
h1,
h2,
h3 {
  color: var(--color) !important;
}
a.navbar-item:hover {
  background-color: var(--cardbgcolor);
  color: #3273dc;
}
pre[class*="language-"] {
  color: var(--color);
  background-color: var(--code-bg-color) !important;
}
pre[class*="language-"] {
  background: var(--background);
}
.token.comment {
  color: var(--code-cdata-color);
}
.token.property,
.token.number {
  color: var(--code-symbol-color);
}
.token.char {
  color: var(--code-class-color);
}
.token.url {
  color: var(--code-variable-color);
}
.token.keyword {
  color: var(--code-keyworks-color);
}
.navbar-burger {
  color: var(--color);
}
.navbar-menu {
  background-color: var(--cardbgcolor);
}
body > .navbar {
  background-color: var(--navbarbgcolor);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.content table th {
  border: 1px solid var(--background);
}
table {
  border: 2px solid var(--btn-hover-color);
}
tr,
th {
  border: 1px solid var(--background);
}
footer .title {
  color: var(--color);
}
footer .button {
  background-color: var(--cardbgcolor) !important;
}