* {
  padding: 0;
  margin: 0;

  font-family: "Nunito", sans-serif;
}

@media screen and (min-width: 768px) {
  #AboutPage {
    padding: 5rem 3% 0 3%;
    gap: 8rem;
  }
  .imgandaboutText,
  .SkillsAndServices {
    flex-direction: row;
    gap: 2rem;
  }
  .SkillsAndServices {
    flex-direction: row-reverse;
  }
  .ProjectPage > section {
    gap: 2rem;
  }


}
@media screen and (min-width: 900px) {
}
@media screen and (min-width: 1025px) {
  header {
    height: 10vh;
    flex-direction: row-reverse;
    justify-content: start;
    gap: 2rem;
  }
  .menuButton {
    display: none;
  }

  nav {
    position: static;
    width: fit-content;
    height: 100%;
    overflow: visible;
  }
  nav ul {
    flex-direction: row;
    gap: 3rem;
    overflow: visible;

    padding: 0;
    border: none;

    height: 100%;

    background-color: transparent;
  }
  nav ul li {
    height: 100%;
  }
  nav ul li a {
    padding: 0;
  }
  nav ul li:hover a {
    color: var(--mainColor);
    font-weight: 600;
  }
  nav a::before {
    content: "";
    transition: all 0.3s ease;

    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);

    width: 0%;
    height: 2px;

    background-color: var(--mainColor);
  }
  nav a:hover::before {
    width: 100%;
  }
  .imgandaboutText,
  .SkillsAndServices {
    gap: 6rem;
  }

  #AboutPage {
    padding: 8rem 10%;
    gap: 8rem;
  }
  .AboutImageContainer {
    justify-content: start;
  }

  .aboutme-text > p {
    font-weight: 300;
  }
  .ProjectPage > section {
    gap: 2rem;
    padding: 0 5vw;
  }

    .AboutImageContainer > img.HideRightElements {
    opacity: 0;
    transform: translateX(-200px) scale(0.9);
    z-index: 1;
  }
}
@media screen and (min-width: 1441px) {
  #AboutPage {
    gap: 4rem;
    padding: 8rem 15%;
  }
  .AboutImageContainer img {
    width: 80%;
  }

  .ProjectPage > section {
    gap: 2rem;
    padding: 0 8vw;
  }
}