:root {
  /* font */
  --font-size-body: 1rem;
  --font-size-table: 0.9rem;
  --font-size-big: 1.1rem;
  --font-size-huge: 2.25rem;
  --bold: bold;

  /* colors */
/* Orange Delight */
  --orange-delight: #fdc153;
  --blistering-mars: #fd6c53;
  --green-ooze: #e4fd53;
  --electric-lemonade: #53e4fd;
    
  --primary: var(--orange-delight);
  --primary-alt: color-mix(in lab, var(--primary), var(--white) 90%);
  --grey: #ddd;
  --background: #ffffff;
  --background-alt: color-mix(in lab, var(--electric-lemonade), var(--white) 90%);
  --white: #ffffff;
  --black: #333;
  --deep-black: #000;
  --error: var(--blistering-mars);
  --warning: var(--orange-delight);
  --success: color-mix(in lab, var(--green-ooze), var(--black) 10%);
  --info: var(--electric-lemonade);
  --link: color-mix(in lab, var(--electric-lemonade), var(--black) 40%);
  --link-hover: color-mix(in lab, var(--electric-lemonade), var(--black) 20%);
  --text-color-body: #333;
  --table-text-color: #444;
  --text-color-body: var(--black);
  --menu-footer-color: #fbfbfb;
  
  --muted: var(--grey);
  
  /* spacing */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2.5rem;
  --space-lg: 5rem;
  --space-xl: 10rem;
  --container-width: 1280px;
  
  --border-radius: 0.75rem;
  --border-width: 2px;

  --alert-color-shade: 90%;
  --alert-bg-shade: 70%;
  --alert-border-shade: 10%;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf');
  font-style: regular;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic.ttf');
  font-style: italic;
}