@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* 
@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
} */

:root {
  --md-text-font: "Montserrat";
  /* --md-code-font: "Roboto Mono"; */
}

.md-typeset h1 {
  font-weight: 800;
  margin-bottom: 1.25rem;
  color: var(--md-primary-fg-color--dark);
}

.md-typeset h2 {
  font-weight: 600;
  color: var(--md-primary-fg-color--dark);
}

/* Header Logo Size */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.25rem;
}

/* Footer Center */
.md-footer-meta__inner {
  justify-content: center;
}

/* .md-header__title {
  & .md-header__topic {
    display: none;
    transition: transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), all 0.15s;
  }

  &.md-header__title--active .md-header__topic {
    display: flex;
  }
} */

:root > * {
  --md-primary-fg-color: #00c4d9;
  --md-primary-fg-color--light: #00c4d9;
  --md-primary-fg-color--dark: #004054;
  --md-accent-fg-color: #008897;
}

.box step {
  padding: 0.8rem 1rem;
  color: var(--md-primary-fg-color--dark);
  background-color: var(--md-primary-fg-color--light);
  /*
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
    */
}

.box {
  & h2 {
    margin: 0rem 0.7rem 1.25rem 0rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  border: 1px solid;
  padding-right: 0.8rem;
  margin-bottom: 2rem;
}

.tag-status-active {
  background: #6ebe71;
  color: white;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

p {
  padding-left: 0.5rem;
}