diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..9565ca804faebd7c5a0e575e4fb8ad9864dde875
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,10 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Tab indentation (Size 4)
+[*.{js,ts,css,twee,tw}]
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
index 5e8bdda1c1e4fe33ac56f4bbf14a1b184596c98c..5b7c3020a5a82e68765daca5a29a5f7b095562d2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ gitw
 *.kra
 Desktop.ini
 Thumbs.db
+.vscode/settings.json
 
 # Ignoring working folder for Quin2k
 mod/
diff --git a/.vscode/.gitkeep b/.vscode/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000000000000000000000000000000000000..3fef56538ee3349ce252e422a38f0bda0dfba295
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+	"recommendations": [
+		"cyrusfirheir.twee3-language-tools",
+		"dbaeumer.vscode-eslint",
+		"eamodio.gitlens",
+		"editorconfig.editorconfig"
+	]
+}
diff --git a/game/02-CSS/base.css b/game/02-CSS/base.css
index c04ada8b3c18b96a99c31aab09d809c68b111447..a663d4ef552305922780d552d05e82b66baa4f9f 100644
--- a/game/02-CSS/base.css
+++ b/game/02-CSS/base.css
@@ -1,6 +1,63 @@
+:root {
+	/** Base Colours **/
+	--000: white;
+	--100: #eee;
+	--150: #f1f1db;
+	--200: #ccc;
+	--300: #aaa;
+	--400: #999;
+	--500: #888;
+	--600: #777;
+	--700: #666;
+	--750: #444;
+	--800: #333;
+	--850: #222;
+	--900: black;
+
+	/** Accent Colours **/
+	--red: #EC3535;
+	--pink: #E40081;
+	--pink-secondary: #D67CAF;
+	--purple: #8800ff;
+	--purple-secondary: #AA4BC8;
+	--blue: #4372FF;
+	--blue-secondary: #559BC0;
+	--teal: #08C1C1;
+	--green: #38B20A;
+	--green-secondary: #7caf7c;
+	--lime: #44e342;
+	--orange: #F28500;
+	--brown: #4C2217;
+	--black: #929292;
+	/* Yellow and gold seem redundant; very similar yellows */
+	--yellow: #FFD700;
+	--gold: gold;
+	--silver: silver;
+
+	/* Status Specific */
+	--lewd: #E04880;
+	--defiant: #D20000;
+	--meek: #C44B8B;
+	--brat: #B75D41;
+	--relaxed: #63719C;
+	--anxious: #973253;
+	--veteran: #956BB4;
+	--methodical: #CE7993;
+	--scarred: #D8621F;
+	--tattooed: #266568;
+	
+	
+	/** Utility **/
+	--link: #5888DD;
+
+	/* Tooltip */
+	--tooltip-background: #1a1919;
+	--tooltip-border: #b0b0b4;
+}
+
 mouse.tooltip {
 	font-weight: normal;
-	border-bottom: 1px dotted rgb(176, 176, 180);
+	border-bottom: 1px dotted var(--tooltip-border);
 }
 
 mouse.tooltip span:last-of-type {
@@ -12,17 +69,17 @@ mouse.tooltip span:last-of-type {
 	max-width: 450px !important;
 	line-height:20px;
 	border-radius:2px;
-	box-shadow: 0px 0px 8px 4px #000;
+	box-shadow: 0px 0px 8px 4px var(--900);
 }
 
 mouse.tooltip:hover span:last-of-type {
 	display:inline;
 	position:absolute;
-	border:2px solid gold;
+	border:2px solid var(--gold);
 	font-weight: normal;
 	text-decoration: none;
 	font-size:1.0em;
-	background:#1a1919 repeat-x 0 0;
+	background: var(--tooltip-background) repeat-x 0 0;
 }
 
 mouse.tooltip-small {
@@ -39,17 +96,17 @@ mouse.tooltip-small span:last-of-type {
 	max-width: 450px !important;
 	line-height:20px;
 	border-radius:1px;
-	box-shadow: 0px 0px 8px 4px #000;
+	box-shadow: 0px 0px 8px 4px var(--900);
 }
 
 mouse.tooltip-small:hover span:last-of-type {
 	display:inline;
 	position:absolute;
-	border:1px solid gold;
+	border:1px solid var(--gold);
 	font-weight: normal;
 	text-decoration: none;
 	font-size:80%;
-	background:#1a1919 repeat-x 0 0;
+	background:var(--tooltip-background) repeat-x 0 0;
 }
 
 @media only screen and (max-width: 800px) {
@@ -65,13 +122,13 @@ mouse.tooltip-small:hover span:last-of-type {
 #next {
 	position: fixed;
 	bottom: -1px;
-	border: 1px solid #aaa;
-	background-color: #222;
+	border: 1px solid var(--300);
+	background-color: var(--850);
 	z-index: 700;
 }
 
 #next a {
-	color: gold;
+	color: var(--gold);
 	padding: 10px 20px 30px 20px;
 	display: block;
 }
@@ -83,8 +140,8 @@ mouse.tooltip-small:hover span:last-of-type {
 	align-items: center;
 	bottom: -1px;
 	margin-left: 7em;
-	border: 1px solid #aaa;
-	background-color: #222;
+	border: 1px solid var(--300);
+	background-color: var(--850);
 	z-index: 700;
 }
 
@@ -93,7 +150,7 @@ mouse.tooltip-small:hover span:last-of-type {
 }
 
 #cbtToggleMenu .cbtToggle {
-	color: gold;
+	color: var(--gold);
 }
 
 #cbtToggleMenu:not(.visible) .cbtToggle {
@@ -134,7 +191,7 @@ mouse.tooltip-small:hover span:last-of-type {
 }
 
 #ui-bar-history [id|=history] {
-	color: #666;
+	color: var(--700);
 	border: none;
 }
 
@@ -151,8 +208,8 @@ mouse.tooltip-small:hover span:last-of-type {
 	width: 100%;
 	font-size: 110%;
 	max-width: 260px;
-	background-color: #222;
-	border: 1px solid #444;
+	background-color: var(--850);
+	border: 1px solid var(--750);
 }
 .buttonlike {
 	display: inline-block;
@@ -171,28 +228,28 @@ mouse.tooltip-small:hover span:last-of-type {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
-	background-color: #222;
+	background-color: var(--850);
 	width: auto;
 	height: auto;
 	margin: 0;
 	z-index: 1;
 	padding: 0;
-	border-bottom: 1px solid #fff;
+	border-bottom: 1px solid var(--000);
 }
 
 .macro-button:hover {
-	background-color: #333;
-	border: 1px solid #fff;
+	background-color: var(--800);
+	border: 1px solid var(--000);
 }
 
 .macro-button:active {
-	background-color: #ffd700;
-	border: 1px solid #fff;
+	background-color: var(--yellow);
+	border: 1px solid var(--000);
 }
 
 .macro-button:focus {
-	background-color: #555;
-	border: 1px solid #ffd700;
+	background-color: var(--700);
+	border: 1px solid var(--yellow);
 }
 
 .customOverlay {
@@ -204,8 +261,8 @@ mouse.tooltip-small:hover span:last-of-type {
 	right:20px;
 	height: auto;
 	width: auto;
-	border: 2px #fff solid;
-	background-color: #222;
+	border: 2px var(--000) solid;
+	background-color: var(--850);
 	text-align: left;
 	padding: 0 5px 3px;
 	overflow-y: scroll;
@@ -219,6 +276,17 @@ mouse.tooltip-small:hover span:last-of-type {
 	max-width: unset;
 }
 
+#customOverlayContent {
+	padding: 0.5rem;
+}
+
+#customOverlayTitle {
+	display: flex;
+	gap: 0.25rem;
+	padding: 0.5rem;
+	align-items: center;
+}
+
 @media only screen and (min-width: 870px) {
 	.customOverlay {
 		left: 300px;
@@ -240,8 +308,8 @@ mouse.tooltip-small:hover span:last-of-type {
 	max-width: 85%;
 	z-index: 1001;
 	padding: 3px;
-	border: 2px #fff solid;
-	background-color: #333;
+	border: 2px var(--000) solid;
+	background-color: var(--800);
 	overflow-y: scroll;
 	text-align: center;
 }
@@ -249,7 +317,7 @@ mouse.tooltip-small:hover span:last-of-type {
 .overlayMenu {
 	position: sticky;
 	top: 0;
-	background-color: #333333;
+	background-color: var(--800);
 	z-index:1;
 }
 
@@ -275,13 +343,19 @@ mouse.tooltip-small:hover span:last-of-type {
 }
 
 .overlayItem {
-	border-top: 2px #fff solid;
+	border-top: 2px var(--000) solid;
 	clear: both;
 }
 
 #statsHelp {
-	overflow-y: scroll;
-	height: auto;
+	display: flex;
+	gap: 2px;
+	padding: 0.25rem;
+	align-items: center;
+	flex-direction: row;
+	justify-content: center;
+	height: 100%;
+	width: 100%;
 	max-height: 200px;
 }
 
@@ -322,9 +396,9 @@ input#addEventsWidgets::placeholder {
 	right: 3px;
 	top: 1px;
 	font-size: 0.6em;
-	color: #777;
+	color: var(--600);
 	z-index: 1000;
-	background-color: #111;
+	background-color: var(--850);
 }
 
 #gameVersionDisplay2 {
@@ -332,7 +406,7 @@ input#addEventsWidgets::placeholder {
 	left:1px;
 	bottom: 0px;
 	font-size: 0.55em;
-	color: #777;
+	color: var(--600);
 	z-index: 1000;
 }
 
@@ -351,7 +425,7 @@ input#addEventsWidgets::placeholder {
 	width: 80%;
 	max-width: 400px;
 	z-index: 1000;
-	background-color: gold;
+	background-color: var(--gold);
 	padding: 2px;
 }
 
@@ -359,7 +433,7 @@ input#addEventsWidgets::placeholder {
 	height: 87px;
 	width: 80%;
 	max-width: 400px;
-	background-color: gold;
+	background-color: var(--gold);
 	padding: 2px;
 	float: left;
 }
@@ -368,14 +442,14 @@ input#addEventsWidgets::placeholder {
 	display: inline-block;
 	height: 100%;
 	width: 79px;
-	background-color: #333;
+	background-color: var(--800);
 	text-align: left;
 }
 
 .dot {
 	height: 74px;
 	width: 74px;
-	background-color: #999;
+	background-color: var(--400);
 	border-radius: 50%;
 	display: inline-block;
 	margin: 3px;
@@ -392,7 +466,7 @@ input#addEventsWidgets::placeholder {
 	display: inline-block;
 	height: 100%;
 	width: calc(100% - 84px);
-	background-color: #333;
+	background-color: var(--800);
 	float: right;
 }
 
@@ -444,7 +518,7 @@ input.heart:hover{
 
 #scenesViewer span {
 	padding: 2px;
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	height: 30px;
 	width: 48%;
 	min-width: 400px;
@@ -453,7 +527,7 @@ input.heart:hover{
 
 #produceDisplay .produceItem {
 	padding: 2px;
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	width: 48%;
 	min-width: 400px;
 	margin: 0px 3px 3px;
@@ -493,7 +567,7 @@ input.heart:hover{
 }
 
 #mobileStats .stat {
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	text-align: center;
 	font-weight: 500;
 	font-size: 1.2em;
@@ -520,7 +594,7 @@ input.heart:hover{
 #savesListContainer {
 	display: flex;
 	flex-direction: column;
-	border: 1px solid #999;
+	border: 1px solid var(--400);
 	max-width: 800px;
 }
 
@@ -529,7 +603,7 @@ input.heart:hover{
 	flex-direction: row;
 	flex-wrap: nowrap;
 	align-items: center;
-	border: 1px solid #999;
+	border: 1px solid var(--400);
 	padding: 4px;
 }
 
@@ -609,11 +683,11 @@ input.heart:hover{
 	display: flex;
 }
 .saveMenuButton {
-	background-color: #4372FF !important;
+	background-color: var(--blue) !important;
 }
 
 .saveMenuButton:hover {
-	background-color: #4372FF !important;
+	background-color: var(--blue) !important;
 }
 
 .saveMenuConfirm {
@@ -622,7 +696,7 @@ input.heart:hover{
 }
 
 .saveBorder {
-	border: 1px solid #ccc;
+	border: 1px solid var(--200);
 	max-width: 700px;
 	padding: 5px 2px 30px;
 	margin: 10px 2px 10px;
@@ -639,7 +713,7 @@ input.heart:hover{
 	min-width: 275px;
 	padding: 3px;
 	margin: 5px;
-	border: 1px solid #666;
+	border: 1px solid var(--700);
 }
 
 .settingsToggle input[name|="numberslider-input"]{
@@ -731,7 +805,7 @@ input.heart:hover{
 }
 
 .solidBorderContainer {
-	border: 1px solid #333;
+	border: 1px solid var(--800);
 	padding: 5px;
 }
 
@@ -806,7 +880,7 @@ body.has-images #storyCaptionContent {
 	padding-bottom: 12px;
 	overflow-y: scroll;
 	overflow-wrap: anywhere;
-	scrollbar-color: #444 #222;
+	scrollbar-color: var(--750) var(--850);
 }
 
 body.has-images #story-caption .storyCaptionContentExtended {
@@ -815,11 +889,11 @@ body.has-images #story-caption .storyCaptionContentExtended {
 }
 
 *::-webkit-scrollbar-thumb{
-	background-color: #444;
+	background-color: var(--750);
 }
 
 *::-webkit-scrollbar{
-	background-color: #222;
+	background-color: var(--850);
 	width: 10px;
 }
 
@@ -842,7 +916,7 @@ body.has-images #story-caption .storyCaptionContentExtended {
 	height: 16px;
 	border-radius: 8px;
 	font-size: 12pt;
-	background: red;
+	background: var(--red);
 	line-height: 1;
 	cursor: pointer;
 }
@@ -864,7 +938,7 @@ body.no-images #ui-bar-body {
 	float:left;
 	width: 48%;
 	min-width: 375px;
-	border: solid 2px #555;
+	border: solid 2px var(--700);
 	padding:4px;
 	height: 310px;
 }
@@ -873,7 +947,7 @@ body.no-images #ui-bar-body {
 	height: 192px;
 	width: 128px;
 	overflow: hidden;
-	background-color: #222;
+	background-color: var(--850);
 }
 
 .shopImg > * {
@@ -902,7 +976,7 @@ body.no-images #ui-bar-body {
 	display: inline-block;
 	padding: 2px;
 	float: left;
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	height: 100%;
 	width: 90%;
 	min-width: 400px;
@@ -911,11 +985,10 @@ body.no-images #ui-bar-body {
 }
 
 .furnitureBlock {
-
 	display: inline-block;
 	padding: 2px;
 	float: left;
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	height: 30px;
 	width: 48%;
 	min-width: 400px;
@@ -930,7 +1003,7 @@ body.no-images #ui-bar-body {
 	display: inline-block;
 	padding: 2px;
 	float: left;
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	height: 30px;
 	width: 48%;
 	min-width: 400px;
@@ -943,7 +1016,7 @@ body.no-images #ui-bar-body {
 	display: inline-block;
 	padding: 2px;
 	float: left;
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	height: 100%;
 	width: 90%;
 	min-width: 400px;
@@ -953,14 +1026,14 @@ body.no-images #ui-bar-body {
 }
 
 #wardrobeLinks .selected, #bodywritingMenuLinks .selected a {
-	color: #FFD700;
+	color: var(--yellow);
 	text-decoration: underline;
 }
 
 .clothingBox {
 	display: inline-block;
 	float: left;
-	border: solid 2px #fff;
+	border: solid 2px var(--000);
 	height: 250px;
 	width: 270px;
 	padding: 4px;
@@ -984,7 +1057,7 @@ body.no-images #ui-bar-body {
 }
 
 #outfitEditorList > div {
-	border: 1px solid #ccc;
+	border: 1px solid var(--200);
 	padding: 5px;
 	margin: 5px;
 	max-width: 500px;
@@ -994,7 +1067,7 @@ body.no-images #ui-bar-body {
 #customColor div {
 	height: 30px;
 	width: 200px;
-	background-color: red;
+	background-color: var(--red);
 }
 
 .presetConfirm {
@@ -1019,7 +1092,7 @@ body.no-images #ui-bar-body {
 .card {
 	width:50px;
 	height:75px;
-	border:1px solid #ccc;
+	border:1px solid var(--200);
 	margin-right:7px;
 	margin-bottom:7px;
 	border-radius:7px;
@@ -1035,86 +1108,82 @@ span.number, span.suit {
 }
 
 .red {
-	color: #EC3535;
+	color: var(--red);
 }
 
 .pink {
-	color: #E40081;
+	color: var(--pink);
 }
 
 .light-pink {
-	color: #d67caf;
+	color: var(--pink-secondary);
 }
 
 .purple {
-	color: #AA4BC8;
+	color: var(--purple-secondary);
 }
 
 .blue {
-	color: #4372FF;
+	color: var(--blue);
 }
 
 .lblue,
 .light-blue {
-	color: #559BC0;
+	color: var(--blue-secondary);
 }
 
 .teal {
-	color: #08C1C1;
+	color: var(--teal);
 }
 
 .green {
-	color: #38B20A;
+	color: var(--green);
 }
 
 .lime-green{
-	color: #44e342
+	color: var(--lime)
 }
 
 .brown {
-	color: #4C2217;
+	color: var(--brown);
 }
 
 .brat {
-	color: #B75D41;
+	color: var(--brat);
 }
 
 .meek {
-	color: #C44B8B;
+	color: var(--meek);
 }
 
 .def {
-	color: #D20000;
+	color: var(--defiant);
 }
 
 .hide a {
-	color: #eee;
+	color: var(--100);
 	text-decoration: none;
 }
 
 .hide a:hover {
-	color: #eee;
+	color: var(--100);
 	text-decoration: none;
 }
 
 .sub {
-	color: #AA4BC8;
+	color: var(--purple-secondary);
 }
 
 .gold, .gold button, .goldLink a {
-	color: #FFD700;
-}
-
-.goldLink a:hover {
-	color: #ffed8a;
+	color: var(--yellow);
 }
 
 .linkBlue {
-	color: #5888dd;
+	color: var(--link);
 }
 
 .silver {
-	color: silver;
+	color: var(--silver);
 }
 
 .bronze {
@@ -1131,20 +1200,20 @@ span.number, span.suit {
 
 .yellow,
 .pale-yellow {
-	color: #FFD700;
+	color: var(--yellow);
 }
 
 .orange {
-	color: #f28500;
+	color: var(--orange);
 }
 
 .tangerine,
 .pale-tangerine {
-	color: #f28500;
+	color: var(--orange);
 }
 
 .black {
-	color: #929292;
+	color: var(--black);
 }
 
 .brown {
@@ -1180,7 +1249,7 @@ span.number, span.suit {
 }
 
 .lewd {
-	color: #E04880;
+	color: var(--lewd);
 }
 
 .grey {
@@ -1207,102 +1276,102 @@ span.number, span.suit {
 	color: #667DC1;
 }
 
-.wine, .apocalypse {
+.wine {
 	color: #8B3626;
 }
 
 .relaxed {
-	color:#63719C
+	color:var(--relaxed)
 }
 
 .anxious {
-	color:#973253
+	color:var(--anxious)
 }
 
 .veteran {
-	color:#956BB4
+	color:var(--veteran)
 }
 
 .methodical {
-	color:#CE7993
+	color:var(--methodical)
 }
 
 .scarred {
-	color:#D8621F
+	color:var(--scarred)
 }
 
 .tattooed {
-	color:#266568
+	color:var(--tattooed);
 }
 
 /* background colours */
 .bg-red {
-	background-color: #EC3535;
+	background-color: var(--red);
 }
 
 .bg-pink {
-	background-color: #E40081;
+	background-color: var(--pink);
 }
 
 .bg-light-pink {
-	background-color: #d67caf;
+	background-color: var(--pink-secondary);
 }
 
 .bg-purple {
-	background-color: #AA4BC8;
+	background-color: var(--purple-secondary);
 }
 
 .bg-blue {
-	background-color: #4372FF;
+	background-color: var(--blue);
 }
 
 .bg-lblue,
 .bg-light-blue {
-	background-color: #559BC0;
+	background-color: var(--blue-secondary);
 }
 
 .bg-teal {
-	background-color: #08C1C1;
+	background-color: var(--teal);
 }
 
 .bg-green {
-	background-color: #38B20A;
+	background-color: var(--green);
 }
 
 .bg-light-green {
-	background-color: #7caf7c;
+	background-color: var(--green-secondary);
 }
 
 .bg-lime-green{
-	background-color: #44e342
+	background-color: var(--lime);
 }
 
 .bg-brown {
-	background-color: #4C2217;
+	background-color: var(--brown);
 }
 
 .bg-brat {
-	background-color: #B75D41;
+	background-color: var(--brat);
 }
 
 .bg-meek {
-	background-color: #C44B8B;
+	background-color: var(--meek);
 }
 
 .bg-def {
-	background-color: #D20000;
+	background-color: var(--defiant);
 }
 
 .bg-sub {
-	background-color: #AA4BC8;
+	background-color: var(--purple-secondary);
 }
 
 .bg-gold {
-	background-color: #FFD700;
+	background-color: var(--yellow);
 }
 
 .bg-silver {
-	background-color: silver;
+	background-color: var(--silver);
 }
 
 .bg-bronze {
@@ -1319,25 +1388,25 @@ span.number, span.suit {
 
 .bg-yellow,
 .bg-pale-yellow {
-	background-color: #FFD700;
+	background-color: var(--yellow);
 }
 
 .bg-orange {
-	background-color: #f28500;
+	background-color: var(--orange);
 }
 
 .bg-tangerine,
 .bg-pale-tangerine {
-	background-color: #f28500;
+	background-color: var(--orange);
 }
 
 .bg-black {
-	background-color: #000;
+	background-color: var(--900);
 }
 
 .bg-white,
 .bg-pale-white {
-	background-color: #EEE;
+	background-color: var(--100);
 }
 
 .bg-brown {
@@ -1373,7 +1442,7 @@ span.number, span.suit {
 }
 
 .bg-lewd {
-	background-color: #E04880;
+	background-color: var(--lewd);
 }
 
 .bg-grey {
@@ -1396,7 +1465,7 @@ span.number, span.suit {
 	background-color: #667DC1;
 }
 
-.bg-wine, .bg-apocalypse {
+.bg-wine {
 	background-color: #8B3626;
 }
 
@@ -1425,7 +1494,7 @@ span.number, span.suit {
 }
 
 .grey-shadow {
-	filter: drop-shadow(1px 1px 0px #666);
+	filter: drop-shadow(1px 1px 0px var(--700));
 }
 
 #stats {
@@ -1433,13 +1502,13 @@ span.number, span.suit {
 	line-height: 1.25em;
 	width: 280px;
 	overflow: hidden;
-	border-top: #fff 2px solid;
-	border-bottom: #fff 2px solid;
+	border-top: var(--000) 2px solid;
+	border-bottom: var(--000) 2px solid;
 	padding-top: 1px;
 	position: fixed;
 	top: 228px;
 	left: 0px;
-	background-color: #222;
+	background-color: var(--850);
 	z-index: 1000;
 }
 
@@ -1472,7 +1541,7 @@ span.number, span.suit {
 	position: fixed;
 	top: 0px;
 	left: 0px;
-	background-color: #222;
+	background-color: var(--850);
 }
 
 #img > .canvasimg-both {
@@ -1497,15 +1566,15 @@ span.number, span.suit {
 }
 
 .imgLighten {
-	background-color: #777 !important;
+	background-color: var(--600) !important;
 }
 
 .imgLighten2 {
-	background-color: #999 !important;
+	background-color: var(--400) !important;
 }
 
 #ui-bar-toggle {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 #versioninfo, #story-title {
@@ -1640,7 +1709,7 @@ span.number, span.suit {
 }
 
 .toysUiElement {
-	border: 1px solid #ccc;
+	border: 1px solid var(--200);
 	margin: 2px;
 	padding: 0px 5px 10px;
 	min-width: 300px;
@@ -1654,7 +1723,7 @@ span.number, span.suit {
 }
 
 .childUi {
-	border: 1px solid #ccc;
+	border: 1px solid var(--200);
 	margin: 2px;
 	padding: 5px;
 	min-width: 300px;
@@ -1667,7 +1736,7 @@ span.number, span.suit {
 }
 
 .childrenUi {
-	border: 1px solid #ccc;
+	border: 1px solid var(--200);
 	margin: 2px;
 	padding: 5px;
 	min-width: 230px;
@@ -1813,7 +1882,7 @@ Combat display styles
 	display: flex;
 	flex-direction: column;
 	padding: 2px;
-	border: solid 1px #555;
+	border: solid 1px var(--700);
 	margin: 5px;
 }
 
@@ -1828,7 +1897,7 @@ Combat display styles
 	position: relative;
 	text-decoration: none;
 	font-family: "Poppins",sans-serif;
-	color: #ffffff;
+	color: var(--000);
 	cursor: pointer;
 }
 .rainbow:before {
@@ -1922,31 +1991,31 @@ Combat display styles
 }
 
 .whiteList select,.whiteList select:hover,.whiteList select:focus{
-	border:#fff 2px solid;
+	border:var(--000) 2px solid;
 	width: 99%;
 	max-width: 300px;
 }
 
 .bratList select,.bratList select:hover,.bratList select:focus{
-	border:#B75D41 2px solid;
+	border:var(--brat) 2px solid;
 	width: 99%;
 	max-width: 300px;
 }
 
 .meekList select,.meekList select:hover,.meekList select:focus{
-	border:#C44B8B 2px solid;
+	border:var(--meek) 2px solid;
 	width: 99%;
 	max-width: 300px;
 }
 
 .defList select,.defList select:hover,.defList select:focus{
-	border:#D20000 2px solid;
+	border:var(--defiant) 2px solid;
 	width: 99%;
 	max-width: 300px;
 }
 
 .subList select,.subList select:hover,.subList select:focus{
-	border:#AA4BC8 2px solid;
+	border:var(--purple-secondary) 2px solid;
 	width: 99%;
 	max-width: 300px;
 }
@@ -2514,8 +2583,8 @@ div[id|="numberslider-body"] input:focus {
 	outline: none;
 }
 div[id|="numberslider-body"] input::-webkit-slider-runnable-track {
-	background: #222;
-	border: 1px solid #444;
+	background: var(--850);
+	border: 1px solid var(--750);
 	border-radius: 0;
 	cursor: pointer;
 	height: 10px;
@@ -2524,7 +2593,7 @@ div[id|="numberslider-body"] input::-webkit-slider-runnable-track {
 div[id|="numberslider-body"] input::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	background: #ddd;
-	border: 3px solid #aaa;
+	border: 3px solid var(--300);
 	border-radius: 0;
 	cursor: pointer;
 	height: 18px;
@@ -2532,11 +2601,11 @@ div[id|="numberslider-body"] input::-webkit-slider-thumb {
 	width: 33px;
 }
 div[id|="numberslider-body"] input:focus::-webkit-slider-runnable-track {
-	background: #222;
+	background: var(--850);
 }
 div[id|="numberslider-body"] input::-moz-range-track {
-	background: #222;
-	border: 1px solid #444;
+	background: var(--850);
+	border: 1px solid var(--750);
 	border-radius: 0;
 	cursor: pointer;
 	height: 10px;
@@ -2544,7 +2613,7 @@ div[id|="numberslider-body"] input::-moz-range-track {
 }
 div[id|="numberslider-body"] input::-moz-range-thumb {
 	background: #ddd;
-	border: 3px solid #aaa;
+	border: 3px solid var(--300);
 	border-radius: 0;
 	cursor: pointer;
 	height: 18px;
@@ -2560,18 +2629,18 @@ div[id|="numberslider-body"] input::-ms-track {
 	width: calc(100% - 1px);
 }
 div[id|="numberslider-body"] input::-ms-fill-lower {
-	background: #222;
-	border: 1px solid #444;
+	background: var(--850);
+	border: 1px solid var(--750);
 	border-radius: 0;
 }
 div[id|="numberslider-body"] input::-ms-fill-upper {
-	background: #222;
-	border: 1px solid #444;
+	background: var(--850);
+	border: 1px solid var(--750);
 	border-radius: 0;
 }
 div[id|="numberslider-body"] input::-ms-thumb {
 	background: #ddd;
-	border: 3px solid #aaa;
+	border: 3px solid var(--300);
 	border-radius: 0;
 	cursor: pointer;
 	height: 16px;
@@ -2599,7 +2668,7 @@ label {
 	position: relative;
 	height: 0.25em;
 	width: 100%;
-	background-color: gray;
+	background-color: var(--600);
 	text-align: center;
 	z-index: -10;
 }
@@ -2615,7 +2684,7 @@ label {
 	position: relative;
 	height: 0.375em;
 	width: 55%;
-	background-color: gray;
+	background-color: var(--600);
 	text-align: center;
 	z-index: -10;
 	float: right;
@@ -2627,7 +2696,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #EC3535;
+	background-color: var(--red);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2641,7 +2710,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #E40081;
+	background-color: var(--pink);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2655,7 +2724,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #AA4BC8;
+	background-color: var(--purple-secondary);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2669,7 +2738,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #4372FF;
+	background-color: var(--blue);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2683,7 +2752,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #559BC0;
+	background-color: var(--blue-secondary);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2697,7 +2766,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #08C1C1;
+	background-color: var(--teal);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2711,7 +2780,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #38B20A;
+	background-color: var(--green);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -2725,7 +2794,7 @@ label {
 	left: 0;
 	top: 0;
 	height: 0.25em;
-	background-color: #FFD700;
+	background-color: var(--yellow);
 	z-index: 0;
 	max-width: 100%;
 }
@@ -3265,11 +3334,6 @@ label {
 	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%);
 	filter: hue-rotate(351deg) saturate(28%) brightness(90%);
 }
-
-.clothes-apocalypse {
-	-webkit-filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0);
-	filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0);
-}
 .clothes-steel {
 	-webkit-filter: saturate(0%) brightness(310%) sepia(10%);
 	filter: saturate(0%) brightness(310%) sepia(10%);
@@ -3387,10 +3451,6 @@ label {
 	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%);
 	filter: hue-rotate(351deg) saturate(28%) brightness(90%);
 }
-.upper-apocalypse .colour-upper, .lower-apocalypse .colour-lower, .under_lower-apocalypse .colour-under_lower, .under_upper-apocalypse .colour-under_upper, .head-apocalypse .colour-head, .face-apocalypse .colour-face, .neck-apocalypse .colour-neck, .legs-apocalypse .colour-legs, .feet-apocalypse .colour-feet, .upper_acc-apocalypse .colour-upper_acc, .lower_acc-apocalypse .colour-lower_acc, .under_lower_acc-apocalypse .colour-under_lower_acc, .under_upper_acc-apocalypse .colour-under_upper_acc, .head_acc-apocalypse .colour-head_acc, .face_acc-apocalypse .colour-face_acc, .neck_acc-apocalypse .colour-neck_acc, .legs_acc-apocalypse .colour-legs_acc, .feet_acc-apocalypse .colour-feet_acc, .icon-apocalypse {
-	-webkit-filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0);
-	filter: hue-rotate(0deg) saturate(0.45) brightness(0.48) contrast(0.76) sepia(0);
-}
 
 /* wet clothes */
 .upper-wetblue .colour-upper, .lower-wetblue .colour-lower, .under_lower-wetblue .colour-under_lower, .under_upper-wetblue .colour-under_upper {
@@ -4156,11 +4216,9 @@ canvas {
 
 @keyframes anim-default {
 	0% {
-	-webkit-transform: translateX(0);
 	transform: translateX(0);
 	}
 	100% {
-		-webkit-transform: translateX(-100%);
 		transform: translateX(-100%);
 	}
 }
@@ -4186,7 +4244,7 @@ canvas {
 	flex: 1 1 100px;
 	min-width: 18%;
 	margin: 0.15rem;
-	border: 1px solid #aaa;
+	border: 1px solid var(--300);
 	padding: 0.3rem;
 	text-align: center;
 }
@@ -4226,7 +4284,7 @@ canvas {
 }
 
 .characteristic-box-list .characteristic-description.grade-progress {
-	border-bottom: 1px solid gray;
+	border-bottom: 1px solid var(--600);
 	width: 80%;
 	padding-bottom: 0;
 	margin-bottom: 0.3rem;
@@ -4309,17 +4367,17 @@ canvas {
 }
 
 #sex-diagram .connector-box-top {
-	border-top: 1px solid #aaa;
+	border-top: 1px solid var(--300);
 }
 
 #sex-diagram .connector-box-bottom {
 	height: var(--connector-height);
-	border-bottom: 1px solid #aaa;
+	border-bottom: 1px solid var(--300);
 }
 
 #sex-diagram .connector-box.invert .connector-box-bottom {
 	top: calc( -1 * var(--connector-height));
-	border-top: 1px solid #aaa;
+	border-top: 1px solid var(--300);
 	border-bottom: none;
 }
 
@@ -4331,7 +4389,7 @@ canvas {
 #sex-diagram .left-column .connector-box-bottom {
 	left: calc(100% - var(--center-offset));
 	right: var(--end-offset);
-	border-left: 1px solid #aaa;
+	border-left: 1px solid var(--300);
 }
 
 #sex-diagram .right-column .connector-box-top {
@@ -4342,7 +4400,7 @@ canvas {
 #sex-diagram .right-column .connector-box-bottom {
 	left: var(--end-offset);
 	right: calc(100% - var(--center-offset));
-	border-right: 1px solid #aaa;
+	border-right: 1px solid var(--300);
 }
 
 @media(max-width: 1200px) {
@@ -4380,7 +4438,7 @@ canvas {
 	min-width: 250px;
 	max-width: 100%;
 	margin: 0.15rem;
-	border: 1px solid #aaa;
+	border: 1px solid var(--300);
 	text-align: center;
 	overflow: hidden;
 	flex: 1 1 32.4%;
@@ -4390,7 +4448,7 @@ canvas {
 	display: flex;
 	align-items: space-between;
 	font-size: 1.1em;
-	border-bottom: 1px solid #444;
+	border-bottom: 1px solid var(--750);
 	padding: 0.3em;
 	align-self: stretch;
 }
@@ -4419,8 +4477,8 @@ canvas {
 .relation-box .relation-stat-list {
 	display: flex;
 	flex-wrap: wrap;
-	background-image: linear-gradient(transparent 50%, #444 0.1em, transparent calc(50% + .1em)), linear-gradient(90deg, transparent 50%, #444 .1em, transparent calc(50% + .1em));
-	border-top: 1px solid #444;
+	background-image: linear-gradient(transparent 50%, var(--750) 0.1em, transparent calc(50% + .1em)), linear-gradient(90deg, transparent 50%, var(--750) .1em, transparent calc(50% + .1em));
+	border-top: 1px solid var(--750);
 	background-size: contain;
 	background-repeat: no-repeat;
 	flex: 1;
@@ -4517,7 +4575,7 @@ canvas {
 #secondary-npcs .relation-box,
 #farm-status .relation-box {
 	min-width: 220px;
-	border-color: #888;
+	border-color: var(--500);
 	flex: 0 1 24.3%
 }
 
@@ -4559,7 +4617,7 @@ canvas {
 #global-recognition .relation-box {
 	flex: 1 1 30%;
 	min-width: 220px;
-	border-color: #666;
+	border-color: var(--700);
 }
 
 #global-recognition .relation-box:last-child {
@@ -4592,28 +4650,23 @@ canvas {
 	animation: anim-eyes-blink-trauma 180s infinite steps(1);
 }
 .eyes-closed {
-	-webkit-transform: translateX(-50%);
 	transform: translateX(-50%);
 }
 
 @keyframes anim-eyes-blink {
 	0%, 5.05%, 13.1%, 16.15%, 16.8%, 23.8%, 36.85%, 41.9%, 42.95%, 47%, 53.05%, 57.1%, 61.15%, 66.2%, 73.25%, 79.3%, 82.35%, 83.4%, 83.95%, 89%, 93.05%, 99.1%, 100% {
-		-webkit-transform: translateX(0);
 		transform: translateX(0);
 	}
 	5%, 13.05%, 16.1%, 16.75%, 23.75%, 36.8%, 41.85%, 42.9%, 46.95%, 53%, 57.05%, 61.1%, 66.15%, 73.2%, 79.25%, 82.3%, 83.35%, 83.9%, 88.95%, 93%, 99.05% {
-		-webkit-transform: translateX(-50%);
 		transform: translateX(-50%);
 	}
 }
 
 @keyframes anim-eyes-blink-trauma {
 	0%, 13.1%, 23.2%, 38.3%, 51.4%, 69.5%, 77.6%, 90.7%, 100% {
-		-webkit-transform: translateX(0);
 		transform: translateX(0);
 	}
 	13%, 23.1%, 38.2%, 51.3%, 69.4%, 77.5%, 90.6%, 99.9% {
-		-webkit-transform: translateX(-50%);
 		transform: translateX(-50%);
 	}
 }
@@ -4664,7 +4717,7 @@ canvas {
 .clothes-price-container .numberslider-group {
 	display: flex;
 	flex-direction: column;
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	border-left: none;
 	border-right: none;
 	margin-top: 4px;
@@ -4688,11 +4741,11 @@ canvas {
 
 .button {
 	width: fit-content;
-	border: 1px solid #888;
+	border: 1px solid var(--500);
 	padding: 0 0.5em;
 }
 .button:hover {
-	background-color: #333;
+	background-color: var(--800);
 	cursor: pointer;
 }
 
@@ -4714,7 +4767,7 @@ canvas {
 }
 
 #card-cover-options .cardcover0 {
-	background-color: #222;
+	background-color: var(--850);
 	line-height: 1.75;
 }
 
@@ -4819,12 +4872,12 @@ a[target="_blank"]::after {
 	top: 0;
 	transform: translateY(-100%);
 	transition: all 0.25s;
-	border: 1px solid #888;
+	border: 1px solid var(--500);
 	border-top: none;
 	border-radius: 0 0 5px 5px;
 	padding: 0 3em;
 	text-align: center;
-	background-color: #222;
+	background-color: var(--850);
 	z-index: 100;
 }
 #action-popup br {
@@ -4832,7 +4885,7 @@ a[target="_blank"]::after {
 }
 #wardrobewear {
 	display: table;
-	background-color: #0000;
+	background-color: var(--900);
 	border-radius: 3px;
 	transition: all 1.25s;
 }
@@ -4862,27 +4915,22 @@ img, canvas {
 }
 
 .rotate-90 {
-	-webkit-transform: rotate(90deg);
 	transform: rotate(90deg);
 }
 
 .rotate-180 {
-	-webkit-transform: rotate(180deg);
 	transform: rotate(180deg);
 }
 
 .rotate-270 {
-	-webkit-transform: rotate(270deg);
 	transform: rotate(270deg);
 }
 
 .flip {
-	-webkit-transform: scaleX(-1);
 	transform: scaleX(-1);
   }
 
 .none {
-	-webkit-transform: scaleX(0);
 	transform: scaleX(0);
 }
 
@@ -4898,7 +4946,7 @@ img, canvas {
 
 .rainbow {
 	animation: 60s infinite linear rainbow;
-	background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, #8800ff, #ff0000);
+	background: linear-gradient(90deg, var(--red), #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, var(--purple), var(--red));
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent ;
@@ -4911,7 +4959,7 @@ img, canvas {
 
 .lustful {
 	animation: 60s infinite linear lustful;
-	background: linear-gradient(90deg, #8800ff, #E04880, #b66bec, #FF1493 );
+	background: linear-gradient(90deg, var(--purple), var(--lewd), #b66bec, #FF1493 );
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent ;
@@ -4924,18 +4972,18 @@ img, canvas {
 
 .tentacle {
 	animation: 60s infinite linear tentacle;
-	background: linear-gradient(90deg, #8800ff, #8800ff, #8800ff, #8800ff, #8800ff, #FF1493 );
+	background: linear-gradient(90deg, var(--purple), var(--purple), var(--purple), var(--purple), var(--purple), #FF1493 );
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent ;
 }
 
 .wraith {
-	background: #f1f1db;
+	background: var(--150);
 	text-shadow:
-		0 0 7px #f1f1db,
-		0 0 22px #8800ff,
-		0 0 32px #8800ff;
+		0 0 7px var(--150),
+		0 0 22px var(--purple),
+		0 0 32px var(--purple);
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent;
@@ -4946,38 +4994,38 @@ img, canvas {
 }
 
 .nextWraith a {
-	background: #f1f1db;
+	background: var(--150);
 	text-shadow:
-		0 0 12px #f1f1db,
-		0 0 27px #8800ff,
-		0 0 37px #8800ff;
+		0 0 12px var(--150),
+		0 0 27px var(--purple),
+		0 0 37px var(--purple);
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent;
 }
 
 .nextLink a {
-	background: #5888dd;
+	background: var(--link);
 	text-shadow:
-		0 0 7px #f1f1db,
-		0 0 22px #8800ff,
-		0 0 32px #8800ff;
+		0 0 7px var(--150),
+		0 0 22px var(--purple),
+		0 0 32px var(--purple);
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent;
 }
 
 .fading {
-	background: #f1f1db;
-	text-shadow: 0 0 32px #8800ff;
+	background: var(--150);
+	text-shadow: 0 0 32px var(--purple);
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent;
 	opacity: 1;
 }
 .faded {
-	background: #f1f1db;
-	text-shadow: 0 0 32px #8800ff;
+	background: var(--150);
+	text-shadow: 0 0 32px var(--purple);
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent;
@@ -4998,8 +5046,8 @@ img, canvas {
 }
 
 .flicker {
-	background: #f1f1db;
-	text-shadow: 0 0 32px #8800ff;
+	background: var(--150);
+	text-shadow: 0 0 32px var(--purple);
 	background-clip: text;
 	-webkit-background-clip: text;
 	color: transparent;
diff --git a/game/02-CSS/clothing-shop-v2.css b/game/02-CSS/clothing-shop-v2.css
index fa36269906f1a8280be0a1146541e4445a331052..46127985ed0f20eb96c6723f7e46e8e807dcc6c3 100644
--- a/game/02-CSS/clothing-shop-v2.css
+++ b/game/02-CSS/clothing-shop-v2.css
@@ -6,7 +6,7 @@
 	position: absolute;
 	top: -1em;
 	left: min(1em, 2%);
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	border-left: none;
 	width: fit-content;
 	padding: 0 0.5em;
@@ -15,7 +15,7 @@
 .button-back-to-shop:before,
 .button-back-to-shop:after {
 	content: "";
-	border-top: 1px solid #444;
+	border-top: 1px solid var(--750);
 	display: block;
 	position: absolute;
 	width: 1.16em;
@@ -35,7 +35,7 @@
 .button-back-to-shop:hover,
 .button-back-to-shop:hover::before,
 .button-back-to-shop:hover::after {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 @media only screen and (max-width: 349px) {
@@ -66,7 +66,7 @@
 	cursor: pointer;
 }
 .clothing-item:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 .clothing-item-spacer {
@@ -74,7 +74,7 @@
 	width: 49%;
 	min-width: 250px;
 	height: 60px;
-	border: 1px dashed dimgrey;
+	border: 1px dashed var(--700);
 	margin: 0.25%;
 }
 .clothing-item-spacer.compact {
@@ -93,7 +93,7 @@
 	width: 5px;
 	height: 5px;
 	margin-right: -3px;
-	border: 1px solid #555;
+	border: 1px solid var(--750);
 	border-radius: 50%;
 }
 
@@ -141,8 +141,8 @@
 
 .clothing-price {
 	position: absolute;
-	background: grey;
-	color: black;
+	background: var(--600);
+	color: var(--900);
 	font-size: 0.8em;
 	font-weight: bold;
 	border-radius: 50% 10% 10% 50%;
@@ -154,14 +154,14 @@
 	transition: all 0.2s;
 }
 .clothing-item:hover .clothing-price {
-	background: gold;
+	background: var(--gold);
 	transform: rotate(10deg);
-	filter: drop-shadow(2px 4px 6px black);
+	filter: drop-shadow(2px 4px 6px var(--900));
 }
 .clothing-price:before {
 	display: inline-block;
 	position: relative;
-	background-color: black;
+	background-color: var(--900);
 	width: 0.3em;
 	height: 0.3em;
 	border-radius: 50%;
@@ -213,7 +213,7 @@
 	line-height: 1.25em;
 	margin-bottom: 0.25em;
 	font-size: 0.9em;
-	color: silver;
+	color: var(--silver);
 }
 .unlocked-hint {
 	font-size: 0.9em;
@@ -293,7 +293,7 @@
 	width: 20px;
 	height: 20px;
 	display: inline-block;
-	border: 1px solid lightgrey;
+	border: 1px solid var(--200);
 	border-radius: 10%;
 	margin-right: -2px;
 }
@@ -366,7 +366,7 @@
 	}
 	.clothing-price {
 		background: none;
-		color: gold;
+		color: var(--gold);
 		transform: rotate(0);
 		font-size: 0.9em;
 		top: 0;
@@ -399,17 +399,17 @@
 	-ms-transform: skewX(-30deg);
 	-webkit-transform: skewX(-30deg);
 	transform: skewX(-30deg);
-	border: 1px solid white;
+	border: 1px solid var(--000);
 	margin: 0 0 -1px -1px;
 	transition: all 0.1s;
 }
 .category-tab:hover {
-	background-color: lightgrey;
+	background-color: var(--200);
 	cursor: pointer;
 }
 .category-tab.active,
 .category-tab.active:hover {
-	background-color: white;
+	background-color: var(--000);
 	cursor: unset;
 }
 .category-tab > img {
@@ -438,7 +438,7 @@
 }
 .active > .category-icon-alt,
 .category-icon-alt:hover {
-	color: black;
+	color: var(--900);
 }
 
 @media only screen and (max-width: 345px) {
@@ -468,7 +468,7 @@
 .page {
 	width: 0.75em;
 	height: 0.75em;
-	border: 3px solid white;
+	border: 3px solid var(--000);
 	border-radius: 50%;
 	display: inline-flex;
 	vertical-align: middle;
@@ -478,24 +478,24 @@
 	cursor: pointer;
 }
 .page:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 .page.active {
-	background-color: white;
+	background-color: var(--000);
 }
 .page.active a {
 	cursor: default;
 }
 
 .btn-pagination {
-	border: 2px solid white;
+	border: 2px solid var(--000);
 	padding: 0 1em;
 	text-align: center;
 	cursor: pointer;
 	transition: all 0.1s;
 }
 .btn-pagination:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 .btn-pagination-arrow {
 	font-family: monospace;
@@ -547,9 +547,9 @@
 }
 
 .colour-button {
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	margin: 0 0.25em 0.25em 0;
-	background-color: #222;
+	background-color: var(--850);
 	height: fit-content;
 }
 .colour-button:hover {
@@ -568,7 +568,7 @@
 	filter: none !important;
 }
 .colour-options-div > .active > div {
-	box-shadow: inset 0 0 0 1px #FFF, inset 0 0 0 2px #000;
+	box-shadow: inset 0 0 0 1px var(--white), inset 0 0 0 2px var(--900);
 }
 
 .colour-button > div > img {
@@ -578,15 +578,15 @@
 }
 
 .colour-name-span {
-	color: #444;
+	color: var(--750);
 	mix-blend-mode: hard-light;
-	filter: drop-shadow(-1px -1px 0px #AAA) drop-shadow(-1px 1px 0px #AAA) drop-shadow(1px 1px 0px #AAA) drop-shadow(1px -1px 0px #AAA);
+	filter: drop-shadow(-1px -1px 0px var(--300)) drop-shadow(-1px 1px 0px var(--300)) drop-shadow(1px 1px 0px var(--300)) drop-shadow(1px -1px 0px var(--300));
 	pointer-events: none;
 }
 .colour-name-span-highcontrast {
-	color: #111;
+	color: var(--850);
 	mix-blend-mode: normal;
-	filter: drop-shadow(1px 1px 0px #DDD) drop-shadow(1px -1px 0px #DDD) drop-shadow(-1px -1px 0px #DDD) drop-shadow(-1px 1px 0px #DDD);
+	filter: drop-shadow(1px 1px 0px var(--200)) drop-shadow(1px -1px 0px var(--200)) drop-shadow(-1px -1px 0px var(--200)) drop-shadow(-1px 1px 0px var(--200));
 	pointer-events: none;
 }
 
@@ -616,8 +616,8 @@
 }
 .mannequin {
 	overflow: hidden;
-	border: 1px solid #444;
-	background-color: #222;
+	border: 1px solid var(--750);
+	background-color: var(--850);
 	display: table;
 	z-index: 1;
 }
@@ -661,7 +661,7 @@
 	opacity: 20%;
 }
 .mannequin-gender-button:hover {
-	background-color: #6666;
+	background-color: var(--700);
 	opacity: 100%;
 }
 
@@ -689,7 +689,7 @@
 	color: #6688dd;
 }
 .mannequin-gender-textbutton:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 .mannequin-gender-textbutton:hover:before {
 	content: "[";
@@ -738,7 +738,7 @@
 }
 
 .colour-slider > .macro-numberslider > span {
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	border-left: none;
 	margin-left: 0;
 	border-radius: 0 3px 3px 0;
@@ -783,7 +783,7 @@
 	align-items: center;
 	width: 100%;
 	height: 30px;
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	border-radius: 4px;
 	transition: all 0.1s;
 }
@@ -801,7 +801,7 @@
 	width: 24px;
 	height: 24px;
 	padding: 3px;
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	border-radius: 3px;
 	transition: all 0.1s;
 }
@@ -812,7 +812,7 @@
 
 .save-preset:hover,
 .delete-preset:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 @media only screen and (max-width: 600px) {
@@ -857,7 +857,7 @@
 	flex-direction: column;
 	margin-right: 1em;
 	margin-bottom: 0.5em;
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	line-height: 2em;
 }
 .buy-button:last-child,
@@ -881,17 +881,17 @@
 
 .buy-button-inner:hover,
 .try-button:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 .disabled {
-	border-color: #333;
-	color: #444;
+	border-color: var(--800);
+	color: var(--750);
 	cursor: default;
 	background: unset !important;
 }
 .disabled * {
-	color: #444;
+	color: var(--750);
 }
 .disabled img {
 	filter: saturate(0) brightness(0.4);
@@ -937,7 +937,7 @@
 	width: 48px;
 	height: 48px;
 	top: -1.5em;
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	border-radius: 3px;
 	transition: all 0.1s;
 	display: flex;
@@ -957,7 +957,7 @@
 .clothingshop-options-button:hover,
 .shop-legend-button:hover,
 .shop-legend-button.active {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 @media only screen and (max-width: 420px) {
@@ -1017,8 +1017,8 @@
 	right: min(7%, 8em);
 	top: min(5%, 8em);
 	bottom: min(5%, 8em);
-	border: 2px solid white;
-	background: #111;
+	border: 2px solid var(--000);
+	background: var(--850);
 	padding: 1em;
 	display: flex;
 	flex-direction: column;
@@ -1030,7 +1030,7 @@
 	flex-direction: row-reverse;
 	flex-wrap: wrap;
 	padding-bottom: 0.5em;
-	border-bottom: 2px solid #444;
+	border-bottom: 2px solid var(--750);
 }
 
 .filters {
@@ -1047,7 +1047,7 @@
 .filter-block {
 	display: flex;
 	flex-direction: column;
-	border: 1px dashed #444;
+	border: 1px dashed var(--750);
 	padding: 0.5em 1em;
 	margin: 0.5em;
 }
@@ -1091,14 +1091,14 @@
 
 .filter-button,
 .options-button {
-	border: 1px solid #444;
+	border: 1px solid var(--750);
 	text-align: center;
 	padding: 0 1em;
 	margin: 0.25em 1em;
 }
 .filter-button:hover,
 .options-button:hover {
-	background-color: #222;
+	background-color: var(--850);
 }
 
 .high-contrast-example {
@@ -1111,7 +1111,7 @@
 	position: absolute;
 	top: 2em;
 	border: 1px solid;
-	background: #222;
+	background: var(--850);
 	padding: 1em;
 	font-size: 90%;
 	right: 0%;
diff --git a/game/02-CSS/debug.css b/game/02-CSS/debug.css
index 505aa9cdd6533ab43f738a568ffec6ba3997586d..a46337769b74840d23e7c3763772aa32b339149d 100644
--- a/game/02-CSS/debug.css
+++ b/game/02-CSS/debug.css
@@ -3,7 +3,7 @@
 	width: 120px;
 	overflow: hidden;
 	background-color: #222;
-	border: solid 1px #ddd;
+	border: solid 1px var(--200);
 }
 .debug-images > * {
 	position: absolute;
@@ -28,15 +28,15 @@
 }
 
 #saveCompareUI {
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 }
 
 #saveCompareUI {
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 }
 
 #comparedResult .item {
-	border: solid 1px #aaa;
+	border: solid 1px var(--300);
 	padding: 3px;
 	margin: 3px 0;
 	word-wrap: break-word;
diff --git a/game/02-CSS/ion.rangeSlider.css b/game/02-CSS/ion.rangeSlider.css
index c3c936a9d8e82fc41804b27fb0768171013d6cf6..f083ef5f8af7bcd9d2c5ce9d3701f3eb79da65eb 100644
--- a/game/02-CSS/ion.rangeSlider.css
+++ b/game/02-CSS/ion.rangeSlider.css
@@ -82,7 +82,7 @@ Build date: 2019-12-19 16:51:02
   left: 0;
   width: 1px;
   height: 8px;
-  background: #000;
+  background: var(--900);
 }
 .irs-grid-pol.small {
   height: 4px;
@@ -96,7 +96,7 @@ Build date: 2019-12-19 16:51:02
   font-size: 9px;
   line-height: 9px;
   padding: 0 3px;
-  color: #000;
+  color: var(--900);
 }
 .irs-disable-mask {
   position: absolute;
@@ -106,11 +106,11 @@ Build date: 2019-12-19 16:51:02
   width: 102%;
   height: 100%;
   cursor: default;
-  background: rgba(0, 0, 0, 0);
+  background: transparent;
   z-index: 2;
 }
 .lt-ie9 .irs-disable-mask {
-  background: #000;
+  background: var(--900);
   filter: alpha(opacity=0);
   cursor: not-allowed;
 }
@@ -184,7 +184,7 @@ Build date: 2019-12-19 16:51:02
 .irs--flat .irs-max {
   top: 0;
   padding: 1px 3px;
-  color: #999;
+  color: var(--400);
   font-size: 10px;
   line-height: 1.333;
   text-shadow: none;
@@ -194,7 +194,7 @@ Build date: 2019-12-19 16:51:02
 .irs--flat .irs-from,
 .irs--flat .irs-to,
 .irs--flat .irs-single {
-  color: white;
+  color: var(-000);
   font-size: 10px;
   line-height: 1.333;
   text-shadow: none;
@@ -221,7 +221,7 @@ Build date: 2019-12-19 16:51:02
   background-color: #e1e4e9;
 }
 .irs--flat .irs-grid-text {
-  color: #999;
+  color: var(--400);
 }
 .irs--big {
   height: 55px;
@@ -232,9 +232,9 @@ Build date: 2019-12-19 16:51:02
 .irs--big .irs-line {
   top: 33px;
   height: 12px;
-  background-color: white;
-  background: linear-gradient(to bottom, #ddd -50%, white 150%);
-  border: 1px solid #ccc;
+  background-color: var(--000);
+  background: linear-gradient(to bottom, var(--300) -50%, var(--000) 150%);
+  border: 1px solid var(--200);
   border-radius: 12px;
 }
 .irs--big .irs-bar {
@@ -242,7 +242,7 @@ Build date: 2019-12-19 16:51:02
   height: 12px;
   background-color: #92bce0;
   border: 1px solid #428bca;
-  background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
+  background: linear-gradient(to bottom, var(--000) 0%, #428bca 30%, #b9d4ec 100%);
   box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
 }
 .irs--big .irs-bar--single {
@@ -273,7 +273,7 @@ Build date: 2019-12-19 16:51:02
 .irs--big .irs-max {
   top: 0;
   padding: 1px 5px;
-  color: white;
+  color: var(--000);
   text-shadow: none;
   background-color: #9f9f9f;
   border-radius: 3px;
@@ -281,7 +281,7 @@ Build date: 2019-12-19 16:51:02
 .irs--big .irs-from,
 .irs--big .irs-to,
 .irs--big .irs-single {
-  color: white;
+  color: var(--000);
   text-shadow: none;
   padding: 1px 5px;
   background-color: #428bca;
@@ -340,7 +340,7 @@ Build date: 2019-12-19 16:51:02
   width: 6px;
   height: 6px;
   border: 1px solid #a3adc1;
-  background: white;
+  background: var(--000);
   transform: rotate(45deg);
 }
 .irs--modern .irs-handle > i:nth-child(2) {
@@ -352,7 +352,7 @@ Build date: 2019-12-19 16:51:02
   width: 10px;
   height: 12px;
   background: #e9e6e6;
-  background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
+  background: linear-gradient(to bottom, var(--000) 0%, #e9e6e6 100%);
   border-radius: 0 0 3px 3px;
 }
 .irs--modern .irs-handle > i:nth-child(3) {
@@ -370,7 +370,7 @@ Build date: 2019-12-19 16:51:02
 .irs--modern .irs-handle:hover {
   border-color: #7685a2;
   background: #c3c7cd;
-  background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
+  background: linear-gradient(to bottom, var(--000) 0%, #919ba5 30%, var(--000) 100%);
 }
 .irs--modern .irs-handle.state_hover > i:nth-child(1),
 .irs--modern .irs-handle:hover > i:nth-child(1) {
@@ -387,7 +387,7 @@ Build date: 2019-12-19 16:51:02
   line-height: 1.333;
   text-shadow: none;
   padding: 1px 5px;
-  color: white;
+  color: var(--000);
   background-color: #d1d6e0;
   border-radius: 5px;
 }
@@ -399,7 +399,7 @@ Build date: 2019-12-19 16:51:02
   text-shadow: none;
   padding: 1px 5px;
   background-color: #20b426;
-  color: white;
+  color: var(--000);
   border-radius: 5px;
 }
 .irs--modern .irs-from:before,
@@ -424,7 +424,7 @@ Build date: 2019-12-19 16:51:02
   background-color: #dedede;
 }
 .irs--modern .irs-grid-text {
-  color: silver;
+  color: var(--silver);
   font-size: 13px;
 }
 .irs--sharp {
@@ -438,7 +438,7 @@ Build date: 2019-12-19 16:51:02
 .irs--sharp .irs-line {
   top: 30px;
   height: 2px;
-  background-color: black;
+  background-color: var(--900);
   border-radius: 2px;
 }
 .irs--sharp .irs-bar {
@@ -472,11 +472,11 @@ Build date: 2019-12-19 16:51:02
 }
 .irs--sharp .irs-handle.state_hover,
 .irs--sharp .irs-handle:hover {
-  background-color: black;
+  background-color: var(--900);
 }
 .irs--sharp .irs-handle.state_hover > i:first-child,
 .irs--sharp .irs-handle:hover > i:first-child {
-  border-top-color: black;
+  border-top-color: var(--900);
 }
 .irs--sharp .irs-min,
 .irs--sharp .irs-max {
@@ -497,7 +497,7 @@ Build date: 2019-12-19 16:51:02
   text-shadow: none;
   padding: 3px 4px;
   background-color: #a804b2;
-  color: white;
+  color: var(--000);
   border-radius: 2px;
 }
 .irs--sharp .irs-from:before,
@@ -555,7 +555,7 @@ Build date: 2019-12-19 16:51:02
   width: 24px;
   height: 24px;
   border: 4px solid #006cfa;
-  background-color: white;
+  background-color: var(--000);
   border-radius: 24px;
   box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
 }
@@ -581,7 +581,7 @@ Build date: 2019-12-19 16:51:02
   text-shadow: none;
   padding: 3px 5px;
   background-color: #006cfa;
-  color: white;
+  color: var(--000);
   border-radius: 4px;
 }
 .irs--round .irs-from:before,
@@ -623,7 +623,7 @@ Build date: 2019-12-19 16:51:02
 .irs--square .irs-bar {
   top: 31px;
   height: 4px;
-  background-color: black;
+  background-color: var(--900);
 }
 .irs--square .irs-shadow {
   height: 2px;
@@ -634,8 +634,8 @@ Build date: 2019-12-19 16:51:02
   top: 25px;
   width: 16px;
   height: 16px;
-  border: 3px solid black;
-  background-color: white;
+  border: 3px solid var(--900);
+  background-color: var(--000);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -646,7 +646,7 @@ Build date: 2019-12-19 16:51:02
 }
 .irs--square .irs-min,
 .irs--square .irs-max {
-  color: #333;
+  color: var(--800);
   font-size: 14px;
   line-height: 1;
   top: 0;
@@ -659,8 +659,8 @@ Build date: 2019-12-19 16:51:02
   line-height: 1;
   text-shadow: none;
   padding: 3px 5px;
-  background-color: black;
-  color: white;
+  background-color: var(--900);
+  color: var(--000);
 }
 
 .irs--square .irs-from {
@@ -668,7 +668,7 @@ Build date: 2019-12-19 16:51:02
   line-height: 1;
   text-shadow: none;
   padding: 3px 5px;
-  background-color: black;
+  background-color: var(--900);
   color: rgb(0, 0, 255);
 }
 
@@ -677,7 +677,7 @@ Build date: 2019-12-19 16:51:02
   line-height: 1;
   text-shadow: none;
   padding: 3px 5px;
-  background-color: black;
+  background-color: var(--900);
   color: rgb(255, 0, 0);
 }
 
@@ -685,16 +685,16 @@ Build date: 2019-12-19 16:51:02
   height: 25px;
 }
 .irs--square .irs-grid-pol {
-  background-color: #dedede;
+  background-color: var(--100);
 }
 .irs--square .irs-grid-text {
-  color: silver;
+  color: var(--silver);
   font-size: 11px;
 }
 
 .irs--roundprobability {
   height: 50px;
-  --color: #ffffff;
+  --color: var(--000);
 }
 .irs--roundprobability.irs-with-grid {
   height: 65px;
@@ -702,20 +702,20 @@ Build date: 2019-12-19 16:51:02
 .irs--roundprobability .irs-line {
   top: 36px;
   height: 4px;
-  background-color: #ffffff;
+  background-color: var(--000);
   background-color: var(--color);
   border-radius: 4px;
 }
 .irs--roundprobability .irs-bar {
   top: 36px;
   height: 4px;
-  background-color: #ffffff;
+  background-color: var(--000);
   background-color: var(--color);
 }
 .irs--roundprobability .irs-bar2 {
   top: 36px;
   height: 4px;
-  background-color: #ffffff;
+  background-color: var(--000);
   background-color: var(--color);
 }
 .irs--roundprobability .irs-bar3 {
@@ -737,7 +737,7 @@ Build date: 2019-12-19 16:51:02
   height: 24px;
   border: 4px solid #006cfa;
   border-color: var(--color);
-  background-color: #ffffff;
+  background-color: var(--000);
   border-radius: 24px;
   box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
 }
@@ -764,7 +764,7 @@ Build date: 2019-12-19 16:51:02
   padding: 3px 5px;
   background-color: #006cfa;
   background-color: var(--color);
-  color: white;
+  color: var(--000);
   border-radius: 4px;
   margin: auto;
 }
@@ -792,10 +792,10 @@ Build date: 2019-12-19 16:51:02
   height: 25px;
 }
 .irs--roundprobability .irs-grid-pol {
-  background-color: #dedede;
+  background-color: var(--100);
 }
 .irs--roundprobability .irs-grid-text {
-  color: silver;
+  color: var(--silver);
   font-size: 13px;
 }
 
diff --git a/game/02-CSS/pillsInventory.css b/game/02-CSS/pillsInventory.css
index 058ece7007b84cb816ef73d5cfec4e9ec4473ef5..f0dbd5e871289799343a247f8c05afa6cc767fea 100644
--- a/game/02-CSS/pillsInventory.css
+++ b/game/02-CSS/pillsInventory.css
@@ -102,7 +102,7 @@
 	border-right: 1px solid;
 	vertical-align: bottom;
 	line-height: 250%;
-	background-color: #1c1c1c!important;
+	background-color: var(--850) !important;
 }
 
 .hpi_icon:hover,
@@ -196,7 +196,7 @@
 }
 
 .hpi_auto_label {
-	color: #bcbcbc;
+	color: var(--300);
 	font-size: 0.65em;
 	font-weight: bolder;
 	text-transform: uppercase;
diff --git a/game/02-CSS/sexToysInventory.css b/game/02-CSS/sexToysInventory.css
index 5043826d8c0a0ebc96c1ecdf133c6f203e95a9d1..ffcb742c99c37c92d0a2457d6ea62db02a8b05e7 100644
--- a/game/02-CSS/sexToysInventory.css
+++ b/game/02-CSS/sexToysInventory.css
@@ -58,6 +58,7 @@
 }
 
 .sti_full {
+	border: 1px solid transparent;
 	background-color: #616164;
 	cursor:pointer;
 }