html {
  scroll-behavior: smooth;
  scroll-padding: var(--scroll-padding, 5rem);
}

.primary-navigation {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: 4rem;
  padding-bottom: 4rem;
  font-size: 1.5rem;
  background: var(--clr-primary-400);
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 3rem;
  list-style: none;
}

.nav-list a {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

/* general styling */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

:root {
  --fs-900: 3rem;
  --fs-800: 2.5rem;
  --fs-700: 2rem;
  --fs-400: 1rem;

  --fw-400: 400;
  --fw-700: 700;

  --size-400: 1.5rem;
  --size-500: 3rem;
  --size-600: 6rem;

  --clr-neutral-900: hsl(0, 9%, 11%);
  --clr-neutral-200: hsl(36, 24%, 96%);
  --clr-neutral-100: hsl(0, 0%, 100%);

  --clr-primary-200: hsl(213, 43%, 79%);
  --clr-primary-300: hsl(190, 84%, 50%);
  --clr-primary-400: hsl(217, 100%, 50%);
  --clr-primary-500: hsl(190, 100%, 28%);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Gerenal spacing and font reset */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration-color: rgb(107, 107, 107);
}

a:where(:hover, :focus) {
  text-decoration-color: currentColor;
}

code {
  font-family: monospace;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilities */

.fs-900 {
  font-size: var(--fs-900);
}
.fs-800 {
  font-size: var(--fs-800);
}
.fs-700 {
  font-size: var(--fs-700);
}
.fs-400 {
  font-size: var(--fs-400);
}

.fw-regular {
  font-weight: var(--fw-400);
}
.fw-bold {
  font-weight: var(--fw-700);
}

.surface-neutral-100 {
  background-color: var(--clr-neutral-100);
}
.surface-neutral-200 {
  background-color: var(--clr-neutral-200);
}
.surface-neutral-900 {
  background-color: var(--clr-neutral-900);
}
.surface-primary-200 {
  background-color: var(--clr-primary-200);
}
.surface-primary-300 {
  background-color: var(--clr-primary-300);
}
.surface-primary-400 {
  background-color: var(--clr-primary-400);
}
.surface-primary-500 {
  background-color: var(--clr-primary-500);
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}
.text-neutral-200 {
  color: var(--clr-neutral-200);
}
.text-neutral-900 {
  color: var(--clr-neutral-900);
}
.text-primary-300 {
  color: var(--clr-primary-300);
}
.text-primary-400 {
  color: var(--clr-primary-400);
}
.text-primary-500 {
  color: var(--clr-primary-500);
}

.text-center {
  text-align: center;
}

.margin-auto {
  margin: auto;
}

.margin-block-auto {
  margin-block: auto;
}
.margin-inline-auto {
  margin-inline: auto;
}
.margin-top-auto {
  margin-top: auto;
}
.margin-bottom-auto {
  margin-bottom: auto;
}
.margin-right-auto {
  margin-right: auto;
}
.margin-left-auto {
  margin-left: auto;
}

.margin-top-400 {
  margin-top: var(--size-400);
}
.margin-top-500 {
  margin-top: var(--size-500);
}
.margin-top-600 {
  margin-top: var(--size-600);
}
.margin-bottom-400 {
  margin-bottom: var(--size-400);
}
.margin-bottom-500 {
  margin-bottom: var(--size-500);
}
.margin-bottom-600 {
  margin-bottom: var(--size-600);
}

.margin-block-400 {
  margin-block: var(--size-400);
}
.margin-block-500 {
  margin-block: var(--size-500);
}
.margin-block-600 {
  margin-block: var(--size-600);
}

.padding-block-400 {
  padding-block: var(--size-400);
}
.padding-block-500 {
  padding-block: var(--size-500);
}
.padding-block-600 {
  padding-block: var(--size-600);
}

.padding-block-auto {
  padding-block: auto;
}
.padding-inline-auto {
  padding-inline: auto;
}
.padding-top-auto {
  padding-top: auto;
}
.padding-bottom-auto {
  padding-bottom: auto;
}
.padding-right-auto {
  padding-right: auto;
}
.padding-left-auto {
  padding-left: auto;
}

.padding-400 {
  padding: var(--size-400);
}

.padding-500 {
  padding: calc(var(--size-400) * 2);
}

.border-right-thin {
  border-right: 1px solid rgb(197, 192, 182);
}

:where(.flow > :not(:first-child)) {
  margin-top: var(--flow-space, var(--size-400));
}

.flex {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: var(--gap, var(--size-400));
}

.flex-flow {
  display: flex;
  flex-direction: column;
  gap: var(--flow-space, var(--size-400));
}

.text-center .flex {
  margin: 0 auto;
}

.container {
  --max-width: 75rem;
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

/* general styling */

body {
  font-family: system-ui, sans-serif;
  font-size: var(--fs-400);
  line-height: 1.4;
  color: var(--clr-neutral-900);
  background-color: var(--clr-neutral-200);
}

[class*="grid-"] {
  display: grid;
  gap: 1rem;
}

.grid-even-columns {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

@media (min-width: 50em) {
  .grid-auto-flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.grid-stack {
  display: grid;
  place-items: center;
}

.grid-stack > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.grid-stack > img {
  aspect-ratio: 16/3;
  min-height: 30vh;
  object-fit: cover;
  z-index: -1;
}

p {
  opacity: 0.85;
}

h2 {
  font-size: 5rem !important;
  font-weight: 900;
}