:root {
  --nav-font-size: 16px;
  --content-font-size: 18px;
}

main {
  font-size: var(--content-font-size);
  font-family: "Times New Roman", Times, serif;
}

main > div {
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 2em;
}

header {
  flex-direction: column;
}

header nav {
  font-size: var(--nav-font-size);
}

h3 {
  font-size: inherit;
  font-weight: bold;
  margin-bottom: 0;
  line-height: inherit;
}

.explanation__content article p {
  margin-left: 15px;
}

.explanation__content article,
.explanation__intro,
.explanation__content-conclusion {
  margin-bottom: 50px;
}

.explanation__call-to-action {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}

.style-fl::first-letter {
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
  font-size: 150%;
}

/* TABLET MODE */
@media screen and (min-width: 600px) {
  :root {
    --nav-font-size: 20px;
    --content-font-size: 20px;
  }

  header {
    flex-direction: row;
  }

  header nav .button {
    white-space: nowrap;
  }
}

/* DESKTOP MODE */
@media screen and (min-width: 1000px) {
  .container {
    width: 985px;
  }

  main > div {
    margin-left: 13%;
  }
}