From b4ce323f66aa566508c35df41af3b86ee725c9e4 Mon Sep 17 00:00:00 2001
From: Agampreet Singh <68941022+agam778@users.noreply.github.com>
Date: Sun, 21 Aug 2022 14:42:35 +0530
Subject: [PATCH] Add new loading screen design

---
 docs/loading/MSlogo.svg |  19 --
 docs/loading/index.html |  34 +++-
 docs/loading/script.js  | 390 ++++++++++++++++++++++++++++++++++++++++
 docs/loading/style.css  | 345 +++++++++++------------------------
 4 files changed, 519 insertions(+), 269 deletions(-)
 delete mode 100644 docs/loading/MSlogo.svg
 mode change 100644 => 100755 docs/loading/index.html
 create mode 100755 docs/loading/script.js
 mode change 100644 => 100755 docs/loading/style.css
diff --git a/docs/loading/MSlogo.svg b/docs/loading/MSlogo.svg
deleted file mode 100644
index ebc8b8e..0000000
--- a/docs/loading/MSlogo.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="57px" height="30px" viewBox="0 0 57 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
-    <title>MDlogo</title>
-    <desc>Created with Sketch.</desc>
-    <defs/>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="42">
-        <g id="thumb" transform="translate(-4.000000, -18.000000)">
-            <g id="MD" transform="translate(2.000000, 4.000000)">
-                <text id="M" font-family="Roboto-Black, Roboto" font-weight="700" letter-spacing="5.46875048" fill="#000000">
-                    <tspan x="0.0136716366" y="44">M</tspan>
-                </text>
-                <text id="D" font-family="Roboto-Light, Roboto" font-weight="300" letter-spacing="5.46875" fill="#A8244F">
-                    <tspan x="33.484375" y="44">S</tspan>
-                </text>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/docs/loading/index.html b/docs/loading/index.html
old mode 100644
new mode 100755
index 5cb47b1..29ef157
--- a/docs/loading/index.html
+++ b/docs/loading/index.html
@@ -5,18 +5,38 @@
     <title>Loading MS-Office-Electron</title>
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
     />
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-    <div class="loader"></div>
-    <div class="shadow"></div>
+    <!-- partial:index.partial.html -->
+    <div id="particles-background" class="vertical-centered-box"></div>
+    <div id="particles-foreground" class="vertical-centered-box"></div>
 
-    <div class="logo">
-      <a href="https://github.com/agam778/MS-Office-Electron" target="_blank"
-        ><img src="./MSlogo.svg" alt="MS-Office-Electron"
-      /></a>
+    <div class="vertical-centered-box">
+      <div class="content">
+        <div class="loader-circle"></div>
+        <div class="loader-line-mask">
+          <div class="loader-line"></div>
+        </div>
+        <img
+          width="50px"
+          height="auto"
+          viewBox="0 0 36 24"
+          src="https://github.com/agam778/MS-Office-Electron/raw/main/assets/icon.png"
+        />
+      </div>
     </div>
+    <!-- partial -->
+    <script src="./script.js"></script>
+    <!-- add text in bottom left corner -->
+    <style>
+
+    </style>
+    <div class="credittext">
+      <p>
+        Design Credits: <a href="https://codepen.io/kenchen/pen/vYwvbZ">kenchen</a>
+      </p>
   </body>
 </html>
diff --git a/docs/loading/script.js b/docs/loading/script.js
new file mode 100755
index 0000000..3de0fb5
--- /dev/null
+++ b/docs/loading/script.js
@@ -0,0 +1,390 @@
+/*!
+ * Particleground
+ *
+ * @author Jonathan Nicol - @mrjnicol
+ * @version 1.1.0
+ * @description Creates a canvas based particle system background
+ *
+ * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
+ */
+!(function (a, b) {
+  "use strict";
+  function c(a) {
+    a = a || {};
+    for (var b = 1; b < arguments.length; b++) {
+      var c = arguments[b];
+      if (c)
+        for (var d in c)
+          c.hasOwnProperty(d) &&
+            ("object" == typeof c[d] ? deepExtend(a[d], c[d]) : (a[d] = c[d]));
+    }
+    return a;
+  }
+  function d(d, g) {
+    function h() {
+      if (y) {
+        (r = b.createElement("canvas")),
+          (r.className = "pg-canvas"),
+          (r.style.display = "block"),
+          d.insertBefore(r, d.firstChild),
+          (s = r.getContext("2d")),
+          i();
+        for (
+          var c = Math.round((r.width * r.height) / g.density), e = 0;
+          c > e;
+          e++
+        ) {
+          var f = new n();
+          f.setStackPos(e), z.push(f);
+        }
+        a.addEventListener(
+          "resize",
+          function () {
+            k();
+          },
+          !1
+        ),
+          b.addEventListener(
+            "mousemove",
+            function (a) {
+              (A = a.pageX), (B = a.pageY);
+            },
+            !1
+          ),
+          D &&
+            !C &&
+            a.addEventListener(
+              "deviceorientation",
+              function () {
+                (F = Math.min(Math.max(-event.beta, -30), 30)),
+                  (E = Math.min(Math.max(-event.gamma, -30), 30));
+              },
+              !0
+            ),
+          j(),
+          q("onInit");
+      }
+    }
+    function i() {
+      (r.width = d.offsetWidth),
+        (r.height = d.offsetHeight),
+        (s.fillStyle = g.dotColor),
+        (s.strokeStyle = g.lineColor),
+        (s.lineWidth = g.lineWidth);
+    }
+    function j() {
+      if (y) {
+        (u = a.innerWidth),
+          (v = a.innerHeight),
+          s.clearRect(0, 0, r.width, r.height);
+        for (var b = 0; b < z.length; b++) z[b].updatePosition();
+        for (var b = 0; b < z.length; b++) z[b].draw();
+        G || (t = requestAnimationFrame(j));
+      }
+    }
+    function k() {
+      i();
+      for (
+        var a = d.offsetWidth, b = d.offsetHeight, c = z.length - 1;
+        c >= 0;
+        c--
+      )
+        (z[c].position.x > a || z[c].position.y > b) && z.splice(c, 1);
+      var e = Math.round((r.width * r.height) / g.density);
+      if (e > z.length)
+        for (; e > z.length; ) {
+          var f = new n();
+          z.push(f);
+        }
+      else e < z.length && z.splice(e);
+      for (c = z.length - 1; c >= 0; c--) z[c].setStackPos(c);
+    }
+    function l() {
+      G = !0;
+    }
+    function m() {
+      (G = !1), j();
+    }
+    function n() {
+      switch (
+        (this.stackPos,
+        (this.active = !0),
+        (this.layer = Math.ceil(3 * Math.random())),
+        (this.parallaxOffsetX = 0),
+        (this.parallaxOffsetY = 0),
+        (this.position = {
+          x: Math.ceil(Math.random() * r.width),
+          y: Math.ceil(Math.random() * r.height),
+        }),
+        (this.speed = {}),
+        g.directionX)
+      ) {
+        case "left":
+          this.speed.x = +(
+            -g.maxSpeedX +
+            Math.random() * g.maxSpeedX -
+            g.minSpeedX
+          ).toFixed(2);
+          break;
+        case "right":
+          this.speed.x = +(Math.random() * g.maxSpeedX + g.minSpeedX).toFixed(
+            2
+          );
+          break;
+        default:
+          (this.speed.x = +(
+            -g.maxSpeedX / 2 +
+            Math.random() * g.maxSpeedX
+          ).toFixed(2)),
+            (this.speed.x += this.speed.x > 0 ? g.minSpeedX : -g.minSpeedX);
+      }
+      switch (g.directionY) {
+        case "up":
+          this.speed.y = +(
+            -g.maxSpeedY +
+            Math.random() * g.maxSpeedY -
+            g.minSpeedY
+          ).toFixed(2);
+          break;
+        case "down":
+          this.speed.y = +(Math.random() * g.maxSpeedY + g.minSpeedY).toFixed(
+            2
+          );
+          break;
+        default:
+          (this.speed.y = +(
+            -g.maxSpeedY / 2 +
+            Math.random() * g.maxSpeedY
+          ).toFixed(2)),
+            (this.speed.x += this.speed.y > 0 ? g.minSpeedY : -g.minSpeedY);
+      }
+    }
+    function o(a, b) {
+      return b ? void (g[a] = b) : g[a];
+    }
+    function p() {
+      console.log("destroy"),
+        r.parentNode.removeChild(r),
+        q("onDestroy"),
+        f && f(d).removeData("plugin_" + e);
+    }
+    function q(a) {
+      void 0 !== g[a] && g[a].call(d);
+    }
+    var r,
+      s,
+      t,
+      u,
+      v,
+      w,
+      x,
+      y = !!b.createElement("canvas").getContext,
+      z = [],
+      A = 0,
+      B = 0,
+      C = !navigator.userAgent.match(
+        /(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i
+      ),
+      D = !!a.DeviceOrientationEvent,
+      E = 0,
+      F = 0,
+      G = !1;
+    return (
+      (g = c({}, a[e].defaults, g)),
+      (n.prototype.draw = function () {
+        s.beginPath(),
+          s.arc(
+            this.position.x + this.parallaxOffsetX,
+            this.position.y + this.parallaxOffsetY,
+            g.particleRadius / 2,
+            0,
+            2 * Math.PI,
+            !0
+          ),
+          s.closePath(),
+          s.fill(),
+          s.beginPath();
+        for (var a = z.length - 1; a > this.stackPos; a--) {
+          var b = z[a],
+            c = this.position.x - b.position.x,
+            d = this.position.y - b.position.y,
+            e = Math.sqrt(c * c + d * d).toFixed(2);
+          e < g.proximity &&
+            (s.moveTo(
+              this.position.x + this.parallaxOffsetX,
+              this.position.y + this.parallaxOffsetY
+            ),
+            g.curvedLines
+              ? s.quadraticCurveTo(
+                  Math.max(b.position.x, b.position.x),
+                  Math.min(b.position.y, b.position.y),
+                  b.position.x + b.parallaxOffsetX,
+                  b.position.y + b.parallaxOffsetY
+                )
+              : s.lineTo(
+                  b.position.x + b.parallaxOffsetX,
+                  b.position.y + b.parallaxOffsetY
+                ));
+        }
+        s.stroke(), s.closePath();
+      }),
+      (n.prototype.updatePosition = function () {
+        if (g.parallax) {
+          if (D && !C) {
+            var a = (u - 0) / 60;
+            w = (E - -30) * a + 0;
+            var b = (v - 0) / 60;
+            x = (F - -30) * b + 0;
+          } else (w = A), (x = B);
+          (this.parallaxTargX =
+            (w - u / 2) / (g.parallaxMultiplier * this.layer)),
+            (this.parallaxOffsetX +=
+              (this.parallaxTargX - this.parallaxOffsetX) / 10),
+            (this.parallaxTargY =
+              (x - v / 2) / (g.parallaxMultiplier * this.layer)),
+            (this.parallaxOffsetY +=
+              (this.parallaxTargY - this.parallaxOffsetY) / 10);
+        }
+        var c = d.offsetWidth,
+          e = d.offsetHeight;
+        switch (g.directionX) {
+          case "left":
+            this.position.x + this.speed.x + this.parallaxOffsetX < 0 &&
+              (this.position.x = c - this.parallaxOffsetX);
+            break;
+          case "right":
+            this.position.x + this.speed.x + this.parallaxOffsetX > c &&
+              (this.position.x = 0 - this.parallaxOffsetX);
+            break;
+          default:
+            (this.position.x + this.speed.x + this.parallaxOffsetX > c ||
+              this.position.x + this.speed.x + this.parallaxOffsetX < 0) &&
+              (this.speed.x = -this.speed.x);
+        }
+        switch (g.directionY) {
+          case "up":
+            this.position.y + this.speed.y + this.parallaxOffsetY < 0 &&
+              (this.position.y = e - this.parallaxOffsetY);
+            break;
+          case "down":
+            this.position.y + this.speed.y + this.parallaxOffsetY > e &&
+              (this.position.y = 0 - this.parallaxOffsetY);
+            break;
+          default:
+            (this.position.y + this.speed.y + this.parallaxOffsetY > e ||
+              this.position.y + this.speed.y + this.parallaxOffsetY < 0) &&
+              (this.speed.y = -this.speed.y);
+        }
+        (this.position.x += this.speed.x), (this.position.y += this.speed.y);
+      }),
+      (n.prototype.setStackPos = function (a) {
+        this.stackPos = a;
+      }),
+      h(),
+      { option: o, destroy: p, start: m, pause: l }
+    );
+  }
+  var e = "particleground",
+    f = a.jQuery;
+  (a[e] = function (a, b) {
+    return new d(a, b);
+  }),
+    (a[e].defaults = {
+      minSpeedX: 0.1,
+      maxSpeedX: 0.7,
+      minSpeedY: 0.1,
+      maxSpeedY: 0.7,
+      directionX: "center",
+      directionY: "center",
+      density: 1e4,
+      dotColor: "#666666",
+      lineColor: "#666666",
+      particleRadius: 7,
+      lineWidth: 1,
+      curvedLines: !1,
+      proximity: 100,
+      parallax: !0,
+      parallaxMultiplier: 5,
+      onInit: function () {},
+      onDestroy: function () {},
+    }),
+    f &&
+      (f.fn[e] = function (a) {
+        if ("string" == typeof arguments[0]) {
+          var b,
+            c = arguments[0],
+            g = Array.prototype.slice.call(arguments, 1);
+          return (
+            this.each(function () {
+              f.data(this, "plugin_" + e) &&
+                "function" == typeof f.data(this, "plugin_" + e)[c] &&
+                (b = f.data(this, "plugin_" + e)[c].apply(this, g));
+            }),
+            void 0 !== b ? b : this
+          );
+        }
+        return "object" != typeof a && a
+          ? void 0
+          : this.each(function () {
+              f.data(this, "plugin_" + e) ||
+                f.data(this, "plugin_" + e, new d(this, a));
+            });
+      });
+})(window, document),
+  /**
+   * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+   * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+   * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+   * @license: MIT license
+   */ (function () {
+    for (
+      var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0;
+      c < b.length && !window.requestAnimationFrame;
+      ++c
+    )
+      (window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"]),
+        (window.cancelAnimationFrame =
+          window[b[c] + "CancelAnimationFrame"] ||
+          window[b[c] + "CancelRequestAnimationFrame"]);
+    window.requestAnimationFrame ||
+      (window.requestAnimationFrame = function (b) {
+        var c = new Date().getTime(),
+          d = Math.max(0, 16 - (c - a)),
+          e = window.setTimeout(function () {
+            b(c + d);
+          }, d);
+        return (a = c + d), e;
+      }),
+      window.cancelAnimationFrame ||
+        (window.cancelAnimationFrame = function (a) {
+          clearTimeout(a);
+        });
+  })();
+
+particleground(document.getElementById("particles-foreground"), {
+  dotColor: "rgba(255, 255, 255, 1)",
+  lineColor: "rgba(255, 255, 255, 0.05)",
+  minSpeedX: 0.3,
+  maxSpeedX: 0.6,
+  minSpeedY: 0.3,
+  maxSpeedY: 0.6,
+  density: 50000, // One particle every n pixels
+  curvedLines: false,
+  proximity: 250, // How close two dots need to be before they join
+  parallaxMultiplier: 10, // Lower the number is more extreme parallax
+  particleRadius: 4, // Dot size
+});
+
+particleground(document.getElementById("particles-background"), {
+  dotColor: "rgba(255, 255, 255, 0.5)",
+  lineColor: "rgba(255, 255, 255, 0.05)",
+  minSpeedX: 0.075,
+  maxSpeedX: 0.15,
+  minSpeedY: 0.075,
+  maxSpeedY: 0.15,
+  density: 30000, // One particle every n pixels
+  curvedLines: false,
+  proximity: 20, // How close two dots need to be before they join
+  parallaxMultiplier: 20, // Lower the number is more extreme parallax
+  particleRadius: 2, // Dot size
+});
diff --git a/docs/loading/style.css b/docs/loading/style.css
old mode 100644
new mode 100755
index e3de86a..6a74a8c
--- a/docs/loading/style.css
+++ b/docs/loading/style.css
@@ -1,248 +1,107 @@
-@-webkit-keyframes mainAnimation {
-  0% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 150px;
-    transform: translateX(-50px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 150px;
-    transform-origin: bottom right;
-    transform: translateX(-150px) translateY(0px) rotate(90deg);
-  }
-  80% {
-    width: 50px;
-    transform: translateX(-25px) translateY(0px) rotate(90deg);
-  }
-  100% {
-    width: 50px;
-    transform: translateX(-50px) translateY(0px) rotate(90deg);
-  }
-}
-@keyframes mainAnimation {
-  0% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 150px;
-    transform: translateX(-50px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 150px;
-    transform-origin: bottom right;
-    transform: translateX(-150px) translateY(0px) rotate(90deg);
-  }
-  80% {
-    width: 50px;
-    transform: translateX(-25px) translateY(0px) rotate(90deg);
-  }
-  100% {
-    width: 50px;
-    transform: translateX(-50px) translateY(0px) rotate(90deg);
-  }
-}
-@-webkit-keyframes secundaryAnimation {
-  0% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  40% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  60% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-}
-@keyframes secundaryAnimation {
-  0% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  40% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  60% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-}
-@-webkit-keyframes shadowAnimation {
-  0% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 200px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-}
-@keyframes shadowAnimation {
-  0% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 200px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-}
-@-webkit-keyframes float {
-  0% {
-    top: 50%;
-  }
-  50% {
-    top: 51%;
-  }
-  100% {
-    top: 50%;
-  }
-}
-@keyframes float {
-  0% {
-    top: 50%;
-  }
-  50% {
-    top: 51%;
-  }
-  100% {
-    top: 50%;
-  }
-}
-html,
 body {
-  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: "proxima-nova-soft", sans-serif;
+  -webkit-user-select: none;
+  overflow: hidden;
 }
-
-body {
-  position: relative;
-  background: #5684f0;
-  background: linear-gradient(135deg, #5684f0 0%, #fa7587 100%);
-}
-
-.loader {
+body .vertical-centered-box {
   position: absolute;
-  width: 50px;
-  height: 50px;
-  top: 50%;
-  left: 50%;
-  margin-top: -25px;
-  margin-left: -25px;
-  background-color: #fff5a5;
-  transform: translateX(0px) translateY(0px) rotate(0deg);
-  -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;
-  animation: mainAnimation 2.6s ease 0s infinite forwards;
-  z-index: 2;
-}
-.loader:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  top: 0;
-  left: -50px;
-  background-color: #fff5a5;
-  transform-origin: top right;
-  transform: translateX(0px) translateY(0px) rotate(0deg);
-  -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;
-  animation: secundaryAnimation 2.6s ease 0s infinite forwards;
-}
-
-.shadow {
-  position: absolute;
-  width: 100px;
-  height: 10px;
-  top: 50%;
-  left: 50%;
-  margin-top: 50px;
-  margin-left: -75px;
-  border-radius: 50%;
-  background-color: #95a5a6;
-  transform: translateX(0px) translateY(0px) rotate(0deg);
-  -webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards,
-    float 5s ease-in-out 0s infinite forwards;
-  animation: shadowAnimation 2.6s ease 0s infinite forwards,
-    float 5s ease-in-out 0s infinite forwards;
-  filter: blur(5px);
-  z-index: 1;
-}
-
-.logo {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  width: 42px;
-  height: 42px;
-  padding: 12px 5px;
-  margin-left: -21px;
-  box-sizing: border-box;
-  background-color: white;
-  border-radius: 50%;
-  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-.logo:hover {
-  transform: scale(1.4);
-}
-.logo img {
   width: 100%;
-  height: auto;
-  margin: 0 auto;
+  height: 100%;
+  text-align: center;
 }
+body .vertical-centered-box:after {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em;
+}
+body .vertical-centered-box .content {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 0;
+}
+* {
+  transition: all 0.3s;
+}
+body {
+  background: #2c2d44;
+}
+.loader-circle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  margin-left: -60px;
+  margin-top: -60px;
+}
+.loader-line-mask {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 60px;
+  height: 120px;
+  margin-left: -60px;
+  margin-top: -60px;
+  overflow: hidden;
+  transform-origin: 60px 60px;
+  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+  animation: rotate 1.2s infinite linear;
+}
+.loader-line-mask .loader-line {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+#particles-background,
+#particles-foreground {
+  left: -51%;
+  top: -51%;
+  width: 202%;
+  height: 202%;
+  transform: scale3d(0.5, 0.5, 1);
+}
+#particles-background {
+  background: #2c2d44;
+  background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
+  background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
+  background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.credittext {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  color: white;
+}
\ No newline at end of file
