:root {
  /* Navbar */
  --nav-h: 4rem;

  /* Wrapping width */
  --w-narrow: 45rem;
  --w-wide: 70rem;

  /* Colors */
  --accent: #9cc1ae;

  /* Deep Mocha */
  --accent: #403233;
  --accent-contrast: #e4e4e4;

  --accent-dark: #446252;
  --navbar-floating-bg: var(--accent);
  --navbar-bg: var(--accent);
  --link-color: #5d8771;

  /* Home page */
  --home-vertical-spacing: 7rem;

  /* Text */
  --base-font-size: 1.2rem;
  --h2-size: 2.8rem;
  --h3-size: 1.5rem;

  /* Mobile */
  @media (max-width: 40rem) {
    --base-font-size: 1.14rem;
    --h2-size: 2.2rem;
    --home-vertical-spacing: 5rem;
  }
}

html {
  background-color: var(--accent);
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  padding-top: var(--nav-h);
  font-family: "Figtree", sans-serif;
  font-size: var(--base-font-size);
  font-weight: 300;
  line-height: 155%;
  background-color: white;

  &.floating-navbar {
    padding-top: 0;
  }

  &:has(dialog[open]) {
    overflow: hidden;
  }
}

#navbar {
  position: fixed;
  top: 0;
  height: var(--nav-h);
  width: 100%;
}