*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
  body,
  div,
  span,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  code,
  del,
  dfn,
  em,
  img,
  q,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
  }
  body {
    line-height: 1.5;
  }
  table {
    border-collapse: separate;
    border-spacing: 0;
  }
  caption,
  th,
  td {
    text-align: left;
    font-weight: normal;
  }
  table,
  td,
  th {
    vertical-align: middle;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
  }
  blockquote,
  q {
    quotes: '' '';
  }
  a img {
    border: none;
  }
  
  /* colors */
  :root {
    --color-black: hsla(0, 0%, 0%, 1);
    --color-transparent: hsla(0, 0%, 0%, 0);
    --color-white: hsla(0, 0%, 100%, 1);
  
    --color-acid-green-50: hsla(71, 100%, 96%, 1);
    --color-acid-green-100: hsla(74, 100%, 92%, 1);
    --color-acid-green-200: hsla(75, 88%, 86%, 1);
    --color-acid-green-300: hsla(75, 84%, 76%, 1);
    --color-acid-green-400: hsla(75, 82%, 62%, 1);
    --color-acid-green-500: hsla(75, 99%, 45%, 1);
    --color-acid-green-600: hsla(88, 99%, 34%, 1);
    --color-acid-green-700: hsla(105, 98%, 25%, 1);
    --color-acid-green-800: hsla(109, 100%, 14%, 1);
    --color-acid-green-900: hsla(120, 98%, 7%, 1);
    --color-acid-green: var(--color-acid-green-500);
  
    --color-fluor-red-50: hsla(345, 100%, 98%, 1);
    --color-fluor-red-100: hsla(345, 100%, 95%, 1);
    --color-fluor-red-200: hsla(345, 100%, 87%, 1);
    --color-fluor-red-300: hsla(345, 100%, 78%, 1);
    --color-fluor-red-400: hsla(345, 100%, 66%, 1);
    --color-fluor-red-500: hsla(345, 85%, 52%, 1);
    --color-fluor-red-600: hsla(339, 99%, 38%, 1);
    --color-fluor-red-700: hsla(331, 97%, 28%, 1);
    --color-fluor-red-800: hsla(327, 98%, 17%, 1);
    --color-fluor-red-900: hsla(320, 96%, 9%, 1);
    --color-fluor-red: var(--color-fluor-red-500);
  
    --color-fuchsia-50: hsla(291, 100%, 97%, 1);
    --color-fuchsia-100: hsla(286, 100%, 94%, 1);
    --color-fuchsia-200: hsla(285, 100%, 87%, 1);
    --color-fuchsia-300: hsla(285, 100%, 77%, 1);
    --color-fuchsia-400: hsla(285, 100%, 65%, 1);
    --color-fuchsia-500: hsla(285, 100%, 50%, 1);
    --color-fuchsia-600: hsla(291, 99%, 33%, 1);
    --color-fuchsia-700: hsla(299, 98%, 21%, 1);
    --color-fuchsia-800: hsla(303, 97%, 14%, 1);
    --color-fuchsia-900: hsla(314, 95%, 9%, 1);
    --color-fuchsia: var(--color-fuchsia-500);
  
    --color-gray-50: hsla(220, 33%, 98%, 1);
    --color-gray-100: hsla(223, 24%, 94%, 1);
    --color-gray-200: hsla(228, 17%, 89%, 1);
    --color-gray-300: hsla(224, 12%, 82%, 1);
    --color-gray-400: hsla(225, 9%, 73%, 1);
    --color-gray-500: hsla(224, 6%, 63%, 1);
    --color-gray-600: hsla(232, 3%, 50%, 1);
    --color-gray-700: hsla(230, 3%, 39%, 1);
    --color-gray-800: hsla(216, 4%, 27%, 1);
    --color-gray-900: hsla(220, 3%, 20%, 1);
    --color-gray-950: hsla(210, 3%, 13%, 1);
    --color-gray: var(--color-gray-500);
  
    --color-played-out-orange-400: hsla(20, 100%, 71%, 1);
    --color-played-out-orange-500: hsla(20, 100%, 60%, 1);
    --color-played-out-orange-600: hsla(20, 88%, 51%, 1);
    --color-played-out-orange: var(--color-played-out-orange-500);
  
    --color-school-bus-50: hsla(46, 100%, 96%, 1);
    --color-school-bus-100: hsla(45, 100%, 93%, 1);
    --color-school-bus-200: hsla(44, 100%, 86%, 1);
    --color-school-bus-300: hsla(44, 100%, 76%, 1);
    --color-school-bus-400: hsla(43, 100%, 65%, 1);
    --color-school-bus-500: hsla(45, 100%, 50%, 1);
    --color-school-bus-600: hsla(36, 100%, 43%, 1);
    --color-school-bus-700: hsla(33, 93%, 35%, 1);
    --color-school-bus-800: hsla(29, 98%, 20%, 1);
    --color-school-bus-900: hsla(32, 96%, 10%, 1);
    --color-school-bus: var(--color-school-bus-500);
  
    --color-sl-blue-50: hsla(196, 100%, 97%, 1);
    --color-sl-blue-100: hsla(196, 100%, 93%, 1);
    --color-sl-blue-200: hsla(196, 100%, 87%, 1);
    --color-sl-blue-300: hsla(195, 100%, 77%, 1);
    --color-sl-blue-400: hsla(195, 100%, 66%, 1);
    --color-sl-blue-500: hsla(195, 100%, 50%, 1);
    --color-sl-blue-600: hsla(202, 99%, 38%, 1);
    --color-sl-blue-700: hsla(209, 99%, 28%, 1);
    --color-sl-blue-800: hsla(215, 98%, 18%, 1);
    --color-sl-blue-900: hsla(224, 96%, 11%, 1);
    --color-sl-blue: var(--color-sl-blue-500);
  
    --color-primary: var(--color-played-out-orange);
    --color-primary--inverse: var(--color-gray-50);
    --color-disabled: var(--color-gray-200);
    --color-disabled--inverse: var(--color-gray-400);
  
    --drop-shadow-300: hsla(0, 0%, 0%, 0.3);
  }

  body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400px;
    background-color: var(--color-black);
    color: var(--color-white);
  }
  
  a {
    text-decoration: none;
    color: var(--color-sl-blue);
  }
  
  a:hover {
    text-decoration: none;
    color: var(--color-sl-blue-400);
  }
}