added multiple variations of the 2 background images

src/app/journal/journal-character/background/background.component.scss

@@ -9,7 +9,7 @@
   padding: 2rem;
   overflow: auto;
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 }
 

src/app/journal/journal-character/class/class.component.scss

@@ -9,7 +9,7 @@
   padding: 2rem;
   overflow: auto;
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 }
 

src/app/journal/journal-character/combined/combined.component.scss

@@ -9,7 +9,7 @@
   padding: 2rem;
   overflow: auto;
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 }
 

src/app/journal/journal-character/general/general.component.scss

@@ -17,7 +17,7 @@
   border: 1px solid var(--border-color);
   border-radius: 10px;
   box-shadow: var(--shadow);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px;
   overflow: hidden;
 
@@ -89,7 +89,7 @@
     .looks-field {
       width: 12.5rem;
       height: 1.75rem;
-      background-image: url("/assets/images/texture.png");
+      background-image: url("/assets/images/texture-0.jpg");
       border-radius: 4px;
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow);
@@ -108,7 +108,7 @@
     height: 32px !important;
     min-height: 32px !important;
     padding-top: 4px !important;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
   }
 }
 
@@ -126,7 +126,7 @@
     resize: none;
     height: 20rem !important;
     width: 18.75rem;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
   }
 
   .description-wrapper {
@@ -189,5 +189,5 @@
 }
 
 ::ng-deep .mdc-text-field--outlined {
-  background-image: url("/assets/images/texture.png") !important;
+  background-image: url("/assets/images/texture-0.jpg") !important;
 }

src/app/journal/journal-character/species/species.component.scss

@@ -9,7 +9,7 @@
   padding: 2rem 1rem;
   overflow: auto;
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 }
 

src/app/journal/journal-character/story/story.component.scss

@@ -9,7 +9,7 @@
   padding: 2rem;
   overflow: auto;
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 
   .edit {

src/app/journal/journal-character/subclass/subclass.component.scss

@@ -9,7 +9,7 @@
   padding: 2rem;
   overflow: auto;
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 }
 

src/app/journal/journal-home/journal-home.component.scss

@@ -4,5 +4,5 @@
   height: 100vh;
   width: 100vw;
   // background-color: var(--background-color);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
 }

src/app/journal/journal-home/navigation-panel/navigation-panel.component.scss

@@ -23,7 +23,7 @@
   bottom: 0;
   width: 25rem;
   // background-color: var(--background-color);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
   z-index: 1001;
   padding: 1.5rem;
   transform: translateX(-100%);
@@ -51,7 +51,7 @@ ul {
 
   border: solid 1px var(--border-color);
   // background-color: var(--field-background-color);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   transition: transform 0.2s ease-in-out;
@@ -79,7 +79,7 @@ ul {
   font-weight: 500;
   padding: 0.5rem;
   border: solid 1px var(--border-color);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   transition: transform 0.2s ease-in-out;

src/app/journal/journal-inventory/journal-inventory.component.scss

@@ -42,7 +42,7 @@
   border-radius: 10px;
   display: flex;
   flex-direction: column;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border: var(--golder);
 
@@ -112,7 +112,7 @@
   border: var(--golder);
   display: flex;
   flex-direction: column;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 
   .heading-row {
@@ -172,7 +172,7 @@
   // border: 1px solid var(--border-color);
   border-radius: 10px;
   // background-color: var(--field-background-color);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border: var(--golder);
 
@@ -228,7 +228,7 @@
   position: relative;
   border: var(--golder);
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 
   .weight-box {

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.scss

@@ -1,6 +1,6 @@
 .dimensions {
   width: 35rem;
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
 }
 
 .numbers {

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.scss

@@ -3,7 +3,7 @@
   height: 45rem;
   padding: 0;
   overflow: hidden;
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
 }
 
 .content {
@@ -33,7 +33,7 @@
   display: flex;
   align-items: center;
   // justify-content: space-between;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;

src/app/journal/journal-spellbook/journal-spellbook.component.scss

@@ -20,7 +20,7 @@
   div.class:first-child {
     margin-right: 2rem;
   }
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px;
   box-shadow: var(--shadow);
 }
@@ -99,7 +99,7 @@
   min-height: 400px;
   padding: 1rem;
   padding-top: 2rem;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 0 10px 10px;
   box-shadow: var(--shadow);
 }

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -14,7 +14,7 @@
     position: relative;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
-    background-image: url("/assets/images/background.jpg");
+    background-image: url("/assets/images/background-0.jpg");
     filter: brightness(0.8);
 
     &:hover {
@@ -62,7 +62,7 @@
   width: 100%;
   height: 100%;
   // background-color: var(--background-color);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
   filter: brightness(0.9);
   padding-top: 0.375rem;
 }
@@ -95,7 +95,7 @@
     width: 90%;
     box-shadow: var(--shadow);
     cursor: pointer;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
     border: 1px solid var(--border-brown);
     &:hover {
       filter: brightness(0.9);

src/app/journal/journal-spellcards/journal-spellcards.component.scss

@@ -12,7 +12,7 @@
   width: 16rem;
   gap: 1rem;
   padding: 0.25rem 1rem;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border: solid 1px var(--border-color);
   border-bottom: none;
   border-radius: 10px 10px 0 0;
@@ -64,7 +64,7 @@
 .spell-list {
   border: solid 1px var(--border-color);
   height: 22rem;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 10px 10px 10px;
   display: flex;
   flex-direction: row;

src/app/journal/journal-spellcards/spellcard/spellcard.component.scss

@@ -103,7 +103,7 @@
   height: 12rem;
   margin-bottom: 7px;
   z-index: 2;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
 
   // img {
   //   width: 100%;

src/app/journal/journal-stats/ability-panel/ability-panel.component.scss

@@ -1,6 +1,6 @@
 .ability-panel-container {
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.html

@@ -18,10 +18,13 @@
           <div class="cost">{{ "time." + ability.cost | translate }}</div>
         </div>
 
+        <!-- <divider></divider> -->
+
         <p [innerHTML]="ability.shortDescription"></p>
 
         @if (ability.charges != 0) {
-          <div class="charges-box">
+          <!-- <divider class="b-1"></divider> -->
+          <div class="charges-box t-05">
             {{ "abilities.uses" | translate }}
             @if (ability.charges > 9) {
               <div class="usage-box">

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-field.component.scss

@@ -1,7 +1,7 @@
 .attribute-box {
   width: 8rem;
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   text-align: center;

src/app/journal/journal-stats/info-row/conditions/conditions.component.scss

@@ -1,7 +1,7 @@
 .condition-container {
   display: flex;
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 6rem;

src/app/journal/journal-stats/life/life.component.scss

@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   cursor: pointer;

src/app/journal/journal-stats/save-throw-panel/save-throw-panel.component.scss

@@ -2,7 +2,7 @@
 
 .save-throw-panel {
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;

src/app/journal/journal-stats/skill-panel/skill-panel.component.scss

@@ -4,7 +4,7 @@
   flex-direction: column;
   justify-content: space-evenly;
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 37.875rem;

src/app/journal/journal-stats/weapons-container/weapons-container.component.scss

@@ -1,6 +1,6 @@
 .weapon-spell-container {
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -15,9 +15,7 @@
   color: black;
   transition: all 0.25s ease-in-out;
   background-color: var(--tab);
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
+  border: 0;
 
   &.active {
     background-color: var(--tab-active);

src/app/journal/spell-modal/spell-modal.component.scss

@@ -1,7 +1,7 @@
 @import "../../../responsive";
 
 .dimensions {
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
 }
 
 .checkbox-column {

src/styles.scss

@@ -52,7 +52,7 @@
     gap: 0.5rem;
     border-radius: 10px;
     padding: 0.5rem 1rem;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
     border: none;
     box-shadow: var(--shadow);
   }
@@ -183,7 +183,7 @@ input[type="checkbox"] {
   justify-content: space-between;
   align-items: center;
   border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 6rem;
@@ -246,12 +246,13 @@ input[type="checkbox"] {
 
 .dimensions {
   width: 50rem;
-  background-color: var(--modal-background);
+  // background-color: var(--modal-background);
   border-radius: 10px;
-  border: 1px solid var(--border-color);
+  // border: 1px solid var(--border-color);
+  border: var(--golder);
   padding: 0 2rem;
   box-shadow: var(--shadow);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/texture-0.jpg");
 }
 
 .title {