@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
body {
  background: #212121;
  color: #f97dc4;
  font-family: "Dancing Script", cursive;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 280px) and (max-width: 300px) {
  body {
    overflow: hidden;
  }
}
.gal {
  display: flex;
}
.gal img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: contain;
}
.gal .one,
.gal .two,
.gal .three,
.gal .four,
.gal .five,
.gal .six,
.gal .seven,
.gal .eight {
  position: absolute;
}
.gal .one {
  top: 110px;
  left: 35px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .one {
    top: -21px;
    left: -57px;
  }
}
.gal .two {
  top: 355px;
  left: 143px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .two {
    top: 0;
    left: 160px;
  }
}
.gal .three {
  top: 133px;
  right: 100px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .three {
    top: 227px;
    right: 105px;
  }
}
.gal .four {
  top: 360px;
  right: 130px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .four {
    top: 266px;
    right: -80px;
  }
}
.gal .five {
  top: 550px;
  right: 350px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .five {
    display: none;
  }
}
.gal .six {
  top: 0px;
  left: 400px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .six {
    display: none;
  }
}
.gal .seven {
  top: 550px;
  left: 350px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .seven {
    display: none;
  }
}
.gal .eight {
  top: 0px;
  left: 920px;
}
@media (min-width: 280px) and (max-width: 300px) {
  .gal .eight {
    display: none;
  }
}
svg path.linear-1 {
  /* stroke works fine, filter doesn't work */
  stroke: white;
  filter: url(#blur-filter);
}
.loading {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.loading svg {
  width: 100%;
  height: 50vh;
}

.loading .linear-1 {
  stroke-dasharray: 281;
  -webkit-animation: dash 6s infinite linear forwards;
  animation: dash 6s infinite linear forwards;
}
.loading .linear-2 {
  stroke-dasharray: 300;
  -webkit-animation: dash 5s infinite linear forwards;
  animation: dash 5s infinite linear forwards;
}
.loading .linear-3 {
  stroke-dasharray: 340;
  -webkit-animation: dash 4s infinite linear forwards;
  animation: dash 4s infinite linear forwards;
}
.loading .linear-4 {
  stroke-dasharray: 400;
  -webkit-animation: dash 3s infinite linear forwards;
  animation: dash 3s infinite linear forwards;
}

/*Animation*/
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 814;
  }
  to {
    stroke-dashoffset: -814;
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: 814;
  }
  to {
    stroke-dashoffset: -814;
  }
}

h1 {
  text-shadow: 2px 2px 5px #e21393;
  font-size: 3em;
  letter-spacing: 2px;
}
h3 {
  color: #fff;
  letter-spacing: 2px;
  margin-top: 80px;
}
p {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 2px;
}