.theme {
  @include theme-background-color;
  --theme-main-color: #{$c-black};
  --theme-bg-color: var(--theme-color-light);
  --theme-main-color-inverse: #{$c-white};
  --theme-bg-color-inverse: var(--theme-color-dark);
}

.theme-introduction {
  --theme-color-dark: #{$theme-0-dark};
  --theme-color-light: #{$theme-0-light};
}

.theme-setup {
  --theme-color-dark: #{$theme-2-dark};
  --theme-color-light: #{$theme-2-light};
}

.theme-knowledge {
  --theme-color-dark: #{$theme-3-dark};
  --theme-color-light: #{$theme-3-light};
}

.theme-welcome,
.theme-examples {
  --theme-color-dark: #{$theme-1-dark};
  --theme-color-light: #{$theme-1-light};
}

.theme-contribution {
  --theme-color-dark: #{$theme-4-dark};
  --theme-color-medium: #{$c-gray};
  --theme-color-light: #{$theme-4-light};
}

.theme-welcome {
  .site-content {
    margin-bottom: 0;

    h1 {
      padding-top: 1.5em;

      @media (max-width: $mq-tablet) {
        padding-top: 1.9em;
        padding-bottom: 0.8em;
      }

      @media (max-width: $mq-mobile) {
        padding-top: 1.75em;
        padding-bottom: 1em;
      }

      @media (max-width: $mq-mobile-narrow) {
        padding-top: 2em;
        padding-bottom: 1.5em;
      }
    }
  }
}
