From dbc730716a9f4ad8adf9a576d117b8978ba59b74 Mon Sep 17 00:00:00 2001
From: AlmightyMiau <almightymeow612@gmail.com>
Date: Thu, 6 Feb 2025 22:31:17 -0800
Subject: Set up Flex containers and fit header with Flex

Added .section class to all 4 sections. Added
 #links to header links span. Made new area in
 styles.css for aranging items.
---
 styles.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

(limited to 'styles.css')

diff --git a/styles.css b/styles.css
index 8a2db50..521a7d8 100644
--- a/styles.css
+++ b/styles.css
@@ -4,6 +4,40 @@
     margin: 0px;
 }
 
+/* Arrangement of items */
+.section {
+    display: flex;
+    justify-content: center;
+}
+#top { /* Container for Top section */ 
+    flex-direction: column;
+    align-items: center;
+}
+#header { /* Container for Logo and Links */
+    width: 75%;
+    margin-top: 2%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+#logo {
+    flex: auto;
+    min-width: 60px;
+    min-height: 60px;
+}
+#links { /* Container for the header links */
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+}
+#links a {
+    padding: 4px 10px;
+    flex: auto;
+    min-width: 60px;
+    min-height: 60px;
+}
+
+/* Style of items */
 #top {
     background-color: #1F2937;
     color: #F9FAF8;
-- 
cgit v1.2.3