html, body {
  position: relative;
  min-height: 100%;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-neutral-color);
  background: var(--color-neutral-background);
}

.max-width-container, .max-width-container-lesser {
  max-width: var(--responsive-max-width-lesser);
  margin: auto;
  padding: 0px var(--spacing-m);
}

.max-width-container-lesser {
  max-width: var(--responsive-max-width-even-lesser);
}

.title-text {
  font-size: var(--font-size-title-large);
}

.accent-text {
  color: var(--color-accent);
}

html[direct-mode="dark"] {
    body {
        color: var(--color-neutral-text);
        background-color: #080808;
    }

    .direct-large-header.scrolled, .relative-header .direct-large-header {
        background-color: black;
        color: var(--color-neutral-text);

        .direct-large-header-content img {
            filter: brightness(0) invert(1);
        }

        .direct-large-header-content .direct-ui-label {
            border-color: white;
        }

        .bottom-section-wrapper {
            background-color: #121212 !important;
        }
    }

    .home-banner {
        background-color: black;

        button:hover {
            color: var(--color-accent);
            border-color: var(--color-accent);
        }

        .accent:hover {
            background: var(--color-accent);
            color: white;
        }
    }
}