* Updates to mysticsymbolic#31

* Add different random styles
* Change starting settings, adjust ranges
* Add No Background option

dist/css/canvas2.css

@@ -0,0 +1,104 @@
+.page {
+  display: grid;
+  column-gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100vh;
+  width: 100vw;
+  grid-template-columns: auto 20em;
+  grid-template-rows: auto;
+  grid-template-areas:
+    "header header"
+    "canvas sidebar"
+    "canvas2 sidebar2"
+    "canvas3 sidebar3"
+    "footer footer";
+}
+
+
+.sidebar.clouds {
+  grid-area: sidebar;
+  overflow-y: auto;
+  overflow-x:hidden;
+  height:30vh;
+
+}
+
+.sidebar.creature {
+  grid-area: sidebar2;
+  overflow-y: auto;
+  overflow-x:hidden;
+  height:30vh;
+  margin-top:-18vh;
+}
+
+.sidebar.landscape {
+  grid-area: sidebar3;
+  overflow-y: auto;
+  overflow-x:hidden;
+  height:24vh;
+  margin-top:-22vh;
+}
+
+.canvas.clouds {
+  grid-area: canvas;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height:48vh;
+}
+
+.canvas.landscape {
+  grid-area: canvas2;
+  display: block;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height:56vh;
+  margin-top: -22vh;
+}
+
+.canvas.creature {
+  grid-area: canvas3;
+  display: block;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height:50vh;
+  margin: auto;
+  margin-top: -70vh;
+
+}
+
+/* clouds styles */
+.sidebar.clouds {
+	overflow-y:scroll;
+	overflow-x:hidden;
+}
+/* hide unused parts */
+.sidebar.clouds .thingy .checkbox {
+  display: none;
+}
+.sidebar.clouds  .thingy.numeric-slider {
+    display: none; 
+}
+/* show cloud settings */
+.sidebar.clouds .cloud-settings .thingy.numeric-slider {
+   display: block; 
+}
+.sidebar.clouds  fieldset label {
+    display: none;
+}
+.clouds.button{
+	margin-top:20px;
+}
+
+/* hide unused parts */
+.sidebar.landscape .thingy .checkbox {
+  display: none;
+}
+
+.sidebar.landscape  fieldset label {
+    display: none;
+}

dist/css/landscape.css

@@ -0,0 +1,26 @@
+.canvas.landscapes {
+  height:84vh;
+}
+
+.sidebar.landscapes {
+  height:84vh;
+	overflow-y:scroll;
+	overflow-x:hidden;
+}
+/* hide unused parts */
+.sidebar.landscapes .thingy .checkbox {
+  display: none;
+}
+.sidebar.landscapes  .thingy.numeric-slider {
+    display: none; 
+}
+/* show landscape settings */
+.sidebar.landscapes .landscape-settings .thingy.numeric-slider {
+   display: block; 
+}
+.sidebar.landscapes  fieldset label {
+    display: none;
+}
+.landscapes.button{
+	margin-top:20px;
+}