/* From Uiverse.io by Nawsome */ 
.svg-frame {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-frame svg {
  position: absolute;
  transition: .5s;
  z-index: calc(1 - (0.2 * var(--j)));
  transform-origin: center;
  width: 344px;
  height: 344px;
  fill: none;
}

.svg-frame:hover svg {
  transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}

.svg-frame svg #center {
  transition: .5s;
  transform-origin: center;
}

.svg-frame:hover svg #center {
  transform: rotate(-30deg) translateX(45px) translateY(-3px);
}

#out2 {
  animation: rotate16 7s ease-in-out infinite alternate;
  transform-origin: center;
}

#out3 {
  animation: rotate16 3s ease-in-out infinite alternate;
  transform-origin: center;
  stroke: #ff0;
}

#inner3,
#inner1 {
  animation: rotate16 4s ease-in-out infinite alternate;
  transform-origin: center;
}

#center1 {
  fill: #ff0;
  animation: rotate16 2s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes rotate16 {
  to {
    transform: rotate(360deg);
  }
}


/* From Uiverse.io by Sharkotech */ 
.flowcard {
  width: 190px;
  height: 254px;
  position: absolute;
  transition: .3s ease-in-out;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 0px 30px -10px rgba(225, 225, 225, 0.1);
}

#c1 {
  background-color: black;
}

#c2 {
  background-color: blue;
}

#c3 {
  background-color: red;
}

#c4 {
  background-color: green;
}

.main:hover #c1 {
  transform: translateX(-100px) rotate(-40deg);
}

.main:hover #c2 {
  transform: translateX(-50px) rotate(-30deg);
}

.main:hover #c3 {
  transform: translateX(0) rotate(-20deg);
}

.main:hover #c4 {
  transform: translateX(50px) rotate(-10deg);
}

#c1:hover {
  transform: translateX(-150px) rotate(0deg) !important;
}

#c2:hover {
  transform: translateX(-100px) rotate(0deg) !important;
}

#c3:hover {
  transform: translateX(-50px) rotate(0deg) !important;
}

#c4:hover {
  transform: translateX(50px) rotate(0deg) !important;
}

.main {
  display: grid;
  height: 50vmax;
  place-items: center;
}