Global error pages

Author: AramManukyan

src/app/pages/error-404-alt/error-404-alt-page.hbs

@@ -4,7 +4,7 @@ page: error-404-alt
 {{#extend "auth/auth-layout"}}
 	{{#content "body"}}
 
-			<div class="error-card center">
+			<div class="error-card global">
 				<div class="error-title-block">
 					<h1 class="error-title">404</h1>
 					<h2 class="error-sub-title">

src/app/pages/error-500-alt/error-500-alt-page.hbs

@@ -4,7 +4,7 @@ page: error-500-alt
 {{#extend "auth/auth-layout"}}
 	{{#content "body"}}
 
-			<div class="error-card center">
+			<div class="error-card global">
 				<div class="error-title-block">
 					<h1 class="error-title">500</h1>
 					<h2 class="error-sub-title">

src/app/pages/error.scss

@@ -3,21 +3,13 @@
     min-height: 330px;
     margin: 60px auto;
 
-    &.center {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translateY(-50%) translateX(-50%);
-		margin: 0;
-    }
-
     .error-title {
 		font-size: 150px;
 		line-height: 150px;
 		font-weight: 700;
 		color: #252932;
 		text-align: center;
-		text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px, rgba(61, 61, 61, 0.3) 3px 3px;
+		text-shadow: rgba(61, 61, 61, 0.3) .5px .5px, rgba(61, 61, 61, 0.2) 1px 1px, rgba(61, 61, 61, 0.3) 1.5px 1.5px;
 	}
 
 	.error-sub-title {
@@ -33,14 +25,32 @@
 			visibility: visible;
 		}
 	}
+
+	&.global {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translateY(-50%) translateX(-50%);
+		margin: 0;
+
+		.error-title {
+			color: #ffffff;
+		}
+
+		.error-sub-title,
+		.error-container {
+			color: #ffffff;
+		}
+    }
 }
 
 @include media(md) {
 	.error-card {
 		width: 50%;
 
-		&.center {
+		&.global {
 			position: relative;
+			top: 25%;
 			left: 0;
 			transform: inherit;
 			margin: 40px auto;
@@ -52,8 +62,9 @@
 	.error-card {
 		width: 90%;
 
-		&.center {
+		&.global {
 			position: relative;
+			top: 25%;
 			left: 0;
 			transform: inherit;
 			margin: 40px auto;