html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

.portfolio-section {
  scroll-margin-top: 5rem;
}

main {
  overflow: clip;
}

#about,
#skills,
#projects,
#contact {
  padding-top: clamp(3rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
}

#about .aboutMe,
#skills.Skills,
#projects.projects,
#contact.contact {
  margin-top: 0;
}

nav li a[aria-current="true"] {
  color: var(--toggle-color);
}

.form-success {
  margin: 1rem auto;
  color: var(--text-color);
}

@media (max-width: 47.99em) {
  html {
    scroll-padding-top: 4rem;
  }

  .portfolio-section {
    scroll-margin-top: 4rem;
  }

  #about,
  #skills,
  #projects,
  #contact {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}