variables.css

:root {
  /** colors */
  --color-name: nord;
  --color-bg-shade: #252A33;
  --color-bg-base: #2E3440;
  --color-bg-surface: #373E4D;
  --color-bg-highlight: #40495A;
  --color-fg-shade: #768CB2;
  --color-fg-base: #A6B4CD;
  --color-fg-surface: #D6DCE8;
  --color-fg-highlight: #FFFFFF;
  --color-primary-bg: #2C4948;
  --color-primary-base: #579190;
  --color-primary-fg: #9AC2C2;
  --color-secondary-bg: #25394C;
  --color-secondary-base: #4A7197;
  --color-secondary-fg: #8BA9C6;
  --color-palette-red: #E06C75;
  --color-palette-green: #98C379;
  --color-palette-yellow: #E5C07B;
  --color-palette-blue: #61AFEF;
  --color-palette-purple: #C678DD;
  --color-palette-cyan: #56B6C2;
  --color-palette-orange: #FFBB7C;
  
  /** general */
  --font-family: mononoki Nerd Font;
  --font-size: 1;
  --display-image: block;

  /** surface */
  --surface-maxWidth: 1110px;
  --surface-shadow: 10px 10px 9px #2C4948;
  --surface-borderRadius: 0px;

  /** spacing */
  --space-smallest: 0.125rem;
  --space-small: 0.5rem;
  --space-medium: 1rem;
  --space-large: 1.5rem;
  --space-largest: 3rem;

  /** others */
  --picture-size: 300px;
  --group-count: 7;
}