:root {
  --primary-color: #c1121f;
  --dark-color: rgb(26, 25, 25);
  --light-color: #000e3b;
  --text-color: #ffffff;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
  background-color: var(--light-color);
  scroll-behavior: smooth;
}

h1, h2, h5 {
  font-family: 'OCR A Std', monospace;
}

.navbar {
  background-color: var(--dark-color) !important;
}

.hero {
  background-image: url('../img/background.webp');
  background-size: cover;
  background-position: center;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(193, 18, 31, 0.6);
}

.btn-outline-danger {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-danger:hover {
  background-color: var(--primary-color);
  color: #fff;
}

footer {
  background-color: var(--dark-color);
  color: #aaa;
  letter-spacing: 1px;
}