.pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 9999;
  background-color: var(--dark-bg);
  opacity: 0;
  pointer-events: none;
}

.pre-loader .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  /* border: 1px solid green; */
}

.pre-loader .container::before {
  content: '';
  position: absolute;
  height: 180%;
  aspect-ratio: 1;
  background: url(../../images/bg-pattern.png);
  box-shadow: inset 0 0 240px 240px hsla(220, 20%, 6%, 1);
  z-index: -1;
  opacity: 1;
  /* border: 1px solid red; */
  top: -40%;
}

.pre-loader .graphic {
  position: relative;
  transform: translate3d(-3%, 0, 0);
}

.pre-loader .phrase {
  display: flex;
  align-items: center;
  gap: 1px;
}

.pre-loader .phrase svg {
  opacity: 0;
  max-width: 100%;
}

.pre-loader .space {
  width: 24px;
}

.y {
  margin-top: 4%;
}

.t {
  margin-top: -3%;
}

.i1 {
  margin-top: -3%;
  margin-right: 1%;
}

.i2 {
  margin-top: -3%;
}

.e3 {
  margin-right: 1%;
}

@media screen and (max-width: 1024px) {
  .pre-loader {
    box-shadow: inset 0 0 250px 250px hsla(220, 20%, 6%, 1);
  }
}

@media screen and (max-width: 768px) {
  .pre-loader {
    box-shadow: inset 0 0 150px 150px hsla(220, 20%, 6%, 1);
  }
}

@media screen and (max-width: 767px) {
  .pre-loader .container {
    padding: 3rem;
  }
}