1 files changed, 104 insertions, 17 deletions

diff --git a/index.css b/index.css
index 8b32243..2a42482 100644
--- a/index.css
+++ b/index.css
@@ -1,36 +1,68 @@
+:root {
+    --colorscheme-fighter:  #9E3A2F;
+    --colorscheme-barbarian: #905945;
+    --colorscheme-wizard: #4265B8;
+    --colorscheme-bard: #B15063;
+    --colorscheme-paladin: #94C6E3;
+    --colorscheme-cleric: #ECCE65;
+    --colorscheme-warlock: #8576C2;
+    --colorscheme-druid: #5FB375;
+    --colorscheme-sorcerer: #8D578E;
+    --colorscheme-rouge: #525247;
+    --colorscheme-ranger: #66B99E;
+    --colorscheme-monk: #AB8C4E;
+    --colorscheme-focus: #B85812;
+
+    --font-size: 18px;
+}
+
 * {
     margin: 0px;
     padding: 0px;
     font-family: "Brygada 1918", serif;
 }
 
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+}
+
 .card {
     padding: -5px;
     height: calc(160px * 4);
     width: calc(110px * 4);
     border: 5px solid black;
-    border-radius: 25px;
+    border-radius: 30px;
     display: flex;
-    background-image: url("bg.jpg");
+    background-image: url("cardFace.png");
+    background-size: cover;
+}
+
+.in-box {
+    background-image: url("Components/textbox.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
 }
 
 .side-panel {
     height: calc(160px * 4);
-    width: calc(160px * 4 * 0.1);
+    width: calc(160px * 4 * 0.1 - 23px + 10px);
     background-color: balck;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
 }
 
 .level {
-    width: calc(160px * 4 * 0.1);
-    height: calc(160px * 4 * 0.1);
+    width: calc(180px * 4 * 0.1);
+    height: calc(180px * 4 * 0.1);
     background-image: url("bg.jpg");
+    background-repeat: no-repeat;
+    background-size: calc(180px * 4 * 0.1);
     border-top-left-radius: 20px;
-    border-right: 5px solid;
-    border-bottom: 5px solid;
-    border-color: black;
-    border-bottom-right-radius: calc((160px * 4 * 0.1) / 2);
+    background-image: url("Components/corner_v2.svg");
     padding: 0px;
     margin: 0px;
     text-align: center;
@@ -50,22 +82,77 @@
 
 .contents {
     padding: 10px;
-    width: calc(160px * 4 * 0.9 - 20px - 10px);
-    width: calc(110px * 4);
+    max-width: calc(160px * 4 * 0.9 - 20px - 20px);
+    display: flex;
+    flex-direction: column;
 }
 
-.description > p {
-    font-size: 14px;
+.class-name {
+    margin: 5px;
+    margin-left: 10px;
+    padding: 2px;
+    padding-left: 10px;
+    width: calc(160px * 4 * 0.9 - 30px -  220px);
+    line-height: 70px;
 }
 
-.card.bard {
-    border-color: #c1121f;
+.class-icon {
+    height: 50%;
+    justify-self: center;
+    background-size: cover;
+}
+
+.spell-name {
+    margin: 5px;
+    padding: 10px;
+    width: calc(160px * 4 * 0.9 - 30px -  220px);
+    margin-bottom: 0px;
+
+}
+
+.stats {
+    align-self: center;
+    border-top: none;
+    justify-self: center;
+    padding: 3%;
+    width: calc((160px * 4 * 0.9 - 30px -  200px) * 0.86);
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 10px;
+    list-style: none;
+
+    flex-wrap: wrap;
+}
+
+.description {
+    overflow: hidden;
 }
 
-.card.bard > .side-panel {
-    background-color: #e63946CC;
+li {
+    font-weight: bold;
+}
+
+.contents > p {
+    font-size: var(--font-size);
 }
 
 .card.bard > .side-panel > .level {
     border-color: #c1121f;
 }
+
+.separator {
+    background-image: url("Components/separation.svg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-top: calc(180px * 4 * 0.1 - 6px);
+    height: calc(160px * 4 - 180px * 4 * 0.1 + 10px);
+    min-width: 10;
+}
+
+.back {
+    background-image: url("cardBack.png");
+    display: flex;
+    flex-wrap: wrap;
+}