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

body {
  background: linear-gradient(135deg, #1B1941 0%, #2a2456 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dots {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-filter: url("#goo");
          filter: url("#goo");
}

.dots-wrapper {
  position: relative;
}

.dots-item-button {
  border-radius: 50%;
}

.dots-items {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.dots-items {
  -webkit-transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
          transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

.dots-items .dots-item:nth-child(1) .dots-item-button {
  -webkit-animation: upDown 1.5s 0.3s infinite alternate;
          animation: upDown 1.5s 0.3s infinite alternate;
}
.dots-items .dots-item:nth-child(2) .dots-item-button {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}
.dots-items .dots-item:nth-child(3) .dots-item-button {
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  -webkit-animation: rightLeft 1.5s 0.3s infinite alternate;
          animation: rightLeft 1.5s 0.3s infinite alternate;
}

.dots-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.dots-item-button {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  left: 0;
  color: #AD4C4C;
}
.dots-item-button--orange {
  background-color: #FDBB01;
}
.dots-item-button--pink {
  background-color: #FF0067;
}
.dots-item-button--blue {
  background-color: #00D6FF;
}

@-webkit-keyframes upDown {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
  }
}
@-webkit-keyframes rightLeft {
  0% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}