/* Define custom primary color for the top navigation bar */
:root {
  --md-primary-fg-color: #8100FE;
  --md-primary-fg-color--light: #9b4dfe;
  --md-primary-fg-color--dark: #6a00d1;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffff;
  --md-accent-fg-color: #8100FE;
  --md-typeset-a-color: #9c3cfc;
}

/* Ensure the header stays this color in both light and dark modes */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #8100FE;
  --md-primary-fg-color--light: #9b4dfe;
  --md-primary-fg-color--dark: #6a00d1;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffff;
  --md-accent-fg-color: #8100FE;
  --md-typeset-a-color: #b56cff;
}

/* For dark mode, adjust text color on the purple bar to ensure readability */
[data-md-color-scheme="slate"] .md-header {
  color: #ffffff;
}

/* For light mode, adjust text color on the purple bar to ensure readability */
[data-md-color-scheme="default"] .md-header {
  color: #ffffff;
}

/* Optional: Custom styles for other elements in light mode */
[data-md-color-scheme="default"] {
  /* Your custom light mode styles here */
}

/* Optional: Custom styles for other elements in dark mode */
[data-md-color-scheme="slate"] {
  /* Your custom dark mode styles here */
}

.md-header__title {
  visibility: hidden;
}

.md-nav__link {
  padding-bottom: 8px !important;
}

.md-nav__title {
  font-size: 18px;
  padding-bottom: 12px;
}

.md-logo > img {
  padding: 0;
}

img {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px;
  width: 100%;
}