.container {
    width: fit-content;
    height: fit-content;
    perspective: 1000px;
    color: transparent;
    backface-visibility: hidden;
  }
  
  .specialone {
    cursor: pointer;
    display: inline-block;
    user-select: none;
    line-height: 0.8;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
      0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  }
  .specialone:nth-child(1) {
    animation: balance 1.5s ease-out;
    transform-origin: bottom left;
  }
  .specialone:nth-child(2) {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
  }
  .specialone:nth-child(3) {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
  }
  .specialone:nth-child(4) {
    animation: rotate 1s ease-out;
  }
  .specialone:nth-child(5) {
    animation: toplong 1.5s linear;
  }
  /*specialone ends here*/
  
  /*specialtwo*/
  .specialtwo {
    display: inline-block;
    text-shadow: 0 0 0 whitesmoke;
    animation: smoky 3s both;
  }
  .specialtwo:nth-child(even) {
    animation-name: smoky-mirror;
  }
  /*specialtwo ends here*/
  
  /*specialthree*/
  .specialthree {
    position: relative;
    top: 20px;
    display: inline-block;
    -webkit-animation: bounce 0.6s ease alternate;
    animation: bounce 1s ease alternate;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
      0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  }
  .add3d {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
    0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
    0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
  }
  .specialthree:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  .specialthree:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .specialthree:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .specialthree:nth-child(5) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  /*specialthree ends here*/
  
  /*specialfour*/
  .specialfour {
    display: inline-block;
    animation: flip 2s;
  }
  
  /*specialfour ends here*/

  /*specialseven ends here*/
  
  /*one*/
  .one {
    display: inline-block;
    opacity: 0;
    transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    animation: revolveScale 2s forwards;
  }
  
  /*one ends here*/
  
  
  /*three*/
  
  .three {
    display: inline-block;
  
    opacity: 0;
    transform: translate(0, -100px) rotate(360deg) scale(0);
    animation: revolveDrop 3s forwards;
  }
  
  /*three ends here*/
  
  /*four*/
  .four {
    display: inline-block;
    
    opacity: 0;
    transform: translate(-150px, 0) scale(0.3);
    animation: leftRight 0.5s forwards;
  }
  /*four ends here */
  
  /*keyframe and animation*/
  
  /*specialone animations*/
  @keyframes balance {
    0%,
    100% {
      transform: rotate(0deg);
    }
  
    30%,
    60% {
      transform: rotate(-45deg);
    }
  }
  
  @keyframes shrinkjump {
    10%,
    35% {
      transform: scale(2, 0.2) translate(0, 0);
    }
  
    45%,
    50% {
      transform: scale(1) translate(0, -150px);
    }
  
    80% {
      transform: scale(1) translate(0, 0);
    }
  }
  
  @keyframes falling {
    12% {
      transform: rotateX(240deg);
    }
  
    24% {
      transform: rotateX(150deg);
    }
  
    36% {
      transform: rotateX(200deg);
    }
  
    48% {
      transform: rotateX(175deg);
    }
  
    60%,
    85% {
      transform: rotateX(180deg);
    }
  
    100% {
      transform: rotateX(0deg);
    }
  }
  @keyframes rotate {
    20%,
    80% {
      transform: rotateY(180deg);
    }
  
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes toplong {
    10%,
    40% {
      transform: translateY(-38vh) scaleY(1);
    }
  
    90% {
      transform: translateY(-38vh) scaleY(4);
    }
  }
  
  /*specialtwo animations*/
  @keyframes smoky {
    60% {
      text-shadow: 0 0 40px whitesmoke;
    }
    to {
      transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg)
        scale(1.5);
      text-shadow: 0 0 20px whitesmoke;
      opacity: 0;
    }
  }
  
  @keyframes smoky-mirror {
    60% {
      text-shadow: 0 0 40px whitesmoke;
    }
    to {
      transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg)
        scale(2);
      text-shadow: 0 0 20px whitesmoke;
      opacity: 0;
    }
  }
  
  /*specialthree animations*/
  @-webkit-keyframes bounce {
    100% {
      top: -20px;
      text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
        0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
        0 50px 25px rgba(0, 0, 0, 0.2);
    }
  }
  
  @keyframes bounce {
    100% {
      top: -20px;
      text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
        0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
        0 50px 25px rgba(0, 0, 0, 0.2);
    }
  }
  /*specialfour animation*/
  @keyframes flip {
    0%,
    80% {
      transform: rotateY(360deg);
    }
  }
  
  /*specialsix animation*/
  @keyframes scaling {
    20% {
      text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;
      transform: scale(0.9, 1) rotatey(-10deg);
    }
    40% {
      transform: scale(0.9, 2) translatey(16px);
      text-shadow: -10px 0px #e8332e, -20px 0 #fc9e05, -30px 0 #891696;
    }
    60% {
      transform: scale(0.9, 1) rotatey(-5deg);
      text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;
    }
    80% {
      transform: scale(0.9, 2) translatey(16px);
      text-shadow: 10px 0px #e8332e, 20px 0 #fc9e05, 30px 0 #891696;
    }
  }
  
  @keyframes jump {
    20% {
      transform: translatey(0) scale(0);
      opacity: 0;
    }
    40% {
      transform: translatey(-50px) scale(1);
      opacity: 1;
    }
    60% {
      transform: translatey(0) scale(0);
      opacity: 0;
    }
    80% {
      transform: translatey(-50px) scale(1);
      opacity: 1;
    }
  }
  
  /*one animation*/
  @keyframes revolveScale {
    60% {
      transform: translate(20px, 20px) rotate(30deg) scale(0.3);
    }
  
    100% {
      transform: translate(0) rotate(0) scale(1);
      opacity: 1;
    }
  }
  
  /*three animation*/
  
  @keyframes revolveDrop {
    30% {
      transform: translate(0, -50px) rotate(180deg) scale(1);
    }
  
    60% {
      transform: translate(0, 20px) scale(0.8) rotate(0deg);
    }
  
    100% {
      transform: translate(0) scale(1) rotate(0deg);
      opacity: 1;
    }
  }
  /*four animation*/
  @keyframes leftRight {
    40% {
      transform: translate(50px, 0) scale(0.7);
      opacity: 1;
      color: #348c04;
    }
  
    60% {
      color: #0f40ba;
    }
  
    80% {
      transform: translate(0) scale(2);
      opacity: 0;
    }
  
    100% {
      transform: translate(0) scale(1);
      opacity: 1;
    }
  }