.loaders {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  margin: 2rem;
}

.loader-collection {
  padding: 4rem;
  display: grid;
  width: 90vw;
  /* responsive grid 
    - auto-fit detects how many columns can fit before wrappin up
    - minimum width 25rem
    - column width can be (some number) auto maximum in this case
  */
  grid-template-columns: repeat(auto-fit, minmax(25rem, auto));
  grid-gap: 6rem;
  place-items: center;
}

/* preloader */
.preloader {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--black);
  animation: slide-out-container 4s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s;
  animation-fill-mode: forwards;
  z-index: 1;
}

.text-wrapper {
  color: var(--primary);
  position: absolute;
}

.text {
  font-weight: lighter;
  font-size: 54px;
}

.text-1,
.text-3,
.text-4,
.text-8,
.text-9,
.text-11 {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px var(--primary);
}

@keyframes blink {
  0% {
    opacity: 0%;
  }
  1% {
    opacity: 100%;
  }
  99% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
  }
}

.text-1 {
  animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
  opacity: 0;
}

.text-2 {
  animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
  opacity: 0;
}

.text-3 {
  animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
  opacity: 0;
}

.text-4 {
  animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
  opacity: 0;
}

.text-5 {
  animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
  opacity: 0;
}

.text-6 {
  animation: blink 0.8s linear 0.4s, blink 0.8s linear 2.5s,
    slide-out 1s linear 3.2s;
  opacity: 0;
}

.text-7 {
  animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
  opacity: 0;
}

.text-8 {
  animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
  opacity: 0;
}

.text-9 {
  animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
  opacity: 0;
}

.text-10 {
  animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
  opacity: 0;
}

.text-11 {
  animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
  opacity: 0;
}

@keyframes slide-out {
  0% {
    opacity: 0%;
  }
  1% {
    opacity: 100%;
  }

  19% {
    opacity: 100%;
  }
  20% {
    opacity: 0%;
  }

  39% {
    opacity: 0%;
  }
  40% {
    opacity: 100%;
  }

  59% {
    opacity: 100%;
  }
  60% {
    opacity: 0%;
  }

  79% {
    opacity: 0%;
  }
  80% {
    opacity: 100%;
  }

  100% {
    opacity: 100%;
  }
}

@keyframes slide-out-container {
  0% {
    height: 100vh;
  }

  40% {
    height: 100vh;
  }

  100% {
    height: 0%;
  }
}

@media (max-width: 990px) {
  .header {
    font-size: 24px;
  }

  .text {
    font-size: 24px;
  }
}

/* Three Bouncing Balls Loader */
.loader1 {
  width: 120px;
  height: 75px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.loaderSpan {
  font-size: 22px;
  text-transform: uppercase;
  margin: auto;
}

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent);
  animation: bounce 0.5s alternate infinite;
}

.ball:nth-child(2) {
  animation-delay: 0.16s;
}

.ball:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes bounce {
  from {
    transform: scaleX(1.25);
  }
  to {
    transform: translateY(-50px) scaleX(1);
  }
}

/* Spinning Lines Loader */
.loader2 {
  position: relative;
  width: 20rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.lines {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border: var(--border);
  animation: animate 5s linear infinite;
}

.loader2 span:nth-child(1) {
  border-radius: 86% 14% 55% 45% / 25% 68% 32% 75%;
}

.loader2 span:nth-child(2) {
  animation-direction: reverse;
  border-radius: 32% 68% 11% 89% / 63% 32% 68% 37%;
}

.loader2 span:nth-child(3) {
  animation-duration: 3s;
  border-radius: 43% 57% 55% 45% / 82% 60% 40% 18%;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader2 h6 {
  animation: textFade 3s infinite;
}

@keyframes textFade {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Circle Loader */
.loader3 {
  height: 10rem;
  width: 10rem;
  position: relative;
}

.firstCircle {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  --shadow: 0 0 10px var(--accent), 0 0 20px var(--accent),
    0 0 40px var(--accent), 0 0 4px var(--accent);
  background: var(--accent);
  box-shadow: var(--shadow);
  animation: firstCircle 2s infinite alternate ease-in-out;
  transform: scale(0.5);
}

.secondCircle {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  background-color: var(--secondary);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  animation: secondGrow 2s infinite alternate ease-in-out;
  transform: scale(1.2);
  box-shadow: inset 0.1rem 0.1rem 1rem var(--accent),
    inset -0.1rem -0.1rem 1rem var(--accent);
}

@keyframes firstCircle {
  0% {
    transform: scale(0.5);
  }

  25% {
    transform: scale(1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.5);
  }
}

@keyframes secondGrow {
  0% {
    transform: scale(1.2);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.2);
  }

  75% {
    transform: scale(2);
  }

  100% {
    transform: scale(2);
  }
}

/* Fading balls */
.loader4 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 20rem;
  height: 20rem;
}

.loader4 h6 {
  width: 100%;
  display: grid;
  place-content: center;
}

.loader4 div {
  width: 80%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.loader4 span {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: hsl(199, 100%, 36%);
  border-radius: 50%;
  animation: disappear 1s infinite alternate;
}

.loader4 span:nth-of-type(2) {
  background: hsl(192, 100%, 35%);
  animation-delay: 0.8s;
}
.loader4 span:nth-of-type(3) {
  background: hsl(181, 100%, 31%);
  animation-delay: 1.2s;
}
.loader4 span:nth-of-type(4) {
  background: hsl(165, 100%, 33%);
  animation-delay: 0.2s;
}
.loader4 span:nth-of-type(5) {
  background: hsl(144, 100%, 35%);
  animation-delay: 1s;
}
.loader4 span:nth-of-type(6) {
  background: hsl(98, 64%, 42%);
  animation-delay: 0.4s;
}
.loader4 span:nth-of-type(7) {
  background: hsl(69, 72%, 42%);
  animation-delay: 0.6s;
}

@keyframes disappear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(-0.9);
  }
}

/* Block Reveal Loader */
.loader5 {
  width: 9rem;
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader5 .block {
  background-color: var(--primary);
  width: 3rem;
  height: 3rem;
  animation: blockReveal 1.3s infinite ease-in-out;
}

.loader5 div:nth-last-of-type(1) {
  animation-delay: 0.2s;
}

.loader5 div:nth-last-of-type(2) {
  animation-delay: 0.3s;
}

.loader5 div:nth-last-of-type(3) {
  animation-delay: 0.4s;
}

.loader5 div:nth-last-of-type(4) {
  animation-delay: 0.1s;
}

.loader5 div:nth-last-of-type(5) {
  animation-delay: 0.2s;
}

.loader5 div:nth-last-of-type(6) {
  animation-delay: 0.3s;
}

.loader5 div:nth-last-of-type(7) {
  animation-delay: 0;
}

.loader5 div:nth-last-of-type(8) {
  animation-delay: 0.1s;
}

.loader5 div:nth-last-of-type(9) {
  animation-delay: 0.2s;
}

@keyframes blockReveal {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}

/* Fading Dots Spinner */
.loader6 {
  width: 8rem;
  height: 8rem;
  position: relative;
}

.fadeDot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.fadeDot:before {
  content: "";
  display: block;
  width: 15%;
  height: 15%;
  background-color: var(--accent);
  border-radius: 100%;
  animation: fadeDot 1.2s infinite ease-in-out both;
}

.fadeDot:nth-child(1) {
  transform: rotate(30deg);
}
.fadeDot:nth-child(2) {
  transform: rotate(60deg);
}
.fadeDot:nth-child(3) {
  transform: rotate(90deg);
}
.fadeDot:nth-child(4) {
  transform: rotate(120deg);
}
.fadeDot:nth-child(5) {
  transform: rotate(150deg);
}
.fadeDot:nth-child(6) {
  transform: rotate(180deg);
}
.fadeDot:nth-child(7) {
  transform: rotate(210deg);
}
.fadeDot:nth-child(8) {
  transform: rotate(240deg);
}
.fadeDot:nth-child(9) {
  transform: rotate(270deg);
}
.fadeDot:nth-child(10) {
  transform: rotate(300deg);
}
.fadeDot:nth-child(11) {
  transform: rotate(330deg);
}

.fadeDot:nth-child(1):before {
  animation-delay: -1.1s;
}
.fadeDot:nth-child(2):before {
  animation-delay: -1s;
}
.fadeDot:nth-child(3):before {
  animation-delay: -0.9s;
}
.fadeDot:nth-child(4):before {
  animation-delay: -0.8s;
}
.fadeDot:nth-child(5):before {
  animation-delay: -0.7s;
}
.fadeDot:nth-child(6):before {
  animation-delay: -0.6s;
}
.fadeDot:nth-child(7):before {
  animation-delay: -0.5s;
}
.fadeDot:nth-child(8):before {
  animation-delay: -0.4s;
}
.fadeDot:nth-child(9):before {
  animation-delay: -0.3s;
}
.fadeDot:nth-child(10):before {
  animation-delay: -0.2s;
}
.fadeDot:nth-child(11):before {
  animation-delay: -0.1s;
}

@keyframes fadeDot {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Gradient Spinner */
.loader7 {
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gradientSpinner {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
}

.gradientSpinner::before,
.gradientSpinner:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.gradientSpinner:before {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    -45deg,
    #000285 0%,
    #0400d4 13%,
    #4400e2 25%,
    #8400ff 38%,
    #ab2ef3 50%,
    #dd00c4 62%,
    #ff006e 75%,
    #fe1b06 87%,
    #d90000 100%
  );
  animation: gradientSpinner 1s infinite ease-in-out;
}
.gradientSpinner:after {
  width: 90%;
  height: 90%;
  background-color: var(--secondary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes gradientSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Text Loader */
.loader8 {
  animation: loader-hide 2s cubic-bezier(0.86, 0, 0.07, 1) 11.8s forwards;
}

.txtLoader {
  position: relative;
  color: hsla(5, 99%, 51%, 0.493) !important;
  animation: txt-hide 2s cubic-bezier(0.86, 0, 0.07, 1) 10.3s forwards;
}

.txtLoader::before {
  content: attr(data-fill-text);
  position: absolute;
  width: 0;
  height: 100%;
  color: var(--accent);
  overflow: hidden;
  animation: fillTxt 3s cubic-bezier(0.19, 1, 0.22, 1) 8.3s forwards;
}

@keyframes fillTxt {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes txt-hide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-0.5em);
  }
}

@keyframes loader-hide {
  0% {
    top: 0;
  }

  100% {
    top: -100vh;
  }
}

/* Morphing Text */
.morphing {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 4rem;
}

.morphWord {
  max-width: 100%;
  letter-spacing: 2px;
  font-size: 4rem;
  position: absolute;
  color: var(--accent);
  animation: morphing 15s infinite ease-in-out;
}

.morphWord:nth-child(1) {
  animation-delay: -15s;
}

.morphWord:nth-child(2) {
  animation-delay: -11s;
}

.morphWord:nth-child(3) {
  animation-delay: -7s;
}

.morphWord:nth-child(4) {
  animation-delay: -3s;
}

@keyframes morphing {
  0%,
  5%,
  100% {
    filter: blur(0px);
    opacity: 1;
  }

  20%,
  80% {
    filter: blur(35px);
    opacity: 0;
  }
}

@media (prefers-color-scheme: light) {
  /* Circle Loader */
  .secondCircle {
    background-color: var(--primary);
  }

  /* Block Reveal Loader */
  .loader5 .block {
    background-color: var(--secondary);
  }

  /* Gradient Spinner */
  .gradientSpinner:after {
    background-color: var(--primary);
  }
}