/*===============================
  Base Styles
===============================*/

html {
  background: var(--background-color);
  height: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

body {
  font-family: var(--theme-font);
  /* background-color: var(--background-color); */
   transition: background-color 0.3s ease, color 0.3s ease;
  color: var(--text-color);
  font-size: var(--font-size);
  line-height: 1.6;
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

p {
  font-family: var(--body-font)
}

li {
  font-family: var(--body-font);
}


/*===============================
  Layout
===============================*/

.w {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem 8rem 1rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}