.mega-menu {
  height: 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.mega-menu-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.mega-menu-eclipse-element {
  width: max(1300px, 100vw);
  height: max(1300px, 100vw);
  background-color: #d3d8d9;
  border-radius: 100%;
  filter: blur(max(150px, 10vw));
  -webkit-filter: blur(max(150px, 10vw));
  transform: translate3d(0, 0, 0);
  opacity: 0.25;
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  z-index: -1;
  will-change: transform;
}

.menu-item-wrapper,
.menu-item-children-container {
  font-family: Schnyder-L, Helvetica;
  font-weight: 300;
}

.menu-items-wrapper {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 3.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(24px, 1.6vw);
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.menu-item-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: max(4px, 0.3vw);
  .menu-item-title {
    font-size: max(52px, 4.7vw);
    line-height: 1;
    letter-spacing: 2px;
  }
  &:first-child {
    margin-top: max(80px, 5.2vw);
  }
  &:last-child {
    margin-bottom: max(80px, 5.2vw);
  }
  &:hover,
  &:focus {
    .menu-item-title {
      font-weight: 300;
      color: #9da6aa;
    }
    .menu-item-index {
      color: white;
    }
  }
}

.menu-item-title,
.menu-item-link {
  color: white;
  &:visited {
    color: white;
  }
  &:focus {
    font-weight: 300;
    color: #9da6aa;
  }
}

.menu-item-index {
  font-size: max(14px, 1.6vw);
  font-style: italic;
  color: #9da6aa;
  height: fit-content;
}

.menu-item-children-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: max(20px, 2.7vw);
}

.menu-item-link {
  font-size: max(20px, 2.4vw);
  letter-spacing: 2px;
  &:focus {
    font-weight: inherit;
    color: #9da6aa;
  }
}

.menu-item-child-wrapper {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1.1vw;
  svg {
    height: max(19px, 1.6vw);
    width: max(12px, 1.1vw);
    path {
      transition: stroke 0.3s ease;
    }
  }
  &:hover,
  &:focus,
  &:active {
    .menu-item-link {
      font-weight: inherit;
      color: #9da6aa;
    }
    svg {
      transform: rotate(-90deg);
      path {
        stroke: white;
      }
    }
  }
}

.menu-item-title,
.menu-item-index,
.menu-item-link,
.menu-item-child-wrapper > svg {
  transition: color 0.3s ease, transform 0.3s ease-in-out;
}

.menu-socials-container {
  flex-shrink: 0;
  height: max(80px, 5.5vw);
  display: flex;
  justify-content: center;
  gap: max(24px, 1.7vw);
  font-size: max(14px, 1vw);
  font-family: Sometype Mono;
  color: #9da6aa;
  padding-top: max(20px, 1.4vw);
  border-top: 1px solid #202325;
}