body {
  background-color: var(--strong-green);
}

h1,h2,h3 {
  font-family: var(--header-text-font-family);
  /* color: var(--strong-brown); */
  color: var(--strong-magenta);
  /* background-color: var(--lighten-brown); */
  line-height: 150%;
}

h1 {
  font-size: 42px;
}

h2 {
  font-size: 38px;
}

h3 {
  font-size: 32px;
}

.main-text-big {
  font-family: var(--main-text-font-family);
  color: var(--strong-brown);
  font-weight: 400;
  font-size: 24px;
  line-height: 120%;
}

main {
}

/* common classes ----------------------------------------------------------- */
.nav-section {
  background-color: var(--lighten-brown);
}

.nav-section .nav-item a {
  font-size: 20px;
  color: var(--dissolve-magenta);
  transition: color .5s ease-in-out;
  transition: text-decoration .5s ease-in-out;
}

.nav-section .nav-item a:hover {
  text-decoration: underline;
  color: var(--strong-magenta);
}

/* (1) - Intro -------------------------------------------------------------- */
.intro-wrapper {
  /* width: 75%; */
}

.intro-left {
  background-image: url('../img/bg-left.png');
  /* background-color: var(--dissolve-green); */
}

.intro-center {
  background-color: var(--lighten-green);
}

.intro-right {
  /* background-color: var(--dissolve-green); */
  background-image: url('../img/bg-right.png');
}

/* () Main ------------------------------------------------------------------*/
.main-container {
  background-color: var(--dissolve-green);
}

/* () Footer ------------------------------------------------------------------*/
.footer {
  background-color: var(--lighten-brown);
}