:root {
  --x-distance: 100px;
}

.object {
  position: absolute;
  bottom: 0;
  animation: floatUp var(--animation-duration) linear;
  font-size: var(--object-size);
  transform: translateY(calc(100vh + var(--object-size)));
  pointer-events: none;
}

.animationLogo {
  position: fixed;
  width: var(--logo-width, auto);
  height: var(--logo-height, auto);
  bottom: var(--logo-bottom, 2rem);
  left: var(--logo-right, 2rem);
}

.animationLogo .text {
  font-size: 150%;
  font-weight: bolder;
}

.animationLogo .image {
  max-width: var(--logo-size, 256px);
  border: none;
}

.animationLogo.left-bottom {
  left: var(--logo-left, 2rem);
  right: auto;
  bottom: var(--logo-bottom, 2rem);
  top: auto;
}

.animationLogo.left-top {
  left: var(--logo-left, 2rem);
  right: auto;
  top: var(--logo-top, 2rem);
  bottom: auto;
}

.animationLogo.right-bottom {
  right: var(--logo-right, 2rem);
  left: auto;
  bottom: var(--logo-bottom, 2rem);
  top: auto;
}

.animationLogo.right-top {
  right: var(--logo-right, 2rem);
  left: auto;
  top: var(--logo-top, 2rem);
  bottom: auto;
}

.animationLogo.left-center {
  left: var(--logo-left, 2rem);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}

.animationLogo.right-center {
  right: var(--logo-right, 2rem);
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}

.animationLogo.center-top {
  left: 50%;
  right: auto;
  top: var(--logo-top, 2rem);
  transform: translateX(-50%);
}

.animationLogo.center-bottom {
  left: 50%;
  right: auto;
  bottom: var(--logo-bottom, 2rem);
  transform: translateX(-50%);
}

.animationLogo.center-center {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

@keyframes floatUp {
  0% {
    transform: translate(0, calc(100vh + var(--object-size)));
    opacity: 1;
  }
  25% {
    transform: translate(var(--x-distance), calc(75vh + var(--object-size)));
  }
  50% {
    transform: translate(0, calc(50vh + var(--object-size)));
  }
  75% {
    transform: translate(calc(0px - var(--x-distance)), calc(-25vh + var(--object-size)));
    opacity: 1;
  }
  100% {
    transform: translate(0, calc(-100vh + var(--object-size)));
    opacity: 0;
    margin-left: 0;
  }
}
