:root {
  --navWidth: 0px;
}

.navOpen {
  opacity: 1 !important;
}

.navHidden {
  /*clip-path: inset(0 0 0 0);*/
  display: flex !important;
}

@media (max-width: 950px) {
  #mainNav {
    width: var(--navWidth);
    height: 100dvh;
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: none;
    min-width: var(--minWebsiteSize);
    overflow: auto !important;
    background-color: rgb(0, 0, 0);
    opacity: 0;
    transition: opacity 0.2s;
    will-change: opacity;
    box-sizing: border-box;
    padding: 0 0 0 0;
  }

  #mainNavList {
    height: calc(100dvh - var(--headerFullHeight));
    position: absolute;
    top: var(--headerFullHeight);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding: 0 0 var(--headerFullHeight) 0;
    box-sizing: border-box;
  }

  #mainNavList li {
    flex: 0;
    border-top: none;
    width: 90dvw;
    padding: 0;
    margin: 0 0 0 var(--scrollBarWidth);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #mainNavList li a {
    width: 100%;
    padding: 5% 0;
    background-color: rgba(173, 216, 230, 0);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navZoom:hover {
  font-size: var(--navFontSize) !important;
  }

  .navHidden {
    /*clip-path: inset(0 0 100% 0);*/
    display: none !important;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  #mainNavList {
    justify-content: flex-start;
  }
}


@media (max-width: 300px) {
  #mainNavList {
    justify-content: flex-start;
    padding: 0;
  }
}