@media (min-width: 600px) {
  /*Remove mobile menu*/
  #navMobile {
    visibility: collapse;
  }
  #navigation {
    position: fixed;
    top: 45vh;
    width: 150px;
    transform: translateY(-50%);
    overflow: visible;
    transition: width 0.3s ease;
    z-index: 10000;
    backdrop-filter: blur(50px);

    &.nav_close {
      width: 0px;
    }
    #navActionButton {
      width: 50px;
      height: 100%;
      text-align: center;
      align-content: center;
      position: absolute;
      border: none;
      border-left: 1px solid rgba(75, 75, 75, 0.541);
      left: 100%;
      z-index: 1;

      #navClosed {
        display: none;
      }

      #navigation.nav_close & {
        opacity: 1;
        #navClosed {
          display: inline;
        }
        #navOpened {
          display: none;
        }
      }
      &:hover {
        cursor: pointer;
        background-color: #05050550;
        border-left: 1px solid rgb(116, 49, 202);
      }
    }

    a {
      background-color: #05050571;
      text-decoration: none;
      display: block;
      width: clamp(100px, 10vw, 100px);
      height: 75px;
      width: 100%;
      text-align: center;
      line-height: 75px;
      border-bottom: 1px solid rgba(75, 75, 75, 0.541);
      opacity: 1;
      transition: opacity 0.3s ease;
      overflow: hidden;

      #navigation.nav_close & {
        opacity: 0;
      }
      &:hover {
        border-bottom: 1px solid rgb(116, 49, 202);
        background-color: #05050550;
      }
    }
  }
}

@media (max-width: 599px) {
  /*Remove desktop menu*/
  #navigation {
    visibility: collapse;
  }

  #navMobile {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    bottom: 3vh;
    right: env(safe-area-inset-right);
    right: 5vw;
    z-index: 10000;
    #navMenu {
      display: flexbox;
      width: 35vw;
      height: 25vh;
      position: absolute;
      left: -25vw;
      top: -26vh;
      backdrop-filter: blur(50px);
      transition:
        top 0.2s,
        visibility 0.25s,
        opacity 0.25s,
        height 0.25s;
      &.nav_close {
        top: 0vh;
        opacity: 0;
        visibility: collapse;
        height: 0px;
      }

      a {
        padding-left: 10px;
        background-color: #05050571;
        font-size: 20px;
        line-height: 40px;
        display: flex;
        width: 100%;
        height: 25%;
        text-decoration: none;
        border-bottom: 1px solid rgba(75, 75, 75, 0.541);
      }
    }
    #mobileNavAction {
      display: block;
      cursor: pointer;
      width: 60px;
      height: 60px;
      background-image: url("../Images/Icons/BurgerMenu.svg");
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 25%;
      background-color: rgba(138, 167, 184, 0.15);
      background-blend-mode: multiply;
      filter: opacity(0.75);
    }
  }
}