diff --git a/.about.html.kate-swp b/.about.html.kate-swp
deleted file mode 100644
index d8b7ac1..0000000
Binary files a/.about.html.kate-swp and /dev/null differ
diff --git a/.index.html.kate-swp b/.index.html.kate-swp
deleted file mode 100644
index de93630..0000000
Binary files a/.index.html.kate-swp and /dev/null differ
diff --git a/about.html b/about.html
index 3f93cd7..f76a024 100644
--- a/about.html
+++ b/about.html
@@ -17,228 +17,7 @@
     <title>About - Venith</title>
 </head>
 <style>
-@charset "UTF-8";
 
-:root {
-    --genwidth: 850px;
-    --navwidth: 175px;
-    --fg: #ddd;
-    --altfg: #ccc;
-    --fgemph: white;
-    --bg: #111;
-    --altbg: #333;
-    --emph: #333;
-    --bordercolor: #555;
-    --limish: #0e0;
-}
-
-body {
-    font-family: "SFUIRounded";
-    background: linear-gradient(indigo, darkslategray) fixed;
-    background: #100;
-    margin-bottom: 100px;
-    font-weight: 300;
-    color: #fff;
-    padding: 1.5em;
-    max-width: 100%; /* Adjusted for responsive scaling */
-    background: url(http://cdn.venith.net/www.venith.net/assets/images/bg.gif) center center/cover fixed no-repeat;
-}
-
-html, body {
-    height: 100%;
-}
-
-a {
-    color: #EE4B2B;
-}
-
-h1, h2, h3 {
-    font-weight: lighter;
-}
-
-header {
-    text-align: center;
-    margin-bottom: 1em;
-}
-
-header .moeta-name {
-    padding: 1rem;
-    text-align: center;
-    display: inline-block;
-    background: rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 850px; /* Keeps it manageable on larger screens */
-}
-
-.moeta-name h1 {
-    margin-bottom: 0;
-}
-
-.moeta-name p {
-    opacity: 0.6;
-    font-size: 0.875em;
-}
-
-main {
-    padding: 1.5em;
-    margin-bottom: 2em;
-    background: rgba(0, 0, 0, 0.5);
-    max-width: 100%;
-    box-sizing: border-box;
-}
-
-main h2 {
-    position: relative;
-    margin-top: 3em;
-}
-
-main h2:before {
-    content: '';
-    height: 100%;
-    width: 0.5rem;
-    left: -1.5rem;
-    background: #EE4B2B;
-    position: absolute;
-}
-
-main h2:first-child {
-    margin-top: 0;
-}
-
-footer {
-    padding: 1em;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.6);
-}
-
-/* Navigation Styling */
-nav {
-    background-color: #222;
-    overflow: hidden;
-}
-
-nav ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-align: center;
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-}
-
-nav li {
-    display: inline-block;
-}
-
-nav a {
-    display: block;
-    color: white;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-}
-
-nav a:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-/* Rainbow Bar */
-.rainbow-bar {
-    display: block;
-    width: 100%;
-    height: 20px; /* Default height */
-}
-
-/* Responsive adjustments for smaller screens */
-@media screen and (max-width: 768px) {
-    body {
-        padding: 0;
-        max-width: 100%;
-        float: none;
-        margin-bottom: 0;
-    }
-
-    header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: auto;
-    }
-
-    header .moeta-name {
-        padding: 1.5em;
-        text-align: center;
-        max-width: 100%; /* Ensures full width scaling on mobile */
-    }
-
-    main {
-        padding: 1em;
-        margin-bottom: 1em;
-    }
-
-    nav ul {
-        flex-direction: row; /* Keep navbar horizontal */
-        justify-content: space-evenly;
-    }
-
-    .rainbow-bar {
-        height: 10px; /* Adjust height for smaller screens */
-    }
-
-    nav a {
-        padding: 12px 16px;
-    }
-}
-
-/* For larger screens like desktops */
-@media screen and (min-width: 1024px) {
-    body {
-        max-width: 70%;
-        margin: 0 auto;
-        padding: 2em;
-    }
-
-    header {
-        margin-bottom: 2em;
-    }
-
-    main {
-        padding: 2em;
-        margin-bottom: 3em;
-    }
-}
-
-
-  /* Container for the main content and the grid layout */
-        main {
-            padding: 20px;
-            margin-top: 100px; /* Enough margin-top to avoid overlap */
-        }
-
-        /* Grid layout for three sections */
-        .grid-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            text-align: center;
-            margin: 20px auto;
-            max-width: 1200px;
-        }
-
-        /* Transparent background for each column */
-        .grid-item {
-            background-color: rgba(255, 255, 255, 0.2);
-            padding: 20px;
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-        }
-/* Hover effect for links */
-nav ul li a:hover {
-    background-color: #EE4B2B; /* Background changes to orange on hover */
-    color: white; /* Text stays white */
-}
 </style>
 <body>
 <header>
diff --git a/index.html b/index.html
index e976172..3629f83 100644
--- a/index.html
+++ b/index.html
@@ -17,228 +17,7 @@
     <title>Home - Venith</title>
 </head>
 <style>
-@charset "UTF-8";
 
-:root {
-    --genwidth: 850px;
-    --navwidth: 175px;
-    --fg: #ddd;
-    --altfg: #ccc;
-    --fgemph: white;
-    --bg: #111;
-    --altbg: #333;
-    --emph: #333;
-    --bordercolor: #555;
-    --limish: #0e0;
-}
-
-body {
-    font-family: "SFUIRounded";
-    background: linear-gradient(indigo, darkslategray) fixed;
-    background: #100;
-    margin-bottom: 100px;
-    font-weight: 300;
-    color: #fff;
-    padding: 1.5em;
-    max-width: 100%; /* Adjusted for responsive scaling */
-    background: url(http://cdn.venith.net/www.venith.net/assets/images/bg.gif) center center/cover fixed no-repeat;
-}
-
-html, body {
-    height: 100%;
-}
-
-a {
-    color: #EE4B2B;
-}
-
-h1, h2, h3 {
-    font-weight: lighter;
-}
-
-header {
-    text-align: center;
-    margin-bottom: 1em;
-}
-
-header .moeta-name {
-    padding: 1rem;
-    text-align: center;
-    display: inline-block;
-    background: rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 850px; /* Keeps it manageable on larger screens */
-}
-
-.moeta-name h1 {
-    margin-bottom: 0;
-}
-
-.moeta-name p {
-    opacity: 0.6;
-    font-size: 0.875em;
-}
-
-main {
-    padding: 1.5em;
-    margin-bottom: 2em;
-    background: rgba(0, 0, 0, 0.5);
-    max-width: 100%;
-    box-sizing: border-box;
-}
-
-main h2 {
-    position: relative;
-    margin-top: 3em;
-}
-
-main h2:before {
-    content: '';
-    height: 100%;
-    width: 0.5rem;
-    left: -1.5rem;
-    background: #EE4B2B;
-    position: absolute;
-}
-
-main h2:first-child {
-    margin-top: 0;
-}
-
-footer {
-    padding: 1em;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.6);
-}
-
-/* Navigation Styling */
-nav {
-    background-color: #222;
-    overflow: hidden;
-}
-
-nav ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-align: center;
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-}
-
-nav li {
-    display: inline-block;
-}
-
-nav a {
-    display: block;
-    color: white;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-}
-
-nav a:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-/* Rainbow Bar */
-.rainbow-bar {
-    display: block;
-    width: 100%;
-    height: 20px; /* Default height */
-}
-
-/* Responsive adjustments for smaller screens */
-@media screen and (max-width: 768px) {
-    body {
-        padding: 0;
-        max-width: 100%;
-        float: none;
-        margin-bottom: 0;
-    }
-
-    header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: auto;
-    }
-
-    header .moeta-name {
-        padding: 1.5em;
-        text-align: center;
-        max-width: 100%; /* Ensures full width scaling on mobile */
-    }
-
-    main {
-        padding: 1em;
-        margin-bottom: 1em;
-    }
-
-    nav ul {
-        flex-direction: row; /* Keep navbar horizontal */
-        justify-content: space-evenly;
-    }
-
-    .rainbow-bar {
-        height: 10px; /* Adjust height for smaller screens */
-    }
-
-    nav a {
-        padding: 12px 16px;
-    }
-}
-
-/* For larger screens like desktops */
-@media screen and (min-width: 1024px) {
-    body {
-        max-width: 70%;
-        margin: 0 auto;
-        padding: 2em;
-    }
-
-    header {
-        margin-bottom: 2em;
-    }
-
-    main {
-        padding: 2em;
-        margin-bottom: 3em;
-    }
-}
-
-
-  /* Container for the main content and the grid layout */
-        main {
-            padding: 20px;
-            margin-top: 100px; /* Enough margin-top to avoid overlap */
-        }
-
-        /* Grid layout for three sections */
-        .grid-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            text-align: center;
-            margin: 20px auto;
-            max-width: 1200px;
-        }
-
-        /* Transparent background for each column */
-        .grid-item {
-            background-color: rgba(255, 255, 255, 0.2);
-            padding: 20px;
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-        }
-/* Hover effect for links */
-nav ul li a:hover {
-    background-color: #EE4B2B; /* Background changes to orange on hover */
-    color: white; /* Text stays white */
-}
 </style>
 <body>
 <header>