:root {
  --main-bg: #f5f5f5;
  --dark-gray: #2c2c2c;
  --deep-red: #a10d0d;
  --light-red: #cc3d3d;
}

body {
  background-color: var(--main-bg);
  font-family: 'Inter', sans-serif;
  color: var(--dark-gray);
}

.navbar {
  background-color: var(--dark-gray);
  padding: 0.7rem 1rem;
}
.navbar-brand,
.navbar .nav-link,
.navbar-text {
  color: white !important;
}
.navbar .nav-link:hover {
  color: var(--light-red) !important;
}

.btn-primary {
  background-color: var(--deep-red);
  border: none;
}
.btn-primary:hover {
  background-color: var(--light-red);
}

footer {
  background-color: var(--dark-gray);
}

.btn-group-sm .btn {
  min-width: 60px;
  font-weight: 600;
  letter-spacing: 0.5px;
}