1 files changed, 60 insertions, 16 deletions

diff --git a/docs/magisphere/magisphere.css b/docs/magisphere/magisphere.css
index 1ba88c9..63845ca 100644
--- a/docs/magisphere/magisphere.css
+++ b/docs/magisphere/magisphere.css
@@ -34,11 +34,10 @@ html, body {
   margin: 0; padding: 0; width: 100%; height: 100%;
   font-family: nhg, sans-serif;
   color: rgba(255,255,255,0.9);
-  overflow: hidden;
 }
 html {
   background-color: rgb(0,0,0);
-  background-image: linear-gradient(rgba(30, 0, 0, 1.0), rgba(30, 0, 0, 0.0));
+  background-image: linear-gradient(rgba(30, 0, 90, 1.0), rgba(30, 0, 0, 0.0));
   background-attachment: fixed;
   transition: background-color 1s;
 }
@@ -64,7 +63,6 @@ body.loading {
   background-color: rgba(0,0,0,0.9);
   background-image: linear-gradient(rgba(10,0,0,1.0), rgba(0,0,20,1.0));
   opacity: 0.4;
-  transform: skewY(3deg);
   overflow: hidden;
   pointer-events: none;
 }
@@ -74,7 +72,6 @@ body.loading {
   width: 100%; height: 80%;
   background-color: rgba(0,0,0,1.0);
   background-image: linear-gradient(rgba(0,0,0,1.0), rgba(10,0,0,1.0));
-  transform: skewY(3deg);
   overflow: hidden;
   pointer-events: none;
 }
@@ -117,21 +114,28 @@ img.cover {
   justify-content: space-between;
 }
 .content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0) skewY(3deg);
-  background: black;
   padding: 20px;
   font-family: 'alarmclock', monospace;
-  color: #800;
+  color: #f88;
   font-size: 32px;
-  margin: 0;
+  margin: 20px;
   letter-spacing: -2px;
-  cursor: pointer;
   opacity: 0.9;
   transition: opacity 500ms;
-  text-align: justify;
+  text-align: left;
+  text-transform: uppercase;
+}
+.content img {
+  width: 600px;
+  max-width: 100%;
+}
+.content span {
+  box-shadow: 
+    -5px -5px 0 #000, 
+    5px -5px 0 #000, 
+    -5px 5px 0 #000, 
+    5px 5px 0 #000;
+  background: #000;
 }
 .loading .content b,
 .loading .content a {
@@ -139,11 +143,11 @@ img.cover {
 }
 .content b {
   transition: color 1500ms;
-  color: red;
+  color: #f08;
 }
 .content a {
   transition: color 1500ms;
-  color: red;
+  color: #f08;
   border: 0;
   text-decoration: none;
 }
@@ -154,6 +158,45 @@ img.cover {
 .desktop h1:hover {
   opacity: 1;
 }
+.bg {
+  position: fixed;
+  bottom: 0; right: 0;
+  z-index: -1;
+  width: 60%;
+  height: 70%;
+  text-align: right;
+}
+.bg:nth-child(3n) img {
+  transform: skew(10deg, -10deg) rotate(5deg);
+  opacity: 0.09;
+}
+.bg:nth-child(3n+1) {
+  width: 100%;
+  height: 100%;
+  -webkit-filter: invert(100%);
+  opacity: 0.1;
+}
+.bg:nth-child(3n+1) img {
+  transform: skew(20deg, 10deg) rotate(-20deg);
+  opacity: 0.25;
+  width: 100%;
+}
+.bg:nth-child(3n+2) {
+  width: 100%;
+  height: 100%;
+  -webkit-filter: invert(100%);
+  opacity: 0.3;
+}
+.bg:nth-child(3n+2) img {
+  transform: rotate(10deg);
+  opacity: 0.25;
+  width: 100%;
+}
+.bg img {
+  max-width: 100%;
+  height: 100%;
+  -webkit-filter: blur(2px);
+}
 h2 {
   margin: 0;
   padding: 0 0 15px 0;
@@ -339,4 +382,5 @@ section {
     width: 36px;
     height: 36px;
   }
-}
\ No newline at end of file
+}
+