:root {
  --black: #302624;
  --creme: #EAE2D9;
  --green: #8dcbb4;
  --lilac: #DCC6E2;
  --orange: #FF7842;
  --white: #FFFFFF;
  --yellow: #FBBB20;
  --sideband: 3.3333333333333335vw;
}

html {
  overflow-x: hidden;
}

body {
  color: #302624 !important;
  font-family: 'retor', sans-serif !important;
  transition: background-color 1s ease;
  overflow-x: hidden;
}

html,
.elementor-page,
#page,
.site,
.site-content {
  transition: background-color 1s ease;
}

.EqSideBand {
  height: 100vh;
  width: var(--sideband);
  position: fixed;
  background: #302624;
  color: #EAE2D9;
  writing-mode: vertical-rl;
  font-size: 1.4583333333333333vw;
  display: flex;
  top: 0;
  z-index: 99999;
}

.EqSideBand.is-left  { left: 0; transform: scale(-1, -1); }
.EqSideBand.is-right { right: 0; }

.EqSideBand.is-left div {
  animation-name: sideband-left;
}

.EqSideBand.is-right div {
  animation-name: sideband-right;
}

.EqSideBand div {
  display: block;
  padding-bottom: 1.0416666666666665vw;
  white-space: nowrap;
  margin-right: .9722222222222222vw;
  font-family: 'retor', sans-serif;
  font-weight: 500;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes sideband-left {
  0%   { transform: translate(0, 0); }
  100% { transform: translateY(-100%); }
}

@keyframes sideband-right {
  0%   { transform: translateY(-100%); }
  100% { transform: translate(0, 0); }
}

.eq-split-parent { overflow: hidden; }

/* Intro */
.EqIntro {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99997;
  overflow: hidden;
}
.EqIntro__item {
  position: absolute;
  width: 350px;
}
.EqIntro__banana {
  width: 100%;
  fill: #FABA1F;
  stroke: #302624;
  stroke-width: 9;
  display: block;
}

/* Cursor */
.EqCursor {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 200px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

.SharkEatBanana { cursor: none; }

/* Banana */
.EqBananaWrap {
  position: fixed;
  right: -8.3vw;
  bottom: -8.3vw;
  width: 29.1vw;
  height: 45vw;
  pointer-events: none;
  z-index: 0;
  animation: banana-float 4s ease-in-out infinite;
}

.EqBanana {
  width: 100%;
  height: 100%;
}

.EqBanana polygon {
  fill: #FABA1F;
  stroke: #302624;
  stroke-width: 9;
}

@keyframes banana-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

@media (max-width: 768px) {
  :root {
    --sideband: 7.5vw;
  }
  .EqSideBand {
    font-size: 3.75vw;
  }
  .EqSideBand div {
    margin-right: 1.875vw;
  }
}