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

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

  /* Colors */
  --white: #ffffff;
  --accent: #9cc1ae;
  --accent: oklch(40% 0 256.48);
  --accent-light: oklab(85% 0 0);
  --accent-contrast: #e4e4e4;
  --accent-dark: oklch(80% 0 258.421);
  --ui-bg: var(--accent-dark);
  --navbar-floating-bg: var(--ui-bg);
  --navbar-bg: var(--ui-bg);
  --link-color: oklab(60% 0 0.01861);

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

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

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

html {
  background-color: var(--ui-bg);
}

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%;
}