:root {
  --md-footer-bg-color: white;
  --md-footer-fg-color: rgb(32, 32, 32);
  --md-footer-bg-color--dark: white;
  --md-footer-fg-color--lighter: rgb(32, 32, 32);
  --md-footer-fg-color--light: rgb(32, 32, 32);
  --mdc-typography-headline6-font-family: 'VLNL Sardines', sans-serif;
  --mdc-typography-font-family: 'Aptos', sans-serif;
  --md-typeset-a-color: #EFA8B8; /* link color */
  --md-accent-fg-color: #FF7A9E; /* button / accent color */
  --md-default-fg-color: #ffffff; /* main text color */
}

body {
  background-color: #316181; /* Deep teal-blue */
  color: #ffffff; /* White text for readability */
}

.md-container,
.md-main,
.md-content {
  background-color: #316181 !important;
  color: #ffffff !important;
}

.md-typeset h2 {
  font-weight: 500;
}

.mdc-typography--body2 {
  font-weight: 300;
  font-size: 14px;
}

.md-button--primary {
  background-color: #FF7A9E !important;
  color: #ffffff !important;
  border: none;
}

full-width {
  width: 100vw;              /* take up full viewport width */
  margin-left: calc(50% - 50vw); /* align with screen edge */
  margin-right: calc(50% - 50vw);
  border-top: 2px solid #000; /* optional border style */
  border-bottom: 2px solid #000;
  padding: 1em 2em;
  background-color: #f9f9f9;  /* optional background */
}


a:hover {
  color: #F6C1C9 !important;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'VLNL Sardines', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}