:root {
  --font-family--sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family--display: 'MeowScript';
  --font-family--display-clean: 'DM Sans';

  --color--bg: rgba(255, 212, 0, 1);
  --color--white: rgba(255, 255, 255, 1);
  --color--white-70: rgba(255, 255, 255, 0.7);
  --color--white-30: rgba(255, 255, 255, 0.3);
  --color--white-20: rgba(255, 255, 255, 0.2);
  --color--black: rgba(0, 0, 0, 1);
  --color--black-90: rgba(0, 0, 0, 0.9);
  --color--black-70: rgba(0, 0, 0, 0.7);
  --color--black-50: rgba(0, 0, 0, 0.5);
  --color--black-30: rgba(0, 0, 0, 0.3);
  --color--black-20: rgba(0, 0, 0, 0.2);
  --color--black-5: rgba(0, 0, 0, 0.05);
  --color--dark-gray: rgba(127, 106, 13, 1);/* Same as color-black-50 with opacity, use-case: for svgs so you dont see layering */
  --color--gray: rgba(178, 148, 10, 1); /* Same as color-black-30 with opacity, use-case: for svgs so you dont see layering */
  --color--warning: rgba(255, 0, 0, 1);
  --color--monster: rgba(52, 160, 164, 1);
  --color--count: var(--color--black);
  --color--chrome-bg: rgba(252, 248, 255, 1);
  --color--chrome-border: rgba(228, 225, 236, 1);
  --color--glow: rgba(255, 136, 2, 1);
  --color--glow-30: rgba(255, 136, 2, .3);

  --border-radius--circular: 99rem;
  --border-radius--rounded: 1rem;
  --border-radius--slight: 2px;
  --border-radius--squircle-no-support: 1rem;
  --border-radius--squircle: 2rem;

  --border--thick: solid var(--height--border-thick) var(--color--black);
  --border--norm: solid var(--height--border-norm) var(--color--black);
  --border--thin: solid var(--height--border-thin) var(--color--black);

  --box-shadow--top: 0px 2px 14px 4px var(--color--glow-30); 

  --padding--edges: 1.5rem;

  --gap--header-buttons: 0.5rem;

  --transition--norm: transform 0.2s ease;
  --transition--norm-all: all 0.2s ease;
  --transform--hover: scale(1.1);

  --height--reputation-button: 7rem;
  --height--reputation-button--hover: 6px;
  --height--shortcut-button: 4rem;
  --height--shortcut-line: 2px;
  --height--page-item: 4.2rem;
  --height--border-thick: 2.5px;
  --height--border-norm: 2px;
  --height--border-thin: 1px;

  --width--main-area: clamp(800px, 70cqw, 1140px);

  --margin-top--header: 2rem;

  --letter-spacing--tighter: -0.02rem;

  --opacity--disabled: 0.3;

  --rotation--crescent: -63deg;

  --easing--bezier: cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
  font-family: 'MeowScript';
  src: url('../fonts/MeowScript-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* DM Sans Variable Font - Italic */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* DM Sans Variable Font - Normal */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}