@import url("https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 180px;
}
@media screen and (max-width: 700px) {
  *,
*::before,
*::after {
    font-size: 150px;
  }
}
@media screen and (max-width: 530px) {
  *,
*::before,
*::after {
    font-size: 120px;
  }
}
@media screen and (max-width: 400px) {
  *,
*::before,
*::after {
    font-size: 95px;
  }
}

body {
  font-family: "Bowlby One", cursive;
}

.container {
  display: flex;
  justify-content: space-evenly;
  min-width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  align-items: baseline;
}
.container__dumbell {
  width: 150px;
  height: 150px;
}
.container__dumbell img {
  width: 100%;
  height: 100%;
  transform: rotateZ(90deg);
}
.container__dumbell--1 {
  transform: translateX(30px);
}
.container__dumbell--1 img {
  animation: translateDumbell 2s linear;
}
.container__dumbell--2 {
  transform: translateX(-30px);
}
.container__dumbell--2 img {
  animation: rotateDumbell 0.6s linear 2s forwards, translateDumbell 2s linear;
}
.container__letter {
  animation: jump 0.6s cubic-bezier(0.99, -0.13, 1, -0.39) 2s;
}
@media screen and (max-width: 700px) {
  .container .container__dumbell {
    width: 120px;
    height: 120px;
  }
}
@media screen and (max-width: 530px) {
  .container {
    min-width: 200px;
  }
  .container .container__dumbell {
    width: 100px;
    height: 100px;
  }
}
@media screen and (max-width: 400px) {
  .container .container__dumbell {
    width: 75px;
    height: 60px;
  }
  .container .container__dumbell--1 {
    transform: translateX(16px);
  }
  .container .container__dumbell--2 {
    transform: translateX(-25px);
  }
}

@keyframes rotateDumbell {
  0% {
    transform: rotateZ(90deg);
  }
  25% {
    transform: rotateZ(40deg);
  }
  75% {
    transform: rotateZ(50deg);
  }
  100% {
    transform: rotateZ(45deg);
  }
}
@keyframes translateDumbell {
  0% {
    transform: translateY(-500px) rotateZ(90deg);
  }
  100% {
    transform: translateY(0) rotateZ(90deg);
  }
}
@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

/*# sourceMappingURL=style.css.map */