/* Ceci est ma partie loader*/
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 1;
  background-color: #F2F2F2;
  height: 105vh;
  animation: disappear 1s forwards;
  animation-delay: 3s;
  transform-origin: left;
}
.loader__spinner {
  font-size: 50px;
  color: transparent;
  background: linear-gradient(#9356DC, #FF79DA, #99E2D0);
  background-clip: text;
}
@keyframes disappear {
  to {
    transform: scale(0);
  }
}
.loader .purple {
  animation: spin 4s infinite linear, bounce 1s ease-out infinite alternate;
  /*animation : name / duration / iteration-count / timing-function  */
}
.loader .pink {
  animation: spin 4s infinite 0.1s linear, bounce 1.4s ease-out 0.1s infinite alternate;
  /*animation : name / duration / iteration-count / timing-function  */
}
.loader .green {
  animation: spin 4s infinite 0.2s linear, bounce 1.8s ease-out 0.2s infinite alternate;
  /*animation : name / duration / iteration-count / timing-function  */
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  to {
    margin-bottom: 50px;
  }
}
.loader__text {
  font-family: Shrikhand;
  font-size: 2em;
  color: #9356DC;
}

.un {
  animation: anim-card 2s ease-in;
}

.deux {
  animation: anim-card 3s ease-in;
}

.trois {
  animation: anim-card 4s ease-in;
}

.quatre {
  animation: anim-card 5s ease-in;
}

@keyframes anim-card {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0px;
  }
}

/*# sourceMappingURL=animations.css.map */