1 files changed, 170 insertions, 0 deletions
diff --git a/index_files/index.css b/index_files/index.css
new file mode 100644
index 0000000..b2b6283
--- /dev/null
+++ b/index_files/index.css
@@ -0,0 +1,170 @@
+: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 {
+    background-image: url("cardFace.png");
+    background-size: cover;
+
+}
+
+.overlay {
+    background-image: url("Components/cardLine.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    padding: -5px;
+    height: calc(160px * 4);
+    width: calc(110px * 4);
+    display: flex;
+}
+
+.in-box {
+    background-image: url("Components/textbox.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+
+.side-panel {
+    height: calc(160px * 4 - 10px);
+    width: calc(160px * 4 * 0.1 - 23px + 10px);
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+}
+
+.level {
+    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;
+    background-image: url("Components/corner_v2.svg");
+    padding: 0px;
+    margin: 0px;
+    text-align: center;
+    line-height: calc(160px * 4 * 0.1);
+}
+
+.side-panel-content {
+    height: calc(160px * 4 - (160px * 4 * 0.1) - 25px);
+    display: flex;
+}
+
+.spell-type {
+    align-self: flex-end;
+    writing-mode: sideways-lr;
+    margin: 10px;
+}
+
+.contents {
+    padding: 10px;
+    max-width: calc(160px * 4 * 0.9 - 20px - 20px);
+    display: flex;
+    flex-direction: column;
+}
+
+.class-name {
+    margin: 5px;
+    margin-left: 10px;
+    padding: 2px;
+    padding-left: 10px;
+    width: calc(160px * 4 * 0.9 - 30px -  220px);
+    line-height: 70px;
+    text-align: center;
+}
+
+.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;
+
+    text-align: center;
+}
+
+.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;
+
+    background-image: url("Components/components.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    text-align: center;
+}
+
+.description {
+    overflow: hidden;
+}
+
+li {
+    font-weight: bold;
+}
+
+.contents > p {
+    font-size: var(--font-size);
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.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 - 10px);
+    min-width: 10;
+}
+
+.back {
+    background-image: url("cardBack.png");
+    display: flex;
+    flex-wrap: wrap;
+}