@import url("https://fonts.googleapis.com/css?family=Audiowide&display=swap");

html,
body {
  margin: 0px;
  overflow: hidden;
}

div {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  margin: 0px;
  background: radial-gradient(circle, #240015 0%, #12000b 100%);
  overflow: hidden;
}

.wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 150px;
  font-size: 32px;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  display: block;
  color: #12000a;
  font-weight: 300;
  font-family: Audiowide;
  text-shadow: 0px 0px 4px #12000a;
  animation: fadeInText 3s ease-in 3.5s forwards,
    flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}
.logo img {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 40px;
}

#svgWrap_1,
#svgWrap_2 {
  position: absolute;
  height: auto;
  width: 600px;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#svgWrap_1,
#svgWrap_2,
div {
  animation: hueRotate 6s ease-in-out 3s infinite;
}

#id1_1,
#id2_1,
#id3_1 {
  stroke: #ff005d;
  stroke-width: 3px;
  fill: transparent;
  filter: url(#glow);
}

#id1_2,
#id2_2,
#id3_2 {
  stroke: #12000a;
  stroke-width: 3px;
  fill: transparent;
  filter: url(#glow);
}

#id3_1 {
  stroke-dasharray: 940px;
  stroke-dashoffset: -940px;
  animation: drawLine3 2.5s ease-in-out 0s forwards,
    flicker3 4s linear 4s infinite;
}

#id2_1 {
  stroke-dasharray: 735px;
  stroke-dashoffset: -735px;
  animation: drawLine2 2.5s ease-in-out 0.5s forwards,
    flicker2 4s linear 4.5s infinite;
}

#id1_1 {
  stroke-dasharray: 940px;
  stroke-dashoffset: -940px;
  animation: drawLine1 2.5s ease-in-out 1s forwards,
    flicker1 4s linear 5s infinite;
}

@keyframes drawLine1 {
  0% {
    stroke-dashoffset: -940px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes drawLine2 {
  0% {
    stroke-dashoffset: -735px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes drawLine3 {
  0% {
    stroke-dashoffset: -940px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes flicker1 {
  0% {
    stroke: #ff005d;
  }
  1% {
    stroke: transparent;
  }
  3% {
    stroke: transparent;
  }
  4% {
    stroke: #ff005d;
  }
  6% {
    stroke: #ff005d;
  }
  7% {
    stroke: transparent;
  }
  13% {
    stroke: transparent;
  }
  14% {
    stroke: #ff005d;
  }
  100% {
    stroke: #ff005d;
  }
}

@keyframes flicker2 {
  0% {
    stroke: #ff005d;
  }
  50% {
    stroke: #ff005d;
  }
  51% {
    stroke: transparent;
  }
  61% {
    stroke: transparent;
  }
  62% {
    stroke: #ff005d;
  }
  100% {
    stroke: #ff005d;
  }
}

@keyframes flicker3 {
  0% {
    stroke: #ff005d;
  }
  1% {
    stroke: transparent;
  }
  10% {
    stroke: transparent;
  }
  11% {
    stroke: #ff005d;
  }
  40% {
    stroke: #ff005d;
  }
  41% {
    stroke: transparent;
  }
  45% {
    stroke: transparent;
  }
  46% {
    stroke: #ff005d;
  }
  100% {
    stroke: #ff005d;
  }
}

@keyframes flicker4 {
  0% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  30% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  31% {
    color: #12000a;
    text-shadow: 0px 0px 4px #12000a;
  }
  32% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  36% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  37% {
    color: #12000a;
    text-shadow: 0px 0px 4px #12000a;
  }
  41% {
    color: #12000a;
    text-shadow: 0px 0px 4px #12000a;
  }
  42% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  85% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  86% {
    color: #12000a;
    text-shadow: 0px 0px 4px #12000a;
  }
  95% {
    color: #12000a;
    text-shadow: 0px 0px 4px #12000a;
  }
  96% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
  100% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
}

@keyframes fadeInText {
  1% {
    color: #12000a;
    text-shadow: 0px 0px 4px #12000a;
  }
  70% {
    color: #ff005d;
    text-shadow: 0px 0px 14px #ff005d;
  }
  100% {
    color: #ff005d;
    text-shadow: 0px 0px 4px #ff005d;
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-120deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}