aligned styling

src/baby_monitor/static/index.html

@@ -5,29 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
+    <link rel="stylesheet" href="/styles.css" />
     <style>
-      body {
-        font-family: Arial, sans-serif;
-        max-width: 800px;
-        margin: 2rem auto;
-        padding: 0 1rem;
-        background-color: #f0f0f0;
-      }
-      .container {
-        background: white;
-        padding: 2rem;
-        border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-      }
-      h1 {
-        color: #333;
-        margin-bottom: 1rem;
-      }
-      .greeting {
-        color: #666;
-        font-size: 1.1rem;
-        margin-bottom: 2rem;
-      }
+      /* Page-specific styles */
       button {
         padding: 0.75rem 1.5rem;
         background-color: #dc3545;
@@ -47,13 +27,6 @@
       .admin-button:hover {
         background-color: #5568d3;
       }
-      .hidden {
-        display: none;
-      }
-      .loading {
-        text-align: center;
-        padding: 2rem;
-      }
       .feeding-button {
         width: 100%;
         padding: 2rem;