fixed css

utils.css → main.css

@@ -1,4 +1,7 @@
-/* Flexbox utilities */
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 1rem;
+}
+
 .flex {
   display: flex;
 }
@@ -116,6 +119,42 @@
   border-color: #0ca83d;
 }
 
+.btn-primary {
+  background-color: #0c6fc1;
+  border-color: #0c6fc1;
+}
+
+.btn-primary:hover {
+  background-color: #0c5fa8;
+  border-color: #0c5fa8;
+}
+
+/* B&W + Gray buttons */
+
+.btn-bw {
+  background-color: #fff;
+  border-color: #fff;
+  color: #000;
+}
+
+.btn-bw:hover {
+  background-color: #000;
+  border-color: #000;
+  color: #fff;
+}
+
+.btn-gray {
+  background-color: #ccc;
+  border-color: #ccc;
+  color: #000;
+}
+
+.btn-gray:hover {
+  background-color: #000;
+  border-color: #000;
+  color: #fff;
+}
+
 .image-container {
   display: flex;
   justify-content: center;
@@ -138,7 +177,7 @@
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
-  font-size: 12px;
+  font-size: 16px;
   font-weight: bold;
   padding: 4px 8px;
   border-radius: 4px;