html {
  background-image: linear-gradient(-180deg, #f3f6f9 26%, #ffffff 100%);
  font-family: "Source Sans Pro", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  margin: 15vh auto;
  text-align: center;
  max-width: 90vw;
}

svg {
  max-width: 80%;
  padding-top: 4%;
}

h1 {
  font-weight: 600;
  color: #263848;
  font-size: 32px;
}
p {
  font-weight: 600;
  color: #8b9fb2;
  font-size: 20px;
}

@-webkit-keyframes floating {
  0% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: translate3d(0, 10%, 0);
  }
  100% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes floating {
  0% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: translate3d(0, 10%, 0);
  }
  100% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: translate3d(0, 0, 0);
  }
}

#floater-01,
#floater-02,
#floater-03,
#floater-04 {
  -webkit-animation-name: floating;
          animation-name: floating;
  transform-origin: center bottom;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#floater-01,
#yellow-dot-01,
#blue-dot-01 {
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}

#floater-02,
#yellow-dot-02,
#blue-dot-02 {
  -webkit-animation-duration: 9.5s;
          animation-duration: 9.5s;
}

#floater-03,
#yellow-dot-03,
#blue-dot-03 {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}

#floater-04,
#yellow-dot-04 {
  -webkit-animation-duration: 10.5s;
          animation-duration: 10.5s;
}

@-webkit-keyframes floating2 {
  0% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 1;
  }
  70% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0;
  }
  100% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 1;
  }
}

@keyframes floating2 {
  0% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 1;
  }
  70% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0;
  }
  100% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 1;
  }
}

#yellow-dot-01,
#yellow-dot-02,
#yellow-dot-03,
#yellow-dot-04,
#blue-dot-01,
#blue-dot-02,
#blue-dot-03,
#grey-dot-01,
#grey-dot-02,
#grey-dot-03,
#grey-dot-04,
#grey-dot-05,
#grey-dot-06 {
  -webkit-animation-name: floating2;
          animation-name: floating2;
  transform-origin: center bottom;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#yellow-dot-01,
#blue-dot-01,
#grey-dot-02,
#grey-dot-06 {
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}

#yellow-dot-02,
#blue-dot-02,
#grey-dot-03 {
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
}

#yellow-dot-03,
#blue-dot-03,
#grey-dot-4 {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}

#yellow-dot-04,
#grey-dot-01,
#grey-dot-05 {
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}

@-webkit-keyframes shine {
  0% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0.32;
  }
  70% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0.6;
  }
  100% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0.32;
  }
}

@keyframes shine {
  0% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0.32;
  }
  70% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0.6;
  }
  100% {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    opacity: 0.32;
  }
}

#shine {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-name: shine;
          animation-name: shine;
  transform-origin: center bottom;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}