.coming-soon {
  display: flex;
  flex-direction: column;
  width: 1440px;
  height: 900px;
  align-items: center;
  position: relative;
  background-color: var(--font-font-color-inv);
}

.coming-soon .element-distance-nebulae {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff;
  opacity: 0.6;
}

.coming-soon .eclipse {
  position: absolute;
  top: calc(50.00% - 493px);
  left: calc(50.00% - 669px);
  width: 820px;
  height: 820px;
  border-radius: 410px;
  filter: blur(100px);
  background: linear-gradient(
    180deg,
    rgba(0, 194, 255, 0) 0%,
    rgba(255, 41, 195, 1) 100%
  );
}

.coming-soon .rectangle {
  position: absolute;
  top: calc(50.00% - 289px);
  left: calc(50.00% + 192px);
  width: 394px;
  height: 559px;
  filter: blur(100px);
  background: linear-gradient(
    180deg,
    rgba(24, 75, 255, 0) 0%,
    rgba(23, 74, 255, 1) 100%
  );
}

.coming-soon .texture {
  position: absolute;
  top: calc(50.00% - 450px);
  left: calc(50.00% - 720px);
  width: 1440px;
  height: 900px;
  mix-blend-mode: overlay;
}

.coming-soon .spacer {
  position: relative;
  width: 128px;
  height: 128px;
}

.coming-soon .text-wrapper {
  position: relative;
  width: 842px;
  font-family: "Inter-ExtraBold", Helvetica;
  font-weight: 800;
  color: var(--font-font-color-head);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28.8px;
}

.coming-soon .div {
  position: relative;
  width: 40px;
  height: 40px;
}

.coming-soon .p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--paragraph-body-x-large-font-family);
  font-weight: var(--paragraph-body-x-large-font-weight);
  color: #323232;
  font-size: var(--paragraph-body-x-large-font-size);
  text-align: center;
  letter-spacing: var(--paragraph-body-x-large-letter-spacing);
  line-height: var(--paragraph-body-x-large-line-height);
  font-style: var(--paragraph-body-x-large-font-style);
}

.coming-soon .text-wrapper-2 {
  position: relative;
  width: 842px;
  font-family: "Inter-ExtraBold", Helvetica;
  font-weight: 800;
  color: var(--font-font-color-head);
  font-size: 80px;
  text-align: center;
  letter-spacing: 0;
  line-height: 96px;
}

.coming-soon .text-wrapper-3 {
  position: absolute;
  top: 857px;
  left: 102px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--paragraph-body-small-font-family);
  font-weight: var(--paragraph-body-small-font-weight);
  color: var(--font-font-color-body);
  font-size: var(--paragraph-body-small-font-size);
  text-align: right;
  letter-spacing: var(--paragraph-body-small-letter-spacing);
  line-height: var(--paragraph-body-small-line-height);
  white-space: nowrap;
  font-style: var(--paragraph-body-small-font-style);
}
/* original css code should be injected above */

.coming-soon {
  width: 100%;
  min-height: 100vh;
  max-width: 1440px;
  height: 900px;
  margin: 0 auto;
  overflow: hidden;
}

.coming-soon .element-distance-nebulae {
  pointer-events: none;
}

.coming-soon .texture {
  display: block;
  object-fit: cover;
}

.coming-soon .text-wrapper,
.coming-soon .text-wrapper-2,
.coming-soon .p,
.coming-soon .text-wrapper-3 {
  margin: 0;
}

.coming-soon .text-wrapper-2 {
  display: block;
}

.coming-soon .text-wrapper-3 {
  width: calc(100% - 204px);
}

@media (max-width: 1440px) {
  .coming-soon {
    height: 900px;
  }
}