body {
  --color-background: #f8f8ff;
  --color-text: #363636;

  --color-primary: #1bb6dd;
  --color-secondary: #ED7A1D;
  --color-tertiary: #3796d1;

  --color-background-secondary: #d1ecfd;
  
  --color-navbar-text: var(--color-primary);
  --color-ghost-background: var(--color-primary);
  --color-link-hover:var(--color-primary);

  --color-h1-title: var(--color-secondary);
  
  --color-link: var(--color-tertiary);
  --color-navbar-hover-text: var(--color-tertiary);
}

@media (prefers-color-scheme: dark) {
  body {
    --color-background: #0F2F43;
    --color-text: #dfdfdf;

    --color-primary: #38a3a3;
    --color-secondary: #d09c3d;
    --color-tertiary: #F5CB5C;

    --color-background-secondary: #14384e;
  }
}