Adding hot reload + attempting to style stuff

assets/styles/main.rcss

@@ -2,23 +2,27 @@
    RCSS User Agent Defaults (Plain HTML Style)
    ========================================================================== */
 
-/* Core Application Window Foundation */
+* {
+    box-sizing: border-box;
+    font-family: "Hubballi";
+
+    --background-color: #f5e8df;
+    --foreground-color: #0a1347;
+}
+
 body {
     display: block;
     width: 100vw;
     height: 100vh;
-    font-family: "rmlui-debugger-font";
-    font-size: 16px;
-    background-color: #ffffff;
-    color: #000000;
+    /* font-family: "rmlui-debugger-font"; */
+    font-size: 15pt;
+    background-color: var(--background-color);
+    color: var(--foreground-color);
     margin: 0px;
-    padding: 0px;
+    padding: 20px;
 }
 
 /* Generic Structural Layout Defaults */
-* {
-    box-sizing: border-box;
-}
 
 div, section, article, header, footer, main, nav, aside {
     display: block;
@@ -143,41 +147,41 @@ button, input, select, textarea {
     vertical-align: middle;
 }
 
-/* Traditional gray bevel button style */
 button, input[type="submit"], input[type="button"] {
     padding: 4px 12px;
     min-width: 40px;
-    background-color: #e1e1e1;
-    color: #000000;
-    border: 1px #767676;
+    background-color: transparent;
+    color: var(--foreground-color);
+    border: 1px var(--foreground-color);
     text-align: center;
 }
 
 button:hover, input[type="submit"]:hover, input[type="button"]:hover {
-    background-color: #d0d0d0;
-    border: 1px #4f4f4f;
+    background-color: transparent;
+    border: 2px var(--foreground-color);
 }
 
 button:active, input[type="submit"]:active, input[type="button"]:active {
     background-color: #b5b5b5;
-    border: 1px #000000;
+    border: 2px var(--foreground-color);
 }
 
 /* Standard text field styling */
 input[type="text"], input[type="password"], textarea {
     padding: 4px;
-    background-color: #ffffff;
-    color: #000000;
-    border: 1px #767676;
+    background-color: transparent;
+    color: var(--foreground-color);
+    border: 1px var(--foreground-color);
 }
 
 input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
-    border: 1px #005aff;
+    /* border: 1px #005aff; */
+    border-width: 2px;
 }
 
 textarea {
     display: block;
-    white-space: pre-wrap;
+    /* white-space: pre-wrap; */
     width: 300px;
     height: 100px;
 }
@@ -271,10 +275,36 @@ progress-value {
 /*  ===================================
     Specific app stuff 
     =================================== */
+#header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 50px;
+}
+
+#new-critter-btn {
+    height: 50px;
+    width: 50px;
+    /* border-radius: 50px; */
+    font-size: 30pt;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    border-width: 2px;
+    border-color: var(--foreground-color);
+    background-color: transparent;
+    color: var(--foreground-color);
+    transition: border-width 0.2s linear-in-out;
+    
+}
+#new-critter-btn:hover {
+    border-width: 4px;
+}
 
 /* Critter Cards Container */
 .critter-list {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
     padding: 10px;
 }
@@ -282,19 +312,17 @@ progress-value {
 /* Interactive Card Base */
 .critter-card {
     display: block;
-    width: 220px;
+    width: 50%;
     margin: 10px;
     padding: 10px;
-    background-color: #2b2b2b;
-    color: #ffffff;
-    border: 1px #444444;
-    border-radius: 6px;
+    background-color: transparent;
+    color: var(--foreground-color);
+    border: 2px var(--foreground-color);
     text-align: left;
 }
 
 .critter-card:hover {
-    background-color: #383838;
-    border: 1px #005aff;
+    border: 3px var(--foreground-color);
 }
 
 .critter-card:active {
@@ -306,14 +334,14 @@ progress-value {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px #444444;
+    border-bottom: 1px var(--foreground-color);
     padding-bottom: 4px;
     margin-bottom: 8px;
 }
 
 .critter-id {
-    font-size: 11px;
-    color: #aaaaaa;
+    font-size: 12pt;
+    color: var(--foreground-color);
 }
 
 .btn-delete {
@@ -336,11 +364,11 @@ progress-value {
 }
 
 .critter-thumb {
-    width: 48px;
-    height: 48px;
+    width: 100px;
+    height: 100px;
     margin-right: 10px;
-    background-color: #1a1a1a;
-    border: 1px #555555;
+    background-color: transparent;
+    border: 1px var(--foreground-color);
 }
 
 .critter-info {
@@ -349,14 +377,14 @@ progress-value {
 
 .critter-name {
     margin: 0px 0px 4px 0px;
-    font-size: 16px;
-    color: #ffffff;
+    font-size: 20pt;
+    color: var(--foreground-color);
 }
 
 .critter-info p {
     margin: 2px 0px;
-    font-size: 12px;
-    color: #dddddd;
+    font-size: 18pt;
+    color: var(--foreground-color);
 }
 
 /* Modals */
@@ -366,28 +394,47 @@ progress-value {
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: var(--background-color);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .modal-content {
-    background-color: #2b2b2b;
-    color: #ffffff;
+    background-color: transparent;
+    color: var(--foreground-color);
+    border-color: var(--foreground-color);
+    border-width: 2px;
     padding: 20px;
-    border-radius: 8px;
-    width: 350px;
+    border-radius: 0px;
+    width: 80%;
+    height: 80%;
+}
+
+.modal-content h2 {
+    position: relative;
+    top: -65px;
+    background-color: var(--background-color);
+    text-align: center;
+    padding: 0px;
+    max-width: 300px;
 }
 
 .modal-content label {
     display: block;
     margin-top: 8px;
+    font-size: 20pt;
 }
 
 .modal-content input {
     width: 100%;
     margin-bottom: 8px;
+    background-color: transparent;
+    font-size: 15pt;
+}
+
+.modal-content textarea {
+    width: 100%;
 }
 
 .error {
@@ -399,4 +446,5 @@ progress-value {
     margin-top: 15px;
     display: flex;
     justify-content: space-between;
+    font-size: 18pt;
 }