Adjustments

examples/website/style.css

@@ -15,12 +15,23 @@ body {
     overflow-y: auto;
 }
 
+.background {
+    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
 .page-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 100%;
-    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
 header {
@@ -57,7 +68,7 @@ main {
     gap: 20px;
     justify-items: center;
     align-items: center;
-    padding: 32px 12vw 32px 12vw;
+    padding: 32px;
 }
 
 .diamond-parent {
@@ -77,8 +88,6 @@ main {
 .diamond-result {
     grid-column: 1 / -1;
     grid-row: 3;
-    display: flex;
-    align-items: center;
 }
 
 .diamond-result label {
@@ -87,13 +96,12 @@ main {
 }
 
 .diamond-result svg {
-    margin-left: 6px;
+    width: 20px;
+    height: 20px;
+    margin-left: 8px;
 }
 
 .text-area-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     width: 100%;
     height: 100%;
     background: #fff;
@@ -104,9 +112,11 @@ main {
 }
 
 label {
+    display: inline-block;
     margin-bottom: 8px;
     font-weight: 600;
     color: #2451a6;
+    cursor: help;
 }
 
 .box {
@@ -144,7 +154,7 @@ textarea {
 .Right,
 .AddedFromRight,
 .RemovedFromRight {
-    background: #8575ed;
+    background: #85bff7;
 }
 
 .RemovedFromLeft,
@@ -193,10 +203,7 @@ footer {
     justify-content: center;
     align-items: center;
     color: #5a6272;
-    font-size: 1rem;
-    box-shadow: 0 -4px 12px 0 rgba(28, 28, 87, 0.1),
-        0 -1px 2px 0 rgba(1, 1, 3, 0.1);
-    background-color: #fff;
+    border-radius: 32px;
 }
 
 .github-link > svg {