@import 'https://fonts.googleapis.com/css?family=Playfair+Display:400,700i,900i';

* {
  box-sizing: border-box;
}


.svg {
  /* stroke: #e7dde3; */
  stroke: #885B7D;
  position: absolute;
  bottom: -650%;
  transform-style: preserve-3d;
  fill: none;
}

.svg:nth-child(1) {
  left: 68%;
  animation: raise1 18s linear infinite;
  animation-delay: -2s;
  transform: scale(0.7) rotate(342deg);
  z-index: -1;
}

@keyframes raise1 {
  to {
    bottom: 150vh;
    transform: scale(0.7) rotate(123deg);
  }
}

.svg:nth-child(2) {
  left: 75%;
  animation: raise2 14s linear infinite;
  animation-delay: -2s;
  transform: scale(1) rotate(355deg);
  z-index: -1;
}

@keyframes raise2 {
  to {
    bottom: 150vh;
    transform: scale(1) rotate(135deg);
  }
}

.svg:nth-child(3) {
  left: 63%;
  animation: raise3 19s linear infinite;
  animation-delay: 0s;
  transform: scale(1) rotate(172deg);
  z-index: -1;
}

@keyframes raise3 {
  to {
    bottom: 150vh;
    transform: scale(1) rotate(390deg);
  }
}

.svg:nth-child(4) {
  left: 7%;
  animation: raise4 10s linear infinite;
  animation-delay: 1s;
  transform: scale(2) rotate(185deg);
  z-index: -1;
}

@keyframes raise4 {
  to {
    bottom: 150vh;
    transform: scale(2) rotate(321deg);
  }
}

.svg:nth-child(5) {
  left: -10%;
  animation: raise5 12s linear infinite;
  animation-delay: 0s;
  transform: scale(0.9) rotate(335deg);
  z-index: -1;
}

@keyframes raise5 {
  to {
    bottom: 150vh;
    transform: scale(0.9) rotate(38deg);
  }
}

.svg:nth-child(6) {
  left: 80%;
  animation: raise6 10s linear infinite;
  animation-delay: -2s;
  transform: scale(1.2) rotate(152deg);
  z-index: -1;
}

@keyframes raise6 {
  to {
    bottom: 150vh;
    transform: scale(1.2) rotate(300deg);
  }
}

.svg:nth-child(7) {
  left: -7%;
  animation: raise7 12s linear infinite;
  animation-delay: -3s;
  transform: scale(1.5) rotate(29deg);
  z-index: 0;
}

@keyframes raise7 {
  to {
    bottom: 150vh;
    transform: scale(1.5) rotate(268deg);
  }
}

.svg:nth-child(8) {
  left: 20%;
  animation: raise8 16s linear infinite;
  animation-delay: -3s;
  transform: scale(1.8) rotate(322deg);
  z-index: 1;
}

@keyframes raise8 {
  to {
    bottom: 150vh;
    transform: scale(1.8) rotate(51deg);
  }
}

.svg:nth-child(9) {
  left: 55%;
  animation: raise9 18s linear infinite;
  animation-delay: -1s;
  transform: scale(2.1) rotate(185deg);
  z-index: 2;
}

@keyframes raise9 {
  to {
    bottom: 150vh;
    transform: scale(2.1) rotate(6deg);
  }
}

.svg:nth-child(10) {
  left: 77%;
  animation: raise10 7s linear infinite;
  animation-delay: -1s;
  transform: scale(2.4) rotate(83deg);
  z-index: 3;
}

@keyframes raise10 {
  to {
    bottom: 150vh;
    transform: scale(2.4) rotate(135deg);
  }
}

@media screen and (max-width: 1000px) {
  .svg:nth-child(1) {
    left: 65%
  }

  .svg:nth-child(2) {
    left: 55%
  }

  .svg:nth-child(3) {
    left: 45%
  }

  .svg:nth-child(6) {
    left: 45%
  }

  .svg:nth-child(9) {
    left: 18%
  }
}