/* FONTS */
:root {
  /* Font-related Variables */
  font-size: 16px;
  --body-font: "ABeeZee", sans-serif;
  --scribble-font: "Caveat", cursive;

  /* Padding & Margin */
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-m: 1.5rem;
  --spacing-l: 2rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;

  /* Colors */
  --color-primary: #DEC7EB;
  --color-secondary: #EE96D6;
  --color-bg-primary: #131609;
  --color-bg-secondary: #102009;
  --color-overlay-bg: #102009aa;
  --color-img-box-hover: #132a0a;

  /* Navbar */
  --navbar-height: 5rem;
}

/* MEDIA QUERIES */

/* LIGHT MODE COLORS */
@media (prefers-color-scheme: light) {
  :root {
    --color-primary: #2D3315;
   --color-secondary: #315F1C;
   --color-bg-primary: #DEC7EB;
   --color-bg-secondary: #F2B0E0;
   --color-overlay-bg: #DEC7EB99;
  }
}