From ca271760ebc0ebb10db3ddf10cc0cee233f31214 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Fri, 24 May 2024 12:50:57 +0200
Subject: [PATCH] dark mode

---
 styles.css | 71 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/styles.css b/styles.css
index 48ed657..732cc36 100644
--- a/styles.css
+++ b/styles.css
@@ -11,21 +11,47 @@
 }
 
 :root {
-	--text: #e0def4;
-	--love: #eb6f92;
-	--gold: #f6c177;
-	--rose: #ebbcba;
-	--pine: #31748f;
-	--foam: #9ccfd8;
-	--iris: #c4a7e7;
+	@media (prefers-color-scheme: dark) {
+		--text: #e0def4;
+		--love: #eb6f92;
+		--gold: #f6c177;
+		--rose: #ebbcba;
+		--pine: #31748f;
+		--foam: #9ccfd8;
+		--iris: #c4a7e7;
 
-	--base: #191724;
-	--surface: #1f1d2e;
-	--overlay: #26233a;
+		--base: #191724;
+		--surface: #1f1d2e;
+		--overlay: #26233a;
 
-	--hl-low: #21202e;
-	--hl-med: #403d52;
-	--hl-high: #524f67;
+		--hl-low: #21202e;
+		--hl-med: #403d52;
+		--hl-high: #524f67;
+	}
+
+	@media (prefers-color-scheme: light) {
+
+		--text: #575279;
+		--love: #b4637a;
+		--gold: #ea9d34;
+		--rose: #d7827e;
+		--pine: #286983;
+		--foam: #56949f;
+		--iris: #907aa9;
+
+		--base: #faf4ed;
+		--surface: #fffaf3;
+		--overlay: #f2e9e1;
+
+		--hl-low: #f4ede8;
+		--hl-med: #dfdad9;
+		--hl-high: #cecacd;
+
+
+	}
+
+	--shadow-color: rgba(0, 0, 0, 0.6);
+	--text-shadow: 0.04em 0.04em var(--shadow-color);
 }
 
 body {
@@ -38,20 +64,22 @@ h3,
 h4 {
 	font-family: League, Verdana, Geneva, Tahoma, sans-serif;
 	color: var(--gold);
-	text-shadow: 0.8rem 0.8rem var(--base);
+	margin: 0px;
 }
 
 h1 {
 	font-size: 8rem;
+	text-shadow: var(--text-shadow);
 }
 
 h2 {
 	font-size: 6rem;
+	text-shadow: var(--text-shadow);
 }
 
 h3 {
 	font-size: 4rem;
-	color: var(--love);
+	color: var(--iris);
 }
 
 main {
@@ -59,16 +87,21 @@ main {
 	font-size: 2rem;
 	width: 60%;
 	margin: auto;
+	font-weight: 600;
 	color: var(--text);
 }
 
-p,
-ul {
+section {
+	margin-bottom: 8rem;
+}
+
+
+.container {
 
 	background-color: var(--surface);
 	border-radius: 10rem;
 	padding: 5rem;
-	box-shadow: 1rem 1rem var(--base);
+	box-shadow: 1rem 1rem var(--shadow-color);
 }
 
 figcaption {
@@ -76,7 +109,7 @@ figcaption {
 	font-size: 2em;
 	font-weight: 1000;
 	color: var(--iris);
-	text-shadow: 0.08em 0.08em var(--base);
+	/* text-shadow: var(--text-shadow); */
 }
 
 b {