nav {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 7vh;
  padding: 1.5vh 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow-x: hidden;
  z-index: 50;
  transition-duration: 0.3s;
}

nav img {
  height: 5vh;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 2vh;
  margin-right: 1vw;
  font-weight: 300;
}

nav a:hover {
  rotate: -1.5deg;
  translate: 0vh -1vh;
}

nav .rightSide a {
  color: rgba(255, 255, 255, 0.842);
}

.particle {
  position: absolute;

  pointer-events: none;
  z-index: 10;
}

nav #navLogo,
nav #navToggle {
  height: 5vh;
}


nav #navLogo .inHover,
nav #navToggle .inHover {
  scale: 0;
  animation-name: navLogoAnimation;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}



nav .rightSide {
  display: flex;
}


nav .rightSide a {
  background: linear-gradient(90deg, transparent 50%, var(--primaryColor) 50%);
  background-size: 200%;
  transition: 0.3s;
  padding: 1vh 1vw;
  border-radius: 1vh;
}

nav .rightSide a:hover {
  background-position: 100%;
}

#toggleContainer {
  display: none;
}

nav #navToggle i {
  font-size: 3vh;
}



.darkBGNav {
  background-color: rgba(0, 0, 0, 0.671);
}

.darkBG {
  background-color: black !important;
}

@media (max-width: 1024px),
(max-aspect-ratio: 13/9) {
  nav .rightSide {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 50;
    display: initial;
    text-align: center;
    align-items: center;
    padding: 10vh;
    transform: translateY(100vh);
    opacity: 0;
    transition-duration: 0.3s !important;
    margin-top: 7vh;

  }

  nav {
    padding: 2.5vh 5vw;
  }

  nav .rightSide a {
    margin: 2vh auto;
  }

  #toggleContainer {
    display: block;
  }

  nav .openNav {
    transform: translateX(0vw) !important;
    opacity: 1;
  }

}


@keyframes navLogoAnimation {
  0% {
    rotate: 2deg;
  }

  50% {
    rotate: -2deg;
  }

  100% {
    rotate: 2deg;
  }
}