style.css

[data-theme=light],
:root:not([data-theme=dark]) {
  color-scheme: light;
  --primary: #006475;
  --primary-hover: #3f8d9e;

  --icon-filter: none;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --primary: #006475;
    --primary-hover: #3f8d9e;

    --icon-filter: invert(85%);
  }
}

[data-theme=dark] {
  color-scheme: dark;
  --primary: #006475;
  --primary-hover: #3f8d9e;

  --icon-filter: invert(85%);
}

nav ul {
  font-size: 0.8em;
}

[role="button"] {
  padding: 0.5rem 0.9rem;
}


.align-items-center { align-items: center; }

.mb-0 { margin-bottom: 0em; }
.mb-1 { margin-bottom: 1em; }
.mb-2 { margin-bottom: 2em; }
.mb-3 { margin-bottom: 3em; }
.mb-4 { margin-bottom: 4em; }
.mb-5 { margin-bottom: 5em; }

.mt-0 { margin-top: 0em; }
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.mt-3 { margin-top: 3em; }
.mt-4 { margin-top: 4em; }
.mt-5 { margin-top: 5em; }


.icon {
  filter: var(--icon-filter);
}

.social-link {
  text-decoration: none;
}