1 files changed, 190 insertions, 2 deletions
diff --git a/static/style.css b/static/style.css
index defd54a..647aee5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,5 +1,193 @@
 body {
 	background: #1e1e2f;
-	color: #eee;
-	font-family: sans-serif;
+	color: #cdd6f4;
+	font-family: 'TypoPRO Fantasque Sans Mono', 'Fantasque Sans Mono', 'Arial', 'Helvetica', sans-serif;
+	font-style: normal;
+	font-size: 1.1rem;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+	margin: 0 auto;
+	padding: 0;
+	padding-top: 30px;
+	max-width: 70vw;
+}
+
+.hey h1 {
+	margin: 0;
+	padding: 0;
+}
+
+.hey h3 {
+	font-weight: 200;
+}
+
+.yellow {
+	color: #f9e2af;
+}
+
+.purple {
+	color: #cba6f7;
+}
+
+.white {
+	color: #cdd6f4;
+}
+
+.green {
+	color: #a6e3a1;
+}
+
+.pink {
+	color: #f5c2e7;
+}
+
+.rosewater {
+	color: #f5e0dc;
+}
+
+.flamingo {
+	color: #f2cdcd;
+}
+
+.red {
+	color: #f38ba8;
+}
+
+.maroon {
+	color: #eba0ac;
+}
+
+.peach {
+	color: #fab387;
+}
+
+.teal {
+	color: #94e2d5;
+}
+
+.sky {
+	color: #89dceb;
+}
+
+.sapphire {
+	color: #74c7ec;
+}
+
+.blue {
+	color: #89b4fa;
+}
+
+.lavender {
+	color: #b4befe;
+}
+
+.bold {
+	font-weight: 600;
+}
+
+.italic {
+	font-style: italic;
+}
+
+.underline {
+	text-decoration: underline;
+}
+
+nav a.active {
+	text-decoration: underline;
+	text-underline-offset: 4px;
+	color: #f9e2af;
+}
+
+.header-inner a {
+	text-decoration: none;
+}
+.header-inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 1.5rem 20px;
+	border-bottom: 1px solid #eee;
+}
+
+pre, code {
+	font-family: 'TypoPRO Fantasque Sans Mono', 'Fantasque Sans Mono', monospace;
+	background: #181825; 
+	color: #cdd6f4;
+	padding: 0.1rem 0.3rem;
+	border-radius: 4px;
+	border: 1px solid #313244;
+	font-size: 0.95em;
+	text-align: left;
+}
+
+pre {
+	padding: 1rem;
+	overflow-x: auto;
+	border-left: 4px solid #f9e2af;
+}
+
+pre code {
+	background: transparent;
+	border: none;
+	padding: 0;
+}
+
+.wrap {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow-x: hidden;
+	overflow-y: auto;
+	max-height: 600px;
+}
+
+a {
+	color: #f9e2af;
+}
+
+.fastfetch-image {
+	width: 200px;
+	height: auto;
+	display: block;
+	border-radius: 4px;
+}
+
+.fastfetch-text p {
+	margin: 0;
+	padding: 0;
+}
+
+.fastfetch-row {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+	margin-top: 0.5rem;
+}
+
+.fastfetch-image {
+	width: 250px;
+	height: auto;
+	border-radius: 8px;
+	flex-shrink: 0;
+}
+
+.fastfetch-text {
+	flex: 1;
+}
+
+@media (max-width: 1000px) {
+	.fastfetch-row {
+		flex-direction: column !important;
+	}
+
+	.fastfetch-image {
+		width: 70%;
+	}
 }