1 files changed, 48 insertions, 2 deletions
diff --git a/src/styles/style.css b/src/styles/style.css
index b941e56..45e869e 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -10,11 +10,25 @@
     box-sizing: border-box;
 }
 
-.notif-mainContainer.topRight{
+.notif-mainContainer.top-right{
     top: 8px;
     right: 8px;
 }
 
+.notif-mainContainer.bottom-right{
+    bottom: 8px;
+    right: 8px;
+}
+
+.notif-mainContainer.top-left{
+    top: 8px;
+    left: 8px;
+}
+.notif-mainContainer.bottom-left{
+    bottom: 8px;
+    left: 8px;
+}
+
 .notif-inner {
     display: flex;
     flex-direction: column;
@@ -22,16 +36,48 @@
 
 .vanilla-yo-notification{
     width: 250px;
-    background: #58a758;
     color: white;
     position: relative;
     cursor: pointer;
     padding: 8px;
     margin-bottom: 12px;
     display: flex;
+    border-radius: 10px;
+    -webkit-animation-duration: 500ms;animation-duration: 500ms;
+}
+
+.vanilla-yo-notification.error {
+    background: #e74c3c;
+}
+
+.vanilla-yo-notification.warning {
+    background: #f39c12;
+}
+
+.vanilla-yo-notification.success {
+    background: #2ecc71;
+}
+
+
+
+@-webkit-keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+ }
+ 
+ @keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+ }
+
+.close {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
 }
 
 
+
+
 .notification_header{
 	font-size: 15px;
     font-weight: bold