:root {
  --menu-item: rgb(219, 219, 219);
  --hover-color: white;
  --hover-bg: rgb(37, 37, 37);
  --heading-color: rgb(245, 13, 5);

  --menu-bg: rgb(58, 58, 58);
  --menu-bg-close: rgba(34, 34, 34, 0.884);
  --menu-width: clamp(65px, 10dvw, 90px);
  --menu-height: clamp(100px, 50dvh, 140px);
  --translate-value: calc(var(--menu-height) * (-0.7));
}

.menu {
  position: absolute;
  right: 10dvw;
  top: 0px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  width: var(--menu-width);
  height: var(--menu-height);
  background: var(--menu-bg);
  color: var(--menu-item);
  transform: translateY(var(--translate-value));
  transition: transform 0.4s ease;
  --radius: 15px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border: 1px solid rgba(56, 56, 56, 0.801);
  border-top: none;

  box-shadow: 1px 1px 4px 0px rgba(61, 61, 61, 0.692);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 6;

  text-align: center;
  letter-spacing: 1px;
}

.menu.open {
  transform: translateY(0);
}

.menu .menu-content {
  visibility: hidden;
}

.menu.open .menu-content {
  visibility: visible;
  margin: 15px 0;
}

.menu.open .menu-content h2.theme {
  font-size: clamp(0.9rem, 1vw, 1.2rem);
  color: var(--heading-color);
  margin-bottom: 3px;
  text-transform: uppercase;
}

.menu.open .menu-content .item-container {
  cursor: pointer;
}

.menu.open .menu-content .item-container .menu-item {
  font-size: clamp(0.8rem, 1vw, 1rem);
  padding: 3px 0;
  color: var(--menu-item);
}
.menu.open .menu-content .item-container .menu-item:hover {
  color: var(--hover-color);
  background-color: var(--hover-bg);
}

.menu .menu-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  padding: 4px 0;

  font-size: clamp(0.9rem, 1vw, 1rem);
  background: linear-gradient(
    rgba(114, 114, 114, 0),
    40%,
    var(--menu-bg-close)
  );
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
  cursor: pointer;
}
.menu .menu-text:hover {
  color: var(--hover-color);
}