/* Reset */
* {
  box-sizing: border-box;
}

/* Base */
:root {
  --color-darkest: rgba(0, 0, 17, 0.9);
  --color-darker: rgba(0, 0, 17, 0.7);
  --color-half: rgba(0, 0, 17, 0.5);
  --color-light: rgba(0, 0, 17, 0.1);
  --color-lighter: rgba(0, 0, 17, 0.05);
  --color-lightest: rgb(255, 255, 255);
  --color-success: #0c9;
  --radius: 0.5rem;
  --space-clamp: clamp(1rem, 3vw, 3rem);
  --space-gap: 1rem;
}

body {
  background: var(--color-lightest);
  color: var(--color-darkest);
  font: 100%/1.5 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  overflow-x: hidden;
}

/* Typography */

h2 {
  margin: 4rem 0 2rem;
}

p {
  margin: 0;
  max-width: 40rem;
  text-wrap: balance;
}

h2,
h3,
a,
.brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.ghost {
  opacity: 0.3;
}

/* Media */

img {
  border-radius: var(--radius);
}

/* Layout */
header,
section,
footer {
  display: flex;
}
section {
  flex-direction: column;
  padding: var(--space-clamp);
}

header,
footer {
  align-items: center;
  justify-content: space-between;
  padding: 2rem var(--space-clamp);
}
footer {
  align-items: flex-end;
  min-height: 20rem;
}

nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
}

/* Brand */

.brand {
  white-space: nowrap;
}