Making it look better

css/style.css

@@ -1,3 +1,7 @@
+* {
+    font-family: 'Ubuntu', sans-serif !important;
+}
+
 body, body * {
     padding: 0;
     margin: 0;
@@ -12,9 +16,9 @@ body {
 
 
 :root {
-    --background-color: #f7fff7;
-    --shadow-color: #00000020;
-    --text-color: #292f36;
+    --background-color: #A020F0;
+    --shadow-color: #00000090;
+    --text-color: #FFFFFF;
 }
 
 
@@ -24,7 +28,15 @@ body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: var(--background-color);
+    /*background-color: var(--background-color);*/
+    background-image:
+         -webkit-linear-gradient(-45deg, 
+                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
+                           rgba(0,0, 0, .1) 66%, transparent 66%),
+         -webkit-linear-gradient(top, 
+                           rgba(255, 255, 255, .25), 
+                           rgba(0, 0, 0, .25)),
+         -webkit-linear-gradient(left, #0074cc, #a700cc);
     box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
     width: 500px;
     height: 180px;
@@ -40,8 +52,9 @@ body {
 
 p {
     color: var(--text-color);
-    font-size: 5rem;
+    font-size: 5.8rem;
     z-index: 1;
+    text-shadow: 0px 0px 10px var(--shadow-color);
 }
 
 img {
@@ -72,7 +85,7 @@ canvas {
     z-index: 5;
     font-weight: 400;
     font-size: 3.25rem;
-    color: var(--background-color);
-    text-shadow: 0 0 1.5rem var(--text-color);
+    /*color: var(--background-color);*/
+    color:white;
     transition: top 1s ease-out, opacity .5s ease-out;
 }