Background image

RpgRoller/wwwroot/styles.css

@@ -2,7 +2,7 @@
     --bg-top: #f7f0d8;
     --bg-bottom: #ecdfc4;
     --button-hover: #dccfb4;
-    --card: #fffaf0;
+    --card: #fffaf0e0;
     --card-border: #c3b28b;
     --text: #2b2418;
     --muted: #6a5b3f;
@@ -27,9 +27,16 @@ body {
     height: 100%;
 }
 
+html {
+    background-image: url("/images/rpg.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+}
+
 body {
-    background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.32), transparent 45%),
-    linear-gradient(165deg, var(--bg-top), var(--bg-bottom));
+    background: transparent;
     color: var(--text);
     font-family:
             "Baloo 2",
@@ -139,7 +146,7 @@ h3 {
 }
 
 .card {
-    background: color-mix(in srgb, var(--card) 94%, #ffffff 6%);
+    background: var(--card);
     border: 1px solid var(--card-border);
     border-radius: 0.8rem;
     padding: 0.7rem;
@@ -375,7 +382,8 @@ select:focus-visible {
     align-items: center;
     justify-content: space-between;
     background-color: #f8f0de;
-    padding-left: 0.1rem;
+    padding: 0.1rem;
+    border-top: 1px solid var(--card-border);
     gap: 0.5rem;
 }