@import url("intro.css");
@import url("step2.css");
@import url("step3.css");
@import url("step4.css");
@import url("step5.css");
@import url("step6.css");
@import url("step7.css");
@import url("step8.css");
@import url("step9.css");
@import url("step10.css");
@import url("step11.css");
@import url("step12.css");
@import url("step13.css");

@import url("fugas.css");

@import url("fuga6-final.css");
@import url("conclusion.css");

.wrapper {
  background: #261729;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scrolly {
  position: sticky;
  top: 0;
  overflow: hidden;
}

.scroll-sections {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.scroll-sections .step {
  height: 100vh;
}

.step,
.step-viz {
  height: 100vh;
}

.step-element {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
}

/* .step-display {
  position: absolute;
  height: 100vh;
  opacity: 0;
  z-index: 2;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.8s ease;
} */

.step-display {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  z-index: 2;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  margin: 0 auto;
}

.step-element.active {
  opacity: 1;
}

.inactive {
  pointer-events: none;
}

.desktop {
  display: flex;
}

.mobile {
  display: none;
}

.tap {
  fill: #70657a;
}

.drops {
  opacity: 0;
  fill: #a355df;
}

.nombre-fuga {
  fill: #302235;
}

.active .tap {
  fill: #ea98ff;
}

.active .nombre-fuga {
  fill: #fff;
}

.active .drops {
  opacity: 1;
}

@media (max-width: 740px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}