:root {
  --background-color-darker: color-mix(in srgb, var(--bs-body-bg) 85%, black 15%);
  --background-color-darker-2: color-mix(in srgb, var(--bs-body-bg) 75%, black 25%);
  --background-color-darker-3: color-mix(in srgb, var(--bs-body-bg) 50%, black 50%);
  --background-color-lighter: color-mix(in srgb, var(--bs-body-bg) 85%, white 15%);
  --background-color-lighter-2: color-mix(in srgb, var(--bs-body-bg) 75%, white 25%);
  --background-color-lighter-3: color-mix(in srgb, var(--bs-body-bg) 50%, white 50%);
}

body {
  padding: 2.5vmin 2.5vmin 0;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

/* Header styling */
.header-bar {
  background-color: var(--background-color-darker);
  border-bottom: 1px solid var(--bs-border-color);
}

.header-bar a {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 16px; /* space between logo and title */
}

.logo {
  height: 10vmin;
  width: auto;
}

.header-title {
  color: var(--bs-body-color);
  font-weight: 700;
  font-size: 2.75rem; /* adjustable */
}

/* Responsive tweaks for small screens */
@media (max-width: 576px) {
  .header-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-title {
    margin-left: 0;
    margin-top: 8px;
    font-size: 1.5rem;
  }
}