move toas to top

styles.css

@@ -489,9 +489,8 @@ body {
     padding: 16px 24px;
     position: fixed;
     z-index: 1000;
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
+    right: 24px;
+    top: 80px;
     font: var(--md-sys-typescale-body-medium);
     box-shadow: var(--md-sys-elevation-3);
 }
@@ -505,7 +504,7 @@ body {
 
 .snackbar.show {
     visibility: visible;
-    animation: fadein 0.3s, fadeout 0.3s 2.7s;
+    animation: slidein 0.3s, slideout 0.3s 2.7s;
 }
 
 .snackbar.success {
@@ -518,14 +517,14 @@ body {
     color: #fff;
 }
 
-@keyframes fadein {
-    from { bottom: 0; opacity: 0; }
-    to { bottom: 30px; opacity: 1; }
+@keyframes slidein {
+    from { right: -100%; opacity: 0; }
+    to { right: 24px; opacity: 1; }
 }
 
-@keyframes fadeout {
-    from { bottom: 30px; opacity: 1; }
-    to { bottom: 0; opacity: 0; }
+@keyframes slideout {
+    from { right: 24px; opacity: 1; }
+    to { right: -100%; opacity: 0; }
 }
 
 /* Responsive Styles */