:root > * {
  --md-primary-fg-color: #dfd4f2;
  --md-primary-fg-color--light: #dfd4f2;
  --md-primary-fg-color--dark: #e8e0f5;
  --md-primary-bg-color: #4c2985;
  --md-primary-bg-color--light: #e8e0f5;
  --md-default-bg-color: #e8e0f5;
  --md-default-fg-color: #000000;
  --md-default-fg-color--light: #4c2985;
  --md-accent-bg-color: #f00;
  --md-accent-bg-color--light: #f00;
  --md-accent-fg-color--light: #f00;
  --md-code-bg-color: #dfd4f2;
  --md-code-fg-color: #000000;
  --md-code-hl-number-color: #ff9e64;
  --md-code-hl-special-color: #e0af68;
  --md-code-hl-function-color: #8c63cf;
  --md-code-hl-constant-color: #ff9e64;
  --md-code-hl-keyword-color: #4c2985;
  --md-code-hl-string-color: #9ece6a;
  --md-code-hl-name-color: #f7768e;
  --md-code-hl-operator-color: #7aa2f7;
  --md-code-hl-punctuation-color: #7aa2f7;
  --md-code-hl-comment-color: #565f89;
  --md-code-hl-generic-color: #9aa5ce;
  --md-code-hl-variable-color: #c0caf5;
  --md-typeset-a-color: #234e9d;
  --md-footer-fg--light: #4c2985;

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h1,
  h2,
  h3 {
    color: #4c2985;
    font-weight: 800;
  }

  h4,
  h5,
  h6 {
    color: #000;
  }

  h3 {
    font-weight: 600;
  }

  h4,
  h5 {
    font-weight: 600;
  }

  .md-sidebar--active,
  .md-nav__link {
    color: #234e9d;
  }

  .md-nav__link:hover {
    color: #3b3b3b;
  }

  .md-header__topic,
  .md-nav__title {
    font-weight: 700;
  }

  .md-search__icon {
    color: #4c2985;
  }

  .md-footer {
    background: #e8e0f5;
  }

  /* Limit the width of the main content */
  .md-container {
    max-width: 948px; /* Change this value to whatever width you prefer */
    margin: 0 auto; /* Center the content */
  } /* Apply color preview to code blocks containing hex colors */

  code.hex-color::before {
    content: " ";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: attr(data-color);
    margin-right: 5px;
    border: 1px solid #ccc;
    vertical-align: middle;
  }

  /* Add custom class to code blocks */
  code.hex-color {
    position: relative;
    padding-left: 20px;
  }
}

.md-footer__link--next,
.md-footer__link--prev {
  background-color: #dfd4f2;
  color: #4c2985;
  border-radius: 5px;
  padding: 10px;
  margin-top: 5em;
  margin-bottom: 5em;
}