* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  /* Primary*/

  --Red: hsl(0, 78%, 62%);
  --Cyan: hsl(180, 62%, 55%);
  --Orange: hsl(34, 97%, 64%);
  --Blue: hsl(212, 86%, 64%);

  /* Neutral */

  --Very-Dark-Blue: hsl(234, 12%, 34%);
  --Grayish-Blue: hsl(229, 6%, 66%);
  --Very-Light-Gray: hsl(0, 0%, 98%);

  /*Body Copy*/

  --Font-size: 15px;

  /*Fonts*/

  --Family: [Poppins](https://fonts.google.com/specimen/Poppins);
  --Weights: 200, 400, 600;
  --Weight-1: 200;
  --Weight-2: 400;
  --Weight-3: 600;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 3em;
  background-color: var(--Very-Light-Gray);
}
header {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-align: center;
}
.first-text {
  font-weight: var(--Weight-1);
  font-size: 25px;
}
.second-text {
  font-size: 26px;
  font-weight: var(--Weight-3);
}
.third-text {
  text-align: center;
  font-weight: var(--Weights);
  margin-bottom: 1em;
  margin-top: 1mm;
}
section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  padding: 2em;
  border-radius: 0.5em;
  background-color: white;
  text-align: center;
  box-shadow: 0px 10px 10px 1px var(--Grayish-Blue);
}

.supervisor {
  border-top: 5px solid var(--Cyan);
}

.team-builder {
  border-top: 5px solid var(--Red);
}

.karma {
  border-top: 5px solid var(--Orange);
}

.calculator {
  border-top: 5px solid var(--Blue);
}

.text {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.header2 {
  font-weight: var(--Weight-3);
  color: var(--Very-Dark-Blue);
  font-size: 1.2rem;
}

.paragraph {
  font-weight: var(--Weight-2);
  color: var(--Grayish-Blue);
  font-size: 0.9rem;
}

.image {
  width: 4em;
  margin: 1em auto 0;
}

/* Responsive Design */
@media (min-width: 768px) {
  section {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
  }
}

@media (min-width: 1024px) {
  section {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "supervisor team-builder"
      "karma calculator";
    gap: 2em;
  }

  .supervisor {
    grid-area: supervisor;
  }

  .team-builder {
    grid-area: team-builder;
  }

  .karma {
    grid-area: karma;
  }

  .calculator {
    grid-area: calculator;
  }
}