initial commit

3 files changed, 46 insertions, 20 deletions

diff --git a/static/css/blinky.css b/static/css/blinky.css
new file mode 100644
index 0000000..8bd636e
--- /dev/null
+++ b/static/css/blinky.css
@@ -0,0 +1,9 @@
+.blinky {
+  animation: blinker 1s step-start infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..159a142
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,13 @@
+:root {
+  --background-color: #f4e8e9;
+  --text-color: #333;
+  --link-color: #d291bc;
+  --container-bg: #fff7f8;
+}
+
+[data-theme="DARK"] {
+  --background-color: #333;
+  --text-color: #f4e8e9;
+  --link-color: #b86b77;
+  --container-bg: #424242;
+}
diff --git a/static/css/styles.css b/static/css/styles.css
index 3b2f447..f62b32e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,25 +1,23 @@
-:root {
-  /* Light theme colors */
-  --background-color: #F4E8E9; /* Soft pink background */
-  --text-color: #333; /* Dark text for contrast */
-  --link-color: #D291BC; /* Retro pink for links */
-  --container-bg: #FFF7F8; /* Very light pink for containers */
+@import "/static/css/colors.css";
+@import "/static/css/blinky.css";
+
+@font-face {
+  font-family: "ComicSans";
+  src: url("/static/font/comicsans.ttf");
 }
 
-.dark-mode {
-  /* Dark theme colors */
-  --background-color: #333; /* Dark background */
-  --text-color: #F4E8E9; /* Light text for contrast */
-  --link-color: #B86B77; /* Soft pink for links */
-  --container-bg: #424242; /* Darker shade for containers */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--text-color);
 }
 
 body {
-  font-family: 'ComicSans', sans-serif;
+  font-family: "ComicSans", sans-serif;
   background-color: var(--background-color);
-  color: var(--text-color);
-  padding: 20px;
-  text-align: center;
+  background-image: url("/static/img/stars.gif");
+  min-height: 100vh;
 }
 
 a {
@@ -33,10 +31,16 @@ a:hover {
 }
 
 .container {
-  max-width: 600px;
+  max-width: 1600px;
   margin: auto;
+  margin-top: 1rem;
   background-color: var(--container-bg);
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--text-color);
+
+  margin: 20px 0;
 }