/* Custom Pink Vibe */
:root {
  /* https://www.realtimecolors.com/?colors=ECECEC-0B0B0B-ff2a7b-ff8ca8-C8102E&fonts=Inter-Inter */
  --text: #ececec;
  --background: #0b0b0b;
  --primary: #ff2a7b;
  --secondary: #ff8ca8;
  --accent: #c8102e;
  --text-50: #f2f2f2;
  --text-100: #e6e6e6;
  --text-200: #cccccc;
  --text-300: #b3b3b3;
  --text-400: #999999;
  --text-500: #808080;
  --text-600: #666666;
  --text-700: #4d4d4d;
  --text-800: #333333;
  --text-900: #1a1a1a;
  --text-950: #0d0d0d;

  --background-50: #f2f2f2;
  --background-100: #e6e6e6;
  --background-200: #cccccc;
  --background-300: #b3b3b3;
  --background-400: #999999;
  --background-500: #808080;
  --background-600: #666666;
  --background-700: #4d4d4d;
  --background-800: #333333;
  --background-900: #1a1a1a;
  --background-950: #0d0d0d;

  --primary-50: #ffe5ef;
  --primary-100: #ffcce0;
  --primary-200: #ff99c0;
  --primary-300: #ff66a1;
  --primary-400: #ff3381;
  --primary-500: #ff0062;
  --primary-600: #cc004e;
  --primary-700: #99003b;
  --primary-800: #660027;
  --primary-900: #330014;
  --primary-950: #1a000a;

  --secondary-50: #ffe5ec;
  --secondary-100: #ffccd9;
  --secondary-200: #ff99b3;
  --secondary-300: #ff668c;
  --secondary-400: #ff3366;
  --secondary-500: #ff0040;
  --secondary-600: #cc0033;
  --secondary-700: #990026;
  --secondary-800: #660019;
  --secondary-900: #33000d;
  --secondary-950: #1a0006;

  --accent-50: #fde7eb;
  --accent-100: #fbd0d7;
  --accent-200: #f7a1af;
  --accent-300: #f47187;
  --accent-400: #f0425f;
  --accent-500: #ec1337;
  --accent-600: #bd0f2c;
  --accent-700: #8e0b21;
  --accent-800: #5e0816;
  --accent-900: #2f040b;
  --accent-950: #180206;
}
.pacifico {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}
.red-hat {
  font-family: "Red Hat Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.navbar-brand {
  font-size: 1.75rem;
}
body {
  background-color: var(--background);
  color: var(--text);
  font-family: "Red Hat Text", Helvetica, Arial, sans-serif;
}
.navbar {
  background-color: var(--primary);
  border-bottom: 1px solid #222;
}
.margin-0 {
  margin: 0 !important;
}
.footer {
  background-color: var(--background-900);
}
.hero {
  background: url("/assets/img/hero.png") center/cover no-repeat;
  display: flex;
  height: 35vh; /* Default: mobile-first */
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: var(--text);
}

/* Desktop / larger screens */
@media (min-width: 768px) {
  .hero {
    height: 55vh;
  }
}
@media (min-width: 1200px) {
  .hero {
    height: 65vh;
  }
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 26, 26, 0.75);
}
.hero-content {
  position: relative;
  z-index: 2;
}
.btn-pink {
  background-color: var(--primary);
  color: var(--text);
  border: none;
}
.btn-red {
  background-color: var(--accent);
  color: var(--text);
  border: none;
}
.btn-red:hover {
  background-color: var(--accent-700);
  color: var(--text);
  border: none;
}
.btn-pink:hover {
  background-color: var(--primary-600);
  color: var(--text);
}
.featured-mods img {
  border-radius: 1rem;
  width: 100%;
  height: auto;
}
.nav-link {
  color: #ddd;
  &:hover {
    color: #fff;
  }
}

.custom-card {
  background-color: var(--background-900);
  height: 100% !important;
  border: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: 0.5rem;
  & .custom-card-body {
    word-wrap: break-word;
    text-align: center;
    padding: 1.5rem;
    flex: 1 1 auto;
  }
  & .custom-card-title {
    margin-bottom: 1rem;
    color: var(--text);
    font-size: 1.3rem;
  }
  & .custom-card-text {
    margin-bottom: 1rem;
    color: var(--text-400);
  }
  & .custom-card-button {
    /* align to the end */
  }
}

.nav-link {
  font-size: 1.1rem;
}
.footer {
  background-color: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-link {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--primary);
}
.footer-icon {
  font-size: 1.5rem;
  color: #ccc;
  transition: color 0.1s ease;
}

.footer-icon:hover {
  color: var(--secondary);
}