Popup Animated

anwendung/src/styles/globals.css

@@ -56,6 +56,11 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
+.box-shadow-heavy
+{
+    box-shadow: 0 0 10px rgba(0, 0, 0,1);
+}
+
 /*
 Button
  */
@@ -188,23 +193,42 @@ Popup
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 .modal {
+    height: 180px;
     width: 300px;
-    height: 100px;
     border-radius: 10px;
     background-color: rgb(255, 255, 255);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    padding: 5px;
+    padding: 20px;
+    animation-name: modalgrow;
+    animation-duration: 0.2s;
+    animation-play-state: running;
+}
+
+@keyframes modalgrow {
+    from
+    {
+        height: 90px;
+        width: 150px;
+    }
+    to
+    {
+        height: 180px;
+        width: 300px;
+    }
 }
 
 .modal p {
     text-align: center;
+    pointer-events: none;
+    font-weight: bold;
+    font-size: 20px;
 }
 
 .modal div {
@@ -406,6 +430,7 @@ Login
     height: 350px;
 }
 
+
 .input-bordered {
     border: none;
     border-radius: 5px;