:root {
  --link-color: #1e90ff;
}

.tippy-box {
  color: #161618 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--article-shadow-normal), 0 0 0 transparent;
}

.tippy-arrow {
  display: none;
}

.m-author {
  border-color: #d3d3d3;
}

.m-nav__right {
  justify-content: center;
  margin-top: 50px;
}

.m-nav__right .separator {
  display: none;
}

.m-icon-button.as-close-menu {
  font-size: 14px;
  border: 0;
}

.m-menu .social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.m-menu .social svg {
  width: 18px;
  height: 18px;
}

.m-menu svg.separator {
  margin: 0 15px 0 10px;
}

.m-toggle-darkmode div {
  background: transparent;
}

.m-tags li a,
.m-article-card__tag,
.m-heading__meta__tag,
.m-heading__meta__time,
.m-author__name,
.m-hero-title {
  color: var(--primary-subtle-color) !important;
}

.gh-foot {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid #d3d3d3;
}

.gh-foot-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
}

.gh-copyright {
  text-align: center;
}

.gh-foot-inner .gh-copyright {
  order: 2;
}

.gh-foot-inner a.kofi {
  order: 1;
}

.gh-foot-inner a.kofi img {
  max-height: 36px;
  border: none;
}

.focusable:focus, .m-button:focus, .m-icon-button:focus, .m-toggle-darkmode input:focus {
  box-shadow: none !important;
}

code[class*=language-],
pre[class*=language-] {
  color: #999 !important;
  border-radius: 8px;
  background: #f4f8fd !important;
}

pre[class*=language-] {
  position: relative;
}

pre[class*=language-]:hover .copy-icon {
  opacity: 0.7;
}

pre[class*=language-] .lang {
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: default;
  text-transform: uppercase;
  opacity: 0.5;
}

pre[class*=language-] .copy-icon {
  position: absolute;
  top: 35px;
  right: 10px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

pre[class*=language-] .copy-icon svg {
  width: 20px;
  height: 20px;
}

pre[class*=language-] .copied {
  font-size: 13px;
  position: absolute;
  top: 38px;
  right: 40px;
  opacity: 0.7;
}

.m-tags.in-post {
  margin-top: 50px;
  border-top: 1px solid #d3d3d3;
}

.m-secondary-menu li a svg {
  opacity: 0.6;
}

/* RESPONSIVE Breakpoints */

@media (min-width: 576px) {
  .gh-foot-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .gh-foot-inner .gh-copyright {
    order: 1;
  }

  .gh-foot-inner a.kofi {
    order: 2;
  }
}

@media only screen and (min-width: 48rem) {
  .m-toggle-darkmode {
    margin: 0 0 0 5px;
  }

  .m-toggle-darkmode span {
    font-size: 1rem;
  }

  .m-submenu {
    top: 52px;
    border-top: 1px solid #d3d3d3;
  }

  .m-hero__meta {
    flex-direction: column;
    gap: 15px;
  }

  .m-hero__meta .m-hero-social,
  .m-hero__meta .m-hero-stats {
    margin: 0;
  }

  .m-nav__right {
    margin-top: 0;
  }

  .m-nav__right .separator {
    display: block;
  }

  .m-secondary-menu li a {
    padding: 8px 20px;
  }
}

hr {
  border-color: #d3d3d3 !important;
}

hr::after {
  background: #d3d3d3 !important;
}

figure {
  padding: 20px 0 !important;
}

.l-post-content table thead {
  border-top: 1px solid var(--table-head-border-bottom);
}

.l-post-content table thead tr th {
  padding: 20px 0;
}


.m-hero__picture {
  opacity: 0.3;
}

  /* DARK Mode */

[data-theme="dark"]{
  --secondary-subtle-color: #161618;
}

[data-theme="dark"] .gh-foot {
  border-top: 1px solid #212121;
}

[data-theme="dark"] .m-author {
  border-color: #212121;
}

[data-theme="dark"] .m-article-card__info {
  background-color: var(--secondary-subtle-color);
}

[data-theme="dark"] .m-icon-button.filled {
  background-color: var(--secondary-subtle-color);
}

[data-theme="dark"] .m-submenu {
  top: 52px;
  border-color: #212121;
}

[data-theme="dark"] code[class*=language-],
[data-theme="dark"] pre[class*=language-] {
  color: #ccc !important;
  background: #161618 !important;
}

[data-theme="dark"] .m-tags.in-post {
  border-color: #212121;
}

[data-theme="dark"] .tippy-box {
  color: #fff !important;
  background: #1a1a1b !important;
}

[data-theme="dark"] hr {
  border-color: #212121 !important;
}

[data-theme="dark"] hr::after {
  background: #212121 !important;
}

.l-post-content code {
  color: #F6A823;
}

.m-article-card_tags {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-article-card_tags a.m-article-card__tag {
  position: static;
}

@media screen and (min-width: 48rem) {
  .m-article-card_tags {
    top: 25px;
    left: 25px;
  }
}