@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;600;700;800;900&display=swap");

@mixin headings {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @content;
  }
}

* {
  box-sizing: border-box;
  // for that cool wave dark mode effect
  z-index: 1;
  position: relative;
}

:root {
  --text-color: #243746;
  --bg: #f1e7d0;
}

.dark {
  --text-color: #ebf4f1;
  --bg: #091a28;
}

.text-bitter {
  font-family: Bitter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue",
    sans-serif;
}

.text-article {
  font-family: "Source Serif Pro", serif;
  line-height: 1.8;
  color: #111;
  font-size: 1.25rem;
}