restyle

data/styles/main.css

@@ -41,23 +41,35 @@
 }
 
 :root {
-	--site-background: #f5f5f5;
-	--layer-background: #e4e4e4;
-	--layer-background-selected: #ccc;
-	--interactable-unselected: #aaa;
-	--interactable-selected: #00aa00;
-	--font-color: #000;
+	--site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed;
+	--site-background-filter: none;
+	--layer-background: #242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed;
+	--layer-background-selected: #1d1d1d;
+	--interactable-unselected: #666666;
+	--interactable-selected: #99ee99;
+	--font-color: #efefef;
 	--body-background: none;
 }
 
 html {
 	font: 12pt georgia;
-	background: var(--site-background);
 	color: var(--font-color);
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+
+}
+html::before {
+	content: '';
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--site-background);
+	filter: var(--site-background-filter);
+	z-index: -1;
 }
 html, body {
 	margin: 0;
@@ -77,10 +89,6 @@ a:hover {
 	text-decoration: underline;
 }
 
-/*.ad {
-	margin: 0;
-	padding: 0;
-}*/
 .adGrid {
 	width: 100%;
 	display: grid;
@@ -88,6 +96,7 @@ a:hover {
 	grid-auto-rows: min-content;
 	justify-items: center;
 	align-items: center;
+	margin: 1rem 0;
 }
 .adGrid > div {
 	width: 100%;