refactor: move app.css back to main folder ( how did it even get there ?? )

src/app.css

@@ -0,0 +1,99 @@
+@import url("../font/inter/inter.css");
+
+:root {
+    --bg-1000: #fffcf7;
+    --bg-900: #faf4e4;
+    --bg-800: #f2e8d7;
+    --bg-700: #d9ccad;
+    --bg-600: #edf5ba;
+    --accent: #92a40a;
+    --text: #322e1f;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-1000: #0b090c;
+        --bg-900: #120d14;
+        --bg-800: #2A202F;
+        --bg-700: #443749;
+        --bg-600: #513D60;
+        --accent: #CDA1EC;
+        --text: #E2DFE3;
+    }
+    .light-only {
+        display: none
+    }
+}
+
+@media screen and (prefers-color-scheme: light) {
+    .dark-only {
+        display: none
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+
+    color: var(--text);
+    background-color: var(--bg-1000);
+
+    font-family: "Inter", sans-serif;
+    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
+
+    box-sizing: border-box;
+}
+
+@supports (font-variation-settings: normal) {
+    body {
+        font-family: InterVariable, sans-serif;
+    }
+}
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+#app {
+    margin: auto 0;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 16px;
+}
+
+header, #widgets {
+    width: 300px;
+}
+
+main {
+    width: 700px;
+}
+
+img.emoji {
+    height: 1.2em;
+    margin: -.2em 0;
+}
+
+hr {
+    border-color: color-mix(in srgb, transparent, var(--accent) 50%);
+}
+
+.throb {
+    animation: .25s throb alternate infinite ease-in;
+}
+
+@keyframes throb {
+    from {
+        opacity: .5;
+    }
+    to {
+        opacity: 1;
+    }
+}