body {
       margin: 0;
       padding: 0;
       height: 100vh;
       background: linear-gradient(-45deg, #ff6ec4, #7873f5, #4ade80, #facc15);
       background-size: 400% 400%;
       animation: gradientBG 15s ease infinite;
       display: flex;
       justify-content: center;
       align-items: center;
       font-family: sans-serif;
   }

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

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

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

   .search-box {
       text-align: center;
   }

   .input-group {
       display: inline-flex;
       gap: 10px;
   }

   .animated-field {
       padding: 1rem;
       font-size: 1.2rem;
       border: none;
       border-radius: 10px;
       background: linear-gradient(45deg, #e0bbff, #b3e5fc, #c8e6c9);
       background-size: 300% 300%;
       animation: sharedGradient 6s ease infinite;
       transition: transform 0.2s, animation-play-state 0.2s;
   }

   input[type="text"] {
       width: 300px;
       color: black;
   }

   button {
       color: white;
       cursor: pointer;
   }

   .input-group:hover .animated-field {
       animation-play-state: paused;
       transform: scale(1.05);
   }

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

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

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