:root {
  --menu-bounce: linear(0, 0.01 1%, 0.04 2.1%, 0.089 3.2%, 0.158 4.4%, 0.318 6.6%, 0.8 12.5%, 0.92 14.2%, 1.023 15.9%, 1.107 17.6%, 1.167 19.2%, 1.211 20.9%, 1.237 22.6%, 1.245 24.9%, 1.225 27.5%, 1.185 30.1%, 1.059 36.4%, 1.005 39.6%, 0.963 43.1%, 0.943 46.6%, 0.945 51.9%, 0.998 63.8%, 1.013 70.4%, 1);

/* Change these variables to adjust the menu */
  --menu-arc: 5deg;
  --menu-distance-multiplier: 20%;
  --faded-letter-spacing: 35%;
}

#sp-header {
  height: 0px;
}


.rtmg-menu-hover li {
  font-family: "Comforter"!important;
  font-size: 3rem;
  padding-block: .1rem;
  list-style-type: none;
  width: fit-content;
}

.rtmg-menu-hover li a,
.rtmg-menu-hover li a:hover,
.rtmg-menu-hover li a:focus-within {
  font-family: 'Comforter'!important;
}

.rtmg-menu-hover li a {
  color: #000000;
}


.rtmg-menu-hover {
  
  @media (hover) and (prefers-reduced-motion: no-preference) {

    &:has(li:nth-child(1):hover) {--target: 1}
    &:has(li:nth-child(2):hover) {--target: 2}
    &:has(li:nth-child(3):hover) {--target: 3}
    &:has(li:nth-child(4):hover) {--target: 4}
    
    & > li {
      transform-origin: -200% 50%;
      transition:
        transform 1s var(--menu-bounce),
        opacity,
        letter-spacing .3s linear;
    }
    
    &:has(> li:hover) > li:not(:hover),
    &:has(> li:focus-within) > li:not(:focus-within) {
      
      
     /* DO NOT CHANGE THESE SETTINGS */
      --distance-from-target: abs(var(--sibling-index) - var(--target));
      --distance-multiplier-calculation: var(--distance-from-target) * var(--menu-distance-multiplier);
      --gradual-fadeout: calc(100% - var(--distance-multiplier-calculation));
      --angle: calc((var(--sibling-index) - var(--target)) * var(--menu-arc));

      opacity: var(--gradual-fadeout);
      transform: rotateZ(var(--angle));
      letter-spacing: var(--faded-letter-spacing);
    }
  }
}