:root {
  --glitter: url("https://assets.codepen.io/13471/silver-glitter-background.png");
  --qodef-tab-width: 100% !important;
  --qode-second-main-color: #3082ac;
  /*--clr: 204;*/
  --clr: 40;
}
html,
body {
  padding: 0;
  margin: 0;
}

.qodef-vertical-tabs div.qodef-m-title {
  --shadows: 0%;
  --shadowl: 0%;
  font-size: max(2.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(
    0deg,
    hsla(var(--clr), 100%, 70%) 0%,
    hsla(var(--clr), 100%, 65%) 5%,
    hsla(var(--clr), 80%, 35%) 15%,
    hsla(var(--clr), 10%, 0%) 40%,
    hsla(var(--clr), 25%, 12%) 90%
  );
  background-size: 200% 300%;
  background-position: 0% 0%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  overflow: hidden;
  transform: translate(0px);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}

.qodef-vertical-tabs div.qodef-m-title::before,
.qodef-vertical-tabs div.qodef-m-title::after {
  --gradientPos: 50% 100%;
  content: " ";
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100vh;
  transition: inherit;
}

.qodef-vertical-tabs div.qodef-m-title:before {
  inset: 0;
  position: absolute;
  transform: translate3d(0, 0, 0.01px);
  border-radius: inherit;
  background-image: var(--glitter), var(--glitter),
    linear-gradient(180deg, black 0%, white 80%);
  background-size: 300px 170px, 280px 130px, 200% 200%;
  background-blend-mode: multiply, multiply, overlay;
  background-position: 0px 0px, 0px 0px, var(--gradientPos);
  background-repeat: repeat;
  mix-blend-mode: color-dodge;
  filter: brightness(2) contrast(0.75);
  animation: bubble 20s linear infinite;
  animation-play-state: paused;
  opacity: 0.5;
}

.qodef-vertical-tabs div.qodef-m-title:after {
  background-image: radial-gradient(
      ellipse at center 70%,
      hsla(var(--clr), 100%, 99%, 0.8) 5%,
      hsla(var(--clr), 90%, 80%, 1) 20%,
      transparent 50%,
      transparent 200%
    ),
    linear-gradient(
      90deg,
      hsla(var(--clr), 80%, 10%, 1) -10%,
      transparent 25%,
      transparent 75%,
      hsla(var(--clr), 80%, 10%, 1) 110%
    );

  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-size: 180% 80%, cover;
  background-position: center 220%;
  mix-blend-mode: hard-light;
  filter: blur(5px);
  opacity: 0;
}

.qodef-vertical-tabs div.qodef-m-title,
.qodef-vertical-tabs div.qodef-m-title.over {
  --shadows: 90%;
  --shadowl: 80%;
  background-position: 100% 100%;
  transition: all 0.2s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.qodef-vertical-tabs div.qodef-m-title.over {
  transition-duration: 2s;
}

.qodef-vertical-tabs div.qodef-m-title:before,
.qodef-vertical-tabs div.qodef-m-title.over:before {
  --gradientPos: 50% 50%;
  animation-play-state: running;
  filter: brightness(2) contrast(1);
  opacity: 0.8;
}

.qodef-vertical-tabs div.qodef-m-title:after,
.qodef-vertical-tabs div.qodef-m-title.over:after {
  opacity: 0.8;
  transform: translateY(0px);
}

.qodef-vertical-tabs div.qodef-m-title span {
  grid-column: 1;
  grid-row: 1;
  background-image: linear-gradient(
    hsl(calc(var(--clr) - 43), 27%, 85%) 0%,
    hsl(calc(var(--clr) - 60), 22%, 80%) 19%,
    hsl(calc(var(--clr) - 50), 20%, 75%) 30%,
    hsl(calc(var(--clr) - 52), 36%, 98%) 43%,
    hsl(var(--clr), 70%, 70%, 1) 51%,
    hsl(var(--clr), 50%, 85%, 1) 52%,
    rgb(255, 255, 255) 100%
  );
  background-size: 1em 3.45em;
  color: rgb(214, 222, 226);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transition-timing-function: inherit;
  transition-duration: inherit;
  transition-delay: 0s;
  padding: 0.75em 1.5em;
  transform: translateY(0);
  z-index: 10;
}

@keyframes bubble {
  0% {
    background-position: 0px 340px, 0px 130px, var(--gradientPos);
  }

  100% {
    background-position: 0px 0px, 0px 0px, var(--gradientPos);
  }
}