Created main page structure and animation effects

www/css/main.css

@@ -87,6 +87,61 @@ textarea {
    Author's custom styles
    ========================================================================== */
 
+body { overflow-x: hidden; }
+
+#view {
+  width: 100vw;
+}
+
+#container {
+  min-height: 100vh;
+  width: 100vw;
+  position: relative;
+}
+
+.main {
+  float: left;
+  overflow: hidden;
+}
+
+.splash {
+  float: left;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+@media (orientation: landscape) {
+  body {
+    background-color: #FF0000;
+  }
+
+  .main {
+    width: 50vw;
+    min-height: 100vh;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    background-color: #00FF00;
+  }
+
+  #container {
+    width: 100vw;
+    left: 0;
+  }
+
+  .main {
+    width: 100vw;
+    min-height: 50vh;
+  }
+
+  .splash {
+    display: none;
+  }
+}
+
 /* ==========================================================================
    Helper classes
    ========================================================================== */
@@ -260,4 +315,3 @@ textarea {
     page-break-after: avoid;
   }
 }
-