:root {
    --clr-primary-400: hsl(205, 100%, 33%);
    --clr-primary-300: hsl(205, 100%, 43%);
  
    --clr-accent-400: hsl(188, 97%, 19%);
    --clr-accent-300: hsl(188, 97%, 29%);
  
    --clr-neutral-100: hsl(226, 99%, 99%);
    --clr-neutral-900: hsl(0, 0%, 0%);
  
    --ff-primary: 'Exo 2', sans-serif;
  
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);
  
    --fw-extralight: 200;
    --fw-regular: 400;
    --fw-medium: 500;
  
    --fs-400: 1rem;
    --fs-500: 1.3rem;
    --fs-600: 1.5rem;
    --fs-700: 2rem;
    --fs-800: 2.5rem;
  
    --size-200: .5rem;
    --size-300: .75rem;
    --size-400: 1rem;
    --size-500: 1.25rem;
    --size-600: 1.5rem;
    --size-700: 2rem;
    --size-800: 2.5rem;
    --size-900: 3.5rem;
  }
  
  /* General Styling */

body {
    background: rgb(0, 0, 0);
    color: var(--clr-neutral-100);
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    font-weight: var(--fw-regular);
  }

  /* Utility classes */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .text-primary-400 {
    color: var(--clr-primary-400);
  }
  .text-primary-300 {
    color: var(--clr-primary-300);
  }
  .text-accent-400 {
    color: var(--clr-accent-400);
  }
  .text-accent-300 {
    color: var(--clr-accent-300);
  }
  .text-neutral-100 {
    color: var(--clr-neutral-100);
  }
  .text-neutral-900 {
    color: var(--clr-neutral-900);
  }
  
  .bg-primary-400 {
    background-color: var(--clr-primary-400);
  }
  .bg-primary-300 {
    background-color: var(--clr-primary-300);
  }
  .bg-accent-400 {
    background-color: var(--clr-accent-400);
  }
  .bg-accent-300 {
    background-color: var(--clr-accent-300);
  }
  .bg-neutral-100 {
    background-color: var(--clr-neutral-100);
  }
  .bg-neutral-900 {
    background-color: var(--clr-neutral-900);
  }
  
  .fw-extralight { font-weight: var(--fw-extralight); }
  .fw-regular { font-weight: var(--fw-regular); }
  .fw-medium { font-weight: var(--fw-medium); }
  
  .fs-primary-heading {
    font-size: var(--fs-700);
    line-height: 1.1rem;
  }
  .fs-secondary-heading {
    font-size: var(--fs-600);
    line-height: 1.1rem;
  }
  
  .container {
    --max-width: 1640px;
    --padding: 1rem;
  
    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
  }
  
  .flow > * + * {
    margin-top: var(--flow-spacer, 1.5em);
  }
  
  .pad-heading {
    padding-bottom: var(--heading-padding, .5em);
  }
  
  .even-columns {
    display: grid;
    gap: 1rem;
  }

  #selling-points>li {
    list-style: none;
  }