diff --git a/root/index.html b/root/index.html
index 22cd221..6555827 100644
--- a/root/index.html
+++ b/root/index.html
@@ -2,7 +2,10 @@
+
+
Munebase
+
diff --git a/root/match.html b/root/match.html
index ea5fccd..82dc1ae 100644
--- a/root/match.html
+++ b/root/match.html
@@ -5,6 +5,7 @@
Match Video & Stats
+
diff --git a/root/projects.html b/root/projects.html
index 676f779..8b83f33 100644
--- a/root/projects.html
+++ b/root/projects.html
@@ -2,7 +2,10 @@
+
+
Munebase Projects
+
diff --git a/root/resources.html b/root/resources.html
index 885b2db..11c12ec 100644
--- a/root/resources.html
+++ b/root/resources.html
@@ -2,7 +2,10 @@
+
+
Munebase Resources
+
diff --git a/root/styles/main.css b/root/styles/main.css
new file mode 100644
index 0000000..318b5c3
--- /dev/null
+++ b/root/styles/main.css
@@ -0,0 +1,213 @@
+:root {
+ --primary-dark-blue: #1a237e;
+ --secondary-dark-blue: #283593;
+ --accent-blue: #3f51b5;
+ --light-blue: #5c6bc0;
+ --text-light: #e8eaf6;
+ --text-secondary: #c5cae9;
+ --background-dark: #0d1421;
+ --background-secondary: #1e2937;
+ --border-color: #374151;
+ --link-color: #7986cb;
+ --link-hover: #9fa8da;
+
+ --font-family: 'Arial', 'Helvetica', sans-serif;
+ --font-size-base: 16px;
+ --line-height-base: 1.6;
+
+ --spacing-small: 0.5rem;
+ --spacing-large: 1.5rem;
+
+ --border-radius: 8px;
+ --border-radius-sm: 4px;
+
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+body {
+ font-family: var(--font-family);
+ line-height: var(--line-height-base);
+ background-color: var(--background-dark);
+ color: var(--text-light);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: var(--text-light);
+ margin-bottom: var(--spacing-small);
+ font-weight: bold;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: var(--spacing-large);
+}
+
+h2 {
+ font-size: 2rem;
+ color: var(--light-blue);
+ border-bottom: 2px solid var(--accent-blue);
+ padding-bottom: var(--spacing-small);
+}
+
+h3 {
+ font-size: 1.5rem;
+}
+
+p {
+ margin-bottom: var(--spacing-small);
+ color: var(--text-secondary);
+}
+
+a {
+ color: var(--link-color);
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+a:hover {
+ color: var(--link-hover);
+ text-decoration: underline;
+}
+
+header {
+ background: linear-gradient(135deg, var(--primary-dark-blue), var(--secondary-dark-blue));
+ padding: var(--spacing-large) var(--spacing-large);
+ box-shadow: var(--shadow);
+ border-bottom: 3px solid var(--accent-blue);
+}
+
+header h1 {
+ margin-bottom: var(--spacing-small);
+ text-align: center;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+nav {
+ display: flex;
+ justify-content: center;
+ gap: var(--spacing-large);
+ flex-wrap: wrap;
+}
+
+nav a {
+ background-color: var(--background-secondary);
+ color: var(--text-light);
+ padding: var(--spacing-small) var(--spacing-small);
+ border-radius: var(--border-radius);
+ border: 2px solid var(--border-color);
+ transition: all 0.3s ease;
+ font-weight: 500;
+}
+
+nav a:hover {
+ background-color: var(--accent-blue);
+ border-color: var(--light-blue);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow);
+ text-decoration: none;
+}
+
+main {
+ flex: 1;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: var(--spacing-large);
+ width: 100%;
+}
+
+article {
+ background-color: var(--background-secondary);
+ border-radius: var(--border-radius);
+ padding: var(--spacing-large);
+ box-shadow: var(--shadow);
+ border: 1px solid var(--border-color);
+}
+
+ul,
+ol {
+ margin-left: var(--spacing-large);
+ margin-bottom: var(--spacing-small);
+}
+
+li {
+ margin-bottom: var(--spacing-small);
+ color: var(--text-secondary);
+}
+
+li strong {
+ color: var(--text-light);
+}
+
+dl {
+ margin-bottom: var(--spacing-small);
+}
+
+dt {
+ font-weight: bold;
+ color: var(--text-light);
+ margin-top: var(--spacing-small);
+ margin-bottom: var(--spacing-small);
+}
+
+dt:first-child {
+ margin-top: 0;
+}
+
+dd {
+ margin-left: var(--spacing-large);
+ margin-bottom: var(--spacing-small);
+ color: var(--text-secondary);
+}
+
+video {
+ max-width: 100%;
+ height: auto;
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow);
+ border: 2px solid var(--border-color);
+ margin: var(--spacing-small) 0;
+}
+
+audio {
+ width: 100%;
+ margin: var(--spacing-small) 0;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: var(--spacing-small) 0;
+ background-color: var(--background-dark);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th,
+td {
+ padding: var(--spacing-small);
+ text-align: left;
+ border-bottom: 1px solid var(--border-color);
+}
+
+th {
+ background-color: var(--primary-dark-blue);
+ color: var(--text-light);
+ font-weight: bold;
+}
+
+td {
+ color: var(--text-secondary);
+}
+
+tr:hover {
+ background-color: var(--background-secondary);
+}
\ No newline at end of file