@keyframes slide-rotate {
      0% {
        transform: translateX(-100%) rotate(0deg);
        opacity: 0;
      }
      25% {
        transform: translateX(0%) rotate(90deg);
        opacity: 1;
      }
      50% {
        transform: translateY(-100%) rotate(180deg);
        opacity: 1;
      }
      75% {
        transform: translateX(100%) rotate(270deg);
        opacity: 1;
      }
      100% {
        transform: translateX(-100%) rotate(360deg);
        opacity: 0;
      }
    }

    .animate-slide-rotate {
      animation: slide-rotate 10s linear infinite;
    }


    @keyframes gradientChange {
        0% {
            background-position: 0%
        }

        50% {
            background-position: 100%
        }

        100% {
            background-position: 0%
        }
    }

    .gradient {
        background: linear-gradient(90deg, blue, red);
        background-size: 200% 200%;
    }

    .element-to-rotate {
        animation: gradientChange 4s ease infinite;
    }

     html {
     scroll-padding-top: 100px;
     scroll-behavior: smooth;
 }