Fixes: Groverio#144

style.css

@@ -429,3 +429,77 @@ Animating title
   color: black;
   width: 20px;
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Londrina+Outline&display=swap');
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-10px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+@media (max-width: 947px) {
+  .container {
+    max-width: 100%;
+    padding: 10px;
+  }
+
+  .subtitle {
+    font-size: 3rem;
+  }
+
+  .js-add-grid,
+  .js-add-html {
+    grid-template-columns: 1fr;
+  }
+
+  .js-add-button {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .task-info {
+    flex-direction: column;
+  }
+
+  .footer {
+    font-size: 0.8rem;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .subtitle {
+    font-size: 2rem;
+  }
+
+  .js-add-grid,
+  .js-add-html {
+    grid-template-columns: 1fr;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .task-info {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .footer p {
+    font-size: 10px;
+  }
+}