gear rules, refined classes idea, worked on abilities

24 files changed, 5278 insertions, 163 deletions

diff --git a/cards/Gemfile b/cards/Gemfile
new file mode 100644
index 0000000..4af2b1e
--- /dev/null
+++ b/cards/Gemfile
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# gem "rails"
+
+gem "paggio", "~> 0.3.0"
+
+gem "kramdown", "~> 2.4"
diff --git a/cards/Gemfile.lock b/cards/Gemfile.lock
new file mode 100644
index 0000000..47747ed
--- /dev/null
+++ b/cards/Gemfile.lock
@@ -0,0 +1,17 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    kramdown (2.4.0)
+      rexml
+    paggio (0.3.0)
+    rexml (3.2.5)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  kramdown (~> 2.4)
+  paggio (~> 0.3.0)
+
+BUNDLED WITH
+   2.1.4
diff --git a/cards/cardback.png b/cards/assets/cardback.png
index 73dd350..73dd350 100644
--- a/cards/cardback.png
+++ b/cards/assets/cardback.png
diff --git a/cards/cardback.svg b/cards/assets/cardback.svg
index 1099321..1099321 100644
--- a/cards/cardback.svg
+++ b/cards/assets/cardback.svg
diff --git a/cards/inspiration_cardback.jpg b/cards/assets/inspiration_cardback.jpg
index 2b82919..2b82919 100644
--- a/cards/inspiration_cardback.jpg
+++ b/cards/assets/inspiration_cardback.jpg
diff --git a/cards/weapon_example.svg b/cards/assets/weapon_example.svg
index ef9e910..ef9e910 100644
--- a/cards/weapon_example.svg
+++ b/cards/assets/weapon_example.svg
diff --git a/cards/alchemical_recipes.rb b/cards/cards/alchemical_recipes.rb
index 4e96dfb..1332873 100644
--- a/cards/alchemical_recipes.rb
+++ b/cards/cards/alchemical_recipes.rb
@@ -1,8 +1,8 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 alchemical_recipes = {}
 
-beginner_spells[:crystal_encasement] = Card.new(
+alchemical_recipes[:crystal_encasement] = Card.new(
   title: "Crystal Encasement Recipe",
   #damage: 3,
   #blood: 2,
@@ -18,4 +18,4 @@ beginner_spells[:crystal_encasement] = Card.new(
   type: 'Blood Magic (Eldritch)'
 )
 
-File.write('beginner_spells.html', Card.build(beginner_spells.values))
+Card.output('alchemical_recipes', alchemical_recipes)
diff --git a/cards/armour.rb b/cards/cards/armour.rb
index da6cf68..d8ea418 100644
--- a/cards/armour.rb
+++ b/cards/cards/armour.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 armour = {}
 
@@ -56,3 +56,5 @@ armour[:none] = Card.new(
 )
 
 File.write('armour.html', Card.build(armour.values))
+
+Card.output('armour', armour)
diff --git a/cards/card.rb b/cards/cards/card.rb
index 3d76d22..3aa4fcd 100644
--- a/cards/card.rb
+++ b/cards/cards/card.rb
@@ -1,5 +1,6 @@
 require 'paggio'
 require 'paggio/markdown'
+
 class Card
   attr_accessor(
     :attrib_top_left,     :attrib_top_left_icon, 
@@ -353,6 +354,21 @@ class Card
                               "↪️"
                             end
                           end
+                          if action.symbol.include? :blood
+                            _.span.icon.blood_icon do
+                              "🩸"
+                            end
+                          end
+                          if action.symbol.include? :reactive
+                            _.span.icon.lesser_icon do
+                              "📣"
+                            end
+                          end
+                          if action.symbol.include? :joker
+                            _.span.icon.joker_icon do
+                              "🃏"
+                            end
+                          end
                           if action.symbol.include? :spades
                             _.span.icon.suit_icon.spades_icon do
                               "♠️"
@@ -373,16 +389,6 @@ class Card
                               "♥️"
                             end
                           end
-                          if action.symbol.include? :joker
-                            _.span.icon.joker_icon do
-                              "🃏"
-                            end
-                          end
-                          if action.symbol.include? :blood
-                            _.span.icon.blood_icon do
-                              "🩸"
-                            end
-                          end
                           if action.symbol.include? :odd
                             _.span.icon.odd_icon do
                               "🔻"
@@ -408,6 +414,11 @@ class Card
                               "➖"
                             end
                           end
+                          if action.symbol.include? :invisible
+                            _.span.icon.lesser_icon(style: 'visibility: hidden;') do
+                              "🈷️"
+                            end
+                          end
                         end
                         _.div.action_detail do
                           _.markdown <<-MD
@@ -473,6 +484,10 @@ function downloadAsImage() {
       end
       end
     end
+
+    def output(name, cards, prefix: "output/")
+      File.write("#{prefix}#{name}.html", Card.build(cards.values))
+    end
   end
 end
 
diff --git a/cards/card_weapons.rb b/cards/cards/card_weapons.rb
index ed46343..dccb8d7 100644
--- a/cards/card_weapons.rb
+++ b/cards/cards/card_weapons.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 cards = []
 
@@ -87,3 +87,5 @@ cards.push card
 
 
 File.write('card.html', Card.build(cards))
+
+Card.output('alchemical_recipes', alchemical_recipes)
diff --git a/cards/class_abilities.rb b/cards/cards/class_abilities.rb
index 117005b..300d213 100644
--- a/cards/class_abilities.rb
+++ b/cards/cards/class_abilities.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 class_abilities = {}
 
@@ -177,5 +177,5 @@ class_abilities[:palm_reading] = Card.new(
   type: 'Astrologist Ability',
 )
 
-File.write('class_abilities.html', Card.build(class_abilities.values))
+Card.output('class_abilities', class_abilities);
 
diff --git a/cards/cards/common_items.rb b/cards/cards/common_items.rb
new file mode 100644
index 0000000..06c5347
--- /dev/null
+++ b/cards/cards/common_items.rb
@@ -0,0 +1,153 @@
+require_relative 'card.rb'
+
+common_items = {}
+
+common_items[:test] = Card.new(
+  title: "Test",
+  color: 'rebeccapurple',
+  reposte: 'Prc',
+  damage: '3',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d8 · Prc** to Bludgeon.',
+      symbol: [
+        :tap,
+        :odd,
+        :even,
+        :greater,
+        :lesser,
+        :blood,
+        :reactive,
+        :face,
+      ],
+    ),
+    Card::Action.new(
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :spades,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :clubs,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :diamonds,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :joker,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: [:tap, :hearts]
+    ),
+  ],
+  flavour: '"World Famous Iron Toothpick"',
+  type: 'Thrusting Sword Weapon'
+)
+
+common_items[:sack] = Card.new(
+  title: "Sack",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 12 spaces.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:satchel] = Card.new(
+  title: "Satchel",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 6 spaces.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 3 cards from this inventory and place up to 3 items to the front or back of this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:rucksack] = Card.new(
+  title: "Rucksack",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 12 spaces.',
+    ),
+    Card::Action.new(
+      content: '**Item slot**: 6 spaces.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:sheath] = Card.new(
+  title: "Sheath",
+  color: 'saddlebrown',
+  actions: [
+    Card::Action.new(
+      content: '**Item slot**: 1 weapon.',
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Draw up to 1 cards from this inventory and place up to 1 weapon to this inventory.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Equips on your back or hip.',
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Leather Item Container'
+)
+
+common_items[:hand_bomb] = Card.new(
+  title: "Hand Bomb",
+  color: 'grey',
+  actions: [
+    Card::Action.new(
+      content: 'Deal **3 damage**. Consumes this item.',
+      symbol: :tap,
+    ),
+  ],
+  #flavour: '"World Famous Iron Toothpick"',
+  type: 'Consumable Weapon'
+)
+
+Card.output('common_items', common_items);
diff --git a/cards/common_weapons.rb b/cards/cards/common_weapons.rb
index 55931af..e1be852 100644
--- a/cards/common_weapons.rb
+++ b/cards/cards/common_weapons.rb
@@ -1,51 +1,75 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 common_weapons = {}
 
-common_weapons[:thrusting_sword] = Card.new(
-  title: "Thrusting Sword",
+common_weapons[:test] = Card.new(
+  title: "Test",
   color: 'rebeccapurple',
   reposte: 'Prc',
   damage: '3',
   actions: [
     Card::Action.new(
-      content: '🎲 **d8 + Prc** to hit.',
-      symbol: :tap,
+      content: '🎲 **d8 · Prc** to Bludgeon.',
+      symbol: [
+        :tap,
+        :odd,
+        :even,
+        :greater,
+        :lesser,
+        :blood,
+        :reactive,
+        :face,
+      ],
+    ),
+    Card::Action.new(
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :spades,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :clubs,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :diamonds,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: :joker,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to hit.',
+      symbol: [:tap, :hearts]
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Opportune Strike**: When targeting an enemy with this weapon, mark them until the end of their turn. While marked if they attack somone other then you then you can perform a reposte on them.',
-    #)
   ],
   flavour: '"World Famous Iron Toothpick"',
   type: 'Thrusting Sword Weapon'
 )
 
-
-common_weapons[:polearm] = Card.new(
-  title: "Polearm",
+=begin
+common_weapons[:rapier] = Card.new(
+  title: "Rapier",
   color: 'rebeccapurple',
   reposte: 'Prc',
-  damage: '4',
+  damage: '3',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
+      content: '🎲 **d8 · Prc** to Pierce.',
       symbol: :tap,
     ),
-    Card::Action.new(
-      seperator: true,
-      content: '**Reach**',
-    ),
     #Card::Action.new(
     #  seperator: true,
-    #  content: '**Reach**: When making an attack, you ignore repostes from your target unless they also have Reach.',
-    #  # TODO: this is the same as the bow making it superiour
-    #  #symbol: :spades,
-    #),
+    #  content: '**Opportune Strike**: When targeting an enemy with this weapon, mark them until the end of their turn. While marked if they attack somone other then you then you can perform a reposte on them.',
+    #)
   ],
-  flavour: '"Getting up close and personal while staying far away"',
-  type: 'Polearm Weapon'
+  flavour: '"World Famous Iron Toothpick"',
+  type: 'Thrusting Sword Weapon'
 )
+=end
 
 common_weapons[:spear] = Card.new(
   title: "Spear",
@@ -54,19 +78,13 @@ common_weapons[:spear] = Card.new(
   damage: '3',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Prc** to hit.',
+      content: '🎲 **d6 · Prc** to Pierce.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Reach**, **Throwable**',
+      symbol: :invisible,
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Reach**: When making an attack, you ignore repostes from your target unless they also have Reach.',
-    #  # TODO: this is the same as the bow making it superiour
-    #  #symbol: :spades,
-    #),
   ],
   flavour: '"5x more throwable then previous editions"',
   type: 'Polearm Weapon'
@@ -79,12 +97,12 @@ common_weapons[:dagger] = Card.new(
   damage: '2',
   actions: [
     Card::Action.new(
-      content: '🎲 **d4 + Prc** to hit.',
+      content: '🎲 **d4 · Prc** to Pierce.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Light**, **Throwable**',
+      symbol: :invisible,
       #symbol: :spades
     ),
     #Card::Action.new(
@@ -104,12 +122,12 @@ common_weapons[:longbow] = Card.new(
   #reposte: 1,
   actions: [
     Card::Action.new(
-      content: '🎲 **d4 + (2·Prc)** to hit.',
+      content: '🎲 **d6 · Prc** to Pierce.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Ranged**',
+      symbol: :invisible,
     )
     #Card::Action.new(
     #  seperator: true,
@@ -127,50 +145,106 @@ common_weapons[:crossbow] = Card.new(
   #reposte: 1,
   actions: [
     Card::Action.new(
-      content: '(must be loaded) 🎲 **d6 + Prc** to hit.',
+      content: 'Remove a counter.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
-      content: '**Reload**: Load this weapon.',
-      symbol: :tap,
+      content: '🎲 **d8 · Prc** to Pierce.',
+      symbol: :invisible,
     ),
     Card::Action.new(
-      seperator: true,
       content: '**Ranged**',
-    )
+      symbol: :invisible,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '**Reload**: Load this weapon. Add a counter to this card.',
+      symbol: :tap,
+    ),
   ],
   flavour: '"No one will cross you with this weapon"',
   type: 'Crossbow Weapon'
 )
 
-common_weapons[:hammer] = Card.new(
-  title: "Hammer",
+common_weapons[:warhammer] = Card.new(
+  title: "Warhammer",
   reposte: 'Str',
   damage: 3,
   actions: [
     Card::Action.new(
-      content: '🎲 **d4 + (2·Str)** to hit.',
+      content: '🎲 **d8 · (Str)** to Bludgeon.',
       symbol: :tap,
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Power Swing**: 🎲 **d4 + Str** to hit. Deal **Str + 2** damage.',
-    #  symbol: :tap
-    #),
   ],
-  flavour: '"If you can pick it up, then you are worthy enough to use it."',
+  flavour: '"Made of over 39,000 minature hammers"',
   color: 'rebeccapurple',
   type: 'Hammer Weapon'
 )
 
+common_weapons[:sickle] = Card.new(
+  title: "Sickle",
+  reposte: 'Prc',
+  damage: 1,
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d4 · (Prc)** to Bludgeon.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Light**, **Cleave**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"Made of over 39,000 minature hammers"',
+  color: 'rebeccapurple',
+  type: 'Farming Weapon'
+)
+
+common_weapons[:scythe] = Card.new(
+  title: "Scythe",
+  reposte: 'Prc',
+  damage: 2,
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 · (Prc)** to Bludgeon.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Heavy**, **Cleave**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"Made of over 39,000 minature hammers"',
+  color: 'rebeccapurple',
+  type: 'Farming Weapon'
+)
+
+common_weapons[:short_sword] = Card.new(
+  title: "Short Sword",
+  damage: 3,
+  reposte: 'Str',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 · Str** to hit.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Light**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"El Classico"',
+  color: 'rebeccapurple',
+  type: 'Straight Sword Weapon'
+)
+
 common_weapons[:straight_sword] = Card.new(
-  title: "Straight Sword",
+  title: "Long Sword",
   damage: 3,
   reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d8 + Str** to hit.',
+      content: '🎲 **d8 · Str** to hit.',
       symbol: :tap,
     ),
     #Card::Action.new(
@@ -190,14 +264,9 @@ common_weapons[:axe] = Card.new(
   reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
+      content: '🎲 **d6 · Str** to Slash.',
       symbol: :tap,
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '**Throw**: 🎲 **d6 + Str** to hit. This attack is **Ranged** and thus you ignore repostes from your target. You lose this weapon by using this attack.',
-    #  symbol: :tap
-    #),
   ],
   flavour: '"Looks great with a flannel shirt."',
   color: 'rebeccapurple',
@@ -210,67 +279,51 @@ common_weapons[:staff] = Card.new(
   reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
+      content: '🎲 **d6 + Str** to Bludgeon.',
       symbol: :tap,
     ),
     Card::Action.new(
       seperator: true,
-      content: '(Two Handed) 🎲 **d8 + Str** to hit.',
+      content: '🎲 **d8 + Str** to Bludgeon.',
       symbol: :tap,
     ),
     Card::Action.new(
-      seperator: true,
-      content: '**Light**',
+      content: '**Heavy**',
     )
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '(odd) **Swift Attack**: Refresh this card.',
-    #  symbol: :spades
-    #),
   ],
   color: 'rebeccapurple',
   flavour: '"Says \'Made by the Ninja Custodial Group\' on the handle"',
   type: 'Staff Weapon',
 )
 
-common_weapons[:curved_sword] = Card.new(
-  title: "Curved Sword",
-  damage: 3,
-  reposte: 'Prc',
+common_weapons[:kite_shield] = Card.new(
+  title: "Kite Shield",
+  #damage: 4,
+  #reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d8 + Str** to hit.',
-      symbol: :tap,
+      content: 'When **targeted with a weapon:** your attacker recieves **2 disadvantage** on their action.',
+      symbol: [:tap, :reactive],
     ),
-    #Card::Action.new(
-    #  seperator: true,
-    #  content: '(odd, recieving a reposte) **Close Quarters**: Deal damage equal to your reposte.',
-    #  symbol: :spades
-    #),
   ],
+  flavour: '"Looks great with a flannel shirt."',
   color: 'rebeccapurple',
-  flavour: '"Arrrgh"',
-  type: 'Curved Sword Weapon',
+  type: 'Shield Weapon',
 )
 
-common_weapons[:forked_sword] = Card.new(
-  title: "Forked Sword",
-  damage: 3,
-  reposte: 'Str',
-  roll: '1d6',
+common_weapons[:buckler_shield] = Card.new(
+  title: "Buckler Shield",
+  #damage: 4,
+  #reposte: 'Str',
   actions: [
     Card::Action.new(
-      content: '🎲 **d6 + Str** to hit.',
-      symbol: :tap,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '**Casting Focus**',
+      content: 'When **targeted with a weapon:** your attacker recieves **1 disadvantage** on their action. If your reposte triggers then deal double damage with it.',
+      symbol: [:tap, :reactive],
     ),
   ],
+  flavour: '"Looks great with a flannel shirt."',
   color: 'rebeccapurple',
-  flavour: '"Weapon used in the war against the gods. Vintage!"',
-  type: 'Forked Sword Weapon',
+  type: 'Shield Weapon',
 )
 
 common_weapons[:caestus] = Card.new(
@@ -298,53 +351,6 @@ common_weapons[:tuning_fork] = Card.new(
   type: 'Magic Casting Tool',
 )
 
-common_weapons[:casters_glove] = Card.new(
-  title: "Caster's Glove",
-  roll: '1d8',
-  actions: [
-    Card::Action.new(
-      content: '**Casting Focus**',
-    ),
-  ],
-  color: 'DarkBlue',
-  flavour: '"Modern  casting tool that works by directly drawing your blood"',
-  type: 'Magic Casting Tool',
-)
-
-
-common_weapons[:test_weapon] = Card.new(
-  title: "Test Weapon",
-  damage: 3,
-  reposte: 'Prc',
-  actions: [
-    Card::Action.new(
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :spades,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :clubs,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :diamonds,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: :joker,
-    ),
-    Card::Action.new(
-      seperator: true,
-      content: '🎲 **d6 + Prc** to hit.',
-      symbol: [:tap, :hearts]
-    ),
-  ],
-  color: 'rebeccapurple',
-  flavour: '"Arrr"',
-  type: 'Curved Sword Weapon',
-)
-
 File.write('common_weapons.html', Card.build(common_weapons.values))
+
+Card.output('common_weapons', common_weapons);
diff --git a/cards/cards/paladin_abilities.rb b/cards/cards/paladin_abilities.rb
new file mode 100644
index 0000000..6dcdbfd
--- /dev/null
+++ b/cards/cards/paladin_abilities.rb
@@ -0,0 +1,196 @@
+require_relative 'card.rb'
+
+paladin_abilities = {}
+
+class_colors = {
+  rogue: 'Maroon',
+  ranger: 'ForestGreen', 
+  astrologist: 'DodgerBlue',
+  monk: 'OrangeRed',
+  paladin: 'GoldenRod'
+}
+
+paladin_abilities[:duel] = Card.new(
+  title: "Duel",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :even],
+      content: 'Pick a target. You and that target enter a duel where you and the target may not attack anyone other then each other. You cannot use this while in a duel.',
+    ),
+  ],
+  color: class_colors[:paladin],
+  flavour: '"A famous commander\'s signature thing."',
+  type: 'Paladin Ability',
+)
+
+paladin_abilities[:leading_charge] = Card.new(
+  title: "Leading Charge",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :reactive, :face],
+      content: 'When making an attack, **mark the target** and **choose an ally**. During **the ally\'s** next turn: they **gain an advatage** for all attacks they do **agaisnt the marked target**.',
+    ),
+  ],
+  color: class_colors[:paladin],
+  #flavour: '"A famous commander\'s signature thing."',
+  type: 'Paladin Ability',
+)
+
+paladin_abilities[:duck_and_weave] = Card.new(
+  title: "Duck and Weave",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :diamonds],
+      content: ' Ignore up to the card played worth of damage from a **reposte**.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  flavour: '"Missed me"',
+  type: 'Rogue Ability',
+)
+
+paladin_abilities[:surgical_strike] = Card.new(
+  title: "Surgical Strike",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :spades],
+      content: '(less then 5) Replace a weapon\'s damage with the value of the card played. Only affects the current attack.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  #flavour: '"Missed me"',
+  type: 'Rogue Ability',
+)
+
+paladin_abilities[:down_they_alleys] = Card.new(
+  title: "Down the Alleys",
+  actions: [
+    Card::Action.new(
+      symbol: [:diamonds],
+      content: '(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.',
+    ),
+  ],
+  color: class_colors[:rogue],
+  #flavour: '"Missed me"',
+  type: 'Rogue Ability',
+)
+
+paladin_abilities[:spot] = Card.new(
+  title: "Spot",
+  actions: [
+    Card::Action.new(
+      symbol: [:hearts],
+      content: '(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  #flavour: '"Missed me"',
+  type: 'Ranger Ability',
+)
+paladin_abilities[:flexible_shooter] = Card.new(
+  title: "Flexible Shooter",
+  actions: [
+    Card::Action.new(
+      #symbol: [:hearts],
+      content: 'You can deal reposte damage with any ranged weapon.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  #flavour: '"Missed me"',
+  type: 'Ranger Ability',
+)
+
+paladin_abilities[:scouting_ahead] = Card.new(
+  title: "Scouting Ahead",
+  actions: [
+    Card::Action.new(
+      symbol: [:diamonds],
+      content: '(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  #flavour: '"Missed me"',
+  type: 'Ranger Ability',
+)
+
+paladin_abilities[:healing_salve_recipe] = Card.new(
+  title: "Healing Salve Recipe",
+  actions: [
+    Card::Action.new(
+      symbol: [:diamonds, :hearts],
+      content: '(each suit) Healberry Herb, Cloth.',
+    ),
+  ],
+  color: class_colors[:ranger], 
+  flavour: '"*Don\'t* eat the berries"',
+  type: 'Ranger Recipe',
+)
+
+paladin_abilities[:recast] = Card.new(
+  title: "Recast",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap, :hearts],
+      content: '(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.',
+    ),
+  ],
+  color: class_colors[:astrologist],
+  #flavour: '"Missed me"',
+  type: 'Astrologist Ability',
+)
+paladin_abilities[:focused_cast] = Card.new(
+  title: "Focused Cast",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap],
+      content: 'Upgrade the blood dice for one spell you cast.',
+    ),
+  ],
+  color: class_colors[:astrologist],
+  #flavour: '"Missed me"',
+  type: 'Astrologist Ability',
+)
+
+paladin_abilities[:focused_cast] = Card.new(
+  title: "Focused Cast",
+  actions: [
+    Card::Action.new(
+      symbol: [:tap],
+      content: 'Upgrade the blood dice for one spell you cast.',
+    ),
+  ],
+  color: class_colors[:astrologist],
+  #flavour: '"Missed me"',
+  type: 'Astrologist Ability',
+)
+
+paladin_abilities[:change_of_fate] = Card.new(
+  title: "Change of Fate",
+  blood: 1,
+  actions: [
+    Card::Action.new(
+      symbol: [:blood],
+      content: 'Swap 1 card with a willing player.',
+    ),
+  ],
+  color: class_colors[:astrologist],
+  #flavour: '"Missed me"',
+  type: 'Astrologist Ability',
+)
+
+paladin_abilities[:palm_reading] = Card.new(
+  title: "Palm Reading",
+  blood: 1,
+  actions: [
+    Card::Action.new(
+      symbol: [:blood],
+      content: 'Discard a willing players hand and replace it with new cards drawn.',
+    ),
+  ],
+  color: class_colors[:astrologist],
+  #flavour: '"Missed me"',
+  type: 'Astrologist Ability',
+)
+
+Card.output('paladin_abilities', paladin_abilities);
+
diff --git a/cards/cards/rare_weapons.rb b/cards/cards/rare_weapons.rb
new file mode 100644
index 0000000..e0ec2aa
--- /dev/null
+++ b/cards/cards/rare_weapons.rb
@@ -0,0 +1,117 @@
+require_relative 'card.rb'
+
+rare_weapons = {}
+
+rare_weapons[:glaive] = Card.new(
+  title: "Glaive",
+  color: 'rebeccapurple',
+  reposte: 'Prc',
+  damage: '4',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 · Str** to Slash.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Reach**, **Heavy**',
+      symbol: :invisible,
+    ),
+  ],
+  flavour: '"Getting up close and personal while staying far away"',
+  type: 'Polearm Weapon'
+)
+
+rare_weapons[:twinblade] = Card.new(
+  title: "Twinblade",
+  damage: 3,
+  reposte: 'Prc',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d4 + Prc** to Slash.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: '🎲 **d6 + Prc** to Slash.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: '**Heavy**',
+    )
+    #Card::Action.new(
+    #  seperator: true,
+    #  content: '(odd) **Swift Attack**: Refresh this card.',
+    #  symbol: :spades
+    #),
+  ],
+  color: 'rebeccapurple',
+  flavour: '"Says \'Made by the Ninja Custodial Group\' on the handle"',
+  type: 'Staff Weapon',
+)
+
+rare_weapons[:forked_sword] = Card.new(
+  title: "Forked Sword",
+  damage: 3,
+  reposte: 'Str',
+  #roll: '1d6',
+  actions: [
+    Card::Action.new(
+      content: '🎲 **d6 + Str** to Pierce.',
+      symbol: :tap,
+    ),
+    Card::Action.new(
+      content: 'You can use the \'Cast a spell\' ability as a part of this action.',
+      symbol: :invisible,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'Cast a **Blood Magic Spell**',
+      symbol: :tap
+    ),
+  ],
+  color: 'rebeccapurple',
+  flavour: '"Weapon used in the war against the gods. Vintage!"',
+  type: 'Forked Sword Weapon',
+)
+
+rare_weapons[:tower_shield] = Card.new(
+  title: "Tower Shield",
+  #damage: 4,
+  #reposte: 'Str',
+  actions: [
+    Card::Action.new(
+      content: 'When **targeted with a weapon:** your attacker recieves **2 disadvantage** on their action.',
+      symbol: [:tap, :reactive],
+    ),
+    Card::Action.new(
+      content: '**Heavy**.',
+      symbol: :invisible,
+    ),
+    Card::Action.new(
+      seperator: true,
+      content: 'You can act as cover for another character.',
+      #symbol: :invisible
+    ),
+    Card::Action.new(
+      content: '**Heavy**.',
+    ),
+  ],
+  flavour: '"Looks great with a flannel shirt."',
+  color: 'rebeccapurple',
+  type: 'Shield Weapon',
+)
+
+rare_weapons[:casters_glove] = Card.new(
+  title: "Caster's Glove",
+  roll: '1d8',
+  actions: [
+    Card::Action.new(
+      content: '**Casting Focus**',
+    ),
+  ],
+  color: 'DarkBlue',
+  flavour: '"Modern  casting tool that works by directly drawing your blood"',
+  type: 'Magic Casting Tool',
+)
+
+Card.output('rare_weapons', rare_weapons);
diff --git a/cards/spells.rb b/cards/cards/spells.rb
index 39da46b..65cbb42 100644
--- a/cards/spells.rb
+++ b/cards/cards/spells.rb
@@ -1,4 +1,4 @@
-load 'card.rb'
+require_relative 'card.rb'
 
 beginner_spells = {}
 
@@ -263,5 +263,4 @@ beginner_spells[:endure] = Card.new( #TODO
   type: 'Blood Spell Modified'
 )
 
-
-File.write('beginner_spells.html', Card.build(beginner_spells.values))
+Card.output('beginner_spells', beginner_spells);
diff --git a/cards/output/alchemical_recipes.html b/cards/output/alchemical_recipes.html
new file mode 100644
index 0000000..7218bd8
--- /dev/null
+++ b/cards/output/alchemical_recipes.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Crystal Encasement Recipe
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>A potion which when applied to a surface quickly grows strong blue crystals. Can also be thrown.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“You arent making a bomb, are you?”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Magic (Eldritch)
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/armour.html b/cards/output/armour.html
new file mode 100644
index 0000000..feb99a8
--- /dev/null
+++ b/cards/output/armour.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Iron Plate
+					</p>
+					<div class="attrib_icon attrib_br">
+						5 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Strong but heavy”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Chain Mail
+					</p>
+					<div class="attrib_icon attrib_br">
+						4 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“The fairly lightweight option”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Leather
+					</p>
+					<div class="attrib_icon attrib_br">
+						3 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Popular with goths and punks”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Padded
+					</p>
+					<div class="attrib_icon attrib_br">
+						2 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“A <em>LOT</em> of regular clothing stacked together”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						None
+					</p>
+					<div class="attrib_icon attrib_br">
+						1 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Just the skin on your back”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Body Armour
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/beginner_spells.html b/cards/output/beginner_spells.html
new file mode 100644
index 0000000..7d35cb8
--- /dev/null
+++ b/cards/output/beginner_spells.html
@@ -0,0 +1,568 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Igneous
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Attune to the planes of igneous.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Sea of flames and ashes.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Storm
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Attune to the planes of storm.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Ice cold winds and storms.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Eldritch
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Attune to the planes of eldritch.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Alchemicals and fleshy masses.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Void
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Attune to the planes of void.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Control Gravity”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Planes of Soul
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Attune to the planes of soul.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Dreams and Memories?”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Base
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Touch of Magic
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon odd_icon">
+									🔻
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Summon magic around your hand.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						2 🩸
+					</div>
+					<p>
+						Elemental Engulf
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Summon magic around your self.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						2 🩸
+					</div>
+					<p>
+						Distance Casting
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Summon magic at a distance.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						0 🩸
+					</div>
+					<p>
+						Enduring Arcana
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Keep casting for a duration. Whenever distractions occurs to you while casting, such as an attack or a suprise, do a blood check with difficulty equal to the sum of the blood value of spell components used.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Blood Spell Modified
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/class_abilities.html b/cards/output/class_abilities.html
new file mode 100644
index 0000000..77f111a
--- /dev/null
+++ b/cards/output/class_abilities.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Duel
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>Pick a target. You and that target a duel where you and the target may not attack anyone other then eachother. You cannot use this while in a duel.</p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Stabby stabby stab”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Duck and Weave
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Missed me”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Surgical Strike
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon spades_icon">
+									♠️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(less then 5) Replace a weapon’s damage with the value of the card played. Only affects the current attack.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Down the Alleys
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Spot
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Flexible Shooter
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>You can deal reposte damage with any ranged weapon.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Scouting Ahead
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Healing Salve Recipe
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(each suit) Healberry Herb, Cloth.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“<em>Don’t</em> eat the berries”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Recipe
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Recast
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Focused Cast
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Upgrade the blood dice for one spell you cast.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Change of Fate
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Swap 1 card with a willing player.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Palm Reading
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Discard a willing players hand and replace it with new cards drawn.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/common_items.html b/cards/output/common_items.html
new file mode 100644
index 0000000..fc8b188
--- /dev/null
+++ b/cards/output/common_items.html
@@ -0,0 +1,556 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Test
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon odd_icon">
+									🔻
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+								<span class="icon lesser_icon">
+									➖
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Prc</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon spades_icon">
+									♠️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon clubs_icon">
+									♣️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“World Famous Iron Toothpick”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Thrusting Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Sack
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 12 spaces.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Satchel
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 6 spaces.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 3 cards from this inventory and place up to 3 items to the front or back of this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Rucksack
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 12 spaces.</p>
+					</div>
+					<div class="action">
+						<p><strong>Item slot</strong>: 6 spaces.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Sheath
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Item slot</strong>: 1 weapon.</p>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Draw up to 1 cards from this inventory and place up to 1 weapon to this inventory.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>Equips on your back or hip.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Leather Item Container
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, grey 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Hand Bomb
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Deal <strong>3 damage</strong>. Consumes this item.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Consumable Weapon
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/common_weapons.html b/cards/output/common_weapons.html
new file mode 100644
index 0000000..fe55b0c
--- /dev/null
+++ b/cards/output/common_weapons.html
@@ -0,0 +1,1047 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Test
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon blood_icon">
+									🩸
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon odd_icon">
+									🔻
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+								<span class="icon greater_icon">
+									➕
+								</span>
+								<span class="icon lesser_icon">
+									➖
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Prc</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon spades_icon">
+									♠️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon clubs_icon">
+									♣️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon joker_icon">
+									🃏
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“World Famous Iron Toothpick”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Thrusting Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Spear
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Reach</strong>, <strong>Throwable</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“5x more throwable then previous editions”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Polearm Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Dagger
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 2
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d4 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Light</strong>, <strong>Throwable</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“A quick and convinient way to turn a spleen into a sheath”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Dagger Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Longbow
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Ranged</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“One stringed instrument that got repurposed as a weapon.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Bow Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Crossbow
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Remove a counter.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Prc</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Ranged</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Reload</strong>: Load this weapon. Add a counter to this card.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“No one will cross you with this weapon”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Crossbow Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Warhammer
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · (Str)</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Made of over 39,000 minature hammers”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Hammer Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Sickle
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 1
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d4 · (Prc)</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Light</strong>, <strong>Cleave</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Made of over 39,000 minature hammers”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Farming Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Scythe
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 2
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 · (Prc)</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Heavy</strong>, <strong>Cleave</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Made of over 39,000 minature hammers”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Farming Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Short Sword
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 · Str</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Light</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“El Classico”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Straight Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Long Sword
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 · Str</strong> to hit.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“El Classico”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Straight Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Axe
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 4
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 · Str</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Axe Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Staff
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 2
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Str</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d8 + Str</strong> to Bludgeon.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<p><strong>Heavy</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Says ‘Made by the Ninja Custodial Group’ on the handle”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Staff Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Kite Shield
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>2 disadvantage</strong> on their action.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Shield Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Buckler Shield
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>1 disadvantage</strong> on their action. If your reposte triggers then deal double damage with it.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Shield Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Caestus
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>While equipped: Unarmed Strikes deal <strong>Str</strong> additional damage.</p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Weapon of choice for a fit bronze statue”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Weapon Equipment
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tl">
+						🎲 1d4
+					</div>
+					<p>
+						Tuning Fork
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Casting Focus</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Resonates with various magical frequencies to help with casting blood magic”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Magic Casting Tool
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/paladin_abilities.html b/cards/output/paladin_abilities.html
new file mode 100644
index 0000000..2506e5c
--- /dev/null
+++ b/cards/output/paladin_abilities.html
@@ -0,0 +1,639 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Duel
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon even_icon">
+									⬜
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Pick a target. You and that target enter a duel where you and the target may not attack anyone other then each other. You cannot use this while in a duel.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“A famous commander’s signature thing.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Paladin Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Leading Charge
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+								<span class="icon face_icon">
+									🎭
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>When making an attack, <strong>mark the target</strong> and <strong>choose an ally</strong>. During <strong>the ally’s</strong> next turn: they <strong>gain an advatage</strong> for all attacks they do <strong>agaisnt the marked target</strong>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Paladin Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Duck and Weave
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Missed me”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Surgical Strike
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon spades_icon">
+									♠️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(less then 5) Replace a weapon’s damage with the value of the card played. Only affects the current attack.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Down the Alleys
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Rogue Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Spot
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Flexible Shooter
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p>You can deal reposte damage with any ranged weapon.</p>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Scouting Ahead
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Healing Salve Recipe
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon suit_icon diamonds_icon">
+									♦️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(each suit) Healberry Herb, Cloth.</p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“<em>Don’t</em> eat the berries”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Ranger Recipe
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Recast
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon suit_icon hearts_icon">
+									♥️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Focused Cast
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Upgrade the blood dice for one spell you cast.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Change of Fate
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Swap 1 card with a willing player.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tr">
+						1 🩸
+					</div>
+					<p>
+						Palm Reading
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon blood_icon">
+									🩸
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Discard a willing players hand and replace it with new cards drawn.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Astrologist Ability
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>
diff --git a/cards/output/rare_weapons.html b/cards/output/rare_weapons.html
new file mode 100644
index 0000000..76db3a3
--- /dev/null
+++ b/cards/output/rare_weapons.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.flavour {
+				color: rgba(0,0,0,0.5);
+				padding: 35px;
+				font-size: 35px;
+			}
+			.flavour_wrapper {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				text-align: center;
+			}
+			.action_detail {
+				padding-top: 0px;
+				text-align: left;
+			}
+			.symbol_wrapper_inner {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.symbol_wrapper_outer {
+				display: flex;
+				gap: 20px;
+			}
+			.card_type {
+				background-color: antiquewhite;
+				text-align: center;
+				font-size: 40px;
+				padding: 10px;
+				-moz-border-radius: 15px 15px 0 0;
+				-webkit-border-radius: 15px 15px 0 0;
+				border-radius: 15px 15px 0 0;
+				font-weight: bold;
+				border-width: 2px 2px 0 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.icon {
+				display: inline-block;
+				padding: 8px 4px 0px 4px;
+				-moz-border-radius: 15px;
+				-webkit-border-radius: 15px;
+				border-radius: 15px;
+				aspect-ratio: 1/1;
+				font-size: 40px;
+				height: 52px;
+				width: 52px;
+			}
+			.face_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.lesser_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.greater_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.even_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.odd_icon {
+				background-color: black;
+				padding: 12px 0px 0px 12px;
+				font-size: 30px;
+				height: 48px;
+				width: 48px;
+			}
+			.hearts_icon {
+				color: orangered;
+			}
+			.diamonds_icon {
+				color: orangered;
+			}
+			.clubs_icon {
+				color: antiquewhite;
+			}
+			.spades_icon {
+				color: antiquewhite;
+			}
+			.suit_icon {
+				background-color: black;
+				text-align: center;
+				font-size: 60px;
+				line-height: 40px;
+			}
+			.blood_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.joker_icon {
+				background-color: black;
+				padding: 6px 3px 2px 5px;
+			}
+			.tap_icon {
+				background-color: black;
+			}
+			.content {
+				background-color: antiquewhite;
+				color: black;
+				flex: 5;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 50px;
+				display: flex;
+				justify-content: flex-start;
+				gap: 5px;
+				text-align: left;
+				padding: 35px 30px 30px 30px;
+				flex-direction: column;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.attrib_bottom_icons {
+				bottom: 0;
+			}
+			.attrib_top_icons {
+				top: 0;
+			}
+			.attrib_bl {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				-moz-border-radius: 0 50px 0 0;
+				-webkit-border-radius: 0 50px 0 0;
+				border-radius: 0 50px 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 5px 0 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_br {
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				-moz-border-radius: 50px 0 0 0;
+				-webkit-border-radius: 50px 0 0 0;
+				border-radius: 50px 0 0 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 5px 0 0 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tr {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-moz-border-radius: 0 0 0 50px;
+				-webkit-border-radius: 0 0 0 50px;
+				border-radius: 0 0 0 50px;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 0 5px 5px;
+				padding: 15px 15px 15px 25px;
+			}
+			.attrib_tl {
+				position: absolute;
+				top: 0;
+				left: 0;
+				-moz-border-radius: 0 0 50px 0;
+				-webkit-border-radius: 0 0 50px 0;
+				border-radius: 0 0 50px 0;
+				border-color: rgba(255,255,255,0.50);
+				border-style: solid;
+				border-width: 0 5px 5px 0;
+				padding: 15px 25px 15px 15px;
+			}
+			.attrib_icon {
+				background-color: rgba(255,255,255,0.10);
+			}
+			.title {
+				background-color: black;
+				color: antiquewhite;
+				flex: 3;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				overflow: hidden;
+				position: relative;
+				font-size: 85px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				padding: 25px;
+				border-width: 2px 2px 2px 2px;
+				border-color: black;
+				border-style: solid;
+			}
+			.group {
+				margin: 50px 50px 0px 50px;
+				-moz-border-radius: 25px;
+				-webkit-border-radius: 25px;
+				border-radius: 25px;
+				display: flex;
+				flex-direction: column;
+				align-content: space-between;
+				height: auto;
+				flex: 2;
+				gap: 35px;
+			}
+			.card {
+				height: 1425px;
+				width: 825px;
+				background-color: black;
+				display: flex;
+			}
+			.card_wrapper {
+				min-height: 2850px;
+				width: 5775px;
+				display: flex;
+				flex-wrap: wrap;
+				height: 100%;
+			}
+			button {
+				font-size: 50px;
+				padding: 30px;
+				margin: 30px;
+			}
+			p {
+				margin: 0;
+			}
+			body {
+				background-color: #1e1e1e;
+			}
+		</style>
+	</head>
+	<button onclick="downloadAsImage()">
+		Download
+	</button>
+	<div id="card_wrapper" class="card_wrapper">
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Glaive
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 4
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 · Str</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Reach</strong>, <strong>Heavy</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Getting up close and personal while staying far away”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Polearm Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Twinblade
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Prc 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d4 + Prc</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Prc</strong> to Slash.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<p><strong>Heavy</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Says ‘Made by the Ninja Custodial Group’ on the handle”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Staff Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Forked Sword
+					</p>
+					<div class="attrib_icon attrib_bl">
+						⚔️ 3
+					</div>
+					<div class="attrib_icon attrib_br">
+						Str 🛡️
+					</div>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>🎲 <strong>d6 + Str</strong> to Pierce.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>You can use the ‘Cast a spell’ ability as a part of this action.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>Cast a <strong>Blood Magic Spell</strong></p>
+							</div>
+						</div>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Weapon used in the war against the gods. Vintage!”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Forked Sword Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<p>
+						Tower Shield
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span class="icon tap_icon">
+									↪️
+								</span>
+								<span class="icon lesser_icon">
+									📣
+								</span>
+							</div>
+							<div class="action_detail">
+								<p>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>2 disadvantage</strong> on their action.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<div class="symbol_wrapper_outer">
+							<div class="symbol_wrapper_inner">
+								<span style="visibility: hidden;" class="icon lesser_icon">
+									🈷️
+								</span>
+							</div>
+							<div class="action_detail">
+								<p><strong>Heavy</strong>.</p>
+							</div>
+						</div>
+					</div>
+					<div class="action">
+						<hr>
+						<p>You can act as cover for another character.</p>
+					</div>
+					<div class="action">
+						<p><strong>Heavy</strong>.</p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Looks great with a flannel shirt.”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Shield Weapon
+				</div>
+			</div>
+		</div>
+		<div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+			<div class="group">
+				<div class="title">
+					<div class="attrib_icon attrib_tl">
+						🎲 1d8
+					</div>
+					<p>
+						Caster&#39;s Glove
+					</p>
+				</div>
+				<div class="content">
+					<div class="action">
+						<p><strong>Casting Focus</strong></p>
+					</div>
+					<div class="flavour_wrapper">
+						<div class="flavour">
+							<hr>
+							<p>“Modern  casting tool that works by directly drawing your blood”</p>
+						</div>
+					</div>
+				</div>
+				<div class="card_type">
+					Magic Casting Tool
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="./web/bundle.js">
+	</script>
+	<script>
+		function downloadAsImage() {
+		  htmlToImage.toPng(document.getElementById('card_wrapper'))
+		    .then(function (dataUrl) {
+		      download(dataUrl, 'card_wrapper.png');
+		    });
+		}
+	</script>
+</html>