:root {
    --clr-primary-Red: hsl(0, 78%, 62%);
    --clr-primary-Cyan: hsl(180, 62%, 55%);
    --clr-primary-Orange: hsl(34, 97%, 64%);
    --clr-primary-Blue: hsl(212, 86%, 64%);
  
    --clr-neutral-VeryDarkBlue: hsl(234, 12%, 34%);
    --clr-neutral-GrayishBlue: hsl(229, 6%, 66%);
    --clr-neutral-VeryLightGray: hsl(0, 0%, 98%);
  
    --fw-regular: 200;
    --fw-medium: 400;
    --fw-bold: 600;
  
    --ff-base: "Poppins", serif;
  }
  
  /* 1. Use a more-intuitive box-sizing model */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  
  /* 3. Improve text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-bottom: 4rem;
    font-family: var(--ff-base);
  }
  
  /* 4. Improve line wrapping */
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-VeryDarkBlue);
  }
  
  .header {
    margin: 3.5rem auto;
    max-width: 500px;
    text-align: center;
  }
  
  .card {
    background-color: var(--clr-neutral-VeryLightGray);
  }
  
  p {
    color: var(--clr-neutral-GrayishBlue);
    font-size: 13.93px;
    padding-top: 0.828rem;
  }
  
  .card__section {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .Supervisor__card, .TeamBuilder__card, .Karma__card, .Calculator__card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 340px;
    margin: 1rem;
    padding: 2rem;
    border-radius: 0.427rem;
    border-top: 0.325rem solid;
  }
  
  .Supervisor__card {
    border-color: var(--clr-primary-Cyan);
    margin-top: 70px;
  }
  
  .TeamBuilder__card {
    border-color: var(--clr-primary-Red);
    margin-top: -100px;
  }
  
  .Karma__card {
    border-color: var(--clr-primary-Orange);
    margin-top: -70px;
    order: 3;
  }
  
  .Calculator__card {
    border-color: var(--clr-primary-Blue);
    margin-top: 70px;
  }
  
  img {
    display: block;
    margin-left: auto;
    margin-top: 2rem;
  }
  
  .Supervisor__card:hover,
  .TeamBuilder__card:hover,
  .Karma__card:hover,
  .Calculator__card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }
  
  @media (max-width: 65rem) {
    html {
      font-size: 100%;
    }
  
    .card {
      flex-wrap: nowrap;
      flex-direction: column;
    }
  
    .card__section {
      display: flex;
      flex-direction: column;
    }
  
    .header {
      width: 400px;
      text-align: center;
    }
  
    .header h1 {
      font-size: 2rem;
    }
  
    .header p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 24rem) {
    .header {
      margin: 5rem auto;
      max-width: 300px;
    }
  
    .header h1 {
      font-size: 1.5rem;
    }
  
    .header p {
      font-size: 0.9rem;
    }
  
    .Supervisor__card {
      border-color: var(--clr-primary-Cyan);
      margin-top: -40px;
    }
  
    .TeamBuilder__card {
      border-color: var(--clr-primary-Red);
      margin-top: 40px;
    }
  
    .Karma__card {
      border-color: var(--clr-primary-Orange);
      margin-top: 40px;
    }
  
    .Calculator__card {
      border-color: var(--clr-primary-Blue);
      margin-top: 40px;
      order: 3;
    }
  
    img {
      display: block;
      margin-left: auto;
      margin-top: 2rem;
    }
  }