body {
  font-size: 16px;
  font-family: Poppins;
  background-color: #fafafa;
}

.container {
  text-align: center;
  margin-top: 2rem;
}

.container .headline {
  font-size: 1.5rem;
  font-weight: 700;
}

.container .headline .light {
  font-weight: 200;
  color: #4c4e61;
}

.container p {
  text-align: center;
  width: 80%;
  max-width: 500px;
  margin: 20px auto 2rem;
  color: #a3a5ae;
}

.card-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100vw;
  margin: auto;
}

.card {
  width: 350px;
  margin: 15px;
  display: block;
  padding: 24px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05), 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05), 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
  border-top: 4px solid red;
  background-color: white;
}

.card p {
  color: #a3a5ae;
  margin: 15px 0;
  font-size: .9rem;
}

.card img {
  float: right;
}

#supervisor {
  border-color: #45d3d3;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

#team-builder {
  border-color: #ea5353;
}

#calculator {
  border-color: #549ef2;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

#karma {
  border-color: #fcaf4a;
}

@media (min-width: 1300px) {
  #supervisor {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  #calculator {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}