:root {
  --navFontSize: clamp(.9rem, .1rem + .7vw, 3rem);
  --ipFontSize: clamp(.9rem, .1rem + .7vw, 3rem);
  --iconSize: clamp(30px, 1rem + 1vw, 2.5rem);
  --iconGap: calc(var(--iconSize) / 2);
}

/*General Nav Start*/

nav a:visited {
  color: var(--defaultFontColor);
}

/*General Nav End*/

/*Header Nav Start*/

#mainNav {
  display: flex;
  justify-self: flex-end;
}

#mainNavList {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#mainNavList a {
  font-family: "NotoSans", Arial, Helvetica, sans-serif;
  line-height: 1;
  font-size: var(--navFontSize);
  text-transform: uppercase;
  color: var(--defaultFontColor);
  text-decoration: none;
  line-height: 1;
  position: relative;
  width: fit-content;
  height: fit-content;
}

#mainNavList a::before {
  content: "";
  display: flex;
  position: absolute;
  bottom: -5px;
  left: 0;
  background-color: rgb(82, 82, 82);
  height: 4px;
  width: 25%;
  z-index: 2;
  transform-origin: left;
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.1s;
  transition-delay: 0.1s;
  background: linear-gradient(
  to bottom,
  rgb(46, 46, 46) 0%,
  rgb(95, 95, 95) 20%,
  rgb(168, 168, 168) 45%,
  rgb(168, 168, 168) 55%,
  rgb(95, 95, 95) 80%,
  rgb(46, 46, 46) 100%
);
}

#mainNavList a:hover::before {
  transform: scale(1);
  transition-delay: 0s;
}

#mainNavList a::after {
  content: "";
  display: flex;
  position: absolute;
  bottom: -5px;
  left: 0;
  background-color: rgb(39, 158, 255);
  height: 4px;
  width: 100%;
  z-index: 1;
  border-radius: 0 5px 5px 0;
  transform-origin: left;
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.1s;
  transition-delay: 0s;
}

#mainNavList a:hover::after {
  transform: scale(1);
  transition-delay: 0.1s;
}

#mainNavList li:nth-child(7n+1) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(5, 108, 149, 0.64) 0%,
  rgb(7, 74, 218) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(7, 74, 218) 80%,
  rgba(5, 108, 149, 0.64) 100%
);
}

#mainNavList li:nth-child(7n+2) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(47, 130, 9, 0.64) 0%,
  rgb(3, 140, 5) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(3, 140, 5) 80%,
  rgba(47, 130, 9, 0.64) 100%
);
}

#mainNavList li:nth-child(7n+3) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(205, 11, 11, 0.64) 0%,
  rgb(244, 11, 11) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(244, 11, 11) 80%,
  rgba(205, 11, 11, 0.64) 100%
);
}

#mainNavList li:nth-child(7n+4) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(124, 7, 150, 0.64) 0%,
  rgb(201, 11, 244) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(201, 11, 244) 80%,
  rgba(124, 7, 150, 0.64) 100%
);
}

#mainNavList li:nth-child(7n+5) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(112, 105, 6, 0.64) 0%,
  rgb(238, 186, 13) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(238, 186, 13) 80%,
  rgba(112, 105, 6, 0.64) 100%
);
}

#mainNavList li:nth-child(7n+6) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(241, 101, 8, 0.64) 0%,
  rgb(220, 64, 7) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(220, 64, 7) 80%,
  rgba(241, 101, 8, 0.64) 100%
);
}

#mainNavList li:nth-child(7n+7) > a::after {
  background: linear-gradient(
  to bottom,
  rgba(96, 96, 96, 0.64) 0%,
  rgb(212, 212, 212) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(212, 212, 212) 80%,
  rgba(96, 96, 96, 0.64) 100%
);
}

#mainNav video {
  display: none;
}

/*Header Nav End*/

/*Icon Links Start*/

.externalLinksList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--iconGap);
  flex-wrap: wrap;
  list-style-type: none;
}

.externalLinksList a {
  font-size: var(--iconSize);
  color: var(--defaultFontColor);
  cursor: pointer;
}

.externalLinksList a:visited {
  color: var(--defaultFontColor);
}

/*Nav Icon Links Start*/

nav .externalLinksList {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/*Nav Icon Links End*/

/*Icon Links End*/

/*Footer Nav Start*/

footer nav ul {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/*Footer Nav End*/

  @media (min-width: 2000px) {
    #mainNavList {
      gap: 20px;
    }
  }

  @media (max-width: 950px) {
    #mainNav {
      display: none;
      position: fixed;
      box-sizing: border-box;
      /*top: var(--mobileHeaderHeight);*/
      padding: var(--mobileHeaderHeight) 0 0 0;
      top: 0;
      height: 100dvh;
      left: 0;
      z-index: 96;
      width: 100%;
      background-color: var(--elementBackgroundColor);
      flex-direction: column;
      overflow-y: auto;
      justify-content: flex-start;
      opacity: 0;
      transition: opacity 0.2s;
      overflow: hidden;
    }

    #mainNavContainer {
      z-index: 99;
      overflow-y: auto;
      margin: auto;
      width: 100%;
      scrollbar-width: thin;
    }

    #mainNavContainer::-webkit-scrollbar {
      width: .5vw;
    }

    #mainNavList {
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 40px;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      padding: 0 0 var(--mobileHeaderHeight) 0;
      margin: auto;
    }

    #mainNav:has(i) #mainNavList {
      padding: 0;
      margin: auto auto 0 auto;
    }

    #mainNavList a::before, #mainNav a::after {
      display: none;
    }

    #mainNavList a:hover::before {
      transform: scale(0);
    }

    #mainNavList a:hover::after {
      transform: scale(0);
    }

    nav .externalLinksList {
      display: flex;
      padding: 0 0 var(--mobileHeaderHeight) 0;
      margin: 80px auto auto auto;
    }

    #loop {
      z-index: 97;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100dvh;
      object-fit: cover;
      display: flex !important;
      /*filter: blur(1px);*/
      opacity: 0;
      transition: opacity 1s;
      pointer-events: none;
    }

    .displayNav {
      display: flex !important;
    }

    .unhideNav {
      opacity: 1 !important;
      /*transition: opacity 0s !important;*/
    }

    .unhideVideo {
      opacity: 1 !important;
    }
  }

  @media (max-width: 950px) and (prefers-reduced-motion: reduce) {
      #mainNav {
      display: none;
      position: fixed;
      box-sizing: border-box;
      /*top: var(--mobileHeaderHeight);*/
      padding: var(--mobileHeaderHeight) 0 0 0;
      top: 0;
      height: 100dvh;
      left: 0;
      z-index: 96;
      width: 100%;
      background-color: var(--elementBackgroundColor);
      flex-direction: column;
      overflow-y: auto;
      justify-content: flex-start;
      opacity: 0;
      transition: opacity 0.2s;
      overflow: hidden;
    }

    #mainNavContainer {
      z-index: 99;
      overflow-y: auto;
      margin: auto;
      width: 100%;
      scrollbar-width: thin;
    }

    #mainNavContainer::-webkit-scrollbar {
      width: .5vw;
    }


    #mainNavList {
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 40px;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      padding: 0 0 var(--mobileHeaderHeight) 0;
      margin: auto;
    }

    #mainNav:has(i) #mainNavList {
      padding: 0;
      margin: auto auto 0 auto;
    }

    #mainNavList a::before, #mainNav a::after {
      display: none;
    }

    #mainNavList a:hover::before {
      transform: scale(0);
    }

    #mainNavList a:hover::after {
      transform: scale(0);
    }

    nav .externalLinksList {
      display: flex;
      padding: 0 0 var(--mobileHeaderHeight) 0;
      margin: 80px auto auto auto;
    }

    #loop {
      z-index: 97;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100dvh;
      object-fit: cover;
      display: flex !important;
      /*filter: blur(1px);*/
      opacity: 0;
      transition: opacity 1s;
    }

    .displayNav {
      display: flex !important;
    }

    .unhideNav {
      opacity: 1 !important;
      /*transition: opacity 0s !important;*/
    }
    
    .unhideVideo {
      opacity: 0 !important;
    }
  }