Animations

index.html

@@ -98,6 +98,10 @@
         font-size: 1.2rem;
     }
 
+    #questionContainer h2 {
+        margin-top: 0.5rem;
+    }
+
     a {
         text-decoration: none;
         color: #0F1111;
@@ -106,7 +110,7 @@
         display: flex;
         align-items: top;
         max-width: 500px;
-        width: 100%;
+        /* width: 100%; */
         margin: auto;
         padding: 40px;
         background-color: #fff;
@@ -115,7 +119,11 @@
         box-shadow: 0 0 10px rgba(0,0,0,.1);
         font-size: 0.95rem;
         gap: 2rem;
-        transition: all 0.3s ease;
+    }
+    @media (max-width: 600px) {
+        main {
+            padding: 20px;
+        }
     }
     button {
         border: 1px solid #d5d9d9;
@@ -301,6 +309,12 @@
 
                 buttonContainer.appendChild(button);
             }
+
+            var mainContainer = document.querySelector('main');
+            mainContainer.classList.remove('show');
+            void mainContainer.offsetWidth;
+            mainContainer.classList.add('show');
+
             questionContainer.appendChild(buttonContainer);
             feather.replace();