@font-face {
    font-family: 'splatoon';
    src: url('/assets/fonts/blitzmain.otf') format('woff');
}

@font-face {
    font-family: 'SpAlterna-Regular';
    src: url('../assets/fonts/spalterna-regular.otf') format('woff');
}

.box .group {
  position: fixed;
  width: 1763px;
  height: 1111px;
  top: 0;
  left: 0;
}

.box .overlap-group {
  position: relative;
  width: 1744px;
  height: 1020px;
  top: 20px;
  background-image: url(https://c.animaapp.com/eDsofCMx/img/group-5.png);
  background-size: 100% 100%;
}

.box .union {
  position: absolute;
  width: 917px;
  height: 591px;
  top: 50px;
  left: 349px;
}

.box .vector {
  position: absolute;
  width: 186px;
  height: 174px;
  top: 200px;
  left: 630px;
}

.box .img {
  position: absolute;
  width: 293px;
  height: 238px;
  top: 180px;
  left: 866px;
}

.box .vector-2 {
  position: absolute;
  width: 275px;
  height: 277px;
  top: 100px;
  left: 750px;
}

.box .union-2 {
  position: absolute;
  width: 210px;
  height: 219px;
  top: 30px;
  left: 327px;
}

.box .union-3 {
  position: absolute;
  width: 257px;
  height: 143px;
  top: 400px;
  left: 1121px;
}

.box .rectangle {
  position: absolute;
  width: 155px;
  height: 62px;
  top: 50px;
  left: 829px;
}

.box .rectangle-2 {
  position: absolute;
  width: 155px;
  height: 62px;
  top: 50px;
  left: 966px;
}

.box .rectangle-3 {
  position: absolute;
  width: 155px;
  height: 62px;
  top: 50px;
  left: 1102px;
}

.box .div {
  position: absolute;
  width: 81px;
  height: 81px;
  top: 450px;
  left: 272px;
  background-color: #e0e5ff;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.box .rectangle-4 {
  position: absolute;
  width: 132px;
  height: 132px;
  top: 425px;
  left: 246px;
  border: 10px solid;
  border-color: #cdaaff;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.box .text-wrapper {
  position: absolute;
  width: 178px;
  height: 80px;
  top: 465px;
  left: 1150px;
  text-shadow: 4px 4px 0px #4e6cff;
  font-family: "Splatoon", woff;
  font-weight: 400;
  color: #ffffff;
  font-size: 36px;
  letter-spacing: 7.20px;
  line-height: 39.6px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.box .skye-workstation {
  position: absolute;
  width: 953px;
  height: 268px;
  top: 220px;
  left: 420px;
  text-shadow: 6px 6px 0px #4e6cff;
  font-family: "SpAlterna-Regular", sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 64px;
  letter-spacing: 12.80px;
  line-height: 70.4px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.box .description-paragraph {
  position: absolute;
  width: 400px;
  height: auto;
  top: 390px;
  left: 420px;
  font-family: "splatoon", woff;
  font-weight: 300;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 24px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.active {
  opacity: 1 !important;
}