:root {
  --navy: #090909;
  --navy2: #171717;
  --orange: #d71920;
  --ink: #111111;
  --muted: #5f5f5f;
  --line: #dedede;
  --pale: #f5f5f5;
  --white: #ffffff;
}

.site-header {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.hero::after {
  border-color: rgba(215, 25, 32, 0.62);
}

.hero-orbit {
  border-color: rgba(255, 255, 255, 0.14);
}

.primary {
  box-shadow: 0 8px 24px rgba(215, 25, 32, 0.22);
}

.primary:hover,
.primary:focus-visible {
  background: #b80f16;
}

.nav-links a:focus-visible,
.button:focus-visible,
.contact-card a:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.3);
  outline-offset: 4px;
}

.project {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.05);
}

.project > img {
  background: #111111;
}

footer {
  background: #050505;
}