:root {
	--grey0: #1A1C1E;
	--grey1: #2A2A32;
	--grey2: #474A52;
	--grey3: #9296A0;
	--grey4: #E4E5E7;
	--color0: #FFCC2D;
	--color1: #FF1C52;
	--color2: #6806CC;
	--color3: #1E5AF2;
	--background: black;
	--foreground: white;
	--buttonA: 4em;
	--buttonB: 2em;
	--buttonB2: 1.9em;
	--buttonC: 2em;
/*	Using manual overrides of 100px, 101px, and -1px used to be required in some browsers, but seems ok now */
	--tileSizeA: 100%;
	--tileSizeB: 100%;
	--tileOffset: 0;
	--corner: 75%;
	--cornerUI: 0.25em;
	--backgroundImage: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABwklEQVRogdXYQXLdIBAE0O6ZzolzU5/H05MF+vK348ReulVaUAgxvAIEiL/rhbVVrtrqrfZ1c6vd5Wo3p9vN7Z6mm1N0l0U3R5ymG9M1wjamOcII03Bj+qTXV8JTa2Fqp9e9U3bv1LrWbdea65rBNy6tgFcaBRgAUNeTNuZOA3NyGv141W9lAYAnZ4DGAvwrFIF9RDBeF7rL3MEf6QLc+I5B+wtAsEF7tybT8ATINMj9LnqcQVs0NtdwhlCw4Z4DqQa57oiRBm0/tzvPoK0P7Q4zaPu8mmrQEkg2aJuYzTVoiwByDQ9ArOFaiXMN90KWapBJ1OYatE0Pcg3XJM41vH2FQg1y8a4n0XBOZAg2XHMg1iCTVR/rCTJoizZyDec8gFyDhuxGrkFbHCPXcK0DuQYteTakoQa5WYNcg5aINmiK7c01nAMNcg1aluFcg1wsBxuuIZRrkMlTSahBLsDBhuu3Sq5Bc3og1vDUA5mGexKnGjR8RMo0yHyKFGg4PbC5hrsHUg0aENxcg0xggw3C2UnEGnTFiDXoLhlq0HPJRMM7QKLhIyDO8Akgy/A5IMjwT0CK4X+ACMMXgJ9v+Brwww1/ADv8p6IlncjkAAAAAElFTkSuQmCC");
	--foregroundImage: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABp0lEQVRogdXYS5KDMAxF0SeVV9jb6jW31ANkYmxDMsxlQPkjKE6BLMDy90cuueQplyx7N17dGux7G4IvAVFTlrLh2KmhqNnXeN8rJcl6wAebK0whhaqRZ9df3Rrs+xyCLwFeU2nK4dipIa/Z13jfyyQpe8AHW1Mchx1ck1Juiiyeoro1eESaPBU9WBoCXB4Kk6si4xpTDVdGXW6N95ObSal0KSR7ex9aXQfWMN4BpOEAgA3nI0Q17JIYZZgeIZ5hfYRghlalB2toiuN6qIaeA1jDkANMw3UZBRqWZZRmOAFUw1gHkIbpVYJnWF8lYIZdDqAMNznAMdznAMTwmAMEQ9Of5mtFGcYkRhqmJOYZ1iSGGbZJTDLcFTKMYVyFkIZpFeIZVgDMsC6jMMN2GSUZziSmGppSaEP/M4c1DH/mmIahkDEN1zoANCyFjGaY3oV4hptKzDHcV2KI4bESEwwPHzQMw/MHDcDw9oPm2w27ZRRl2H6RkQzbO0AyNEloQ6sTYg0dgDUMAKbhCgAaFgDNsAOgDDcAjuEeADE8AgiGd4CvN3wA+G7DP1qqg/ObfD+DAAAAAElFTkSuQmCC");
}

body {
	margin: 0;
	padding: 0;
	font-family: "Outfit", sans-serif;
	font-size: 1em;
	font-optical-sizing: auto;
	font-weight: 200;
	background-color: var(--grey0);
	color: var(--grey4);
	cursor: default;
}

#grid-page {
	margin: 0;
	padding: 2em;
	display: grid;
	grid-template-columns: 23em auto;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
/*	border: 1px solid #ff0000; */
}

#grid-settings {
	width: 22em;
/*	padding: 1em; */
/*	border: 1px solid #ffff00; */
}

#grid-intro {
	margin-bottom: 1em;
/*	border: 1px solid #ff0000; */
}

#grid-prefs {
	display: grid;
	grid-template-columns: 50% 50%;
	margin-bottom: 1em;
/*	border: 1px solid #00ff00; */
}

#grid-symmetry {
/*	border: 1px solid #0000ff; */
}

#grid-column2 {
/*	border: 1px solid #00ff99; */
}

#grid-size {
/*	border: 1px solid #ff9900; */
}

#grid-colors {
/*	border: 1px solid #00ff99; */
}

#grid-data {
	margin-bottom: 1em;
/*	border: 1px solid #ff9900; */
}

#grid-artwork {
/*	border: 1px solid #0099ff; */
}



/* Begin Element Styles */

.flex {
	display: flex;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 100;
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
}

p {
	margin: 0.5em 0;
	padding: 0;
}

input, label, .dimension, .load, .reset, .download {
	margin: 0;
	font-size: 1em;
	line-height: 1.6em;
	text-align: center;
	border-width: 0;
	cursor: pointer;
/*	border: solid 1px red; */
}

input {
	background-color: var(--grey2);
	color: var(--grey4);
	border-radius: var(--cornerUI);
}

.dimension {
	position: relative;
	width: 8em;
	height: var(--buttonB);
	padding: 0;
	margin-right: 0.5em;
}

.readout {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: var(--buttonB);
	text-align: center;
}

#canvasDecrease, #canvasIncrease {
	position: absolute;
	text-align: center;
/*	background: rgba(255, 0, 0, 0.2); */
	cursor: pointer;
}

#canvasDecrease {
	top: 0;
	left: 0;
	text-align: left;
	width: var(--buttonA);
	height: var(--buttonB);
	line-height: var(--buttonB);
}

#canvasIncrease {
	top: 0;
	right: 0;
	text-align: right;
	width: var(--buttonA);
	height: var(--buttonB);
	line-height: var(--buttonB);
}

/* #grid-colors input[type=radio] { */
#grid-colors input {
	appearance: none;
	width: var(--buttonB);
	height: var(--buttonB);
	line-height: var(--buttonB2);
	margin: 0 0.25em 0.25em 0;
/*	padding: 1.0em; */
	outline: none;
	border-radius: var(--cornerUI);
	border: 1px solid black;
}

#grid-colors input:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

#grid-colors input:checked {
	border-color: white;
}

#grid-colors input.transparent::before {
	content: "🚫";
/*	content: "X"; */
}

#grid-colors input.random::before {
/*	content: "∞"; */
/*	content: "♾️"; */
	content: "🔄";
}

#grid-colors input.image {
/*	background-repeat: no-repeat; */
	background-position: center;
	background-size: cover;
/*	background-attachment: fixed; */
}

#grid-colors input.image::before {
/*	content: "→"; */
/*	content: "⤵️"; */
	content: "📷";
/*	content: "🖼️"; */
/*	content: "📁"; */
/*	content: "📂"; */
}

#backgroundFile, #foregroundFile {
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.125s;
	transition-timing-function: ease-out;
}

#grid-colors input.load {
	width: 6.5em;
	line-height: 1.4em;
}

input[type=file]::file-selector-button {
/*	display: none; */
	border: none;
/*	padding: 10px 20px; */
	cursor: pointer;
	transition: background .2s ease-in-out;
	content: "sdf";
	background-color: var(--grey2);
	color: white;
}



.reset {
	width: 4.9em;
	margin: 0 0.1em 0 0;
}

.library {
	display: inline-block;
	width: var(--buttonB);
	height: var(--buttonB);
	line-height: var(--buttonB2);
	margin: 0 0.25em 0.25em 0;
	padding: 0;
	background-color: black;
	background-position: center;
	background-size: cover;
/*	border-radius: var(--cornerUI); */
	outline: none;
	border: 1px solid black;
}

.download {
	width: 20.6em;
}

textarea {
	width: 20em;
	margin: 0;
	padding: 0.25em;
	font-size: 1em;
	line-height: 1.0em;
	font-family: "Courier New", monospace;
/*	background-color: var(--grey1); */
	background-color: transparent;
	color: var(--grey4);
	border-width: 0;
}



/* Begin Icon Styling */

#placement {
	position: relative;
/* 	transform: scale(0.5); */
	border: solid 2px black;
}

#container {
/* 	border: 2px solid green; */
}

.pixel {
	position: absolute;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 10;
/* 	border: 1px solid red; */
}

.pixel:hover {
	border: solid 1px var(--color0);
	margin: -1px;
	z-index: 100;
}

#container, .background {
	background-color: var(--background);
/*	background-repeat: no-repeat; */
	background-position: center;
	background-size: cover;
/*	background-attachment: fixed; */
	transition: background-color 0.5s;
}

.a, .b, .c, .d, .e, .f {
	position: absolute;
	width: var(--tileSizeA);
	height: var(--tileSizeA);
	transform: scale(1.0);
	
/* 	Image Background */
/*	background-repeat: no-repeat; */
	background-position: center;
	background-size: cover;
/*	background-attachment: fixed; */
	
/* 	Animations */
	background-color: var(--foreground);
	transition-property: border-radius, transform, opacity, background-color;
	transition-duration: 0.125s;
	transition-timing-function: ease-out;
}

.a {
	transform: scale(0.0);
	border-radius: 100%;
}

.b, .c, .d, .e {
	width: var(--tileSizeB);
	height: var(--tileSizeB);
	margin: var(--tileOffset);
}

.b {
	margin-top: 0;
	right: 0;
	bottom: 0;
	margin-left: 0;
	border-radius: var(--corner) 0 0 0;
}

.c {
	margin-top: 0;
	margin-right: 0;
	bottom: 0;
	left: 0;
	border-radius: 0 var(--corner) 0 0;
}

.d {
	top: 0;
	margin-right: 0;
	margin-bottom: 0;
	left: 0;
	border-radius: 0 0 var(--corner) 0;
}

.e {
	top: 0;
	right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-radius: 0 0 0 var(--corner);
}

.f {
}