add animation

assets/postcode_modal.css

@@ -1,10 +1,50 @@
 .postcode_modal {
     backgrounnd: green;
-    border-radius: 30px;
+    border-radius: 20px;
     box-shadow(10px);
     border: none;
-}
+    max-width: 80ch;
+    box-shadow: 0 0 20pc black;
+    padding: 2rem;
+    opacity: 0;
+    transition: opacity 0.3s ease, display 0.3s allow-discrete;
 
-& ::backdrop {
+    &[open] {
-    background-color: hsl(40deg 100 30 /0.5);
+      opacity: 1;
+      transition-behavior: allow-discrete;
+      transition: opacity 0.3s ease, display 0.3s allow-discrete;
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    h2 {
+      font-size: 1.5rem;
+      margin: .6rem;
+    }
+
+    input[type="text"] {
+        padding: .3rem;
+        font-size: 1.4rem;
+    }
+
+    button {
+        border: none;
+        font-size: 1.4rem;
+        padding: .4rem 1rem;
+        border-radius: 5px;
+        background: dodgerblue;
+        margin: 0 0 0 .3rem;
+    }
+
+    .form_fields {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &::backdrop {
+        background-color: hsl(40deg 100 30 /0.5);
+    }
 }