.loading *,
.loading *:before,
.loading *:after {
  animation-play-state: paused !important;
}


.login-comment{position: absolute; bottom: 30px; left: 45px; background: #c10a48; padding: .5rem 1rem; color: #fff; font-size: 90%; border-radius: 0 10px 10px 10px;box-shadow: 8px 8px 8px rgb(0 0 0 / 8%);animation: fade_in 0.9s 0.8s forwards cubic-bezier(0.17, 0.77, 0.38, 0.87); opacity: 0;}
.login-comment:before{position: absolute; content: ''; left: -8px; top: 0; border-top: 0px solid transparent;
  border-bottom: 12px solid transparent; border-right:8px solid #c10a48;}

.login-creative{background: #191b2a;  background:linear-gradient(130deg, #290a12, #ff235f); position: relative;}

.art-board {
  opacity: 0;
  position: relative;
  animation: fade_in 0.5s 0.4s forwards cubic-bezier(0.17, 0.77, 0.38, 0.87); top: -40px;
}

.asset {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.asset img {
  transform: scale(0.4);
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.asset1 {
  top: 190px;
  left: -40px;
  animation: floatDown 3.6s 0.1s ease-in-out infinite;
}

.asset2 {
  top: 370px;
  left: 77px;
  animation: floatUp 3.6s 0.1s ease-in-out infinite;
}

.asset3 {
  top: 30px;
  left: 40px;
  animation: floatLeft 3.6s 0.2s ease-in-out infinite;
}

.asset4 {
  top: 403px;
  left: 220px;
  animation: floatUp 3.6s 0.3s ease-in-out infinite;
}

.asset5 {
  top: 397px;
  left: 409px;
  animation: floatLeft 3.6s 0.1s ease-in-out infinite;
}

.asset6 {
  top: 100px;
  left: 397px;
  animation: floatUp 3.6s 0.2s ease-in-out infinite;
}

.asset7 {
  top: 95px;
    left: 225px;
  animation: floatDown 3.6s 0.3s ease-in-out infinite;
}

.asset8 {
  top: -20px;
  left: 230px;
  animation: floatUp 3.6s 0.1s ease-in-out infinite;
}

.asset9 {
  top: 30px;
  left: 400px;
  animation: floatRight 3.6s 0.2s ease-in-out infinite;
}

.asset10 {
  top: 360px;
  left: 40px;
  animation: floatRight 3.6s 0.3s ease-in-out infinite;
}

.asset11 {
  top: 360px;
  left: 400px;
  animation: floatLeft 3.6s 0.1s ease-in-out infinite;
}

.asset12 {
  top: 190px;
  left: 460px;
  animation: floatRight 3.6s 0.2s ease-in-out infinite;
}

.asset13 {
  top: 356px;
  left: 593px;
  animation: floatLeft 3.6s 0.3s ease-in-out infinite;
}

.asset14 {
  top: 256px;
  left: 853px;
  animation: floatUp 3.6s 0.1s ease-in-out infinite;
}

.asset15 {
  top: 145px;
  left: 743px;
  animation: floatDown 3.6s 0.2s ease-in-out infinite;
}

.asset16 {
  top: 191px;
  left: 820px;
  animation: floatDown 3.6s 0.3s ease-in-out infinite;
}

.asset17 {
  top: 163px;
  left: 793px;
  animation: floatUp 3.6s 0.1s ease-in-out infinite;
}

.asset18 {
  top: 167px;
  left: 732px;
  animation: floatLeft 3.6s 0.2s ease-in-out infinite;
}


.title {
  position: absolute;
    color: white;
    opacity: 90%;
    font-size: 4rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -2px;
    top: 260px;
    left: 170px;
  animation: showMain 0.5s 0.4s forwards cubic-bezier(0.17, 0.77, 0.38, 0.87);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@keyframes floatUp {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes floatDown {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 5%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes floatRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-5%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes floatLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(5%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fade_in {
  100% {
    opacity: 1;
  }
}
@keyframes show {
  0% {
    opacity: 0;
    transform: translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes showMain {
  0% {
    opacity: 0;
    transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}