/* Reset */
@import "_reset.css";

/* Fonts */

@import "fonts/Pensum.css";
@import "fonts/iA Writer Mono.css";

/* Themes */

@import "themes/default.css";
@import "themes/purple.css";
@import "utilities/color.css";

/* Markdown Text Styles */

@import "components/markdown/character-styles.css";
@import "components/markdown/heading-styles.css";
@import "components/markdown/paragraph-styles.css";

/* Markdown Components /*/

@import "components/markdown/addresses.css";
@import "components/markdown/code.css";
@import "components/markdown/details.css";

@import "components/markdown/figures.css";
@import "components/markdown/forms.css";
@import "components/markdown/horizontal-rule.css";
@import "components/markdown/iframes.css";
@import "components/markdown/images.css";
@import "components/markdown/links.css";
@import "components/markdown/lists.css";
@import "components/markdown/quotes.css";
@import "components/markdown/tables.css";
@import "components/markdown/videos.css";

/* Layout */
@import "layouts/article.css";
@import "layouts/main.css";

/* UI */
@import "components/button/button.css";
@import "components/feature-card/feature-card.css";
@import "components/footer/footer.default.css";
@import "components/hero-image/hero-image.default.css";
@import "components/keyboard/keyboard.css";
@import "components/keyboard-overlay/keyboard-overlay.css";
@import "components/navigation-bar/nav.default.css";
@import "components/tag/tag.css";

/* Utilities */
@import "utilities/display.css";
@import "utilities/layout.css";
@import "utilities/spacing.css";
@import "utilities/typography.css";

html {
  font-size: 16px;
}

body {
  font-family: var(--sans-serif-font);
}
@media (min-width: 768px) {
  html {
    font-size: 24px;
  }

  body {
  }
}

[component="markdown"] {
  /* font-family: var(--serif-font); */
  font-size: 20px;
  line-height: 1.5;
  color: var(--light-lavender);
  margin: auto;
  padding: 1rem;
}

@media (min-width: 768px) {
  [component="markdown"] {
    font-size: 28px;
  }
}

[component="markdown"] * + * {
  margin-top: 1.5rem;
}

[component="markdown"] section {
  margin-top: 3rem;
}