:root {
  --navy: #25211e;
  --navy-2: #11100f;
  --teal: #e5a044;
  --teal-dark: #b86413;
  --sand: #eee3d2;
  --paper: #f8f2e8;
  --coral: #d98a32;
  --ink: #211e1b;
  --muted: #71665d;
  --line: rgba(33, 30, 27, .16);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(17, 16, 15, .97) 0%, rgba(17, 16, 15, .88) 35%, rgba(17, 16, 15, .28) 67%, rgba(17, 16, 15, .08)),
    linear-gradient(0deg, rgba(17, 16, 15, .52), transparent 45%);
}

.hosting {
  background: #eadbc4;
}

.button {
  border-color: #1a1715;
  box-shadow: 3px 3px 0 #1a1715;
}

.button:hover {
  box-shadow: 5px 5px 0 #1a1715;
}

.footer-brand {
  display: inline-flex;
  width: max-content;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff;
}

.footer-brand img {
  filter: none;
}

@media (max-width: 560px) {
  .hero-overlay {
    background: linear-gradient(0deg, rgba(17, 16, 15, .97) 0%, rgba(17, 16, 15, .72) 66%, rgba(17, 16, 15, .18));
  }
}