:root{
  --primary-color:#A400EB;
  --accent-warm:#F26A1B;
  --accent-cool:#0E08A6;
   --accent-cyan:#00CFFF;
  --highlight-color:#EE05F2;
  --text-color:#F8F8F8;
  --background:#1B0140;
  --font-xs: 0.563rem;    /* ~9px */
  --font-sm: 0.75rem;     /* 12px */
  --font-base: 1rem;      /* 16px */
  --font-h4: 1.333rem;    /* 21.3px */
  --font-h3: 1.777rem;    /* 28.4px */
  --font-h2: 2.369rem;    /* 37.9px */
  --font-h1: 3.157rem; 
}
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color:var(--text-color);
    background-color: var(--background);
    font-size: var(--font-base);
  }

  /*Base tag styles*/
  h1 {
    font-size: var(--font-h1);
  }

  h2 {
    font-size: var(--font-h2);
  }

  h3 {
    font-size: var(--font-h3);
  }

  h4 {
    font-size: var(--font-h4);
  }

  /*Font specific sizes*/
  .text-sm {
    font-size: var(--font-sm);
  }

  .text-xs {
    font-size: var(--font-xs);
  }

  /*Component Styles*/
  #navbar-container {
    width:100%;
    height:5.25rem;
    background: #111;
    color: white;
  }