@keyframes show-toast {
       0% {
         bottom: -100%;
       }

       20% {
         bottom: 100px;
       }

       80% {
         bottom: 100px;
       }

       100% {
         bottom: -100px;
       }
     }



     .show-notification {
       position: fixed;
       bottom: 100%;
       right: 20px;
       animation-name: show-toast;
       animation-duration: 8s;
     }



     @keyframes appear {
       0% {
         opacity: 0;
         transform: scale(0.5);
       }

       100% {
         opacity: 1;
         transform: scale(1);
       }
     }

     /* @keyframes fadeIn {
       0% {
         opacity: 0;
       }

       100% {
         opacity: 1;
       }
     }


     .scroll_ani {
       animation: fadeIn 1s linear;
       animation-timeline: view();
       animation-range: entry 0% cover 50%;
     } */