use variables

mystic_forest/custom_portal.css

@@ -5,8 +5,15 @@
 ===============================================================================
 */
 
+:root {
+    --background-color: #141709;
+    --primary-color: #525c2e;
+    --primary-hover-color: #708a00;
+}
+
+
 .ynh-user-portal {
-	background: #141709;
+	background: var(--background-color);
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: center;
@@ -38,7 +45,7 @@
 }
 
 .user-menu, .user-container {
-	background-color: #525c2e;
+	background-color: var(--primary-color);
 	max-width: 21em;
 	margin-left: 38px;
 }
@@ -65,29 +72,24 @@
 
 .login-form .form-group { 
 	margin:0; 
-	border: 0.4em solid #525c2e;
+	border: 0.4em solid var(--primary-color);
 	border-top: none;
 }
 .login-form .btn { margin-top: 0.4em; }
 
-.classic-btn { background: #525c2e; }
-.classic-btn:hover { background: #708a00; }
+.classic-btn { background: var(--primary-color); }
+.classic-btn:hover { background: var(--primary-hover-color); }
 
-.messages { margin: 0 auto; width: 100%; }
-.messages.info { background: #525c2e;}
-
-/*
-.login-form {
-    max-width: 21em;
+.messages { 
     margin: 0; 
-    display: flex;
-    flex-flow: column wrap;
-    align-items: stretch;
+    /*width: 100%; */
 }
-.login-form label::before { background: #f0f1f5; }
 
-.content { padding: 1em; }
-*/
+.messages.info { 
+    background: var(--primary-color);
+}
+
+/* Tiles colors are copied from default theme */
 
 .bluebg {
     background: #3498DB!important;