gradients done, found some transform issues, added a testing rml file

assets/main.rcss

@@ -20,11 +20,21 @@ body {
     box-sizing: border-box;
 }
 
-div, section, article, header, footer, main, nav, aside {
+div,
+section,
+article,
+header,
+footer,
+main,
+nav,
+aside {
     display: block;
 }
 
-span, em, strong, a {
+span,
+em,
+strong,
+a {
     display: inline;
 }
 
@@ -34,18 +44,40 @@ p {
     margin: 1em 0px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     display: block;
     font-weight: bold;
     margin: 0.83em 0px;
 }
 
-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.17em; }
-h4 { font-size: 1em; }
-h5 { font-size: 0.83em; }
-h6 { font-size: 0.67em; }
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+h3 {
+    font-size: 1.17em;
+}
+
+h4 {
+    font-size: 1em;
+}
+
+h5 {
+    font-size: 0.83em;
+}
+
+h6 {
+    font-size: 0.67em;
+}
 
 em {
     font-style: italic;
@@ -72,7 +104,8 @@ blockquote {
     color: #555555;
 }
 
-code, pre {
+code,
+pre {
     font-family: "rmlui-debugger-font";
     background-color: #606060;
     color: #000000;
@@ -88,7 +121,8 @@ pre {
 }
 
 /* Lists */
-ul, ol {
+ul,
+ol {
     display: block;
     margin: 1em 0px;
     padding-left: 40px;
@@ -109,7 +143,8 @@ tr {
     display: table-row;
 }
 
-td, th {
+td,
+th {
     display: table-cell;
     padding: 4px 8px;
     text-align: left;
@@ -128,14 +163,19 @@ colgroup {
     display: table-column-group;
 }
 
-thead, tbody, tfoot {
+thead,
+tbody,
+tfoot {
     display: table-row-group;
 }
 
 /* ==========================================================================
    Form Inputs & Interactive UI Components
    ========================================================================== */
-button, input, select, textarea {
+button,
+input,
+select,
+textarea {
     display: inline-block;
     font-family: "rmlui-debugger-font";
     font-size: 14px;
@@ -144,7 +184,9 @@ button, input, select, textarea {
 }
 
 /* Traditional gray bevel button style */
-button, input[type="submit"], input[type="button"] {
+button,
+input[type="submit"],
+input[type="button"] {
     padding: 4px 12px;
     min-width: 40px;
     background-color: #e1e1e1;
@@ -153,25 +195,33 @@ button, input[type="submit"], input[type="button"] {
     text-align: center;
 }
 
-button:hover, input[type="submit"]:hover, input[type="button"]:hover {
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
     background-color: #d0d0d0;
     border: 1px #4f4f4f;
 }
 
-button:active, input[type="submit"]:active, input[type="button"]:active {
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active {
     background-color: #b5b5b5;
     border: 1px #000000;
 }
 
 /* Standard text field styling */
-input[type="text"], input[type="password"], textarea {
+input[type="text"],
+input[type="password"],
+textarea {
     padding: 4px;
     background-color: #ffffff;
     color: #000000;
     border: 1px #767676;
 }
 
-input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+input[type="text"]:focus,
+input[type="password"]:focus,
+textarea:focus {
     border: 1px #005aff;
 }
 
@@ -214,7 +264,8 @@ tab {
 
 tab:selected {
     background-color: #ffffff;
-    border-bottom: 1px #ffffff; /* Overlap the bottom border line */
+    border-bottom: 1px #ffffff;
+    /* Overlap the bottom border line */
     font-weight: bold;
 }
 
@@ -236,7 +287,8 @@ progress {
 progress-value {
     display: block;
     height: 100%;
-    background-color: #0078d7; /* Classic Windows Blue fill */
+    background-color: #0078d7;
+    /* Classic Windows Blue fill */
 }
 
 /* ==========================================================================
@@ -265,3 +317,9 @@ progress-value {
 .hidden {
     display: none;
 }
+
+
+
+div.gradient-test {
+    decorator: linear-gradient(to right, #000000, #ffffff);
+}