diff --git a/src/003-assets/CSS/arcologyBuilding.css b/css/arcologyBuilding/arcologyBuilding.css
similarity index 100%
rename from src/003-assets/CSS/arcologyBuilding.css
rename to css/arcologyBuilding/arcologyBuilding.css
diff --git a/css/css.md b/css/css.md
new file mode 100644
index 0000000000000000000000000000000000000000..f259684518eda9eb52a1895036d44904fbfcc39c
--- /dev/null
+++ b/css/css.md
@@ -0,0 +1,22 @@
+# CSS module
+
+This directory contains ALL style files for this project.
+
+## Structure
+
+Most of the structure should be self-explanatory, this is a list of the main rules when adding new styles
+
+* `general/`: Only Styles that can be used in many different places and are not part of a specific system may be added
+  here.
+
+* When adding styles that are only used in one place put them in a directory that matches the top directory of the
+  corresponding JS file in `src/` or `js/`.
+
+* There is no catch-all file, if there is no place where your style goes create one instead of mixing them together with
+  unrelated styles. This does mean there are many small files, but properly sorted and named this is preferable to one
+  large catch-all file.
+
+## Compiling
+
+During compiling all CSS files in this directory get combined and then added as a module, which means the styles are put
+directly into <head> element of the final HTML file.
diff --git a/src/pregmod/FCTV/FCTV.css b/css/endWeek/FCTV.css
similarity index 79%
rename from src/pregmod/FCTV/FCTV.css
rename to css/endWeek/FCTV.css
index f7a3b69f149ad68fc4437c2355e9f3c0d18bc199..8d7bdd5ac3342703136f3e88971cefb6200354d5 100644
--- a/src/pregmod/FCTV/FCTV.css
+++ b/css/endWeek/FCTV.css
@@ -1,13 +1,14 @@
-.FCTV {
+.fctv {
 	display: float;
 }
+
 .fctv-remote {
 	text-align: center;
 	justify-items: center;
 	display: grid;
-	float:left;
-	width:min-content;
-	padding-right:20px;
+	float: left;
+	width: min-content;
+	padding-right: 20px;
 }
 .fctv-remote-numbers {
 	display: grid;
@@ -17,4 +18,4 @@
 }
 .fctv-remote-button {
 	margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/src/gui/Encyclopedia/encyclopedia.css b/css/gui/encyclopedia.css
similarity index 100%
rename from src/gui/Encyclopedia/encyclopedia.css
rename to css/gui/encyclopedia.css
diff --git a/src/gui/options/hotkeySettings.css b/css/gui/hotkeySettings.css
similarity index 100%
rename from src/gui/options/hotkeySettings.css
rename to css/gui/hotkeySettings.css
diff --git a/src/003-assets/CSS/cardStyle.css b/css/gui/slaveList/cardStyle.css
similarity index 100%
rename from src/003-assets/CSS/cardStyle.css
rename to css/gui/slaveList/cardStyle.css
diff --git a/src/gui/css/quickListCSS.css b/css/gui/slaveList/quickListCSS.css
similarity index 100%
rename from src/gui/css/quickListCSS.css
rename to css/gui/slaveList/quickListCSS.css
diff --git a/src/003-assets/CSS/slaveList.css b/css/gui/slaveList/slaveList.css
similarity index 100%
rename from src/003-assets/CSS/slaveList.css
rename to css/gui/slaveList/slaveList.css
diff --git a/css/general/output.css b/css/interaction/export.css
similarity index 100%
rename from css/general/output.css
rename to css/interaction/export.css
diff --git a/src/gui/css/familyTree.css b/css/interaction/familyTree.css
similarity index 100%
rename from src/gui/css/familyTree.css
rename to css/interaction/familyTree.css
diff --git a/src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css b/css/intro/customizeSlaveTrade.css
similarity index 100%
rename from src/events/intro/customizeSlaveTrade/customizeSlaveTrade.css
rename to css/intro/customizeSlaveTrade.css
diff --git a/src/neighbor/neighborDisplay.css b/css/neighbor/neighborDisplay.css
similarity index 100%
rename from src/neighbor/neighborDisplay.css
rename to css/neighbor/neighborDisplay.css