@keyframes heart {
  0%,
  40%,
  80%,
  100% {
    transform: scale(1);
  }
  20%,
  60% {
    transform: scale(1.15);
  }
}

.heart {
  animation: heart 2000ms infinite;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  fill: currentColor;
  display: block;
  height: 3.2rem;
  width: 3.2rem;
}

.md-typeset .md-button {
  border: 0.1rem;
  border-radius: 2rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: bold;
}

.md-typeset p {
  font-family: "Lato", sans-serif; /* Setting font family to Lato */
}

.md-typeset ul {
  font-family: "Lato", sans-serif; /* Setting font family to Lato */
}

.md-typeset h1 {
  color: var(--md-typeset-color);
  font-weight: bold;
}

/* Light mode styles for inline code (inside text) */
[data-md-color-scheme="default"] .md-typeset :not(pre) > code {
  color: #b73650 !important; /* Reddish-pink text for inline code */
  background-color: #f8f2f4 !important; /* Light pinkish background */
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

/* Dark mode styles for inline code */
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  color: #0ff1ce !important; /* Neon blue text */
  background-color: #36464e !important; /* Dark background */
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

/* /* Always apply dark mode styles for code blocks (multiline) */
*/
/* .md-typeset pre code { */
/*   color: #0ff1ce !important; /* Neon blue text */ */
/*   background-color: #36464e !important; /* Dark background */ */
/*   border-radius: 6px; */
/*   padding: 1em; */
/*   overflow-x: auto; */
/* } */

.medium {
  color: #00ab6c;
}
.twitter {
  color: #1da1f2;
}
.facebook {
  color: #4267b2;
}

/* Simple Mermaid diagram styles */
.mermaid {
  text-align: center;
  margin: 1rem 0;
  background: transparent !important;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  background: transparent !important;
}