Current state of develeopment

css/style.css

@@ -27,10 +27,59 @@ main {
 	transition-duration: .2s;
 }
 
-
-#svg-center {
+.svg-center {
 	-webkit-transform: translateX(-50%);
 	-ms-transform: translateX(-50%);
 	transform: translateX(-50%);
 	align-self: center;
 }
+
+.preview {
+	flex: 1 1 auto;
+	z-index: 1;
+	position: relative;
+}
+
+.preview_content {
+	box-sizing: border-box;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	padding: 15px; /* TOP, RIGHT, BOTTOM, LEFT */
+}
+
+.preview canvas {
+	z-index: 1000000;
+	max-height: 100%;
+	max-width: 100%;
+	flex: 1 1 auto;
+	height: auto;
+	width: auto;
+	object-fit: contain;
+	filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, .2))
+}
+
+.preview-float {
+	position: absolute !important;
+	z-index: 1000001;
+	bottom: 10px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+#colorpattern.active {
+	box-sizing: border-box;
+	outline: 3px cyan solid;
+	transform: scale(1.025);
+	transition-duration: .2s;
+}
+
+.opacity {
+	opacity: 0.5;
+}
+.opacity:hover {
+	opacity: 1.0;
+}