diff --git a/mk8mods.html b/pages/mods/mk8mods.html
similarity index 93%
rename from mk8mods.html
rename to pages/mods/mk8mods.html
index 7a277bc..11400f6 100644
--- a/mk8mods.html
+++ b/pages/mods/mk8mods.html
@@ -13,9 +13,9 @@
My Mods
diff --git a/mp9mods.html b/pages/mods/mp9mods.html
similarity index 93%
rename from mp9mods.html
rename to pages/mods/mp9mods.html
index b65ba4c..d38a269 100644
--- a/mp9mods.html
+++ b/pages/mods/mp9mods.html
@@ -13,9 +13,9 @@
My Mods
diff --git a/pages/mods/style.css b/pages/mods/style.css
new file mode 100644
index 0000000..eb6728c
--- /dev/null
+++ b/pages/mods/style.css
@@ -0,0 +1,140 @@
+/* * is a special css element that effects everything */
+
+* {
+ font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif; /* This sets the font family. Since it is inside a *, it does it for every element */
+}
+
+/* things without . do not affect classes, they affect html tags such as , */
+
+html, body {
+ margin: 0px; /* Margin is the area outside of the box that is padded */
+}
+
+body {
+ background-color: rgb(247 166 166); /* Background-Color sets the background color of an element */
+}
+
+/* things with . affect classes. they affect html tags that have class="" inside of them, like this: */
+
+.content {
+ margin: 8px; /* Margin is the area outside of the box that is padded */
+ margin-top: 50px;
+}
+
+.contentAboutme {
+ margin: 8px; /* Margin is the area outside of the box that is padded */
+ margin-top: 50px;
+ color: rgb(0 0 0); /* Color is text color */
+ text-align: center;
+}
+
+.YTVideo {
+ width: 420px; /* Width of the element */
+ /* Padding but on the right of the element */
+ height: 345px;
+ border: black;
+ border-style: solid;
+ margin-top: 10px;
+ margin-left: 10px;
+ border-width: 3px;
+ border-radius: 3px;
+ padding: 5px;
+ background: rgb(156 156 156 / 49%);
+}
+
+
+.modslist {
+ display: flex; /* flex stuff, confusing */
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 8px;
+}
+
+.mod {
+ width: 200px; /* Width of the element */
+ /* Padding but on the right of the element */
+ height: 295px;
+ border: black;
+ border-style: solid;
+ margin-top: 10px;
+ margin-left: 10px;
+ border-width: 3px;
+ border-radius: 3px;
+ padding: 5px;
+ background: rgb(156 156 156 / 49%);
+}
+
+.navbar {
+ position: fixed; /* position: fixed makes this always on screen */
+ height: 20px; /* height sets the height */
+ top: 0; /* top sets the top position */
+ width: 100%; /* width: 100% makes this fill the screen */
+ background-color: rgb(137, 3, 3); /* Background-Color sets the background color of an element */
+ background: linear-gradient(rgb(191 1 1),rgb(113 8 8)); /* Background can also set the background color of an element, but can do way more. I use it here for just in case browser don't support linear-gradient */
+ padding: 10px; /* Padding is the area inside of the box that is padded */
+ box-shadow: 0 0 15px 0 rgb(0 0 0); /* box-shadow makes a drop shadow. confusing */
+ display: table-cell; /* Changes the way how elemnts are organised */
+}
+
+/* things with . affect classes, but if you add a space, that allows you to customise the childs of a class/element only. */
+
+.navbar a {
+ color: rgb(255, 255, 255); /* Color is text color */
+ text-decoration: none; /* Text decoration is underlines, etc */
+}
+
+.mod img {
+ width: 180px; /* Width of the element */
+ margin-left: 0px; /* Margin Left, is the margin for the left side of the content */
+ height: 180px;
+ border: black;
+ border-style: solid;
+}
+
+.mod p {
+ height: 45px;
+ width: 190px;
+ text-align: center;
+ text-overflow: ellipsis;
+ margin: 0px;
+}
+
+.mod p a {
+ margin-left: 0px !important;
+}
+
+.modslist a {
+ margin-left: 20px;
+}
+
+/* a:hover only is used when well, hovering */
+
+.navbar a:hover {
+ color: rgba(255, 255, 255, 0.747); /* Color is text color */
+ text-decoration: underline; /* Text decoration is underlines, etc */
+}
+
+a {
+ color: rgb(19, 83, 157);
+ text-decoration: none;
+}
+
+a:hover {
+ color: rgb(47, 105, 172);
+ text-decoration: underline;
+}
+
+.sociallinks {
+ display: table;
+ margin: auto;
+}
+
+.sociallinks img {
+ width: 40px;
+ height: 40px;
+ border-radius: 100%;
+ padding: 3px;
+}
\ No newline at end of file
diff --git a/aboutme.html b/pages/tabs/aboutme.html
similarity index 100%
rename from aboutme.html
rename to pages/tabs/aboutme.html
