:root {
  /* COLOR THEMES */
  --c-bg: #050505;
  --c-canvas: #0a0a10;
  --c-button: #000;
  --c-primary: #0ff; /* Player, UI Text */
  --c-secondary: #f0f; /* Platforms, Highlights */
  --c-hazard: #f00; /* Spikes */
  --c-goal: #0f0; /* Exit */
  --c-grid: #1a1a24;
  --c-text-shadow: #0ff;

  /* FONT SIZES */
  --fs-title: 2.5rem;
  --fs-subtitle: 1.5rem;
  --fs-text: 1rem;

  /* FONT WEIGHTS */
  --fw-bold: 700;
  --fw-normal: 600;
  --fw-regular: 400;
}

.font-size-title {
  font-size: var(--fs-title);
}

.font-weight-bold {
  font-weight: var(--fw-bold);
}

.font-size-subtitle {
  font-size: var(--fs-subtitle);
}

.font-weight-normal {
  font-weight: var(--fw-normal);
}

.font-size-text {
  font-size: var(--fs-text);
}

.font-weight-regular {
  font-weight: var(--fw-regular);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.align-center {
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

.f-height-100 {
  height: 100%;
}

.f-width-100 {
  width: 100%;
}

.f-height-0 {
  height: 0;
}

.f-width-0 {
  width: 0;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-50 {
  opacity: 0.5;
}

.relative {
  position: relative;
}

.mt-10 {
  margin-top: 1rem;
}

.mr-10 {
  margin-right: 1rem;
}

.hidden {
  display: none !important;
}

.button {
  cursor: pointer;
  font-family: inherit;
}

.gap-4 {
  gap: 4rem;
}