html {
  font-family: "Roboto", sans-serif;
}

/* This a pattern and a good place to put the box-sizing property */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  padding: 0;

  margin: 0;
}

.container {
  width: 100vw;
}
.row {
  width: 80%;
  padding: 100px 0;
  margin: 0 auto;
}

.header__inner h1 {
  font-size: 48px;
  font-weight: 900;
}

.header__inner p {
  font-weight: 400;
  font-size: 21px;
  color: #e1e1e1;
  margin-bottom: 4rem;
}

.btn {
  text-decoration: none;
  color: black;
  text-align: center;
  font-weight: 700;
  font-size: 21px;
  background: #38cfd9;
  border: none;
  border-radius: 32px;
  width: 200px;
  padding: 16px 32px;
  cursor: pointer;
}
.header p {
  text-align: start;
}
.header__inner {
  width: 70%;
}

h3,
p {
  text-align: center;
}

/* A way to all elements, .card__box in this case, but not the fist one */
.cards__box + .cards__box {
  margin-left: 1rem;
}
.bg_light h3 {
  font-size: 2rem;
  color: #87629a;
}
.bg_dark_green {
  background: #23424a;
  color: white;
}
.bg_green {
  background: #136c72;
  color: white;
}
.bg_green .cards__box {
  margin-left: 2rem;
}
.bg_green h3 {
  font-size: 2rem;
}
.bg_light_green {
  background: #38cfd9;
}
.flex {
  display: flex;
}