:root {
  /* Primary Colors */
  --color-primary: #d30f34;
  --color-primary-hover: #a80c2a;

  /* Text Colors */
  --text-color: #ffffff;
  --text-color-muted: #8f8f8f;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;

  /* Background Colors */
  --bg-color-dark: #020000;
  --bg-color-white: #ffffff;

  --bg-color-gray-1: #111213;
  --bg-color-gray-2: #161819;
  --bg-color-gray-3: #202324;
  --bg-color-gray-4: #323536;
  --bg-color-gray-5: #3e4345;
  --bg-color-gray-6: #4d5356;

  /* Border Colors */
  --border-color-default: #585858;
  --color-border: #374151;

  /* Transition Speeds */
  --transition-normal: 300ms;

  /* Border Radius */
  --radius-lg: 0.75rem;
}

@font-face {
  font-family: "Nasalization";
  src: url("../fonts/nasalization-rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Global Styles */
html {
  scroll-behavior: smooth;
}

/* Page Background */
#page {
  background: #170101;
  background-image: linear-gradient(
    90deg,
    #170101 0%,
    #1c0404 50%,
    #170101 100%
  );
}

/* Custom Scrollbar */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 transparent;
}

.bg-primary {
  /* transition: 500ms; */
  -webkit-transition: background-position 200ms linear;
  -ms-transition: background-position 20ms linear;
  transition: background-position 200ms linear;
  background: #a80c2a;
  background-image: linear-gradient(to right, #a80c2a 45%, #d30f34 100%);
  background-size: 200% auto;
}

.bg-primary:hover {
  background-position: right center;
}

/* Blur Background */
.bg-blur {
  background-color: rgb(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

/* Header */
header#header {
  background-color: transparent;
  transition: background-color var(--transition-normal) ease,
    box-shadow var(--transition-normal) ease;
}

header.scrolled {
  background-color: var(--bg-color-dark) !important;
}

input[type="checkbox"].custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="checkbox"].custom-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

input[type="checkbox"].custom-checkbox:checked::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

input[type="checkbox"]#agreeCheckbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="checkbox"]#agreeCheckbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

input[type="checkbox"]#agreeCheckbox:checked::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

/* Sticky Footer Layout */
#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer#footer {
  margin-top: auto;
}