nav {
  display: flex;
  align-items: center;
  padding: 0 10rem;
  gap: 1rem;
  height: 60px;
  background-color: var(--background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

nav img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

nav h3 {
  font-size: var(--subtitle);
  font-weight: var(--light);
  color: var(--white);
}

nav h3 a {
  text-decoration: none !important;
  color: var(--white) !important;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 10rem;
}

section h1 {
  font-size: var(--title);
  font-weight: var(--bold);
  color: var(--white);
}

section h2 {
  font-size: var(--subtitle);
  font-weight: var(--semi-bold);
  color: var(--white);
  margin-top: 1rem;
}

section p {
  font-size: var(--paragraph);
  font-weight: var(--light);
  color: var(--white);
  text-align: justify;
}

/* MEDIA QUERIES */
@media (width < 1000px) {
  nav {
    padding: 0 5rem;
  }

  section {
    padding: 2rem 5rem;
  }

  section h1 {
    font-size: 3rem;
  }
}

@media (width < 800px) {
  nav {
    padding: 0 2rem;
  }

  section {
    padding: 2rem 2rem;
  }

  section h1 {
    font-size: 2rem;
  }

  section h2 {
    font-size: 1.2rem;
  }

  section p {
    font-size: 1rem;
  }
}

@media (width < 600px) {
  nav {
    padding: 0 1rem;
  }

  section {
    padding: 1rem;
  }

  section h1 {
    font-size: 1.5rem;
  }

  section h2 {
    font-size: 1rem;
  }

  section p {
    font-size: 0.9rem;
  }
}