frontend: real world movement

frontend/src/lib/css/styles.min.css

@@ -387,6 +387,46 @@ li strong {
     margin-left: 1rem;
   }
 }
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.btn {
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: 1px;
+  padding: 18px 28px;
+  border: 1px solid;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+  border-radius: 5px;
+}
+
+.btn.primary {
+  background-color: #4361ee;
+  border-color: #4361ee;
+  color: white;
+}
+
+.btn.primary:hover {
+  background-color: #3651d4;
+  border-color: #3651d4;
+}
+
+.btn.danger {
+  background-color: #dc2626;
+  border-color: #dc2626;
+  color: white;
+}
+
+.btn.danger:hover {
+  background-color: #c51f1f;
+  border-color: #c51f1f;
+}
 .warning {
   margin: 20px 0;
   padding: 1rem;