переделки для того, чтобы библиотека api заводилась

static/style.css

@@ -1,75 +1,82 @@
-:root {
-    --text: #000;
-    --bg: #fff;
+/* ========== THEME ========== */
+body {
+    --text-color: #262626;
+    --text-color2: #3d3d3d;
+    --text-good: green;
+    --text-bad: red;
 
-    --item_bg: rgb(248, 246, 243);
-    --second_text: #6e6d6d;
+    --brand-bg: #EDF3FE;
+    --brand-text: #5488F7;
+
+    --bg-color: #FEFEFE;
+    --bg-selected: #F1F1F1;
+    --bg-action: #5181fe;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --text: #fff;
-        --bg: #222226;
+    /* defaults to dark theme */
+    body {
+        --text-color: #eee;
+        --text-color2: #bbb;
+        --text-good: greenyellow;
+        --text-bad: orangered;
 
-        --item_bg: #333336;
-        --second_text: #828282;
+        --brand-bg: #393E50;
+        --brand-text: #5F93F3;
+
+        --bg-color: #2d2c33;
+        --bg-selected: #424248;
+        --bg-action: #4a70d5;
     }
 }
 
-html {
-    padding: 10px;
+* {
+    background: transparent;
+    color: var(--text-color);
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-    align-items: center;
-    justify-content: center;
-
-    background-color: var(--bg);
-    color: var(--text);
+    background: var(--bg-color);
+    margin: 0; /* браузеры зачем-то ставят свое значение */
 }
 
-a {
-    text-decoration: none;
-    background-color: var(--bg);
-    color: var(--text);
+#content {
+    margin: 0.5em;
 }
 
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--bg);
-    color: var(--text);
-}
+/* ========== MAIN STYLES ========== */
 
-.title {
+header > h1 {
     text-align: center;
+    background-color: var(--brand-bg);
+    padding: 0.5em;
+    margin: 0;
 }
 
-.item {
-    padding: 20px;
-    width: 400px;
-    color: var(--text);
-    background-color: var(--item_bg);
-    border-bottom: 1px solid var(--text);
+header * {
+    color: var(--brand-text);
 }
 
-.item_title {
-    font-weight: 600;
-    text-align: center;
+header > nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
 }
 
-.item_status {
-    text-align: end;
-    font-weight: 300;
-    color: var(--second_text);
+header > nav > a {
+    margin: 0.5em;
 }
 
-.item_icon {
-    width: 25px;
+.value-good {
+    color: var(--text-good);
 }
+
+.value-bad {
+    color: var(--text-bad);
+}