* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: radial-gradient(red, blue);
}

.dd_ll {
  width: 90%;
  margin: 10px;
}

#dd_ll_1 path {
  stroke: pink;
}

#dd_ll_2 path {
  stroke: #00b7ff;
}

.dd_ll path {
  stroke-linecap: square;
}

.dd_ll path:nth-child(1) {
  stroke-dasharray: 571.5;
  stroke-dashoffset: 571.5;
}

#dd_ll_1 path:nth-child(1) {
  -webkit-animation: line-anim 8s ease forwards 0.3s infinite;
          animation: line-anim 8s ease forwards 0.3s infinite;
}

.dd_ll path:nth-child(2) {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
}

#dd_ll_1 path:nth-child(2) {
  -webkit-animation: line-anim 8s ease forwards 0.6s infinite;
          animation: line-anim 8s ease forwards 0.6s infinite;
}

.dd_ll path:nth-child(3) {
  stroke-dasharray: 298;
  stroke-dashoffset: 298;
}

#dd_ll_1 path:nth-child(3) {
  -webkit-animation: line-anim 8s ease forwards 0.9s infinite;
          animation: line-anim 8s ease forwards 0.9s infinite;
}

#dd_ll_2 path:nth-child(3) {
  -webkit-animation: line-anim 8s ease forwards 0.9s infinite;
          animation: line-anim 8s ease forwards 0.9s infinite;
}

.dd_ll path:nth-child(4) {
  stroke-dasharray: 490.2;
  stroke-dashoffset: 490.2;
}

#dd_ll_1 path:nth-child(4) {
  -webkit-animation: line-anim 8s ease forwards 1.2s infinite;
          animation: line-anim 8s ease forwards 1.2s infinite;
}

#dd_ll_2 path:nth-child(4) {
  -webkit-animation: line-anim 8s ease forwards 1.2s infinite;
          animation: line-anim 8s ease forwards 1.2s infinite;
}

.dd_ll path:nth-child(5) {
  stroke-dasharray: 549;
  stroke-dashoffset: 549;
}

#dd_ll_1 path:nth-child(5) {
  -webkit-animation: line-anim 8s ease forwards 1.5s infinite;
          animation: line-anim 8s ease forwards 1.5s infinite;
}

.dd_ll path:nth-child(6) {
  stroke-dasharray: 490.2;
  stroke-dashoffset: 490.2;
}

#dd_ll_1 path:nth-child(6) {
  -webkit-animation: line-anim 8s ease forwards 1.8s infinite;
          animation: line-anim 8s ease forwards 1.8s infinite;
}

@-webkit-keyframes line-anim {
  25% {
    fill: transparent;
    stroke-dashoffset: 0;
    stroke-width: 1;
  }
  50% {
    fill: transparent;
    stroke-dashoffset: 0;
    stroke-width: 3;
  }
  75% {
    stroke-dashoffset: 0;
    fill: lightblue;
    stroke-width: 3;
  }
  90% {
    fill: transparent;
  }
  100% {
    fill: transparent;
  }
}

@keyframes line-anim {
  25% {
    fill: transparent;
    stroke-dashoffset: 0;
    stroke-width: 1;
  }
  50% {
    fill: transparent;
    stroke-dashoffset: 0;
    stroke-width: 3;
  }
  75% {
    stroke-dashoffset: 0;
    fill: lightblue;
    stroke-width: 3;
  }
  90% {
    fill: transparent;
  }
  100% {
    fill: transparent;
  }
}

#dd_svg path:nth-child(1) {
  stroke: #b99137;
}

#dd_svg path:nth-child(2) {
  stroke: #dc8a38;
}

#dd_svg path:nth-child(3) {
  stroke: #867772;
}

#dd_svg path:nth-child(4) {
  stroke: #9b71a4;
}

#dd_svg path:nth-child(5) {
  stroke: #107b0b;
}

#dd_svg path:nth-child(6) {
  stroke: #c7e1ec;
}
/*# sourceMappingURL=style.css.map */