diff --git a/styles/colors/all.css b/styles/colors/all.css
new file mode 100644
index 0000000..1593185
--- /dev/null
+++ b/styles/colors/all.css
@@ -0,0 +1,41 @@
+@import url("/styles/colors/defaults.css");
+
+body {
+	color: var(--font-color-main);
+	background-color: var(--background-color);
+}
+
+.background {
+	background: linear-gradient(
+		25deg,
+		var(--primary-color-dark) 0%,
+		var(--primary-color) 62%,
+		var(--primary-color-raised-hover-solid) 100%
+	);
+}
+
+main.container {
+	background-color: var(--background-color);
+}
+
+nav {
+	background-color: var(--background-color) !important;
+}
+
+nav#header {
+	background: linear-gradient(
+		335deg,
+		var(--primary-color-dark) 0%,
+		var(--primary-color) 62%,
+		var(--primary-color-raised-hover-solid) 100%
+	);
+}
+
+nav .input-field input[type="search"], textarea {
+	color: var(--font-color-main) !important;
+}
+
+.transparent {
+	background-color: transparent !important;
+	background: none !important;
+}
\ No newline at end of file
diff --git a/styles/colors/defaults.css b/styles/colors/defaults.css
new file mode 100644
index 0000000..ae13c90
--- /dev/null
+++ b/styles/colors/defaults.css
@@ -0,0 +1,69 @@
+:root {
+	--font-color-main: rgba(0, 0, 0) !important;
+	--font-color-medium: rgba(25, 25, 25) !important;
+	--font-color-disabled: rgba(63, 63, 63) !important;
+
+	--error-color: #cf6679 !important;
+
+	--primary-color: rgba(255, 134, 57) !important;
+	--primary-color-dark: rgba(221, 106, 59) !important;
+	--primary-color-numeric: 255, 134, 57 !important;
+	--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
+	--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
+
+	--background-color-level-16dp-solid: rgba(255, 238, 235) !important;
+
+	--secondary-color: rgba(221, 106, 59, 1) !important;
+	--secondary-color-hover-solid: rgba(252, 162, 133) !important;
+	--secondary-color-focus-solid: rgba(221, 106, 59) !important;
+
+	--secondary-container-color: rgba(252, 162, 133) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background-color: #000 !important;
+		--surface-color: #000000 !important;
+
+		--font-color-main: rgba(255, 255, 255) !important;
+		--font-color-medium: rgba(200, 200, 200) !important;
+		--font-color-disabled: rgba(255, 255, 255) !important;
+
+		--font-on-primary-color-main: rgba(255, 255, 255) !important;
+		--font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
+		--font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
+		--font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
+		--font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
+
+		--hover-color: rgba(255, 255, 255, 0.04) !important;
+		--focus-color: rgba(255, 255, 255, 0.12) !important;
+		--focus-color-solid: #424242 !important;
+
+		--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
+		--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
+		--background-color-level-16dp-solid: #262626 !important;
+		--background-color-card: var(--surface-color) !important;
+		--background-color-slight-emphasis: rgba(255, 255, 255, 0.05) !important;
+
+		--separator-color: #424242 !important;
+		--error-color: #cf6679 !important;
+
+		--slider-track-color: rgba(255, 255, 255, 0.26) !important;
+		--switch-thumb-off-color: #bababa !important;
+
+		--primary-color: rgba(255, 134, 57) !important;
+		--primary-color-dark: rgba(221, 106, 59) !important;
+		--primary-color-numeric: 255, 134, 57 !important;
+		--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
+		--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
+
+		--secondary-color: rgba(221, 106, 59) !important;
+		--secondary-color-hover-solid: rgba(252, 162, 133) !important;
+		--secondary-color-focus-solid: rgba(221, 106, 59) !important;
+		--font-on-secondary-container-color: rgba(255, 255, 255) !important;
+
+		--secondary-container-color: rgba(221, 106, 59) !important;
+
+		--md_sys_color_on-surface: 230, 225, 229 !important;
+	}
+}
\ No newline at end of file
diff --git a/styles/fonts/all.article.css b/styles/fonts/all.article.css
new file mode 100644
index 0000000..ddcaaf6
--- /dev/null
+++ b/styles/fonts/all.article.css
@@ -0,0 +1,13 @@
+
+h1, h2, h3, h4, h5, h6 {
+     text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+#title {
+	font-weight: bold;
+}
+#author {
+	font-style: italic;
+}
\ No newline at end of file
diff --git a/styles/fonts/all.css b/styles/fonts/all.css
new file mode 100644
index 0000000..1603921
--- /dev/null
+++ b/styles/fonts/all.css
@@ -0,0 +1,5 @@
+@import url("/styles/fonts/all.article.css");
+
+.collapsible > li > header {
+	font-weight: bold;
+}
\ No newline at end of file
diff --git a/styles/layouts/all.css b/styles/layouts/all.css
new file mode 100644
index 0000000..14154ee
--- /dev/null
+++ b/styles/layouts/all.css
@@ -0,0 +1,78 @@
+@import url("/styles/layouts/all.inputs.css");
+
+fieldset {
+	padding: 2em !important;
+	border-radius: 4px;
+}
+fieldset > legend {
+	padding: 0.5em !important;
+}
+fieldset > ul {
+	margin-top: 0em !important;
+}
+
+fieldset > ul li {
+	padding-top: 0em !important;
+}
+
+summary {
+	list-style-type: none;
+}
+
+progress {
+	width: 100%;
+}
+
+main.container > * {
+	padding-bottom: .5em;
+	padding-top: .5em;
+}
+
+.field-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.dual > * > *:not(nav) {
+	margin: 1em;
+}
+
+.dual .container {
+	width: 90% !important;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+nav .input-field label {
+	left: auto !important;
+}
+
+.input-field > button:not(:last-child) {
+	margin-right: 0.5em;
+}
+
+.nav-wrapper {
+	position: sticky;
+	z-index: 10;
+}
+
+nav ul:not(.dropdown-content) > li > a {
+	height: 100%;
+}
+
+@media only screen and (min-width: 601px) {
+	.dual .container {
+		width: 80% !important;
+	}
+}
+
+@media only screen and (min-width: 992px) {
+	body:has(.sidenav-fixed) [works-sidebar] {
+		display: none;
+	}
+
+	ul.sidenav-fixed + * {
+		padding-left: 300px;
+	}
+}
diff --git a/styles/layouts/all.inputs.css b/styles/layouts/all.inputs.css
new file mode 100644
index 0000000..5cfdabe
--- /dev/null
+++ b/styles/layouts/all.inputs.css
@@ -0,0 +1,45 @@
+
+form ul > li:has(input[type="checkbox"]),
+ul.input-field > li {
+	list-style-type: none;
+}
+
+form ul:has(li input[type="checkbox"]),
+ul.input-field {
+	padding-left: 0;
+}
+
+.input-group {
+	margin-block-start: 1em !important;
+	margin-block-end: 1em !important;
+}
+
+.input-group:not(:has(input)) {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.input-group side:not(:has(input)) {
+	display: flex;
+	flex-direction: row;
+	justify-content: end;
+	align-items: center;
+}
+
+textarea {
+	resize: vertical;
+}
+
+textarea:focus {
+	outline: none;
+}
+
+textarea[type="code"] {
+	font-family: monospace !important;
+}
+
+.input-field {
+	margin-bottom: .25em;
+}
+
diff --git a/styles/ui.css b/styles/ui.css
index f33ccd1..7a54345 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -1,254 +1,3 @@
-:root {
-	--font-color-main: rgba(0, 0, 0) !important;
-	--font-color-medium: rgba(25, 25, 25) !important;
-	--font-color-disabled: rgba(63, 63, 63) !important;
-
-	--error-color: #cf6679 !important;
-
-	--primary-color: rgba(255, 134, 57) !important;
-	--primary-color-dark: rgba(221, 106, 59) !important;
-	--primary-color-numeric: 255, 134, 57 !important;
-	--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
-	--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
-
-	--background-color-level-16dp-solid: rgba(255, 238, 235) !important;
-
-	--secondary-color: rgba(221, 106, 59, 1) !important;
-	--secondary-color-hover-solid: rgba(252, 162, 133) !important;
-	--secondary-color-focus-solid: rgba(221, 106, 59) !important;
-
-	--secondary-container-color: rgba(252, 162, 133) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--background-color: #000 !important;
-		--surface-color: #000000 !important;
-
-		--font-color-main: rgba(255, 255, 255) !important;
-		--font-color-medium: rgba(200, 200, 200) !important;
-		--font-color-disabled: rgba(255, 255, 255) !important;
-
-		--font-on-primary-color-main: rgba(255, 255, 255) !important;
-		--font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
-		--font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
-		--font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
-		--font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
-
-		--hover-color: rgba(255, 255, 255, 0.04) !important;
-		--focus-color: rgba(255, 255, 255, 0.12) !important;
-		--focus-color-solid: #424242 !important;
-
-		--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
-		--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
-		--background-color-level-16dp-solid: #262626 !important;
-		--background-color-card: var(--surface-color) !important;
-		--background-color-slight-emphasis: rgba(
-			255,
-			255,
-			255,
-			0.05
-		) !important;
-
-		--separator-color: #424242 !important;
-		--error-color: #cf6679 !important;
-
-		--slider-track-color: rgba(255, 255, 255, 0.26) !important;
-		--switch-thumb-off-color: #bababa !important;
-
-		--primary-color: rgba(255, 134, 57) !important;
-		--primary-color-dark: rgba(221, 106, 59) !important;
-		--primary-color-numeric: 255, 134, 57 !important;
-		--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
-		--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
-
-		--secondary-color: rgba(221, 106, 59) !important;
-		--secondary-color-hover-solid: rgba(252, 162, 133) !important;
-		--secondary-color-focus-solid: rgba(221, 106, 59) !important;
-		--font-on-secondary-container-color: rgba(255, 255, 255) !important;
-
-		--secondary-container-color: rgba(221, 106, 59) !important;
-
-		--md_sys_color_on-surface: 230, 225, 229 !important;
-	}
-}
-
-body {
-	color: var(--font-color-main);
-	background-color: var(--background-color);
-}
-
-.background {
-	background: linear-gradient(
-		25deg,
-		var(--primary-color-dark) 0%,
-		var(--primary-color) 62%,
-		var(--primary-color-raised-hover-solid) 100%
-	);
-}
-
-main.container {
-	background-color: var(--background-color);
-}
-
-nav {
-	background-color: var(--background-color) !important;
-}
-
-nav#header {
-	background: linear-gradient(
-		335deg,
-		var(--primary-color-dark) 0%,
-		var(--primary-color) 62%,
-		var(--primary-color-raised-hover-solid) 100%
-	);
-}
-
-nav .input-field input[type="search"] {
-	color: var(--font-color-main) !important;
-}
-
-ul.sidenav-fixed + * {
-	padding-left: 300px;
-}
-
-main.container > * {
-	padding-bottom: .5em;
-	padding-top: .5em;
-}
-
-.transparent {
-	background-color: transparent !important;
-	background: none !important;
-}
-
-@media only screen and (max-width: 992px) {
-	ul.sidenav-fixed + * {
-		padding-left: 0;
-	}
-}
-
-.collapsible > li > header {
-	font-weight: bold;
-}
-
-form ul > li:has(input[type="checkbox"]),
-ul.input-field > li {
-	list-style-type: none;
-}
-
-form ul:has(li input[type="checkbox"]),
-ul.input-field {
-	padding-left: 0;
-}
-
-.input-group {
-	margin-block-start: 1em !important;
-	margin-block-end: 1em !important;
-}
-
-.input-group:not(:has(input)) {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.input-group side:not(:has(input)) {
-	display: flex;
-	flex-direction: row;
-	justify-content: end;
-	align-items: center;
-}
-
-.field-row {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.dual > * > *:not(nav) {
-	margin: 1em;
-}
-
-.dual .container {
-	width: 90% !important;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-@media only screen and (min-width: 601px) {
-	.dual .container {
-		width: 80% !important;
-	}
-}
-
-nav .input-field label {
-	left: auto !important;
-}
-
-.input-field > button:not(:last-child) {
-	margin-right: 0.5em;
-}
-
-.nav-wrapper {
-	position: sticky;
-	z-index: 10;
-}
-
-@media only screen and (min-width: 992px) {
-	body:has(.sidenav-fixed) [works-sidebar] {
-		display: none;
-	}
-}
-
-#title {
-	font-weight: bold;
-}
-#author {
-	font-style: italic;
-}
-
-nav ul:not(.dropdown-content) > li > a {
-	height: 100%;
-}
-
-textarea {
-	resize: vertical;
-	color: var(--font-color-main);
-}
-
-textarea:focus {
-	outline: none;
-	
-}
-
-textarea[type="code"] {
-	font-family: monospace !important;
-}
-
-fieldset {
-	padding: 2em !important;
-	border-radius: 4px;
-}
-fieldset > legend {
-	padding: 0.5em !important;
-}
-fieldset > ul {
-	margin-top: 0em !important;
-}
-
-fieldset > ul li {
-	padding-top: 0em !important;
-}
-
-.input-field {
-	margin-bottom: .25em;
-}
-
-summary {
-	list-style-type: none;
-}
-
-progress {
-	width: 100%;
-}
\ No newline at end of file
+@import url("/styles/colors/all.css");
+@import url("/styles/fonts/all.css");
+@import url("/styles/layouts/all.css");
\ No newline at end of file