html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url('background.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.svgImage {
  width: 32px;
  height: 32px;
  /* background: aqua; */
  background-image: url('icon.svg');
  background-color: aqua;
}

.leftImage {
  position: fixed;
  top: 0;
  left: 0;
  /* width: 663px; */
  /* height: 992px; */
  height: 100vh;
  aspect-ratio: 1 / 1.4962292609;
  background-image: url('leftImage.svg');
  background-size: contain;
  opacity: 0.5;
}

.rightImage {
  position: fixed;
  top: 0;
  right: 0;
  /* width: 663px; */
  /* height: 992px; */
  height: 100vh;
  aspect-ratio: 1 / 1.4962292609;
  background-image: url('rightImage.svg');
  background-size: contain;
  opacity: 0.5;
}

.text {
  position: fixed;
  bottom: 60px;
  right: 0;
  width: 50vw;
  height: 300px;
  background-color: #40d861;
  background-image: url('cornerTopLeft.svg'), url('cornerBottomLeft.svg'),
    url('cornerTopRight.svg'), url('cornerBottomRight.svg');
  background-position: top left, bottom left, top right, bottom right;
  background-repeat: no-repeat;
  transition: all 3s ease-in-out;
}

.circle {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background-color: #0000ff;
  transition: all 0.3s ease-in-out;
}

.rotationContainer {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 200px;
  height: 200px;
  /* background-color: black; */
  transition: all 3s ease-in-out;
}

.rotatingCircle {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background-color: #0000ff;
  background-image: url('flower.svg');
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}

.text:hover {
  background-color: #d840ab;
}

.text:hover .circle {
  transform: translateX(100px);
}

.text:hover .rotationContainer {
  transform: rotate(1000deg);
}

.text:hover .rotatingCircle {
  animation-name: shake;
  animation-duration: 0.3s;
  animation-iteration-count: 9;
}

.backgroundContainer {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100vw;
  height: 300px;
  background-image: linear-gradient(270deg, #cc6aa5, #3e91cc, #2dcca7);
  background-size: 600% 100%;
  background-position: 0% 50%;
  transition: all 3s ease-in-out;
  /* animation-name: moveBg;
  animation-duration: 8s;
  animation-fill-mode: both; */
}

.backgroundContainer:hover {
  background-position: 100% 50%;
  /* animation-name: moveBg; */
  /* animation-duration: 8s; */
  /* animation-fill-mode: backwards; */
}

@keyframes shake {
  0% {
    transform: translateX(0) scale(1) rotate(0);
  }

  50% {
    transform: translateX(10px) scale(0.3) rotate(1000deg);
  }

  100% {
    transform: translateX(0) scale(1) rotate(0);
  }
}

@keyframes moveBg {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@media (max-width: 660px) {
  .leftImage,
  .rightImage {
    position: static;
  }
}