diff --git a/.gitignore b/.gitignore
index 56d6e17..fa8c89b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -161,3 +161,7 @@ luac.out
 *.hex
 
 
+# old FossilSCM repo
+piazza.repo
+# info I needed to figure out what features to implement
+info/
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..cd994e5
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "server/bitser"]
+	path = server/bitser
+	url = https://github.com/gvx/bitser.git
diff --git a/jsapp/AboutUs.js b/jsapp/AboutUs.js
new file mode 100644
index 0000000..648c31b
--- /dev/null
+++ b/jsapp/AboutUs.js
@@ -0,0 +1,18 @@
+var AboutUs = function(){
+  return {
+    view: function(vnode){
+      return m('.about-us', [
+        m('h1.text-center', "About Us"),
+        m('p', "Welcome to Piazza Optical, your number one source for all your optical needs. From frames and lenses to lab equipment and accessories, we are here to provide you with all these supplies while giving you personalized attention and customer service.  We're dedicated to making available products that rank the very best in the latest trends in frames and sunglasses, with a focus on quality of materials and craftsmanship at the lowest cost to aid you and your store/practice in achieving the most profits."),
+        m('p', "Founded in 1995, Piazza Optical has come a long way from its beginnings in a tiny office in North Miami, FL. When we first started out, our passion for fashion forward frames became an obsession and drove us to scour the best factories of the world in our industry, and gave us the pillars to become a leader in the optical supplies business without losing the personal touch, highlighting honesty and integrity which sets us apart from the competition far and near. Such is the base of our company, and our honesty towards and respect for our customers is what keeps our worldwide  following at the top after all these years."),
+        m('p', "We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us!"),
+        m('.divider',''),
+        m('p', "Bienvenidos a Piazza Optical la principal distribuidora de armazones ópticas, lentes oftálmicas y equipos de consultorio y de laboratorio. Estamos aquí para proveer a ópticas, distribuidores y oftalmólogos muchos de los artículos relacionados con su establecimiento, brindando a cada cliente atención personalizada y servicio al cliente. Estamos dedicados a poner a su disposición artículos ópticos de la más alta gama en las últimas tendencias de la moda en armazones y gafas de sol, poniendo especial enfoque en la calidad de materiales y mano de obra al menor costo para promover mayores ganancias para Ud. y su óptica."),
+        m('p', "Fundada en 1995, Piazza Optical ha logrado una larga trayectoria desde nuestros comienzos en aquella modesta oficina en North Miami, FL. Desde el principio, nuestra pasión por la moda en óptica se tornó en una obsesión y nos impulsó a buscar y establecer una firme relación con las mejores fábricas de la industria, lo cual es el pilar para convertirnos en líderes en el ramo sin por ello perder el toque personal, permitiendonos brillar en honestidad e integridad que nos diferencia de la competencia lejana y cercana. Tal es la base de nuestra empresa, ya que nuestra honestidad y respeto por nuestros clientes es lo que hace que éstos se mantengan fieles a nuestra compañía despues de tantos años."),
+        m('p', "Deseamos que disfruten de nuestros productos de la misma manera que nosotros disfrutamos ponerlos a vuestra disposición. Si tienen algún comentario o pregunta, por favor no duden en contactarnos!")
+        ]);
+      }
+    };
+  };
+
+export default AboutUs;
\ No newline at end of file
diff --git a/jsapp/Accessories.js b/jsapp/Accessories.js
new file mode 100644
index 0000000..63b8fb5
--- /dev/null
+++ b/jsapp/Accessories.js
@@ -0,0 +1,15 @@
+import ItemBrowser from './ItemBrowser.js';
+import _Accessories from './_Accessories.js';
+
+var Accessories = function(){
+return {
+view: function(){
+return m('.equipment', [
+  m('h1.text-center','Accessories'),
+  m(ItemBrowser, {items: _Accessories.items})
+  ]);
+}
+};
+};
+
+export default Accessories;
\ No newline at end of file
diff --git a/jsapp/AccountApplicationBox.js b/jsapp/AccountApplicationBox.js
new file mode 100644
index 0000000..83ee6c4
--- /dev/null
+++ b/jsapp/AccountApplicationBox.js
@@ -0,0 +1,170 @@
+import _AccountApplication from "./_AccountApplication.js";
+
+var AccountApplicationBox = function(){
+  return {
+    view: function(vnode){
+        return m('.account-application.form-horizontal', [
+              m('h1.text-center', 'Account Application Form'),
+              m('h3', 'Account Information'),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', [
+                      'Username',
+                      m('small', '(use your email address)')
+                      ])
+                    ]),
+                  m('col-9', [
+                      m('input[type=text]', {
+                        onchange: function(e){ _AccountApplication.username = e.target.value; },
+                        value: _AccountApplication.username
+                        })
+                      ])
+                  ]),
+              m('h3', 'Personal Information'),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Salutation')
+                    ]),
+                  m('.col-9', [
+                      _AccountApplication.salutations.map(function(s){
+                        return [
+                          m('label.form-radio.form-inline', [
+                            m('input[type=radio][name=salutation]', {
+                              onchange: function(e){ _AccountApplication.salutation = e.target.value; },
+                              value: s.value
+                              }),
+                            m('i.form-icon',''),
+                            s.text
+                            ])
+                          ];
+                        })
+                      ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'First Name')
+                    ]),
+                  m('.col-9', [
+                    m('input[type=text][placeholder=First Name]', {
+                      onchange: function(e){ _AccountApplication.firstname = e.target.value; },
+                      value: _AccountApplication.firstname
+                      })
+                    ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Last Name')
+                    ]),
+                  m('.col-9', [
+                      m('input[type=text][placeholder=Last Name]', {
+                        onchange: function(e){ _AccountApplication.lastname = e.target.value; },
+                        value: _AccountApplication.lastname
+                        })
+                      ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Position in Company')
+                    ]),
+                  m('.col-9', _AccountApplication.positions.map(function(s){
+                        return [
+                          m('label.form-radio.form-inline', [
+                            m('input[type=radio][name=position]', {
+                              onchange: function(e){ _AccountApplication.position = e.target.value; },
+                              value: s.value
+                              }),
+                            m('i.form-icon',''),
+                            s.text
+                            ])
+                          ];
+                        })
+                      )
+                  ]),
+              m('h3', 'Business Information'),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Name of Business')
+                    ]),
+                  m('.col-9', [
+                      m('input[type=text][placeholder=Name of Business (your shop/clinic/practice name)]', {
+                        onchange: function(e){ _AccountApplication.store = e.target.value; },
+                        value: _AccountApplication.store
+                        })
+                      ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', [
+                      'Address',
+                      m('small', '(full address including city and country)')
+                      ])
+                    ]),
+                  m('.col-9', [
+                    m('input[type=text][placeholder=Address (full address including city and country)]', {
+                      onchange: function(e){ _AccountApplication.address = e.target.value; },
+                      value: _AccountApplication.address
+                      })
+                    ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Type of Business')
+                    ]),
+                  m('.col-9', [
+                      _AccountApplication.practice_types.map(function(s){
+                        return [
+                          m('label.form-radio.form-inline', [
+                            m('input[type=radio][name=practice_type].practice-type', {
+                              onchange: function(e){ _AccountApplication.practice_type = e.target.value; },
+                              value: s.value
+                              }),
+                            m('i.form-icon', ''),
+                            s.text
+                            ])
+                          ];
+                        })
+                      ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Phone (Office)')
+                    ]),
+                  m('.col-9', [
+                    m('input[type=text][placeholder=Phone (Office)]', {
+                      onchange: function(e){ _AccountApplication.phone_office = e.target.value; },
+                      value: _AccountApplication.phone_office
+                      })
+                    ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Phone (Cell/WhatsApp)')
+                    ]),
+                  m('.col-9', [
+                    m('input[type=text][placeholder=Phone (Cell/WhatsApp)]', {
+                      onchange: function(e){ _AccountApplication.phone_cell = e.target.value; },
+                      value: _AccountApplication.phone_cell
+                      })
+                    ])
+                  ]),
+              m('.form-group', [
+                  m('.col-3', [
+                    m('label.form-label', 'Email Address')
+                    ]),
+                  m('.col-9', [
+                    m('input[type=text][placeholder=Email Address].email', {
+                      onchange: function(e){ _AccountApplication.email = e.target.value; },
+                      value: _AccountApplication.email
+                      })
+                    ])
+                  ]),
+              m('button.btn.btn-primary.application-submit-button', {onclick: function(e){
+                e.preventDefault(); // this is require since the button is in a form
+                _AccountApplication.submit();
+                }}, "Submit")
+              ]);
+      }
+    };
+  };
+
+export default AccountApplicationBox;
\ No newline at end of file
diff --git a/jsapp/Admin.js b/jsapp/Admin.js
new file mode 100644
index 0000000..3e391df
--- /dev/null
+++ b/jsapp/Admin.js
@@ -0,0 +1,46 @@
+import OpenOrders from './OpenOrders.js';
+import ApplicationManager from './ApplicationManager.js';
+import ItemImageUploader from './ItemImageUploader.js';
+import FrameAdmin from './FrameAdmin.js';
+import _Admin from './_Admin.js';
+//import _Image from './_Image.js';
+
+var c = function(page){
+  return (_Admin.page === page ? '.active' : '')
+  }
+
+var Admin = function(){
+  var image;
+  return {
+    view: function(vnode){
+      return m('.admin',[
+                m('h1.text-center','Admin'),
+                m('ul.tab.tab-block.c-hand', [
+                  m('li.tab-item'+c(OpenOrders), {
+                      onclick: function(){ _Admin.page = OpenOrders; }
+                      }, [
+                    m('a', 'Orders')
+                    ]),
+                  m('li.tab-item'+c(ApplicationManager), {
+                      onclick: function(){ _Admin.page = ApplicationManager; }
+                      }, [
+                    m('a', 'Account Applications')
+                    ]),
+                  m('li.tab-item'+c(FrameAdmin), {
+                      onclick: function(){ _Admin.page = FrameAdmin; }
+                      }, [
+                    m('a', 'Frames')
+                    ]),
+                  m('li.tab-item'+c(ItemImageUploader), {
+                      onclick: function(){ _Admin.page = ItemImageUploader; }
+                      }, [
+                    m('a', 'Image Upload')
+                    ])
+                  ]),
+                m(_Admin.page)
+                ])
+      }
+    };
+  };
+
+export default Admin;
\ No newline at end of file
diff --git a/jsapp/ApplicationManager.js b/jsapp/ApplicationManager.js
new file mode 100644
index 0000000..c1cd8a9
--- /dev/null
+++ b/jsapp/ApplicationManager.js
@@ -0,0 +1,30 @@
+import _Admin from './_Admin.js';
+
+function ApplicationManager(ivnode){
+return { view: function(vnode){
+  return m('.application-manager',[
+            m('h2', 'Open Applications'),
+            m('button.btn.refresh-application-button',{onclick: function(){
+              _Admin.getOpenApplications();
+              }},[m('i.icon.icon-refresh'), 'Refresh']),
+            m('ul.open-application-list', _Admin.open_applications.map(function(a){
+              return m('li', [
+                m('.name', a.salutation+' '+a.firstname+' '+a.lastname+ '('+a.position+' @ '+a.store+')'),
+                m('.info', a.practice_type+' (Office: '+a.phone_office+', Cell: '+a.phone_cell+', Email: '+a.email+')'),
+                m('.address', a.address),
+                m('input[type=text][placeholder=Password].application',{
+                  onchange: function(e){ a.password = e.target.value },
+                  value: a.password
+                  }),
+                m('button.btn.btn-success.accept-application-button', {onclick: function(){
+                  _Admin.acceptApplication(a);
+                  }}, 'Accept'),
+                m('button.btn.btn-error.accept-application-button', {onclick: function(){
+                  _Admin.declineApplication(a);
+                  }}, 'Decline')
+                ]);
+              }))
+    ]);
+}}}
+
+export default ApplicationManager;
\ No newline at end of file
diff --git a/jsapp/BaseBrowser.js b/jsapp/BaseBrowser.js
new file mode 100644
index 0000000..58de227
--- /dev/null
+++ b/jsapp/BaseBrowser.js
@@ -0,0 +1,39 @@
+import _Cart from './_Cart.js';
+import BaseListItem from './BaseListItem.js';
+
+var BaseBrowser = function(){
+return {
+view: function(){
+var lenses = [];
+return m('.base-listing', [
+      m('table.table.table-striped', [
+        m('thead', [
+          m('tr', [
+            m('th', 'Base'),
+            m('th', 'Add'),
+            m('th', 'Material'),
+            m('th', 'AR'),
+            m('th', 'Photochromatic'),
+            m('th', 'Price'),
+            m('th', 'Quantity')
+            ])
+          ]),
+        m('tbody', [
+          lenses.map(function(lens){
+            return m(BaseListItem, {lens: lens});
+            }),
+          m('tr', [
+            m('td.text-center', {colspan: 7}, [
+              m('button.btn.btn-primary.btn-lg.btn-block', [
+                m('i.icon.icon-plus')
+                ])
+              ])
+            ])
+          ])
+        ])
+      ]);
+}
+};
+}
+
+export default BaseBrowser;
\ No newline at end of file
diff --git a/jsapp/BaseListItem.js b/jsapp/BaseListItem.js
new file mode 100644
index 0000000..bb3a6ca
--- /dev/null
+++ b/jsapp/BaseListItem.js
@@ -0,0 +1,75 @@
+var BaseListItem = function(){
+return {
+view: function(vnode){
+var lens = vnode.attrs.lens;
+return m('tr', [
+            m('td', [ // Base
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: '2'}, 'Base 2'),
+                  m('option', {value: '4'}, 'Base 4'),
+                  m('option', {value: '6'}, 'Base 6'),
+                  m('option', {value: '8'}, 'Base 8')
+                  ])
+                ])
+              ]),
+            m('td', [ // Add
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: '1.00'}, '1.00'),
+                  m('option', {value: '1.25'}, '1.25'),
+                  m('option', {value: '1.50'}, '1.50'),
+                  m('option', {value: '1.75'}, '1.75'),
+                  m('option', {value: '2.00'}, '2.00'),
+                  m('option', {value: '2.25'}, '2.25'),
+                  m('option', {value: '2.50'}, '2.50'),
+                  m('option', {value: '2.75'}, '2.75'),
+                  m('option', {value: '3.00'}, '3.00')
+                  ])
+                ])
+              ]),
+            m('td', [ // Material
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: 'cr39'}, 'CR39'),
+                  m('option', {value: 'ft'}, 'F/T'),
+                  m('option', {value: 'kriptok'}, 'Kriptok'),
+                  m('option', {value: 'progressive'}, 'Progressive')
+                  ])
+                ])
+              ]),
+            m('td', [ // AR Coating
+              m('.form-group', [
+                m('label.form-checkbox', [
+                  m('input', {type: 'checkbox', checked: false}),
+                  m('i.form-icon')
+                  ]),
+                ])
+              ]),
+            m('td', [ // Photochromatic
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: ''}, 'None'),
+                  m('option', {value: 'photogray'}, 'Photogray'),
+                  m('option', {value: 'photobrown'}, 'Photobrown')
+                  ])
+                ])
+              ]),
+            m('td', '$3'), // Price
+            m('td', [ // Quantity
+              m('.form-group.input-group', [
+                m('input.form-input', {
+                  type: 'text',
+                  value: '0'
+                  }),
+                m('button.btn.btn-primary.input-group-btn', [
+                  m('i.icon.icon-delete')
+                  ])
+                ])
+              ])
+            ]);
+}
+};
+};
+
+export default BaseListItem;
\ No newline at end of file
diff --git a/jsapp/Carousel.js b/jsapp/Carousel.js
new file mode 100644
index 0000000..a3fd552
--- /dev/null
+++ b/jsapp/Carousel.js
@@ -0,0 +1,47 @@
+var Carousel = function(){
+return {
+view: function(vnode){
+  var images = vnode.attrs.images;
+  var name = vnode.attrs.name;
+  
+  return m('.carousel', [
+    images.map(function(image,index){
+      return m('input.carousel-locator', {
+        id: 'slide-'+index,
+        type: 'radio',
+        name: name,
+        hidden: true,
+        checked: (index===0 ? true : false)
+        });
+      }),
+    m('.carousel-container', images.map(function(image, index){
+      var prev_index = (index === 0 ? images.length-1 : index-1);
+      var next_index = (index === images.length-1 ? 0 : index+1);
+      return m('figure.carousel-item', [
+        m('label.item-prev.btn.btn-action.btn-large', {
+          "for": 'slide-'+prev_index
+          }, [
+            m('i.icon.icon-arrow-left')
+            ]),
+        m('label.item-next.btn.btn-action.btn-large', {
+          "for": 'slide-'+next_index
+          }, [
+            m('i.icon.icon-arrow-right')
+            ]),
+        m('img.img-responsive.rounded', {
+          src: image.src,
+          alt: image.description
+          })
+        ]);
+      })),
+    m('.carousel-nav', images.map(function(image, index){
+      return m('label.nav-item.text-hide.c-hand',{
+        "for": 'slide-'+index 
+        }, index.toString());
+      })),
+    ]);
+}
+};
+};
+
+export default Carousel;
\ No newline at end of file
diff --git a/jsapp/Cart.js b/jsapp/Cart.js
new file mode 100644
index 0000000..4363c38
--- /dev/null
+++ b/jsapp/Cart.js
@@ -0,0 +1,77 @@
+import _Cart from './_Cart.js';
+import _Item from './_Item.js';
+import _User from './_User.js';
+import _DB from './_DB.js';
+import _Message from './_Message.js';
+import toNumber from './util/toNumber.js';
+import isNumber from './util/isNumber.js';
+
+function Cart(initialVnode) {
+  return {
+    view: function(vnode) {
+      if(!_User.isLoggedIn()){
+        return m('.cart', [
+          m("h1.text-center", "Shopping Cart"),
+          m('p', 'You must be logged-in to see your cart.')
+          ]);
+        }
+      var grand_total = 0;
+      return m(".cart", [
+        m("h1.text-center", "Shopping Cart"),
+        m("table.table.table-striped.table-hover.line-item-list", [
+          m('thead', [
+            m('tr', [
+              m('th', 'Item'),
+              m('th', 'Price'),
+              m('th', 'Quantity'),
+              m('th', 'Subtotal')
+              ])
+            ]),
+          m('tbody',
+              _Cart.current.lineitem_ids.map(function(lineitem_id, lineitem_index){
+                var lineitem = _DB.getRecord(lineitem_id);
+                var item = _DB.getRecord(lineitem.item_id);
+                var price = lineitem.price;
+                var quantity = lineitem.quantity;
+                var sub_total = price*quantity;
+                grand_total += sub_total;
+                return m('tr.line-item', [
+                    m('td.item-title', item.name),
+                    m('td.price', "$"+price),
+                    m('td', [
+                      m('input[type=text].quantity.form-input', {
+                        // TODO: Don't update quantity if it's not a (whole) number
+                        onchange: function (e) {
+                          //lineitem.quantity = toNumber(e.target.value);
+                          var new_quantity = toNumber(e.target.value);
+                          //if(new_quantity === 0){
+                          //  _Cart.removeLineItem(lineitem_index);  // TODO: change to removeByLineitem, it's more efficient
+                          //  }
+                          //else if(!isNumber(new_quantity)){
+                          if(!isNumber(new_quantity)){
+                            //console.log("Qty. is not a number.");
+                            _Message.addError("Quantity '"+new_quantity+"' is not a number.");
+                            }
+                          else{
+                            _Cart.updateQuantityOfItem(item, new_quantity);
+                            //lineitem.quantity = new_quantity;
+                            }
+                          },
+                        value: lineitem.quantity
+                        }),
+                      ]),
+                    m('td.line-item-total', '$'+sub_total)
+                    ]);
+                  })
+            )
+          ]),
+        m('.total', [
+          m('label.grand-total-label', "Grand Total: "),
+          m('span.grand-total', '$'+grand_total)
+          ]),
+        m("button.btn.btn-primary", {onclick: _Cart.placeOrder}, "Place Order")
+        ]);
+    }
+  }
+}
+export default Cart
\ No newline at end of file
diff --git a/jsapp/CollectionsList.js b/jsapp/CollectionsList.js
new file mode 100644
index 0000000..b7fb382
--- /dev/null
+++ b/jsapp/CollectionsList.js
@@ -0,0 +1,37 @@
+import _Item from './_Item.js';
+import _Navigation from './_Navigation.js';
+import ItemBrowser from './ItemBrowser.js';
+import _CollectionsList from './_CollectionsList.js';
+import _User from './_User.js';
+
+var CollectionsList = function(){
+return {view: function(vnode){
+  var brands = _CollectionsList.house_brands;
+  return m('.container', [
+    m('.columns', [
+      m('.column.col-12', [
+        m('h1.text-center', 'Collections')
+        ])
+      ]),
+    m('.columns', brands.map(function(brand){
+      return m('.column.col-4.col-md-6.col-xs-12.mt-1', [
+        m('.card.c-hand', {onclick: function(e){
+            //var item_browser_attrs = {};
+            //item_browser_attrs.items = [];
+            _Item.getItems({brand:brand}).then(function(items){
+              //item_browser_attrs.items = items;
+              _Navigation.navigateTo(ItemBrowser, {items: items});
+              });
+            }},[
+          m('.card-header', [
+            m('.card-title.h3.text-center', brand)
+            ])
+          ])
+        ]);
+        }
+      ))
+    ]);
+}};
+};
+
+export default CollectionsList;
\ No newline at end of file
diff --git a/jsapp/ContactUs.js b/jsapp/ContactUs.js
new file mode 100644
index 0000000..e4e32dc
--- /dev/null
+++ b/jsapp/ContactUs.js
@@ -0,0 +1,25 @@
+var ContactUs = function(){
+return {
+view: function(vnode){
+  return m('.contactus', [
+    m('h1.text-center', 'Contact Us'),
+    m('h3', ['Phone ', m('small', 'Customer Service & General Inquiries')]),
+    m('p', '(305)-818-6786'),
+    m('h3', 'Email'),
+    m('p', 'silvano@piazzaoptical.com'),
+    m('h3', 'Hours'),
+    m('p', 'Mon-Fri 9:00-5:30'),
+    m('h3', 'Address'),
+    m('p', [
+      '8200 NW 27th. Street',
+      m('br'),
+      'Suite 105',
+      m('br'),
+      'Miami, FL  33122'
+      ])
+    ]);
+}
+};
+};
+
+export default ContactUs;
diff --git a/jsapp/DesignerCollectionsList.js b/jsapp/DesignerCollectionsList.js
new file mode 100644
index 0000000..c067ac3
--- /dev/null
+++ b/jsapp/DesignerCollectionsList.js
@@ -0,0 +1,38 @@
+import _Item from './_Item.js';
+import _Navigation from './_Navigation.js';
+import ItemBrowser from './ItemBrowser.js';
+import _CollectionsList from './_CollectionsList.js';
+import _User from './_User.js';
+
+var DesignerCollectionsList = function(){
+return {view: function(vnode){
+  var brands = _CollectionsList.designer_brands;
+  return m('.container', [
+    m('.columns', [
+      m('.column.col-12', [
+        m('h1.text-center', 'Designer Collections')
+        ])
+      ]),
+    _User.isGuest() ? m('.columns', [m('.column.col-12', 'Please Sign-In to See Designer Brands')]) : 
+    m('.columns', brands.map(function(brand){
+      return m('.column.col-4.col-md-6.col-xs-12.mt-1', [
+        m('.card.c-hand', {onclick: function(e){
+            //var item_browser_attrs = {};
+            //item_browser_attrs.items = [];
+            _Item.getItems({brand:brand}).then(function(items){
+              //item_browser_attrs.items = items;
+              _Navigation.navigateTo(ItemBrowser, {items: items});
+              });
+            }},[
+          m('.card-header', [
+            m('.card-title.h3.text-center', brand)
+            ])
+          ])
+        ]);
+        }
+      ))
+    ]);
+}};
+};
+
+export default DesignerCollectionsList;
\ No newline at end of file
diff --git a/jsapp/Equipment.js b/jsapp/Equipment.js
new file mode 100644
index 0000000..b934653
--- /dev/null
+++ b/jsapp/Equipment.js
@@ -0,0 +1,15 @@
+import ItemBrowser from './ItemBrowser.js';
+import _Equipment from './_Equipment.js';
+
+var Equipment = function(){
+return {
+view: function(){
+return m('.equipment', [
+  m('h1.text-center','Equipment'),
+  m(ItemBrowser, {items: _Equipment.items})
+  ]);
+}
+};
+};
+
+export default Equipment;
\ No newline at end of file
diff --git a/jsapp/Events.js b/jsapp/Events.js
new file mode 100644
index 0000000..bd0c9aa
--- /dev/null
+++ b/jsapp/Events.js
@@ -0,0 +1,11 @@
+var Events = function(){
+  return {
+    view: function(vnode){
+      return m('.events', [
+        m('h1.text-center', "Upcoming Events")
+        ]);
+      }
+    };
+  };
+
+export default Events;
\ No newline at end of file
diff --git a/jsapp/FileUploadDropArea.js b/jsapp/FileUploadDropArea.js
new file mode 100644
index 0000000..c1af6ad
--- /dev/null
+++ b/jsapp/FileUploadDropArea.js
@@ -0,0 +1,41 @@
+var noop = function(){};
+
+function FileUploadDropArea(){
+  return {
+    view: function(vnode){
+      var cb = vnode.attrs.cb;
+      if(typeof cb !== 'Function'){
+        cb = noop;
+        }
+      return m('.file-upload-drop-area',{
+        ondragover: function(e){
+          e.preventDefault();
+          },
+        ondrop: function(e){
+          e.preventDefault();  // don't open the file in the browser
+          var files = [];
+          
+          // some browsers use `.items` and some use `.files`, so check for both:
+          if (e.dataTransfer.items) {
+            for (var i = 0; i < e.dataTransfer.items.length; i++) {
+              if (e.dataTransfer.items[i].kind === 'file') {  // If dropped items aren't files, reject them
+                files.push( e.dataTransfer.items[i].getAsFile() );
+                }
+              }
+            }
+          else {
+            for (var i = 0; i < e.dataTransfer.files.length; i++) {
+              files.push( e.dataTransfer.files[i] );
+              }
+            }
+          for(var i=0, file=null; i<files.length; i++){
+            file = files[i]
+            vnode.attrs.cb(file);
+            }
+          }
+        }, 'Drop files here...');
+      }
+    };
+  }
+
+export default FileUploadDropArea;
\ No newline at end of file
diff --git a/jsapp/FrameAdmin.js b/jsapp/FrameAdmin.js
new file mode 100644
index 0000000..636268d
--- /dev/null
+++ b/jsapp/FrameAdmin.js
@@ -0,0 +1,65 @@
+import _FrameAdmin from './_FrameAdmin.js';
+import FrameAdminListItem from './FrameAdminListItem.js';
+
+var FrameAdmin = function(){
+return {
+view: function(){
+var results_frames = _FrameAdmin.results_frames;
+var working_frames = _FrameAdmin.working_frames;
+return m('.frame-listing', [
+      m('h4', 'Frame Editor'),
+      m('.search', [
+        m('input[type=text][placeholder=Model]', {
+          onchange: _FrameAdmin.search_onchange_handler,
+          value: _FrameAdmin.search_term
+          })
+        ]),
+      m('table.table.table-striped', [
+        m('thead', [
+          m('tr', [
+            m('th', 'Name'),
+            m('th', 'Brand'),
+            m('th', 'Model'),
+            m('th', 'Color Code'),
+            m('th', 'Color Description'),
+            m('th', 'Description (Short)'),
+            m('th', 'Size'),
+            m('th', 'Material'),
+            m('th', 'Price (Silver)'),
+            m('th', 'Price (Gold)'),
+            m('th', 'Inventory'),
+            m('th', 'Delete')
+            ])
+          ]),
+        m('tbody', [
+          m('tr', [
+            m('td.text-center', {colspan: 11}, [
+              m('button.btn.btn-primary.btn-lg.btn-block', {onclick: _FrameAdmin.add_button_onclick_handler}, [
+                m('i.icon.icon-plus'),
+                ' Add ',
+                m('i.icon.icon-plus')
+                ])
+              ])
+            ]),
+          working_frames.map(function(frame, i){
+            return m(FrameAdminListItem, {frame: frame, collection: working_frames, index_in_collection: i});
+            }),
+          m('tr', [
+            m('td.text-center', {colspan: 11}, [
+              m('button.btn.btn-primary.btn-lg.btn-block', {onclick: _FrameAdmin.clear_button_onclick_handler}, [
+                m('i.icon.icon-refresh'),
+                ' Clear'
+                ])
+              ])
+            ]),
+          results_frames.map(function(frame, i){
+            return m(FrameAdminListItem, {frame: frame, collection: results_frames, index_in_collection: i});
+            })
+          ])
+        ])
+      ]);
+}
+};
+}
+
+export default FrameAdmin;
diff --git a/jsapp/FrameAdminListItem.js b/jsapp/FrameAdminListItem.js
new file mode 100644
index 0000000..429e82f
--- /dev/null
+++ b/jsapp/FrameAdminListItem.js
@@ -0,0 +1,94 @@
+import _FrameAdminListItem from './_FrameAdminListItem.js';
+
+
+var FrameAdminListItem = function(){
+return {
+view: function(vnode){
+  var frame = vnode.attrs.frame;
+  var collection = vnode.attrs.collection;
+  var index_in_collection = vnode.attrs.index_in_collection;
+  if(frame.loading === true){
+    return m('tr', [
+      m('td', {colspan: 11}, [
+        m('.loading-lg')
+        ])
+      ]);
+    }
+  else{
+    return m('tr', [
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'name', e.target.value);
+          }, value: frame.name})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'brand', e.target.value);
+          }, value: frame.brand})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'model', e.target.value);
+          }, value: frame.model})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'color', e.target.value);
+          }, value: frame.color})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'color_description', e.target.value);
+          }, value: frame.color_description})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'description_short', e.target.value);
+          }, value: frame.description_short})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'size', e.target.value);
+          }, value: frame.size})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          _FrameAdminListItem.update(frame, 'material', e.target.value);
+          }, value: frame.material})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          var price = Number(e.target.value)
+          if(price !== NaN){
+            _FrameAdminListItem.update(frame, 'price_silver', price);
+            }
+          }, value: frame.price_silver})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          var price = Number(e.target.value)
+          if(price !== NaN){
+            _FrameAdminListItem.update(frame, 'price_gold', price);
+            }
+          }, value: frame.price_gold})
+        ]),
+      m('td', [
+        m('input', {type:'text', onchange: function(e){
+          var inventory = Number(e.target.value)
+          if(inventory !== NaN){
+            _FrameAdminListItem.update(frame, 'inventory', inventory);
+            }
+          }, value: frame.inventory})
+        ]),
+      m('td', [
+        m('button.btn.btn-action.btn-primary.s-circle', {onclick: function(e){
+          _FrameAdminListItem.delete(frame, collection, index_in_collection);
+          }}, [m('i.icon.icon-delete')])
+        ])
+      ]);
+    }
+}
+};
+};
+
+export default FrameAdminListItem;
diff --git a/jsapp/FullscreenImage.js b/jsapp/FullscreenImage.js
new file mode 100644
index 0000000..c018081
--- /dev/null
+++ b/jsapp/FullscreenImage.js
@@ -0,0 +1,23 @@
+import _FullscreenImage from './_FullscreenImage.js';
+
+var FullscreenImage = function(){
+return {
+view: function(vnode){
+  var image = _FullscreenImage.image;
+  if(image === null){
+    return null;
+    }
+  else{
+    return m('img.img-responsive.p-fixed', {
+      style: 'top:0px;left:0px;',
+      src: (image.thumbnail_original_id ? '/thumbnailsdb/'+image.thumbnail_original_id+'.png' : image.src_base64),
+      onclick: function(){
+        _FullscreenImage.image = null;
+        }
+      });
+    }
+}
+};
+};
+
+export default FullscreenImage;
\ No newline at end of file
diff --git a/jsapp/Header.js b/jsapp/Header.js
new file mode 100644
index 0000000..be26c38
--- /dev/null
+++ b/jsapp/Header.js
@@ -0,0 +1,11 @@
+var Header = function(){
+  return m(".header", [
+      m("h1", "Piazza Optical"),
+      m(".login-box", [
+        m("input.username", {placeholder: "Username"}),
+        m("input.password", {placeholder: "Password", type:"password"})
+        ])
+      ])
+  }
+
+export default Header
\ No newline at end of file
diff --git a/jsapp/Home.js b/jsapp/Home.js
new file mode 100644
index 0000000..ab1ebcf
--- /dev/null
+++ b/jsapp/Home.js
@@ -0,0 +1,15 @@
+import _Home from './_Home.js';
+import Carousel from './Carousel.js';
+
+var Home = function(){
+  return {
+    view: function(vnode){
+      return m('.home', [
+        //m('h1', "Piazza Optical Home Page"),
+        m(Carousel, {images: _Home.carousel_images, name: 'home-carousel'})
+        ]);
+      }
+    };
+  };
+
+export default Home;
\ No newline at end of file
diff --git a/jsapp/ItemBrowser.js b/jsapp/ItemBrowser.js
new file mode 100644
index 0000000..11d70a7
--- /dev/null
+++ b/jsapp/ItemBrowser.js
@@ -0,0 +1,30 @@
+//import ItemFilter from './ItemFilter.js';
+import ItemListing from './ItemListing.js';
+
+function cmp_fn(a,b){
+  var A = (a.model+a.color).toUpperCase(); // ignore upper and lowercase
+  var B = (b.model+b.color).toUpperCase(); // ignore upper and lowercase
+  if (A < B) {
+    return -1;
+    }
+  else if (A > B) {
+    return 1;
+    }
+  else{ // names must be equal
+    return 0;
+    }
+  }
+
+function ItemBrowser(initialVnode) {
+  return {
+    view: function(vnode) {
+      var items = vnode.attrs.items
+      items.sort(cmp_fn);
+      return m(".item-browser.container", [
+        //m(ItemFilter),
+        m(ItemListing, {items: items})
+        ]);
+    }
+  }
+}
+export default ItemBrowser
\ No newline at end of file
diff --git a/jsapp/ItemChooser.js b/jsapp/ItemChooser.js
new file mode 100644
index 0000000..f0a6b27
--- /dev/null
+++ b/jsapp/ItemChooser.js
@@ -0,0 +1,63 @@
+import _Item from './_Item.js';
+import isArray from './util/isArray.js';
+
+var ItemChooser = function(){
+var search_term = '';
+var results = [];
+var chosen_item = null;
+return {
+view: function(vnode){
+  var onchoose = vnode.attrs.onchoose;
+  return m('.item-search', [
+    m('input[type=text][placeholder=Model]', {
+      onchange: function(e){
+        search_term = e.target.value;
+        results = [];
+        if(search_term !== ''){
+          _Item.searchByString(search_term)
+            .then(function(res){
+              if(res.success === true){
+                if(isArray(res.results)){ // empty list comes back as `{}` from server instead of `[]`
+                  results = res.results;
+                  }
+                else{
+                  results = [];
+                  }
+                }
+              });
+            }
+        },
+      value: search_term
+      }),
+    m('table.table.table-striped.table-hover.results', [
+      m('thead', [
+        m('tr', [
+          m('th', 'Brand'),
+          m('th', 'Model'),
+          m('th', 'Color')
+          ])
+        ]),
+      m('tbody',
+          results.map(function(item){
+            var active_class = (chosen_item === item ? '.active' : '');
+            return m('tr'+active_class, {
+                onclick: function(e){
+                  e.stopPropagation();
+                  chosen_item = item;
+                  onchoose(item);
+                  }
+                },[
+              m('td', item.brand),
+              m('td', item.model),
+              m('td', item.color)
+              ])
+            })
+          )
+      ]
+    )
+  ]);
+}
+};
+};
+
+export default ItemChooser;
\ No newline at end of file
diff --git a/jsapp/ItemFilter.js b/jsapp/ItemFilter.js
new file mode 100644
index 0000000..3f7f651
--- /dev/null
+++ b/jsapp/ItemFilter.js
@@ -0,0 +1,14 @@
+
+function ItemFilter(initialVnode) {
+  return {
+    view: function(vnode) {
+      return m(".item-filter", [
+        m(".heading", "Brand"),
+        m(".heading", "Color"),
+        m(".heading", "Category"),
+        m(".heading", "Tags")
+        ]);
+    }
+  }
+}
+export default ItemFilter
\ No newline at end of file
diff --git a/jsapp/ItemImageController.js b/jsapp/ItemImageController.js
new file mode 100644
index 0000000..515b76d
--- /dev/null
+++ b/jsapp/ItemImageController.js
@@ -0,0 +1,75 @@
+import _Image from './_Image.js';
+import _Item from './_Item.js';
+import _DB from './_DB.js';
+import _FullscreenImage from './_FullscreenImage.js';
+import isObject from './util/isObject.js';
+
+function ItemImageController(ivnode){
+return { view: function(vnode){
+  var item = vnode.attrs.item;
+  if(item === null){
+    return m('.msg', 'No item chosen.');
+    }
+  if(typeof item.image_ids === 'undefined'){ item.image_ids=[]; }
+  var images = item.image_ids.map(function(image_id){
+    if(isObject(image_id)){
+      return image_id;
+      }
+    else{
+      return _DB.getRecord(image_id);
+      }
+    }); 
+  var no_images = (images.length === 0);
+  return m('.item-image-controller.bg-secondary.text-center', {
+        style: 'height: 500px;',
+        ondragover: function(e){
+          e.preventDefault();
+          },
+        ondrop: function(e){
+          e.preventDefault();  // don't open the file in the browser
+          var files = [];
+          
+          // some browsers use `.items` and some use `.files`, so check for both:
+          if (e.dataTransfer.items) {
+            for (var i = 0; i < e.dataTransfer.items.length; i++) {
+              if (e.dataTransfer.items[i].kind === 'file') {  // If dropped items aren't files, reject them
+                files.push( e.dataTransfer.items[i].getAsFile() );
+                }
+              }
+            }
+          else {
+            for (var i = 0; i < e.dataTransfer.files.length; i++) {
+              files.push( e.dataTransfer.files[i] );
+              }
+            }
+          for(var i=0; i<files.length; i++){
+            _Image.newFromFile(files[i]).then(function(image){
+              _Item.addImage(item, image).then(m.redraw);
+              });
+            }
+          m.redraw();
+          }
+        }, [
+    m('.container.image-list', [
+      m('.columns',
+                no_images ? [m('.column.col-12', [m('h3', 'Drop Images Here')] )] : images.map(function(image){
+                  return m('.column.col-4', [
+                    m('.card.c-hand', {onclick: function(){ _LargeImage.src = (image.thumbnail_original_id ? '/thumbnailsdb/'+image.thumbnail_original_id+'.png' : image.src_base64); }},[
+                      m('figure', [
+                        m('img.img-responsive', {src: (image.thumbnail_180_id ? _Image.thumbnailPath(image, '180') : image.src_base64) }),
+                        m('figcaption', image.original_filename)
+                        ]),
+                      m('button.btn.btn-clear.delete', {onclick: function(e){
+                        e.stopPropagation();
+                        _Item.deleteImage(item, image);
+                        }},'Delete'),
+                      (image.is_uploading ? m('progress.progress',{value: image.progress, max: 1.0}) : null)
+                      ])
+                    ]);
+                  })
+        )
+      ])
+    ]);
+}}}
+
+export default ItemImageController;
\ No newline at end of file
diff --git a/jsapp/ItemImageUploader.js b/jsapp/ItemImageUploader.js
new file mode 100644
index 0000000..a4d07b6
--- /dev/null
+++ b/jsapp/ItemImageUploader.js
@@ -0,0 +1,29 @@
+import ItemChooser from './ItemChooser.js';
+import ItemImageController from './ItemImageController.js';
+import _Item from './_Item.js';
+
+function ItemImageUploader(){
+var item = null;
+return {
+view: function(){
+  return m('.item-image-uploader', [
+    m('h2', 'Upload Images to Items'),
+    m('.container', [
+      m('.columns', [
+        m('.column.col-6', [
+          m(ItemChooser, {onchoose: function(_item){
+                  item = _item;
+                  _Item.loadImages(item);
+                  }})
+          ]),
+        m('.column.col-6', [
+          m(ItemImageController, {item: item})
+          ])
+        ])
+      ])
+    ]);
+}
+};
+}
+
+export default ItemImageUploader;
\ No newline at end of file
diff --git a/jsapp/ItemListing.js b/jsapp/ItemListing.js
new file mode 100644
index 0000000..f003887
--- /dev/null
+++ b/jsapp/ItemListing.js
@@ -0,0 +1,29 @@
+import ItemListingEntry from './ItemListingEntry.js';
+import _Item from './_Item.js';
+
+function ItemListing(initialVnode) {
+  var chosen_images = {
+    items: null,
+    chosen_images: []
+    };
+  return {
+    view: function(vnode) {
+      //var items = _Item.filter(vnode.attrs.filter);
+      //var items = _Item.collection;
+      var items = vnode.attrs.items;
+      if(items.length === 0){
+        return m('h5', 'Please contact us directly to order.');
+        }
+      if(chosen_images.items !== items){
+        chosen_images.chosen_images = items.map(function(item){
+          return item.image_ids[0];
+          });
+        chosen_images.items = items;
+        }
+      return m(".columns", items.map(function(item, i){ 
+          return m(ItemListingEntry, {item:item, index: i, chosen_images: chosen_images.chosen_images})
+          }));
+    }
+  }
+}
+export default ItemListing
\ No newline at end of file
diff --git a/jsapp/ItemListingEntry.js b/jsapp/ItemListingEntry.js
new file mode 100644
index 0000000..bf12c59
--- /dev/null
+++ b/jsapp/ItemListingEntry.js
@@ -0,0 +1,97 @@
+//var ItemListingEntry = require('./ItemListingEntry');
+import _Cart from "./_Cart.js";
+import _Item from './_Item.js';
+import _User from './_User.js';
+import _Modal from './_Modal.js';
+import _Message from './_Message.js';
+import _Image from './_Image.js';
+import _DB from './_DB.js';
+import ItemModalView from './ItemModalView.js';
+import isUndefined from './util/isUndefined.js';
+import toNumber from "./util/toNumber";
+import isNumber from "./util/isNumber";
+
+function ItemListingEntry(initialVnode) {
+  return {
+    view: function(vnode) {
+      var item = vnode.attrs.item;
+      var index = vnode.attrs.index;
+      var chosen_images = vnode.attrs.chosen_images;
+      var chosen_image = chosen_images[index];
+      var lineitem = _Cart.lineItemOfItem(item);
+      var thumbnail_path = ( chosen_image ? _Image.thumbnailPath(_DB.getRecord(chosen_image), '180') : false );
+      return m('.column.col-3.col-md-6.col-xs-12.mt-2', [
+                m(".card.c-hand", {
+                    onclick: function(e){
+                      _Item.getFullItemInfo(item).then(function(){
+                        _Modal.show(ItemModalView, {item: item});
+                        });
+                      }
+                    },[
+                  m('.card-image.p-centered',[
+                    (item.image_ids.length === 0
+                      ?
+                      m("img.img-responsive", {src: _Image.placeholder_img_180_path })
+                      :
+                      [
+                        m("img.img-responsive", {src: thumbnail_path }),
+                        m('.form-group.text-center',
+                          item.image_ids.map(function(image_id){
+                            return m('label.form-radio.label-sm.form-inline', [
+                              m('input.input-sm', {
+                                type:'radio', 
+                                name: item.id.toString(),
+                                value: image_id, // is this converted to string?
+                                checked: chosen_image===image_id,
+                                onchange: function(e){
+                                  chosen_images[index] = image_id;
+                                  e.stopPropagation();
+                                  }
+                                }),
+                              m('i.form-icon',{onclick:function(e){
+                                  chosen_images[index] = image_id;
+                                  e.stopPropagation(); // So a modal box doesn't open-up
+                                  return false; // I don't know why I need this in addition to stopPropagation().
+                                  }
+                                },"")
+                              ])
+                            })
+                          )
+                        ]
+                      )
+                    ]),
+                  m('.card-header', [
+                    m(".card-title.h6.text-ellipsis", item.name),
+                    m(".card-subtitle.text-gray", item.color),
+                    ]),
+                  (_User.isGuest() ? null : [
+                    m('card-body',[
+                      m(".price", '$'+_Item.priceOf(item)),
+                      ]),
+                    m('card-footer', [
+                        m("input[type=text].form-input.text-center.c-auto", {
+                          onchange: function(e){
+                                      var new_quantity = toNumber(e.target.value);
+                                      if(new_quantity === 0){
+                                        _Cart.removeByItem(item);
+                                        }
+                                      else if(!isNumber(new_quantity)){
+                                        //console.log("Qty. is not a number.");
+                                        _Message.addError("Quantity '"+new_quantity+"' is not a number.");
+                                        }
+                                      else{
+                                        _Cart.updateQuantityOfItem(item, new_quantity);
+                                        }
+                                      },
+                          onfocus: function(e){e.target.select();},
+                          onclick: function(e){ e.stopPropagation(); },
+                          value: (isUndefined(lineitem) ? 0 : lineitem.quantity)
+                          })
+                        ])
+                      ])
+                  ])
+      ]);
+    }
+  }
+}
+export default ItemListingEntry
\ No newline at end of file
diff --git a/jsapp/ItemModalView.js b/jsapp/ItemModalView.js
new file mode 100644
index 0000000..55ddeb7
--- /dev/null
+++ b/jsapp/ItemModalView.js
@@ -0,0 +1,82 @@
+import _Item from "./_Item.js";
+import _Image from './_Image.js';
+import _Modal from './_Modal.js';
+import _User from './_User.js';
+//import _LargeImage from './_LargeImage.js';
+
+var _chosen_image = {
+  item: null,
+  chosen_image: null
+  };
+
+var ItemModalView = function(){
+return {
+view: function(vnode){
+var item = vnode.attrs.item;
+if(_chosen_image.item !== item){
+  _chosen_image.item = item;
+  _chosen_image.chosen_image = item.image_ids[0];
+  }
+var chosen_image = _chosen_image.chosen_image;
+var thumbnail_path = ( chosen_image ? _Image.thumbnailPath(_DB.getRecord(chosen_image), '960') : false );
+/*
+return [
+  m('.modal-header', [
+    m('a.btn.btn-clear.float-right', {'aria-label':"Close", onclick: function(){ _Modal.close(); }}),
+    m('.modal-title.h4', item.name)
+    ]),
+  m('.modal-body', [
+    m("img.img-responsive", {src: thumbnail_path || _Image.placeholder_img_960_path })
+    ]),
+  m('.modal-footer', [
+    m('div', '$'+_Item.priceOf(item)),
+    m('button.btn.btn-primary', 'Add to Cart')
+    ])
+  ];
+  */
+return m('.item-modal-view', [
+  m('a.btn.btn-clear.float-right', {'aria-label':"Close", onclick: function(){ _Modal.close(); }}),
+  m('.h4.text-center', item.name),
+  m("img.img-responsive", {
+    src: thumbnail_path || _Image.placeholder_img_960_path,
+    onclick: function(e){
+      e.stopPropagation();
+      if(thumbnail_path !== false){
+        window.open(_Image.thumbnailPath(_DB.getRecord(chosen_image), 'original'), '_blank');
+        }
+      //_LargeImage.src = (thumbnail_path ? _Image.thumbnailPath(_DB.getRecord(item.image_ids[0]), 'original') : null);
+      }
+    }),
+  m('.form-group.text-center',
+    item.image_ids.map(function(image_id){
+      return m('label.form-radio.label-sm.form-inline', [
+        m('input.input-sm', {
+          type:'radio', 
+          name: item.id.toString()+'modal', // to distinguish from 'ItemListingEntry' radio buttons
+          value: image_id, // is this converted to string?
+          checked: chosen_image===image_id,
+          onchange: function(e){
+            _chosen_image.chosen_image = image_id;
+            }
+          }),
+        m('i.form-icon',"")
+        ]);
+      })
+    ),
+  m('ul', [
+    m('li', 'Color: '+item.color+' ('+item.color_description+')'),
+    m('li', 'Size: '+(item.size || 'N/A')),
+    m('li', 'Material: '+(item.material || 'N/A'))
+    ]),
+  m('p', item.description_short),
+  ( _User.isLoggedIn() ? [
+    m('div', '$'+_Item.priceOf(item) ),
+    m('button.btn.btn-primary', 'Add to Cart')
+    ]
+    : null )
+  ]);
+}
+};
+};
+
+export default ItemModalView;
\ No newline at end of file
diff --git a/jsapp/LargeImage.js b/jsapp/LargeImage.js
new file mode 100644
index 0000000..9010fb2
--- /dev/null
+++ b/jsapp/LargeImage.js
@@ -0,0 +1,22 @@
+import _LargeImage from './_LargeImage.js';
+
+var LargeImage = function(){
+return {
+view: function(){
+if(_LargeImage.src === null){
+  return null;
+  }
+else{
+  return m('img.img-responsive.large-image', {
+    src: _LargeImage.src,
+    onclick: function(e){
+      e.stopPropagation();
+      _LargeImage.src = null;
+      }
+    });
+  }
+}
+};
+};
+
+export default LargeImage;
\ No newline at end of file
diff --git a/jsapp/LensBrowser.js b/jsapp/LensBrowser.js
new file mode 100644
index 0000000..e13d45b
--- /dev/null
+++ b/jsapp/LensBrowser.js
@@ -0,0 +1,40 @@
+import _LensBrowser from './_LensBrowser.js';
+import SingleVisionBrowser from './SingleVisionBrowser.js';
+import MultifocalBrowser from './MultifocalBrowser.js';
+import BaseBrowser from './BaseBrowser.js';
+
+var c = function(browser){
+  return (_LensBrowser.browser === browser ? '.active' : '')
+  }
+
+var LensBrowser = function(){
+return {
+view: function(){
+return m('.lens-browser', [
+  m('h1.text-center', 'Lenses'),
+  m('p', '* Prices are per pair.'),
+  m('p', '* High strengths cost extra.'),
+  m('ul.tab.tab-block.c-hand', [
+    m('li.tab-item'+c(SingleVisionBrowser), {
+        onclick: function(){ _LensBrowser.browser = SingleVisionBrowser; }
+        }, [
+      m('a', 'Single-Vision')
+      ]),
+    m('li.tab-item'+c(MultifocalBrowser), {
+        onclick: function(){ _LensBrowser.browser = MultifocalBrowser; }
+        }, [
+      m('a', 'Multifocal')
+      ]),
+    m('li.tab-item'+c(BaseBrowser), {
+        onclick: function(){ _LensBrowser.browser = BaseBrowser; }
+        }, [
+      m('a', 'Bases')
+      ])
+    ]),
+  m(_LensBrowser.browser)
+  ]);
+}
+};
+}
+
+export default LensBrowser;
\ No newline at end of file
diff --git a/jsapp/LoginBox.js b/jsapp/LoginBox.js
new file mode 100644
index 0000000..80f97b4
--- /dev/null
+++ b/jsapp/LoginBox.js
@@ -0,0 +1,50 @@
+import _Login from "./_Login.js";
+import _User from "./_User.js";
+import _AccountApplication from "./_AccountApplication.js";
+import AccountApplicationBox from './AccountApplicationBox.js';
+import _Navigation from './_Navigation.js';
+
+var LoginBox = function(){
+  return {
+    view: function(vnode){
+      if(!_User.isLoggedIn()){
+        return m('.column.col-8', [
+            m('.form-group', [
+              //m('button.red',{onclick: function(){ _Login.is_hidden = true; }},'Close'),
+              m('.has-icon-left', [
+                m('input[type=text][placeholder=Username].form-input', {
+                  onchange: function(e){ _Login.username = e.target.value; },
+                  value: _Login.username
+                  }),
+                m('i.form-icon.icon.icon-arrow-right')
+                ]),
+              m('input[type=password][placeholder=Password].form-input', {
+                onchange: function(e){ _Login.password = e.target.value; },
+                value: _Login.password
+                }),
+              m('button.btn.btn-primary', {onclick: function(e){
+                e.preventDefault(); // this is require since the button is in a form
+                _User.attemptLogin(_Login.username, _Login.password);
+                }}, "Login"),
+              m('button.btn', {onclick: function(e){
+                e.preventDefault(); // this is require since the button is in a form
+                _Navigation.navigateTo(AccountApplicationBox, null);
+                }}, "Apply for Account")
+              ])
+          ]);
+        }
+      else{
+        return m('.logout_box.column.col-11', [
+          m('button.btn.btn-primary', {
+            onclick: function(){
+              _User.logout();
+              _Login.username = "";
+              _Login.password = "";
+              }}, 'Logout')
+          ])
+        }
+      }
+    };
+  };
+
+export default LoginBox;
\ No newline at end of file
diff --git a/jsapp/MenuItem.js b/jsapp/MenuItem.js
new file mode 100644
index 0000000..92ae7f9
--- /dev/null
+++ b/jsapp/MenuItem.js
@@ -0,0 +1,27 @@
+import _Navigation from './_Navigation.js';
+import _User from './_User.js';
+
+var MenuItem = function(){
+return { view: function(vnode){
+  var menuitem = vnode.attrs.menuitem;
+  var attrs = {}
+  if(menuitem.component !== null || menuitem.run !== null){ // note to self for continuation: make a proper onclick handler to both navigateTo and run the 'run', or either one if only one is provided
+    attrs.onclick = function(){
+      if(menuitem.component !== null){ _Navigation.navigateTo(menuitem.component,menuitem.attrs); }
+      if(menuitem.run !== null){ menuitem.run(); }
+      }
+    }
+  return m("a.btn.btn-link", attrs, [
+          menuitem.label,
+          m('.list',
+            menuitem.children.map(function(mi){
+              if(!menuitem.restricted || _User.isLoggedIn()){
+                return m(MenuItem, {menuitem: mi});
+                }
+              }))
+          ]);
+  }
+};
+};
+
+export default MenuItem;
\ No newline at end of file
diff --git a/jsapp/Messages.js b/jsapp/Messages.js
new file mode 100644
index 0000000..121f5ca
--- /dev/null
+++ b/jsapp/Messages.js
@@ -0,0 +1,26 @@
+import _Message from "./_Message.js";
+
+var Messages = function(){
+  return {
+    view: function(vnode){
+      return m('.messages-box.p-fixed.p-2', {style: 'left:0px;top:0px;width:100%;'},_Message.messages.map(function(msg, index){
+        var message_class;
+        if(msg.type === 'success'){
+          message_class = 'toast-success';
+          }
+        else if(msg.type === 'notification'){
+          message_class = 'toast-primary';
+          }
+        else if(msg.type === 'error'){
+          message_class = 'toast-error';
+          }
+        return m('.toast.'+message_class, [
+          m('button.btn.btn-clear.float-right', {onclick: function(){ _Message.remove(index); }}, ""),
+          msg.text
+          ]);
+        }));
+      }
+    };
+  };
+
+export default Messages;
\ No newline at end of file
diff --git a/jsapp/Modal.js b/jsapp/Modal.js
new file mode 100644
index 0000000..ea885f9
--- /dev/null
+++ b/jsapp/Modal.js
@@ -0,0 +1,24 @@
+import _Modal from "./_Modal.js";
+
+var Modal = function(){
+  return {
+    view: function(vnode){
+      var active_class = (_Modal.component === null ? '' : '.active');
+      return m('.modal'+active_class, [
+        m('a.modal-overlay', {
+          'aria-label':"Close",
+          onclick: function(){ _Modal.close(); }
+          }),
+        m('.modal-container', [
+          (_Modal.component === null ?
+            ''
+            :
+            m(_Modal.component, _Modal.attrs)
+            )
+          ])
+        ]);
+      }
+    };
+  };
+
+export default Modal;
\ No newline at end of file
diff --git a/jsapp/MultifocalBrowser.js b/jsapp/MultifocalBrowser.js
new file mode 100644
index 0000000..3b6aea6
--- /dev/null
+++ b/jsapp/MultifocalBrowser.js
@@ -0,0 +1,40 @@
+import _Cart from './_Cart.js';
+import MultifocalListItem from './MultifocalListItem.js';
+
+var MultifocalBrowser = function(){
+return {
+view: function(){
+var lenses = [];
+return m('.multifocal-listing', [
+      m('table.table.table-striped', [
+        m('thead', [
+          m('tr', [
+            m('th', '#1'),
+            m('th', '#2'), // TODO: what's this called again?
+            m('th', 'Material'),
+            m('th', 'Type'),
+            m('th', 'AR'),
+            m('th', 'Photochromatic'),
+            m('th', 'Price'),
+            m('th', 'Quantity')
+            ])
+          ]),
+        m('tbody', [
+          lenses.map(function(lens){
+            return m(MultifocalListItem, {lens: lens});
+            }),
+          m('tr', [
+            m('td.text-center', {colspan: 8}, [
+              m('button.btn.btn-primary.btn-lg.btn-block', [
+                m('i.icon.icon-plus')
+                ])
+              ])
+            ])
+          ])
+        ])
+      ]);
+}
+};
+}
+
+export default MultifocalBrowser;
\ No newline at end of file
diff --git a/jsapp/MultifocalListItem.js b/jsapp/MultifocalListItem.js
new file mode 100644
index 0000000..5b9751f
--- /dev/null
+++ b/jsapp/MultifocalListItem.js
@@ -0,0 +1,93 @@
+var MultifocalListItem = function(){
+return {
+view: function(vnode){
+var lens = vnode.attrs.lens;
+return m('tr', [
+            m('td', [ // Strength #1
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: '0.00'}, '0.00'),
+                  m('option', {value: '0.25'}, '0.25'),
+                  m('option', {value: '0.50'}, '0.50'),
+                  m('option', {value: '0.75'}, '0.75'),
+                  m('option', {value: '1.00'}, '1.00'),
+                  m('option', {value: '1.25'}, '1.25'),
+                  m('option', {value: '1.50'}, '1.50'),
+                  m('option', {value: '1.75'}, '1.75'),
+                  m('option', {value: '2.00'}, '2.00'),
+                  m('option', {value: '2.25'}, '2.25'),
+                  m('option', {value: '2.50'}, '2.50'),
+                  m('option', {value: '2.75'}, '2.75'),
+                  m('option', {value: '3.00'}, '3.00')
+                  ])
+                ])
+              ]),
+            m('td', [ // Strength #2
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: '1.00'}, '1.00'),
+                  m('option', {value: '1.25'}, '1.25'),
+                  m('option', {value: '1.50'}, '1.50'),
+                  m('option', {value: '1.75'}, '1.75'),
+                  m('option', {value: '2.00'}, '2.00'),
+                  m('option', {value: '2.25'}, '2.25'),
+                  m('option', {value: '2.50'}, '2.50'),
+                  m('option', {value: '2.75'}, '2.75'),
+                  m('option', {value: '3.00'}, '3.00')
+                  ])
+                ])
+              ]),
+            m('td', [ // Material
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: 'cr39'}, 'CR39'),
+                  m('option', {value: 'polycarbonate'}, 'Polycarbonate'),
+                  m('option', {value: 'blue-bocker'}, 'Blue Bocker'),
+                  m('option', {value: 'glass'}, 'Glass')
+                  ])
+                ])
+              ]),
+            m('td', [ // Multifocal Type
+              m('.form-group', [ 
+                m('select.form-select', [
+                  m('option', {value: 'progressive'}, 'Progressive'),
+                  m('option', {value: 'ft28'}, 'FT28'),
+                  m('option', {value: 'blended'}, 'Blended')
+                  ])
+                ])
+              ]),
+            m('td', [ // AR Coating
+              m('.form-group', [
+                m('label.form-checkbox', [
+                  m('input', {type: 'checkbox', checked: false}),
+                  m('i.form-icon')
+                  ]),
+                ])
+              ]),
+            m('td', [ // Photochromatic
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: ''}, 'None'),
+                  m('option', {value: 'photogray'}, 'Photogray'),
+                  m('option', {value: 'photobrown'}, 'Photobrown')
+                  ])
+                ])
+              ]),
+            m('td', '$3'), // Price
+            m('td', [ // Quantity
+              m('.form-group.input-group', [
+                m('input.form-input', {
+                  type: 'text',
+                  value: '0'
+                  }),
+                m('button.btn.btn-primary.input-group-btn', [
+                  m('i.icon.icon-delete')
+                  ])
+                ])
+              ])
+            ]);
+}
+};
+};
+
+export default MultifocalListItem;
\ No newline at end of file
diff --git a/jsapp/Navigation.js b/jsapp/Navigation.js
new file mode 100644
index 0000000..3e59f93
--- /dev/null
+++ b/jsapp/Navigation.js
@@ -0,0 +1,121 @@
+import _Navigation from './_Navigation.js';
+import _User from './_User.js';
+import MenuItem from './MenuItem.js';
+
+var Navigation = function(){
+return {view: function(){
+    var hidden_class = _Navigation.is_hidden ?'.hidden':'';
+    var v = m("section.navbar-section", _Navigation.menu.map(function(menuitem){
+      if(!menuitem.restricted){
+        return m(MenuItem, {menuitem: menuitem})
+        }
+      else if(menuitem.restricted === 'admin' && _User.isAdmin()){
+        return m(MenuItem, {menuitem: menuitem})
+        }
+      else if(menuitem.restricted === true && _User.isLoggedIn()){
+        return m(MenuItem, {menuitem: menuitem})
+        }
+      }));
+    return m('header.navbar'+hidden_class, [
+      //m('button',{onclick: function(){ _Navigation.is_hidden = true; }},'Close'),
+      v
+      ]);
+    /*
+    return m("ul.flex.items-center.justify-center.bg-gray-900.text-white.cursor-default", [
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", {onclick: navigateTo(Home,null)}, "Home")
+        ]),
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", {onclick: navigateTo(AboutUs,null)}, "About Us")
+        ]),
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", {onclick: navigateTo(Events,null)}, "Events"),
+        m(".menu.hidden", [
+          m(".item", "Upcoming Trade Shows")
+          ])
+        ]),
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Collections Catalog"),
+        m(".menu.hidden", [
+          m(".section-heading", "Optical Frames"),
+          m(".heading", "Style"),
+          m(".subheading", "Adults"),
+          m(".item", {onclick: navigateTo(ItemBrowser, {filter:{type: "frame", gender: "mens"}})}, "Mens"),
+          m(".item", "Womens"),
+          m(".item", "Unisex"),
+          m(".subheading.item", "Teens"),
+          m(".subheading.item", "Kids"),
+          m(".heading", "Material"),
+          m(".subheading", "Plastic"),
+          m(".item", "Acetate"),
+          m(".item", "TR90 & Silicone"),
+          m(".item", "Injection"),
+          m(".subheading", "Metal"),
+          m(".item", "Aluminum"),
+          m(".item", "Monel"),
+          m(".item", "Stainless Steel"),
+          m(".item", "Titanium"),
+          m(".section-heading", "Sunglasses"),
+          m(".heading", "Brand"),
+          m(".subheading.item", "Designer Brands"),
+          m(".subheading", "Exclusive Labels"),
+          m(".item", "Kadima"),
+          m(".item", "Kapricci"),
+          m(".item", "Bubble Gum"),
+          m(".item", "Primmera"),
+          m(".heading", "Gender"),
+          m(".item", "Mens"),
+          m(".item", "Womens"),
+          m(".item", "Unisex"),
+          m(".heading.item", "Clearance Items")
+          ])
+        ]),
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Lenses"),
+        m(".menu.hidden", [
+          m(".section-heading", "Finished"),
+          m(".heading", "Blue Bocker"),
+          m(".heading", "Single Vision"),
+          m(".heading", "Multifocals"),
+          m(".section-heading", "Semi-Finished"),
+          m(".heading", "Blue Bocker"),
+          m(".heading", "Single Vision"),
+          m(".heading", "Multifocals")
+          ])
+        ]),
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Equipment"),
+        m(".menu.hidden", [
+          m(".heading", "Autorefractometer"),
+          m(".heading", "Chart Projector"),
+          m(".heading", "Lensometer"),
+          m(".heading", "Ophthalmoscope"),
+          m(".heading", "Pachimeter"),
+          m(".heading", "Phoropter"),
+          m(".heading", "Prism bar"),
+          m(".heading", "Pupilometer"),
+          m(".heading", "Retinoscope"),
+          m(".heading", "Slit Lamp"),
+          m(".heading", "Trial Lens Set"),
+          m(".item", "*104 pcs"),
+          m(".item", "*158 pcs"),
+          m(".item", "*232 pcs"),
+          m(".item", "*266 pcs")
+          ])
+        ]),
+      m("li", [
+        m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Accessories"),
+        m(".menu.hidden", [
+          m(".heading", "Cases"),
+          m(".heading", "Cords"),
+          m(".heading", "Microfiber Cloth Lens Cleaner"),
+          m(".heading", "Lens Cleaner Bottles"),
+          m(".heading", "Nosepads"),
+          m(".heading", "Screws")
+          ])
+        ])
+      ]);
+      */
+      }}}
+
+export default Navigation;
\ No newline at end of file
diff --git a/jsapp/OpenOrders.js b/jsapp/OpenOrders.js
new file mode 100644
index 0000000..7e80aae
--- /dev/null
+++ b/jsapp/OpenOrders.js
@@ -0,0 +1,48 @@
+import _OpenOrders from './_OpenOrders.js';
+import _Navigation from './_Navigation.js';
+import OrderView from './OrderView.js';
+import _DB from './_DB.js';
+
+var OpenOrders = function(){
+return {
+view: function(vnode){
+return m('.open-orders', [
+  m('h2', 'Open Orders'),
+  m('button.btn.refresh-application-button',{onclick: function(){
+              _OpenOrders.getOpenOrders();
+              }},[m('i.icon.icon-refresh'), 'Refresh']),
+  m('.order-list', 
+    m('table.table.table-striped.table-hover', [
+      m('thead', [
+        m('tr', [
+          m('th', 'Customer'),
+          m('th', 'Date Ordered'),
+          m('th', 'Order Number')
+          ])
+        ]),
+      m('tbody',
+          _OpenOrders.orders.map(function(order){
+            var user = _DB.getRecord(order.user_id);
+            var company_name = user.store || 'No Company: User#'+user.id;
+            var date_ordered = order.date_ordered;
+            var order_number = order.id;
+            return m('tr', {onclick: function(e){
+                    e.stopPropagation();
+                    _OpenOrders.loadOrder(order).then(function(order){
+                      _Navigation.navigateTo(OrderView, {order: order});
+                      });
+                    }},[
+              m('td', company_name),
+              m('td', date_ordered),
+              m('td', order_number)
+              ])
+            })
+          )
+      ])
+    )
+  ]);
+}
+};
+};
+
+export default OpenOrders;
\ No newline at end of file
diff --git a/jsapp/OrderView.js b/jsapp/OrderView.js
new file mode 100644
index 0000000..f080862
--- /dev/null
+++ b/jsapp/OrderView.js
@@ -0,0 +1,103 @@
+import _DB from './_DB.js';
+
+var OrderView = function(){
+return {
+view: function(vnode){
+var order = vnode.attrs.order;
+var user = _DB.getRecord(order.user_id);
+var cart = _DB.getRecord(order.cart_id)
+var lineitems = cart.lineitem_ids.map(_DB.getRecord);
+var cart_total = 0;
+return m('.order-view', [
+  m('h1', [
+    'Order #'+order.id,
+    m('small', 'Ordered On: '+order.date_ordered)
+    ]),
+  m('p', user.store+' ('+user.firstname+' '+user.lastname+')'),
+  ( order.status === 'open'
+    ?
+      m('button.btn.btn-primary',{onclick: function(e){
+        _DB.setProperty(order, 'status', 'closed');
+        }},'Close Order')
+    :
+      m('button.btn.btn-primary',{onclick: function(e){
+        _DB.setProperty(order, 'status', 'open');
+        }},'Re-open Order')
+    ),
+  m('.steps', [
+    m('ul.step', [
+      m('li.step-item'+(order.progress==='ordered'?'.active':''), [
+        m('a.tooltip', {
+          href:'#',
+          'data-tooltip':'Customer Placed Order on '+order.date_ordered,
+          onclick: function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            _DB.setProperty(order, 'progress', 'ordered');
+            }
+          }, 'Ordered')
+        ]),
+      m('li.step-item'+(order.progress==='picked'?'.active':''), [
+        m('a.tooltip', {
+          href:'#',
+          'data-tooltip':'Piazza Picked the Order',
+          onclick: function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            _DB.setProperty(order, 'progress', 'picked');
+            }
+          }, 'Picked')
+        ]),
+      m('li.step-item'+(order.progress==='shipped'?'.active':''), [
+        m('a.tooltip', {
+          href:'#',
+          'data-tooltip':'Piazza Shipped the Order',
+          onclick: function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            _DB.setProperty(order, 'progress', 'shipped');
+            }
+          }, 'Shipped')
+        ]),
+      m('li.step-item'+(order.progress==='paid'?'.active':''), [
+        m('a.tooltip', {
+          href:'#', 
+          'data-tooltip':'Customer Paid for the Order in Full',
+          onclick: function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            _DB.setProperty(order, 'progress', 'paid');
+            }
+          }, 'Paid')
+        ])
+      ])
+    ]),
+  m('.items', [
+    m('table.table.table-striped.table-hover', [
+      m('thead', [
+        m('tr', [
+          m('th', 'Item'),
+          m('th', 'Quantity'),
+          m('th', 'Price'),
+          m('th', 'Subtotal')
+          ])
+        ]),
+      m('tbody', lineitems.map(function(lineitem){
+        var subtotal = lineitem.quantity*lineitem.price;
+        cart_total += subtotal;
+        return m('tr', [
+          m('td', _DB.getRecord(lineitem.item_id).name),
+          m('td', lineitem.quantity),
+          m('td', '$'+lineitem.price),
+          m('td', '$'+subtotal)
+          ]);
+        }))
+      ]),
+    m('h6', "Grand Total: $"+cart_total)
+    ])
+  ]);
+}
+};
+};
+
+export default OrderView;
\ No newline at end of file
diff --git a/jsapp/Policies.js b/jsapp/Policies.js
new file mode 100644
index 0000000..4b5e9a0
--- /dev/null
+++ b/jsapp/Policies.js
@@ -0,0 +1,22 @@
+var Policies = function(){
+return {
+view: function(vnode){
+return m('.policies', [
+  m('h1.text-center', 'Policies'),
+  m('h2', 'General Policies'),
+  m('p', "All items are thoroughly inspected prior to shipping to insure customer receives a proper product."),
+  m('p', "Warranty is limited to manufacturer’s defects only. Returned pieces will be inspected to determine eligibility for warranty."),
+  m('p', "Our exclusive labels have 1 year manufacturer defect warranty from purchase date, not from dispensing date."),
+  m('p', "Designer Brand names closeouts are only guaranteed for exchange in the unlikely event the piece is shipped defective (within 7 days of purchase)."),
+  m('p', "Designer Brand names regular collections have 1 year warranty for manufacturers’ defects from the date of purchase."),
+  m('p', "These prices are for online purchases only."),
+  m('p', "Not all items available at all times."),
+  m('h2', 'Refund Policy'),
+  m('p', ''),
+  m('h2', 'Privacy Policy'),
+  m('p', '')
+  ]);
+}};
+};
+
+export default Policies;
\ No newline at end of file
diff --git a/jsapp/SingleVisionBrowser.js b/jsapp/SingleVisionBrowser.js
new file mode 100644
index 0000000..526d5f4
--- /dev/null
+++ b/jsapp/SingleVisionBrowser.js
@@ -0,0 +1,39 @@
+import _Cart from './_Cart.js';
+import SingleVisionListItem from './SingleVisionListItem.js';
+
+var SingleVisionBrowser = function(){
+return {
+view: function(){
+var lenses = [];
+return m('.single-vision-listing', [
+      m('table.table.table-striped', [
+        m('thead', [
+          m('tr', [
+            m('th', 'SPH'),
+            m('th', 'CYL'),
+            m('th', 'Material'),
+            m('th', 'AR'),
+            m('th', 'Photochromatic'),
+            m('th', 'Price'),
+            m('th', 'Quantity')
+            ])
+          ]),
+        m('tbody', [
+          lenses.map(function(lens){
+            return m(SingleVisionListItem, {lens: lens});
+            }),
+          m('tr', [
+            m('td.text-center', {colspan: 7}, [
+              m('button.btn.btn-primary.btn-lg.btn-block', [
+                m('i.icon.icon-plus')
+                ])
+              ])
+            ])
+          ])
+        ])
+      ]);
+}
+};
+}
+
+export default SingleVisionBrowser;
\ No newline at end of file
diff --git a/jsapp/SingleVisionListItem.js b/jsapp/SingleVisionListItem.js
new file mode 100644
index 0000000..060d3fa
--- /dev/null
+++ b/jsapp/SingleVisionListItem.js
@@ -0,0 +1,108 @@
+var SingleVisionListItem = function(){
+return {
+view: function(vnode){
+var lens = vnode.attrs.lens;
+return m('tr', [
+            m('td', [ // SPH
+              m('.form-group.sph', [
+                m('select.form-select.form-inline', [
+                  m('option', {value: '-'}, '-'),
+                  m('option', {value: '+'}, '+')
+                  ]),
+                m('select.form-select.form-inline', [
+                  m('option', {value: '0.00'}, '0.00'),
+                  m('option', {value: '0.25'}, '0.25'),
+                  m('option', {value: '0.50'}, '0.50'),
+                  m('option', {value: '0.75'}, '0.75'),
+                  m('option', {value: '1.00'}, '1.00'),
+                  m('option', {value: '1.25'}, '1.25'),
+                  m('option', {value: '1.50'}, '1.50'),
+                  m('option', {value: '1.75'}, '1.75'),
+                  m('option', {value: '2.00'}, '2.00'),
+                  m('option', {value: '2.25'}, '2.25'),
+                  m('option', {value: '2.50'}, '2.50'),
+                  m('option', {value: '2.75'}, '2.75'),
+                  m('option', {value: '3.00'}, '3.00'),
+                  m('option', {value: '3.25'}, '3.25'),
+                  m('option', {value: '3.50'}, '3.50'),
+                  m('option', {value: '3.75'}, '3.75'),
+                  m('option', {value: '4.00'}, '4.00'),
+                  m('option', {value: '4.25'}, '4.25'),
+                  m('option', {value: '4.50'}, '4.50'),
+                  m('option', {value: '4.75'}, '4.75'),
+                  m('option', {value: '5.00'}, '5.00'),
+                  m('option', {value: '5.25'}, '5.25'),
+                  m('option', {value: '5.50'}, '5.50'),
+                  m('option', {value: '5.75'}, '5.75'),
+                  m('option', {value: '6.00'}, '6.00'),
+                  m('option', {value: '6.25'}, '6.25'),
+                  m('option', {value: '6.50'}, '6.50'),
+                  m('option', {value: '6.75'}, '6.75'),
+                  m('option', {value: '7.00'}, '7.00')
+                  ])
+                ])
+              ]),
+            m('td', [ // CYL
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: '0.00'}, '0.00'),
+                  m('option', {value: '0.25'}, '0.25'),
+                  m('option', {value: '0.50'}, '0.50'),
+                  m('option', {value: '0.75'}, '0.75'),
+                  m('option', {value: '1.00'}, '1.00'),
+                  m('option', {value: '1.25'}, '1.25'),
+                  m('option', {value: '1.50'}, '1.50'),
+                  m('option', {value: '1.75'}, '1.75'),
+                  m('option', {value: '2.00'}, '2.00'),
+                  m('option', {value: '2.25'}, '2.25'),
+                  m('option', {value: '2.50'}, '2.50'),
+                  m('option', {value: '2.75'}, '2.75'),
+                  m('option', {value: '3.00'}, '3.00')
+                  ])
+                ])
+              ]),
+            m('td', [ // Material
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: 'cr39'}, 'CR39'),
+                  m('option', {value: 'polycarbonate'}, 'Polycarbonate'),
+                  m('option', {value: 'blue-bocker'}, 'Blue Bocker'),
+                  m('option', {value: 'glass'}, 'Glass')
+                  ])
+                ])
+              ]),
+            m('td', [ // AR Coating
+              m('.form-group', [
+                m('label.form-checkbox', [
+                  m('input', {type: 'checkbox', checked: false}),
+                  m('i.form-icon')
+                  ]),
+                ])
+              ]),
+            m('td', [ // Transition/Photochromatic
+              m('.form-group', [
+                m('select.form-select', [
+                  m('option', {value: ''}, 'None'),
+                  m('option', {value: 'photogray'}, 'Photogray'),
+                  m('option', {value: 'photobrown'}, 'Photobrown')
+                  ])
+                ])
+              ]),
+            m('td', '$3'), // Price
+            m('td', [ // Quantity
+              m('.form-group.input-group', [
+                m('input.form-input', {
+                  type: 'text',
+                  value: '0'
+                  }),
+                m('button.btn.btn-primary.input-group-btn', [
+                  m('i.icon.icon-delete')
+                  ])
+                ])
+              ])
+            ]);
+}
+};
+};
+
+export default SingleVisionListItem;
\ No newline at end of file
diff --git a/jsapp/UnderConstruction.js b/jsapp/UnderConstruction.js
new file mode 100644
index 0000000..abe8ccc
--- /dev/null
+++ b/jsapp/UnderConstruction.js
@@ -0,0 +1,9 @@
+function UnderConstruction(initialVnode) {
+  return {
+    view: function(vnode) {
+      return m('h1.text-center.under-construction', 'Under Construction!');
+      }
+    }
+  }
+
+export default UnderConstruction;
\ No newline at end of file
diff --git a/jsapp/_Accessories.js b/jsapp/_Accessories.js
new file mode 100644
index 0000000..922f69e
--- /dev/null
+++ b/jsapp/_Accessories.js
@@ -0,0 +1,5 @@
+var _Accessories = {};
+
+_Accessories.items = [];
+
+export default _Accessories;
\ No newline at end of file
diff --git a/jsapp/_AccountApplication.js b/jsapp/_AccountApplication.js
new file mode 100644
index 0000000..27a9e28
--- /dev/null
+++ b/jsapp/_AccountApplication.js
@@ -0,0 +1,82 @@
+import _Message from './_Message.js';
+
+var _AccountApplication = {}
+
+//_AccountApplication._show = false;
+_AccountApplication.username = '';
+_AccountApplication.salutation = '';
+_AccountApplication.firstname = '';
+_AccountApplication.lastname = '';
+_AccountApplication.position = '';
+_AccountApplication.store = '';
+_AccountApplication.address = '';
+_AccountApplication.practice_type = '';
+_AccountApplication.phone_office = '';
+_AccountApplication.phone_cell = '';
+_AccountApplication.email = '';
+
+_AccountApplication.salutations = [
+  {value: 'mr', text: 'Mr.'},
+  {value: 'ms', text: 'Ms.'},
+  {value: 'mrs', text: 'Mrs.'},
+  {value: 'dr', text: 'Dr.'}
+  ];
+_AccountApplication.positions = [
+  {value: 'owner', text: 'Owner'},
+  {value: 'manager', text: 'Manager'},
+  {value: 'buyer', text: 'Buyer'},
+  {value: 'other', text: 'Other'}
+  ];
+_AccountApplication.practice_types = [
+  {value: 'optometrist', text: 'Optometrist'},
+  {value: 'ophthalmologist', text: 'Ophthalmologist'},
+  {value: 'optician', text: 'Optician'},
+  {value: 'optical_retail_store', text: 'Optical Retail Store'},
+  {value: 'optical_lab', text: 'Optical Lab'},
+  {value: 'importer_distributor', text: 'Importer/Distributor'}
+  ];
+
+//_AccountApplication.show = function(){
+//  _AccountApplication._show = true;
+//  };
+//_AccountApplication.hide = function(){
+//  _AccountApplication._show = false;
+//  };
+//_AccountApplication.isShowing = function(){
+//  return _AccountApplication._show === true;
+//  };
+_AccountApplication.submit = function(){
+  m.request({
+    method: 'POST',
+    url: '/cgi/submitnewuserapplication',
+    body: {
+      username: _AccountApplication.username,
+      salutation: _AccountApplication.salutation,
+      firstname: _AccountApplication.firstname,
+      lastname: _AccountApplication.lastname,
+      position: _AccountApplication.position,
+      store: _AccountApplication.store,
+      address: _AccountApplication.address,
+      practice_type: _AccountApplication.practice_type,
+      phone_office: _AccountApplication.phone_office,
+      phone_cell: _AccountApplication.phone_cell,
+      email: _AccountApplication.email
+      }
+    }).then(function(){
+      _Message.addNotification('Application Submitted!');
+      _AccountApplication._show = false;
+      _AccountApplication.username = '';
+      _AccountApplication.salutation = '';
+      _AccountApplication.firstname = '';
+      _AccountApplication.lastname = '';
+      _AccountApplication.position = '';
+      _AccountApplication.store = '';
+      _AccountApplication.address = '';
+      _AccountApplication.practice_type = '';
+      _AccountApplication.phone_office = '';
+      _AccountApplication.phone_cell = '';
+      _AccountApplication.email = '';
+      });
+  };
+
+export default _AccountApplication;
\ No newline at end of file
diff --git a/jsapp/_Admin.js b/jsapp/_Admin.js
new file mode 100644
index 0000000..070f462
--- /dev/null
+++ b/jsapp/_Admin.js
@@ -0,0 +1,47 @@
+import _User from './_User.js';
+import OpenOrders from './OpenOrders.js';
+import util from './util.js';
+
+var _Admin = {}
+
+_Admin.page = OpenOrders;
+
+_Admin.open_applications = [];
+
+_Admin.getOpenApplications = function(){
+  return m.request({
+    method:'POST', 
+    url: '/cgi/listnewuserapplications',
+    body: {
+      session_hash: _User.session_hash
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      _Admin.open_applications = res.open_applications;
+      // the server encodes an empty set as an Object instead of Array, so we have to detect it:
+      if(typeof _Admin.open_applications.length === 'undefined'){
+        _Admin.open_applications = [];
+        }
+      }
+    });
+  };
+
+_Admin.acceptApplication = function(a){
+  return m.request({
+    method:'POST', 
+    url: '/cgi/acceptnewuserapplication',
+    body: {
+      session_hash: _User.session_hash,
+      application_id: a.id,
+      password: a.password
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      util.remove(_Admin.open_applications, a); // TODO: maybe get whole new list of open application IDs, instead of assuming the only change was this one. What if two admins are signed-on to two computers, each knocking-off open applications?
+      }
+    });
+  };
+
+export default _Admin;
\ No newline at end of file
diff --git a/jsapp/_Cart.js b/jsapp/_Cart.js
new file mode 100644
index 0000000..de99a27
--- /dev/null
+++ b/jsapp/_Cart.js
@@ -0,0 +1,74 @@
+import isUndefined from './util/isUndefined.js';
+import _LineItem from './_LineItem.js';
+import _Message from './_Message.js';
+import _User from './_User.js';
+import remove from './util/remove.js';
+import removeByIndex from './util/removeByIndex.js';
+
+var _Cart = {};
+
+_Cart.updateQuantityOfItem = function(item, quantity){
+  /*
+  var possible_lineitem = _Cart.lineItemOfItem(item);  // _Cart.current.lineitems.find(function(lineitem){ return lineitem.item.id === item.id; });
+  if(isUndefined(possible_lineitem)){
+    possible_lineitem = _LineItem.createFromItem(item); 
+    // possible_lineitem = _Cart.add(item);
+    }
+  possible_lineitem.quantity = quantity;
+  */
+  return m.request({
+    method: 'POST',
+    url: '/cgi/updateitemquantityincart',
+    body: {
+      session_hash: _User.session_hash,
+      item_id: item.id,
+      quantity: quantity
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      res.lineitems.forEach(function(lineitem, index){
+        lineitem.item_id = _DB.integrate(lineitem.item_id).id // at first item_id has the actual object, which we integrate into _DB, but then we set it to the ID as is expected
+        res.lineitems[index] = _DB.integrate(lineitem).id;
+        });
+      _Cart.current.lineitem_ids = res.lineitems; // at this point, res.lineitems contains only IDs
+      }
+    else{
+      _Message.addError("There was an error adding to cart.");
+      }
+    });
+  };
+_Cart.removeLineItemOfItem = function(item){
+  // TODO: do this on server-side, and return updated cart record with updated lineitem_ids
+  remove(_Cart.current.lineitem_ids, function(lineitem_id){ return lineitem_id === item.id; });
+  };
+_Cart.removeLineItem = function(index){
+  // TODO: do this on server-side, and return updated cart record with updated lineitem_ids
+  removeByIndex(_Cart.current.lineitem_ids, index);
+  };
+_Cart.lineItemOfItem = function(item){
+  if(_Cart.current !== null){
+    return _DB.getRecord(  _Cart.current.lineitem_ids.find(function(lineitem_id){ return _DB.getRecord(lineitem_id).item_id === item.id; })  );
+    }
+  };
+
+_Cart.placeOrder = function(){
+  m.request({
+    method: 'POST', 
+    url: '/cgi/placeorder', 
+    body: {
+      session_hash: _User.session_hash
+      }})
+  .then(function(res){
+    if(res.success){
+      _Message.addNotification("Order #"+ res.order_id +" Received!");
+      _Cart.current = res.new_cart_record;
+      _Cart.current.lineitem_ids = [];
+      _DB.integrate(_Cart.current)
+      }
+    });
+  };
+
+_Cart.current = null; //_Cart.new();
+
+export default _Cart;
\ No newline at end of file
diff --git a/jsapp/_CollectionsList.js b/jsapp/_CollectionsList.js
new file mode 100644
index 0000000..224e513
--- /dev/null
+++ b/jsapp/_CollectionsList.js
@@ -0,0 +1,66 @@
+var _CollectionsList = {};
+
+_CollectionsList.house_brands = [
+  'Kadima',
+  'Kapricci',
+  'BubbleGum',
+  'Primmera'
+  ];
+_CollectionsList.designer_brands = [
+  //'Kadima',
+  //'Kapricci',
+  //'BubbleGum',
+  //'Primmera',
+  'Adidas',
+  'Armani Exchange',
+  'Bvlgari',
+  'Burberry',
+  'Calvin Klein',
+  'Carolina Herrera',
+  'Carrera',
+  'Christian Dior',
+  'Coach',
+  'Converse',
+  'Diesel',
+  'Dolce Gabbana',
+  'Emporio Armani',
+  'Ermenegildo Zegna',
+  'Escada',
+  'Fendi',
+  'Fila',
+  'Furla',
+  'Gant',
+  'Giorgio Armani',
+  'Gucci',
+  'Guess',
+  'Harley Davidson',
+  'Hugo Boss',
+  'Just Cavalli',
+  'Kenneth Cole Reaction',
+  'Kenneth Cole New York',
+  'Lacoste',
+  'Michael Kors',
+  'Mont Blanc',
+  'Nike',
+  'Nina Ricci',
+  'Oakley',
+  'Persol',
+  'Prada',
+  'Prada Sport',
+  'Puma',
+  'Ray Ban',
+  'Roberto Cavalli',
+  'Salvatore Ferragamo',
+  'Silhouette',
+  'Skechers',
+  'Timberland',
+  'Tom Ford',
+  'Tommy Hilfiger',
+  'Tory Burch',
+  'Tous',
+  'Valentino',
+  'Versace',
+  'Vogue'
+  ];
+
+export default _CollectionsList;
\ No newline at end of file
diff --git a/jsapp/_DB.js b/jsapp/_DB.js
new file mode 100644
index 0000000..e52b0d6
--- /dev/null
+++ b/jsapp/_DB.js
@@ -0,0 +1,169 @@
+import _User from './_User.js';
+import isArray from './util/isArray.js';
+import isUndefined from './util/isUndefined.js';
+
+var _DB = {};
+
+_DB.records = {};
+
+_DB.insertRecord = function(record, type, structure){
+  if(!isUndefined(type)){  record.type = type;  }
+  var record_copy = _DB.copyAndTransform(record, structure);  // make a copy in case the record has references to other objects, possibly circular
+  // TODO: Figure-out what to do for image, which has long `src_base64` property, so it must be stored in a file, with a mere reference in the DB. Also, upon creation the automatically makes thumbnails and updates the record accordingly, which is not possible to trigger.
+  return m.request({
+      method: 'POST',
+      url: '/cgi/insertrecord',
+      body: {
+        session_hash: _User.session_hash,
+        record: record_copy
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        record.id = res.id;
+        _DB.integrate(record);
+        }
+      });
+  };
+
+_DB.getRecord = function(id){
+  return _DB.records[id];
+  };
+
+_DB.removeRecord = function(record){
+  delete _DB.records[record.id];
+  // TODO: make a call to server too? This is called by _Item.deleteImage, which itself calls the server anyway because deleting an image has special logic
+  }
+
+_DB.integrate = function(new_record){
+  // check if record "exists" by id:
+  if(_DB.records.hasOwnProperty(new_record.id)){
+    // if it does exist, update its properties
+    var old_record = _DB.records[new_record.id];
+    Object.keys(new_record).forEach(function(key){
+      old_record[key] = new_record[key];
+      });
+    }
+  else{
+    // if it doesn't exist, make it
+    _DB.records[new_record.id] = new_record;
+    }
+  return _DB.records[new_record.id]; // in case we want the latest version of the record; see _OpenOrders for an example
+  };
+
+_DB.integrateAll = function(new_records){
+  new_records.forEach(function(new_record, i){  // TODO: ensure this is best behavior e.g. cart.lineitems; we want the latest lineitem list, with the proper things removed and added, not only added and none removed
+    new_records[i] = _DB.integrate(new_record);
+    });
+  return new_records;
+  };
+_DB.integrateAllReturnIds = function(new_records){
+  new_records.forEach(function(new_record, i){  // TODO: ensure this is best behavior e.g. cart.lineitems; we want the latest lineitem list, with the proper things removed and added, not only added and none removed
+    new_records[i] = _DB.integrate(new_record).id;
+    });
+  return new_records;
+  };
+
+
+// determines whether to replace the whole array, or append to the existsing array, etc.
+_DB.integrateArray = function(record_id, property, new_array){
+  
+  }
+
+/*
+ schema = {
+  id: 'copy',
+  brand: 'copy',
+  item: 'replace-with-id',  // only get the id of the record, don't copy it
+  item2: {
+    id: 'copy',   // automatically makes separate top-level record for item2, and sets `record.item2 = item2`
+    brand: 'copy'
+    },
+  lineitems: [
+    'list',  // shows that this is a list
+    {                     // this is the substructure of each element in the list
+      id: 'copy',         // if substructure is left-out, then it's a list of scalars
+      quantity: 'copy'    // if substructure == 'replace-with-id', it's a list of records, but only ids are transferred
+      }
+    ]
+  }
+ */
+_DB.getOne = function(id, type, structure){
+  return m.request({
+    method: 'POST',
+    url: '/cgi/getone',
+    body: {
+      session_hash: _User.session_hash,
+      id: id,
+      type: type,
+      structure: structure
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      _DB.integrate(res.record);
+      }
+    });
+  }
+
+/* // exclude: big security problem, since record permissions aren't individualized; an attacker could just send an empty `structure` and get the whole DB
+_DB.getAll = function(filter, structure){
+  return m.request({
+    method: 'POST',
+    url: '/cgi/getall',
+    body: {
+      session_hash: _User.session_hash,
+      filter: filter,
+      structure: structure
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      if(!isArray(res.records)){ res.records = []; }  // the JSON encoder sends an empty array as an object instead of array
+      res.records.forEach(_DB.integrate);
+      }
+    });
+  }
+  */
+
+_DB.setProperty = function(record, key, value){
+  var old_value = record[key];
+  record[key] = value;
+  return m.request({
+    method: 'POST',
+    url: '/cgi/setproperty',
+    body: {
+      session_hash: _User.session_hash,
+      record_id: record.id,
+      record_type: record.type,
+      key: key,
+      value: value
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      return value;
+      }
+    else{
+      record[key] = old_value;
+      _Message.addError('There was an error updating '+record.type+' #'+record.id+'.');
+      return old_value;
+      }
+    });
+  };
+
+_DB.copyAndTransform = function(record, structure){
+  var record_copy = {};
+  Object.keys(structure).forEach(function(key){
+    var operation = structure[key];
+    if(operation === 'copy'){
+      record_copy[key] = record[key];
+      }
+    else if(operation === 'replace-with-id'){
+      record_copy[key] = record[key].id;
+      }
+    });
+  return record_copy;
+  };
+
+export default _DB;
\ No newline at end of file
diff --git a/jsapp/_Equipment.js b/jsapp/_Equipment.js
new file mode 100644
index 0000000..85849cc
--- /dev/null
+++ b/jsapp/_Equipment.js
@@ -0,0 +1,5 @@
+var _Equipment = {};
+
+_Equipment.items = [];
+
+export default _Equipment;
\ No newline at end of file
diff --git a/jsapp/_File.js b/jsapp/_File.js
new file mode 100644
index 0000000..c446b0a
--- /dev/null
+++ b/jsapp/_File.js
@@ -0,0 +1,18 @@
+var _File = {};
+
+_File.readAsBase64 = function(file){
+  var reader = new FileReader();
+  
+  return new Promise(function(resolve, reject){
+    reader.onerror = function(){
+      reader.abort();
+      reject('Problem reading file.');
+      };
+    reader.onload = function(){
+      resolve(reader.result);
+      };
+    reader.readAsDataURL(file);
+    });
+  };
+
+export default _File;
\ No newline at end of file
diff --git a/jsapp/_FrameAdmin.js b/jsapp/_FrameAdmin.js
new file mode 100644
index 0000000..191864c
--- /dev/null
+++ b/jsapp/_FrameAdmin.js
@@ -0,0 +1,60 @@
+import _Item from './_Item.js';
+import _User from './_User.js';
+import isArray from './util/isArray.js';
+
+var _FrameAdmin = {};
+
+_FrameAdmin.search_term = '';
+_FrameAdmin.working_frames = [];
+_FrameAdmin.results_frames = [];
+
+_FrameAdmin.search_onchange_handler = function(e){
+            _FrameAdmin.search_term = e.target.value;
+            _FrameAdmin.results_frames = [];
+            if(_FrameAdmin.search_term !== ''){
+              //return _Item.searchByString(_FrameAdmin.search_term)
+              return m.request({
+                  method: 'POST',
+                  url: '/cgi/framesbystring',
+                  body: {
+                    session_hash: _User.session_hash,
+                    search_string: _FrameAdmin.search_term
+                    }
+                  })
+                .then(function(res){
+                  if(res.success === true){
+                    if(isArray(res.results)){ // empty list comes back as `{}` from server instead of `[]`
+                      _FrameAdmin.results_frames = res.results;
+                      }
+                    else{
+                      _FrameAdmin.results_frames = [];
+                      }
+                    return _FrameAdmin.results_frames;
+                    }
+                  });
+                }
+            };
+
+_FrameAdmin.add_button_onclick_handler = function(e){
+  var loading_placeholder = {loading: true};
+  loading_placeholder.index = _FrameAdmin.working_frames.push(loading_placeholder);
+  return m.request({
+    method: 'POST',
+    url: '/cgi/createnewframe',
+    body: {
+      session_hash: _User.session_hash
+      }
+    }).then(function(res){
+      if(res.success === true){
+        _DB.integrate(res.new_frame);
+        _FrameAdmin.working_frames[loading_placeholder.index] = res.new_frame;
+        //_FrameAdmin.working_frames.push({idname: '', brand: '', model: '', color: '', color_description: '', description_short: '', size: '', material: '', price_silver: 0.00, price_gold: 0.00});
+        }
+      });
+  };
+
+_FrameAdmin.clear_button_onclick_handler = function(e){
+  _FrameAdmin.working_frames = [];
+  };
+
+export default _FrameAdmin;
\ No newline at end of file
diff --git a/jsapp/_FrameAdminListItem.js b/jsapp/_FrameAdminListItem.js
new file mode 100644
index 0000000..fdfde56
--- /dev/null
+++ b/jsapp/_FrameAdminListItem.js
@@ -0,0 +1,41 @@
+import _User from './_User.js';
+
+var _FrameAdminListItem = {};
+
+_FrameAdminListItem.update = function(frame, property, value){
+  var properties_to_update = {};
+  properties_to_update[property] = value;
+  return m.request({
+    method: 'POST',
+    url: '/cgi/updateitem',
+    body: {
+      session_hash: _User.session_hash,
+      item_id: frame.id,
+      properties_to_update: properties_to_update
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      frame[property] = value;
+      }
+    });
+  };
+
+_FrameAdminListItem.delete = function(frame, collection, index_in_collection){
+  return m.request({
+    method: 'POST',
+    url: '/cgi/deleteitem',
+    body: {
+      session_hash: _User.session_hash,
+      item_id: frame.id
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      _DB.removeRecord(frame);
+      collection.splice(index_in_collection, 1);
+      }
+    });
+  };
+
+export default _FrameAdminListItem;
\ No newline at end of file
diff --git a/jsapp/_FullscreenImage.js b/jsapp/_FullscreenImage.js
new file mode 100644
index 0000000..c6ababe
--- /dev/null
+++ b/jsapp/_FullscreenImage.js
@@ -0,0 +1,5 @@
+var _FullscreenImage = {};
+
+_FullscreenImage.image = null;
+
+export default _FullscreenImage;
\ No newline at end of file
diff --git a/jsapp/_Home.js b/jsapp/_Home.js
new file mode 100644
index 0000000..4d8182a
--- /dev/null
+++ b/jsapp/_Home.js
@@ -0,0 +1,9 @@
+var _Home = {};
+
+_Home.carousel_images = [
+  {src: 'images/carousel1-960.jpg', description: 'Stylish Frames'},
+  {src: 'images/carousel2-960.jpg', description: 'Piazza Optical'},
+  {src: 'images/carousel3-960.jpg', description: 'Professional Optical Equipment'}
+  ];
+
+export default _Home;
\ No newline at end of file
diff --git a/jsapp/_Image.js b/jsapp/_Image.js
new file mode 100644
index 0000000..1cd33e1
--- /dev/null
+++ b/jsapp/_Image.js
@@ -0,0 +1,49 @@
+import _User from './_User.js';
+import _File from './_File.js';
+import isUndefined from './util/isUndefined.js';
+
+var _Image = {};
+
+_Image.placeholder_img_180_path = './images/placeholder-180x180.png';
+_Image.placeholder_img_960_path = './images/placeholder-960x720.png';
+
+// Make a temporary Image instance (for use before it's uploaded); it cannot and should not be attached to item.image_ids. Once it's uploaded, the server returns a proper Image record, which can be attached to item.image_ids.
+_Image.newFromFile = function(file){
+  var image = {};
+  image.original_filename = file.name;  // TODO: extract only filename without the path
+  return _File.readAsBase64(file)
+    .then(function(src_base64){
+      image.src_base64 = src_base64;
+      return image;
+      });
+  };
+
+/*
+_Image.upload = function(image){
+  return m.request({
+    method: "POST",
+    url: "/cgi/newimage",
+    body: {
+      session_hash: _User.session_hash,
+      image_base64: image.src_base64,
+      original_filename: image.original_filename
+      }
+    });
+  };
+*/
+
+_Image.addToItem = function(image, item){
+  return _Item.addImage(item, image);
+  };
+
+_Image.thumbnailPath = function(image, size){
+  var thumbnail_id = image['thumbnail_'+size+'_id'];
+  if(isUndefined(thumbnail_id)){
+    return _Image['placeholder_img_'+size+'_path']
+    }
+  else{
+    return '/thumbnailsdb/'+thumbnail_id+'.png';
+    }
+  };
+
+export default _Image;
\ No newline at end of file
diff --git a/jsapp/_Item.js b/jsapp/_Item.js
new file mode 100644
index 0000000..fed8930
--- /dev/null
+++ b/jsapp/_Item.js
@@ -0,0 +1,169 @@
+import _User from "./_User.js";
+import _Message from "./_Message.js";
+import isUndefined from "./util/isUndefined.js";
+import isArray from "./util/isArray.js";
+import remove from "./util/removeElement.js";
+//import filterCollection from "./lodash-es/filter.js";
+
+var _Item = {};
+
+_Item.collection = [];
+
+_Item.priceOf = function(item){
+  if(isUndefined(item.price_user)){
+    if(_User.isGold()){
+      return item.price_gold;
+      }
+    else{
+      return item.price_silver;
+      }
+    }
+  else{
+    return item.price_user;
+    }
+  };
+
+/*
+ Rationale for model-specific accessors like this, instead of directly using the general `_DB` module:
+ Each model, whether for reads or writes on the server, may have special logic.
+ For example, items. If a user isn't logged-in, only certain brands may be returned by the server.
+ Another example, images. When a new image record is inserted into the DB, it saves the binary image data to a file, makes thumbnails, and saves the files' paths in the record, and returns the entire record to the client to update the path info.
+ These can be accomplished by having a very smart client `_DB` module, which can direct each individual step on the server (e.g. make thumbnail, save to file, etc.).
+ However, it's dangerous for a client to have the ability to "send code" to the server. The logic should reside on the server, only invoked by the client.
+ Another problem with this is that it would require a lot of round-trips -- one for each step. 
+ Another problem is that it's harder to implement atomic modifications. For example, if making a thumbnail fails, the entire image record is discarded from the DB. (This isn't actually the desired behavior, this is just for illustration.)
+ In conclusion, we've opted for model-specific getters/setters, both on client and on server.
+ 
+ However, the model-specific logic on both ends should still make sure to integrate data they receive into the DB, to keep all data in one place, and not have a bunch of copies of data with the same 'id' but different properties.
+ */
+_Item.getItems = function(filter){
+  return m.request({
+    method:"POST",
+    url:"/cgi/itemsbyfilter",
+    body: {
+      session_hash: _User.session_hash,
+      filter:filter
+      }})
+  .then(function(res){
+    if(res.success === true){
+      // the server encodes an empty set as an Object instead of Array, so we have to detect it:
+      if(!isArray(res.items)){
+        res.items = [];
+        }
+      res.items.forEach(function(item, index){
+        if(!isArray(item.image_ids)){
+          item.image_ids = [];
+          }
+        _DB.integrateAllReturnIds(item.image_ids); // converts objects to ids in-place
+        res.items[index] = _DB.integrate(item);  // TODO: ensure all integrations are captured and return, as this is, so everything refers to the same record in the DB
+        });
+      return res.items;
+      }
+    });
+  };
+
+_Item.getFullItemInfo = function(item){
+  return m.request({
+    method:"POST",
+    url:"/cgi/fulliteminfo",
+    body: {
+      item_id: item.id
+      }})
+  .then(function(res){
+    var item = _DB.integrate(res.item);
+    return item;
+    });
+  };
+
+_Item.searchByString = function(search_string){
+  return m.request({
+    method:"POST",
+    url:"/cgi/itemsbystring",
+    body: {
+      session_hash: _User.session_hash,
+      search_string: search_string
+      }});
+  };
+
+_Item.addImage = function(item, image){
+  var image_index = item.image_ids.push(image) - 1;
+  return m.request({
+    method:"POST",
+    url:"/cgi/addimagetoitem",
+    body: {
+      session_hash: _User.session_hash,
+      item_id: item.id,
+      image_base64: image.src_base64,
+      original_filename: image.original_filename
+      },
+    config: function(xhr){
+      image.is_uploading = true;
+      image.progress = 0;
+      xhr.addEventListener('progress', function(e){
+        image.progress = e.loaded / e.total;
+        });
+      }
+    })
+  .then(function(res){
+    delete image.is_uploading;
+    delete image.progress;
+    if(res.success === true){
+      _Message.addSuccess("Uploaded "+image.original_filename);
+      // At this point, `image` is still not its own record in `_DB`
+      // `image` has a large `src_base64` property, whereas `res.image` has a bunch of properties which were set by the server, namely the paths to the different thumbnails of the image, and the original
+      // Therefore, we choose to integrate `res.image` into `_DB`, and simply attach
+      item.image_ids[image_index] = res.image.id;
+      res.image = _DB.integrate(res.image);
+      return res.image;
+      }
+    else{
+      res.errors.forEach(function(err){
+        _Message.addError("Error uploading "+image.original_filename+": "+err);
+        });
+      }
+    });
+  };
+
+_Item.loadImages = function(item){
+  return m.request({
+    method:"POST",
+    url:"/cgi/itemimages",
+    body: {
+      session_hash: _User.session_hash,
+      item_id: item.id
+      }})
+  .then(function(res){
+    if(res.success === true){
+      var images;
+      if(isArray(res.images)){
+        images = _DB.integrateAll(res.images);
+        item.image_ids = res.images.map(function(i){ return i.id; });
+        }
+      else{
+        item.image_ids = [];
+        images = [];
+        }
+      return images;
+      }
+    else{
+      res.errors.forEach(function(err){
+        _Message.addError("Error uploading "+image.original_filename+": "+err);
+        });
+      }
+    });
+  };
+
+_Item.deleteImage = function(item, image){
+  remove(item.image_ids, image.id);
+  _DB.removeRecord(image);
+  return m.request({
+    method:"POST",
+    url:"/cgi/deleteitemimage",
+    body: {
+      session_hash: _User.session_hash,
+      item_id: item.id,
+      image_id: image.id
+      }});
+  };
+
+export default _Item;
\ No newline at end of file
diff --git a/jsapp/_LargeImage.js b/jsapp/_LargeImage.js
new file mode 100644
index 0000000..c5168db
--- /dev/null
+++ b/jsapp/_LargeImage.js
@@ -0,0 +1,5 @@
+var _LargeImage = {};
+
+_LargeImage.src = null;
+
+export default _LargeImage;
\ No newline at end of file
diff --git a/jsapp/_LensBrowser.js b/jsapp/_LensBrowser.js
new file mode 100644
index 0000000..3079873
--- /dev/null
+++ b/jsapp/_LensBrowser.js
@@ -0,0 +1,7 @@
+import SingleVisionBrowser from './SingleVisionBrowser.js';
+
+var _LensBrowser = {}
+
+_LensBrowser.browser = SingleVisionBrowser;
+
+export default _LensBrowser;
\ No newline at end of file
diff --git a/jsapp/_LineItem.js b/jsapp/_LineItem.js
new file mode 100644
index 0000000..05f63ef
--- /dev/null
+++ b/jsapp/_LineItem.js
@@ -0,0 +1,13 @@
+import _Item from './_Item.js';
+
+var _LineItem = {
+  createFromItem: function(item){
+    var lineitem = {};
+    lineitem.item = item;
+    lineitem.quantity = 1;
+    lineitem.price = _Item.priceOf(item); // store price, because if a customer changes pricing tiers, and then looks back at his purchase history, it should show the price he paid at the time, not what he would pay if he would make that same order now.
+    return lineitem;
+    }
+  };
+
+export default _LineItem;
\ No newline at end of file
diff --git a/jsapp/_Login.js b/jsapp/_Login.js
new file mode 100644
index 0000000..8fd5814
--- /dev/null
+++ b/jsapp/_Login.js
@@ -0,0 +1,8 @@
+var _Login = {};
+
+_Login.username = "";
+_Login.password = "";
+
+_Login.is_hidden = true;
+
+export default _Login;
\ No newline at end of file
diff --git a/jsapp/_Message.js b/jsapp/_Message.js
new file mode 100644
index 0000000..2f4cfb7
--- /dev/null
+++ b/jsapp/_Message.js
@@ -0,0 +1,26 @@
+var _Message = {}
+
+_Message.messages = [];
+
+_Message.add = function(type, msg_text){
+  var msg = {type: type, text: msg_text};
+  _Message.messages.push(msg);
+  };
+
+_Message.addSuccess = function(msg_text){
+  _Message.add('success', msg_text);
+  };
+  
+_Message.addNotification = function(msg_text){
+  _Message.add('notification', msg_text);
+  };
+
+_Message.addError = function(msg_text){
+  _Message.add('error', msg_text);
+  };
+
+_Message.remove = function(index){
+  _Message.messages.splice(index,1);
+  };
+
+export default _Message;
\ No newline at end of file
diff --git a/jsapp/_Modal.js b/jsapp/_Modal.js
new file mode 100644
index 0000000..b979f26
--- /dev/null
+++ b/jsapp/_Modal.js
@@ -0,0 +1,14 @@
+var _Modal = {};
+
+_Modal.component = null;
+_Modal.attrs = null;
+_Modal.show = function(component, attrs){
+  _Modal.component = component;
+  _Modal.attrs = attrs;
+  };
+_Modal.close = function(){
+  _Modal.component = null;
+  _Modal.attrs = null;
+  };
+
+export default _Modal;
\ No newline at end of file
diff --git a/jsapp/_Navigation.js b/jsapp/_Navigation.js
new file mode 100644
index 0000000..f132004
--- /dev/null
+++ b/jsapp/_Navigation.js
@@ -0,0 +1,61 @@
+import Home from './Home.js';
+import AboutUs from './AboutUs.js';
+import Events from './Events.js';
+import Policies from './Policies.js';
+import ContactUs from './ContactUs.js';
+import CollectionsList from './CollectionsList.js';
+import DesignerCollectionsList from './DesignerCollectionsList.js';
+import LensBrowser from './LensBrowser.js';
+import Equipment from './Equipment.js';
+import _Equipment from './_Equipment.js';
+import Accessories from './Accessories.js';
+import _Accessories from './_Accessories.js';
+import _Item from './_Item.js';
+import Admin from './Admin.js';
+import UnderConstruction from './UnderConstruction.js';
+
+var _Navigation = {};
+
+_Navigation.is_hidden = true;
+
+_Navigation.component = Home;
+_Navigation.attrs = null;
+
+_Navigation.navigateTo = function(component, attrs){
+  _Navigation.component = component;
+  _Navigation.attrs = attrs;
+  };
+
+_Navigation.navigateToFunction = function(component, attrs){
+  return function(e){
+    _Navigation.component = component;
+    _Navigation.attrs = attrs;
+    };
+  };
+
+_Navigation.menu = [
+  {label: "Home", component: Home, attrs: null, children: [], run: null, restricted: false},
+  {label: "About Us", component: AboutUs, attrs: null, children: [], run: null, restricted: false},
+  {label: "Events", component: Events, attrs: null, children: [
+    //{label: "Upcoming Trade Shows", component: Events, attrs: null, children: [], run: null, restricted: false}
+    ], run: null, restricted: false},
+  {label: "Collections", component: CollectionsList, attrs: null, children: [], run: null},
+  {label: "Designer Collections", component: DesignerCollectionsList, attrs: null, children: [], run: null},
+  //{label: "Lenses", component: LensBrowser, attrs: null, children: [], run: null, restricted: false},
+  {label: "Lenses", component: UnderConstruction, attrs: null, children: [], run: null, restricted: false},
+  {label: "Equipment", component: Equipment, attrs: null, children: [], run: function(){
+                                _Equipment.items=[];
+                                _Item.getItems({subtype:'equipment'})
+                                  .then(function(items){ _Equipment.items=items; });
+                                }, restricted: false},
+  {label: "Accessories", component: Accessories, attrs: null, children: [], run: function(){
+                                _Accessories.items=[];
+                                _Item.getItems({subtype:'accessory'})
+                                  .then(function(items){ _Accessories.items=items; });
+                                }, restricted: false},
+  {label: "Contact Us", component: ContactUs, attrs: null, children: [], run: null, restricted: false},
+  {label: "Policies", component: Policies, attrs: null, children: [], run: null, restricted: false},
+  {label: "Admin", component: Admin, attrs: null, children: [], run: null, restricted: 'admin'}
+  ];
+
+export default _Navigation;
\ No newline at end of file
diff --git a/jsapp/_OpenOrders.js b/jsapp/_OpenOrders.js
new file mode 100644
index 0000000..306619b
--- /dev/null
+++ b/jsapp/_OpenOrders.js
@@ -0,0 +1,67 @@
+import _DB from './_DB.js';
+import _Message from './_Message.js';
+import _User from './_User.js';
+import isArray from './util/isArray.js';
+
+var _OpenOrders = {};
+
+_OpenOrders.orders = [];
+
+_OpenOrders.getOpenOrders = function(){
+  return m.request({
+    method: 'POST',
+    url: '/cgi/listopenorders',
+    body: {
+      session_hash: _User.session_hash
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      if(!isArray(res.orders)){
+        res.orders = [];
+        }
+      _OpenOrders.orders = res.orders;
+      _OpenOrders.orders.forEach(function(order){
+        order.user_id = _DB.integrate(order.user_id).id;
+        _DB.integrate(order);
+        });
+      return _OpenOrders.orders;
+      }
+    else{
+      res.errors.forEach(function(err){
+        _Message.addError("Error getting open Orders: "+err);
+        });
+      }
+    });
+  };
+
+_OpenOrders.loadOrder = function(order){
+  return m.request({
+    method: 'POST',
+    url: '/cgi/loadorder',
+    body: {
+      session_hash: _User.session_hash,
+      order_id: order.id
+      }
+    })
+  .then(function(res){
+    if(res.success === true){
+      order = res.order;
+      order.cart_id.lineitem_ids.forEach(function(lineitem){
+        lineitem.item_id = _DB.integrate(lineitem.item_id).id;
+        });
+      _DB.integrateAllReturnIds(order.cart_id.lineitem_ids); // integrateAll modifies the Array in-place, so no need for '='
+      order.cart_id = _DB.integrate(order.cart_id).id;
+      order = _DB.integrate(res.order);
+      
+      return order;
+      }
+    else{
+      res.errors.forEach(function(err){
+        _Message.addError("Error loading Order #"+order.id+": "+err);
+        });
+      }
+    });
+  };
+
+export default _OpenOrders;
\ No newline at end of file
diff --git a/jsapp/_Root.js b/jsapp/_Root.js
new file mode 100644
index 0000000..a154b3e
--- /dev/null
+++ b/jsapp/_Root.js
@@ -0,0 +1,39 @@
+var _Root = {};
+
+_Root.attrs = {};
+
+_Root.allowFileDrop = function(cb){
+  _Root.attrs.ondragover = function(e){
+    e.preventDefault();
+    };
+  _Root.attrs.ondrop = function(e){
+    e.preventDefault();  // don't open the file in the browser
+    var files = [];
+    
+    // some browsers use `.items` and some use `.files`, so check for both:
+    if (e.dataTransfer.items) {
+      for (var i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === 'file') {  // If dropped items aren't files, reject them
+          files.push( e.dataTransfer.items[i].getAsFile() );
+          }
+        }
+      }
+    else {
+      for (var i = 0; i < e.dataTransfer.files.length; i++) {
+        files.push( e.dataTransfer.files[i] );
+        }
+      }
+    for(var i=0, file=null; i<files.length; i++){
+      file = files[i]
+      cb(file)
+      //console.log(file.name);
+      }
+    }
+  };
+
+_Root.unallowFileDrop = function(){
+  _Root.attrs.ondragover = null;
+  _Root.attrs.ondrop = null;
+  };
+
+export default _Root;
\ No newline at end of file
diff --git a/jsapp/_User.js b/jsapp/_User.js
new file mode 100644
index 0000000..ed4aa6e
--- /dev/null
+++ b/jsapp/_User.js
@@ -0,0 +1,85 @@
+import _Message from "./_Message.js";
+import isUndefined from './util/isUndefined.js';
+import isArray from './util/isArray.js';
+import Home from './Home.js';
+import _Cart from './_Cart.js';
+import _DB from './_DB.js';
+import _Navigation from './_Navigation.js';
+
+
+var _User = {};
+
+_User.guest = {tier: 'silver'};
+_User.current = _User.guest;
+
+_User.session_hash = null;
+
+_User.isGold = function(){
+  return _User.current.tier === 'gold';
+  }
+
+_User.isLoggedIn = function(){
+  return !(_User.current === _User.guest);
+  };
+
+_User.isGuest = function(){
+  return (_User.current === _User.guest);
+  };
+
+_User.isAdmin = function(){
+  return (_User.current.is_admin);
+  };
+
+_User.attemptLogin = function(username, password){
+  m.request({
+    method: 'POST',
+    url: '/cgi/attemptlogin', 
+    body: { username: username, password: password }
+    })
+  .then(function(res){
+    if(res.success === true){
+      var user = res.user;
+      _User.current = user;
+      _User.session_hash = res.session_hash;
+      _Message.addNotification("Welcome, "+user.firstname+"!");
+      
+      if(!isArray(res.cart.lineitem_ids)){
+        res.cart.lineitem_ids = [];
+        }
+      res.cart.lineitem_ids.forEach(function(lineitem, index){
+        lineitem.item_id = _DB.integrate(lineitem.item_id).id;
+        res.cart.lineitem_ids[index] = _DB.integrate(lineitem).id;
+        });
+      _Cart.current = _DB.integrate(res.cart);
+      
+      return _Cart.current;
+      }
+    else{
+      _Message.addError("Wrong Username/Password!");
+      //return false;
+      }
+    });
+  };
+
+_User.logout = function(){
+  m.request({
+    method: 'POST',
+    url: '/cgi/logout', 
+    body: { session_hash: _User.session_hash }
+    })
+  .then(function(res){
+    if(res.success === true){
+      _User.current = _User.guest;
+      _User.session_hash = null;
+      _Cart.current = null;
+      _Message.addNotification("Logged out!");
+      _Navigation.component = Home;
+      _Navigation.attrs = null;
+      }
+    else{
+      _Message.addError("Couldn't log out for some reason...");
+      }
+    });
+  };
+
+export default _User;
\ No newline at end of file
diff --git a/jsapp/app_mithril.js b/jsapp/app_mithril.js
new file mode 100644
index 0000000..472d3a4
--- /dev/null
+++ b/jsapp/app_mithril.js
@@ -0,0 +1,60 @@
+var root = document.body
+
+//import Header from'./Header.js';
+import _Root from './_Root.js';
+import Navigation from './Navigation.js';
+import _Navigation from './_Navigation.js';
+import Cart from './Cart.js';
+//import _Cart from './_Cart.js';
+//import ItemBrowser from './ItemBrowser.js';
+import Messages from './Messages.js';
+import LoginBox from './LoginBox.js';
+import _Login from './_Login.js';
+import Modal from './Modal.js';
+//import LargeImage from './LargeImage.js';
+
+import _DB from './_DB.js';
+window._DB = _DB;
+
+var Page = {
+view: function(){
+  return [
+        m('#root.container.grid-lg', _Root.attrs, [
+          m('#head.columns', [
+            m('img.img-responsive.column.col-3', {src: 'images/piazza-optical-logo.jpg'}),
+            m(LoginBox),
+            m('.column.col-1', [
+              m('button.btn.btn-primary', {onclick: _Navigation.navigateToFunction(Cart,null)}, [
+                m('i.icon-basket'),
+                'Cart'
+                ])
+              ])
+            ]),
+          m(Navigation),
+          m('#main', [
+            m(_Navigation.component, _Navigation.attrs)
+            //m(ItemBrowser)
+            ]),
+          m(Modal),
+          //m(LargeImage),
+          m(Messages) // last so it's always on top
+          ]),
+        m("#footer.bg-dark", [
+          m("h6#copyright.text-center", "Copyright ©2019 Piazza Optical")
+          ])
+    ]
+  }
+};
+m.mount(root, Page);
+
+// TODO: get rid of this function in production
+function api(endpoint, payload){
+  return m.request({
+    method: 'POST',
+    url: '/cgi/'+endpoint,
+    body: payload
+    });
+  }
+window.api = api;
+
+//module.exports = {};
\ No newline at end of file
diff --git a/jsapp/compile.sh b/jsapp/compile.sh
new file mode 100755
index 0000000..f063ff0
--- /dev/null
+++ b/jsapp/compile.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+#rollup app_mithril.js --file bundle.js --format iife
+rollup --config
+#postcss css/tailwind.css -o css/tailwind.compiled.css
+#./serve.sh
\ No newline at end of file
diff --git a/jsapp/mithril.min.js b/jsapp/mithril.min.js
new file mode 100644
index 0000000..544dca2
--- /dev/null
+++ b/jsapp/mithril.min.js
@@ -0,0 +1 @@
+!function(){"use strict";function e(e,t,n,r,o,l){return{tag:e,key:t,attrs:n,children:r,text:o,dom:l,domSize:void 0,state:void 0,events:void 0,instance:void 0}}e.normalize=function(t){return Array.isArray(t)?e("[",void 0,void 0,e.normalizeChildren(t),void 0,void 0):null==t||"boolean"==typeof t?null:"object"==typeof t?t:e("#",void 0,void 0,String(t),void 0,void 0)},e.normalizeChildren=function(t){var n=[];if(t.length){for(var r=null!=t[0]&&null!=t[0].key,o=1;o<t.length;o++)if((null!=t[o]&&null!=t[o].key)!==r)throw new TypeError("Vnodes must either always have keys or never have keys!");for(o=0;o<t.length;o++)n[o]=e.normalize(t[o])}return n};var t=function(){var t,n=arguments[this],r=this+1;if(null==n?n={}:("object"!=typeof n||null!=n.tag||Array.isArray(n))&&(n={},r=this),arguments.length===r+1)t=arguments[r],Array.isArray(t)||(t=[t]);else for(t=[];r<arguments.length;)t.push(arguments[r++]);return e("",n.key,n,t)},n=/(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g,r={},o={}.hasOwnProperty;function l(e){for(var t in e)if(o.call(e,t))return!1;return!0}function i(i){if(null==i||"string"!=typeof i&&"function"!=typeof i&&"function"!=typeof i.view)throw Error("The selector must be either a string or a component.");var a=t.apply(1,arguments);return"string"==typeof i&&(a.children=e.normalizeChildren(a.children),"["!==i)?function(t,n){var r=n.attrs,i=e.normalizeChildren(n.children),a=o.call(r,"class"),u=a?r.class:r.className;if(n.tag=t.tag,n.attrs=null,n.children=void 0,!l(t.attrs)&&!l(r)){var s={};for(var c in r)o.call(r,c)&&(s[c]=r[c]);r=s}for(var c in t.attrs)o.call(t.attrs,c)&&"className"!==c&&!o.call(r,c)&&(r[c]=t.attrs[c]);for(var c in null==u&&null==t.attrs.className||(r.className=null!=u?null!=t.attrs.className?String(t.attrs.className)+" "+String(u):u:null!=t.attrs.className?t.attrs.className:null),a&&(r.class=null),r)if(o.call(r,c)&&"key"!==c){n.attrs=r;break}return Array.isArray(i)&&1===i.length&&null!=i[0]&&"#"===i[0].tag?n.text=i[0].children:n.children=i,n}(r[i]||function(e){for(var t,o="div",l=[],i={};t=n.exec(e);){var a=t[1],u=t[2];if(""===a&&""!==u)o=u;else if("#"===a)i.id=u;else if("."===a)l.push(u);else if("["===t[3][0]){var s=t[6];s&&(s=s.replace(/\\(["'])/g,"$1").replace(/\\\\/g,"\\")),"class"===t[4]?l.push(s):i[t[4]]=""===s?s:s||!0}}return l.length>0&&(i.className=l.join(" ")),r[e]={tag:o,attrs:i}}(i),a):(a.tag=i,a)}if(i.trust=function(t){return null==t&&(t=""),e("<",void 0,void 0,t,void 0,void 0)},i.fragment=function(){var n=t.apply(0,arguments);return n.tag="[",n.children=e.normalizeChildren(n.children),n},(a=function(e){if(!(this instanceof a))throw new Error("Promise must be called with `new`");if("function"!=typeof e)throw new TypeError("executor must be a function");var t=this,n=[],r=[],o=s(n,!0),l=s(r,!1),i=t._instance={resolvers:n,rejectors:r},u="function"==typeof setImmediate?setImmediate:setTimeout;function s(e,o){return function a(s){var f;try{if(!o||null==s||"object"!=typeof s&&"function"!=typeof s||"function"!=typeof(f=s.then))u(function(){o||0!==e.length||console.error("Possible unhandled promise rejection:",s);for(var t=0;t<e.length;t++)e[t](s);n.length=0,r.length=0,i.state=o,i.retry=function(){a(s)}});else{if(s===t)throw new TypeError("Promise can't be resolved w/ itself");c(f.bind(s))}}catch(e){l(e)}}}function c(e){var t=0;function n(e){return function(n){t++>0||e(n)}}var r=n(l);try{e(n(o),r)}catch(e){r(e)}}c(e)}).prototype.then=function(e,t){var n,r,o=this._instance;function l(e,t,l,i){t.push(function(t){if("function"!=typeof e)l(t);else try{n(e(t))}catch(e){r&&r(e)}}),"function"==typeof o.retry&&i===o.state&&o.retry()}var i=new a(function(e,t){n=e,r=t});return l(e,o.resolvers,n,!0),l(t,o.rejectors,r,!1),i},a.prototype.catch=function(e){return this.then(null,e)},a.prototype.finally=function(e){return this.then(function(t){return a.resolve(e()).then(function(){return t})},function(t){return a.resolve(e()).then(function(){return a.reject(t)})})},a.resolve=function(e){return e instanceof a?e:new a(function(t){t(e)})},a.reject=function(e){return new a(function(t,n){n(e)})},a.all=function(e){return new a(function(t,n){var r=e.length,o=0,l=[];if(0===e.length)t([]);else for(var i=0;i<e.length;i++)!function(i){function a(e){o++,l[i]=e,o===r&&t(l)}null==e[i]||"object"!=typeof e[i]&&"function"!=typeof e[i]||"function"!=typeof e[i].then?a(e[i]):e[i].then(a,n)}(i)})},a.race=function(e){return new a(function(t,n){for(var r=0;r<e.length;r++)e[r].then(t,n)})},"undefined"!=typeof window){void 0===window.Promise?window.Promise=a:window.Promise.prototype.finally||(window.Promise.prototype.finally=a.prototype.finally);var a=window.Promise}else if("undefined"!=typeof global){void 0===global.Promise?global.Promise=a:global.Promise.prototype.finally||(global.Promise.prototype.finally=a.prototype.finally);a=global.Promise}var u=function(t){var n,r=t&&t.document,o={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"};function l(e){return e.attrs&&e.attrs.xmlns||o[e.tag]}function i(e,t){if(e.state!==t)throw new Error("`vnode.state` must not be modified")}function a(e){var t=e.state;try{return this.apply(t,arguments)}finally{i(e,t)}}function u(){try{return r.activeElement}catch(e){return null}}function s(e,t,n,r,o,l,i){for(var a=n;a<r;a++){var u=t[a];null!=u&&c(e,u,o,i,l)}}function c(t,n,o,i,u){var f=n.tag;if("string"==typeof f)switch(n.state={},null!=n.attrs&&R(n.attrs,n,o),f){case"#":!function(e,t,n){t.dom=r.createTextNode(t.children),w(e,t.dom,n)}(t,n,u);break;case"<":d(t,n,i,u);break;case"[":!function(e,t,n,o,l){var i=r.createDocumentFragment();if(null!=t.children){var a=t.children;s(i,a,0,a.length,n,null,o)}t.dom=i.firstChild,t.domSize=i.childNodes.length,w(e,i,l)}(t,n,o,i,u);break;default:!function(t,n,o,i,a){var u=n.tag,c=n.attrs,f=c&&c.is,d=(i=l(n)||i)?f?r.createElementNS(i,u,{is:f}):r.createElementNS(i,u):f?r.createElement(u,{is:f}):r.createElement(u);if(n.dom=d,null!=c&&function(e,t,n){for(var r in t)j(e,r,null,t[r],n)}(n,c,i),w(t,d,a),!b(n)&&(null!=n.text&&(""!==n.text?d.textContent=n.text:n.children=[e("#",void 0,void 0,n.text,void 0,void 0)]),null!=n.children)){var h=n.children;s(d,h,0,h.length,o,null,i),"select"===n.tag&&null!=c&&function(e,t){if("value"in t)if(null===t.value)-1!==e.dom.selectedIndex&&(e.dom.value=null);else{var n=""+t.value;e.dom.value===n&&-1!==e.dom.selectedIndex||(e.dom.value=n)}"selectedIndex"in t&&j(e,"selectedIndex",null,t.selectedIndex,void 0)}(n,c)}}(t,n,o,i,u)}else!function(t,n,r,o,l){(function(t,n){var r;if("function"==typeof t.tag.view){if(t.state=Object.create(t.tag),null!=(r=t.state.view).$$reentrantLock$$)return;r.$$reentrantLock$$=!0}else{if(t.state=void 0,null!=(r=t.tag).$$reentrantLock$$)return;r.$$reentrantLock$$=!0,t.state=null!=t.tag.prototype&&"function"==typeof t.tag.prototype.view?new t.tag(t):t.tag(t)}if(R(t.state,t,n),null!=t.attrs&&R(t.attrs,t,n),t.instance=e.normalize(a.call(t.state.view,t)),t.instance===t)throw Error("A view cannot return the vnode it received as argument");r.$$reentrantLock$$=null})(n,r),null!=n.instance?(c(t,n.instance,r,o,l),n.dom=n.instance.dom,n.domSize=null!=n.dom?n.instance.domSize:0):n.domSize=0}(t,n,o,i,u)}var f={caption:"table",thead:"table",tbody:"table",tfoot:"table",tr:"tbody",th:"tr",td:"tr",colgroup:"table",col:"colgroup"};function d(e,t,n,o){var l=t.children.match(/^\s*?<(\w+)/im)||[],i=r.createElement(f[l[1]]||"div");"http://www.w3.org/2000/svg"===n?(i.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+t.children+"</svg>",i=i.firstChild):i.innerHTML=t.children,t.dom=i.firstChild,t.domSize=i.childNodes.length,t.instance=[];for(var a,u=r.createDocumentFragment();a=i.firstChild;)t.instance.push(a),u.appendChild(a);w(e,u,o)}function h(e,t,n,r,o,l){if(t!==n&&(null!=t||null!=n))if(null==t||0===t.length)s(e,n,0,n.length,r,o,l);else if(null==n||0===n.length)x(e,t,0,t.length);else{var i=null!=t[0]&&null!=t[0].key,a=null!=n[0]&&null!=n[0].key,u=0,f=0;if(!i)for(;f<t.length&&null==t[f];)f++;if(!a)for(;u<n.length&&null==n[u];)u++;if(null===a&&null==i)return;if(i!==a)x(e,t,f,t.length),s(e,n,u,n.length,r,o,l);else if(a){for(var d,h,w,b,E,S=t.length-1,C=n.length-1;S>=f&&C>=u&&(w=t[S],b=n[C],w.key===b.key);)w!==b&&p(e,w,b,r,o,l),null!=b.dom&&(o=b.dom),S--,C--;for(;S>=f&&C>=u&&(d=t[f],h=n[u],d.key===h.key);)f++,u++,d!==h&&p(e,d,h,r,y(t,f,o),l);for(;S>=f&&C>=u&&u!==C&&d.key===b.key&&w.key===h.key;)g(e,w,E=y(t,f,o)),w!==h&&p(e,w,h,r,E,l),++u<=--C&&g(e,d,o),d!==b&&p(e,d,b,r,o,l),null!=b.dom&&(o=b.dom),f++,w=t[--S],b=n[C],d=t[f],h=n[u];for(;S>=f&&C>=u&&w.key===b.key;)w!==b&&p(e,w,b,r,o,l),null!=b.dom&&(o=b.dom),C--,w=t[--S],b=n[C];if(u>C)x(e,t,f,S+1);else if(f>S)s(e,n,u,C+1,r,o,l);else{var j,z,A=o,O=C-u+1,N=new Array(O),T=0,P=0,$=2147483647,I=0;for(P=0;P<O;P++)N[P]=-1;for(P=C;P>=u;P--){null==j&&(j=v(t,f,S+1));var L=j[(b=n[P]).key];null!=L&&($=L<$?L:-1,N[P-u]=L,w=t[L],t[L]=null,w!==b&&p(e,w,b,r,o,l),null!=b.dom&&(o=b.dom),I++)}if(o=A,I!==S-f+1&&x(e,t,f,S+1),0===I)s(e,n,u,C+1,r,o,l);else if(-1===$)for(T=(z=function(e){for(var t=[0],n=0,r=0,o=0,l=m.length=e.length,o=0;o<l;o++)m[o]=e[o];for(var o=0;o<l;++o)if(-1!==e[o]){var i=t[t.length-1];if(e[i]<e[o])m[o]=i,t.push(o);else{for(n=0,r=t.length-1;n<r;){var a=(n>>>1)+(r>>>1)+(n&r&1);e[t[a]]<e[o]?n=a+1:r=a}e[o]<e[t[n]]&&(n>0&&(m[o]=t[n-1]),t[n]=o)}}for(n=t.length,r=t[n-1];n-- >0;)t[n]=r,r=m[r];return m.length=0,t}(N)).length-1,P=C;P>=u;P--)h=n[P],-1===N[P-u]?c(e,h,r,l,o):z[T]===P-u?T--:g(e,h,o),null!=h.dom&&(o=n[P].dom);else for(P=C;P>=u;P--)h=n[P],-1===N[P-u]&&c(e,h,r,l,o),null!=h.dom&&(o=n[P].dom)}}else{var R=t.length<n.length?t.length:n.length;for(u=u<f?u:f;u<R;u++)(d=t[u])===(h=n[u])||null==d&&null==h||(null==d?c(e,h,r,l,y(t,u+1,o)):null==h?k(e,d):p(e,d,h,r,y(t,u+1,o),l));t.length>R&&x(e,t,u,t.length),n.length>R&&s(e,n,u,n.length,r,o,l)}}}function p(t,n,r,o,i,u){var s=n.tag;if(s===r.tag){if(r.state=n.state,r.events=n.events,function(e,t){do{if(null!=e.attrs&&"function"==typeof e.attrs.onbeforeupdate){var n=a.call(e.attrs.onbeforeupdate,e,t);if(void 0!==n&&!n)break}if("string"!=typeof e.tag&&"function"==typeof e.state.onbeforeupdate){var n=a.call(e.state.onbeforeupdate,e,t);if(void 0!==n&&!n)break}return!1}while(0);return e.dom=t.dom,e.domSize=t.domSize,e.instance=t.instance,e.attrs=t.attrs,e.children=t.children,e.text=t.text,!0}(r,n))return;if("string"==typeof s)switch(null!=r.attrs&&_(r.attrs,r,o),s){case"#":!function(e,t){e.children.toString()!==t.children.toString()&&(e.dom.nodeValue=t.children),t.dom=e.dom}(n,r);break;case"<":!function(e,t,n,r,o){t.children!==n.children?(E(e,t),d(e,n,r,o)):(n.dom=t.dom,n.domSize=t.domSize,n.instance=t.instance)}(t,n,r,u,i);break;case"[":!function(e,t,n,r,o,l){h(e,t.children,n.children,r,o,l);var i=0,a=n.children;if(n.dom=null,null!=a){for(var u=0;u<a.length;u++){var s=a[u];null!=s&&null!=s.dom&&(null==n.dom&&(n.dom=s.dom),i+=s.domSize||1)}1!==i&&(n.domSize=i)}}(t,n,r,o,i,u);break;default:!function(t,n,r,o){var i=n.dom=t.dom;o=l(n)||o,"textarea"===n.tag&&(null==n.attrs&&(n.attrs={}),null!=n.text&&(n.attrs.value=n.text,n.text=void 0)),function(e,t,n,r){if(null!=n)for(var o in n)j(e,o,t&&t[o],n[o],r);var l;if(null!=t)for(var o in t)null==(l=t[o])||null!=n&&null!=n[o]||z(e,o,l,r)}(n,t.attrs,n.attrs,o),b(n)||(null!=t.text&&null!=n.text&&""!==n.text?t.text.toString()!==n.text.toString()&&(t.dom.firstChild.nodeValue=n.text):(null!=t.text&&(t.children=[e("#",void 0,void 0,t.text,void 0,t.dom.firstChild)]),null!=n.text&&(n.children=[e("#",void 0,void 0,n.text,void 0,void 0)]),h(i,t.children,n.children,r,null,o)))}(n,r,o,u)}else!function(t,n,r,o,l,i){if(r.instance=e.normalize(a.call(r.state.view,r)),r.instance===r)throw Error("A view cannot return the vnode it received as argument");_(r.state,r,o),null!=r.attrs&&_(r.attrs,r,o),null!=r.instance?(null==n.instance?c(t,r.instance,o,i,l):p(t,n.instance,r.instance,o,l,i),r.dom=r.instance.dom,r.domSize=r.instance.domSize):null!=n.instance?(k(t,n.instance),r.dom=void 0,r.domSize=0):(r.dom=n.dom,r.domSize=n.domSize)}(t,n,r,o,i,u)}else k(t,n),c(t,r,o,u,i)}function v(e,t,n){for(var r=Object.create(null);t<n;t++){var o=e[t];if(null!=o){var l=o.key;null!=l&&(r[l]=t)}}return r}var m=[];function y(e,t,n){for(;t<e.length;t++)if(null!=e[t]&&null!=e[t].dom)return e[t].dom;return n}function g(e,t,n){var o=r.createDocumentFragment();!function e(t,n,r){for(;null!=r.dom&&r.dom.parentNode===t;){if("string"!=typeof r.tag){if(null!=(r=r.instance))continue}else if("<"===r.tag)for(var o=0;o<r.instance.length;o++)n.appendChild(r.instance[o]);else if("["!==r.tag)n.appendChild(r.dom);else if(1===r.children.length){if(null!=(r=r.children[0]))continue}else for(var o=0;o<r.children.length;o++){var l=r.children[o];null!=l&&e(t,n,l)}break}}(e,o,t),w(e,o,n)}function w(e,t,n){null!=n?e.insertBefore(t,n):e.appendChild(t)}function b(e){if(null==e.attrs||null==e.attrs.contenteditable&&null==e.attrs.contentEditable)return!1;var t=e.children;if(null!=t&&1===t.length&&"<"===t[0].tag){var n=t[0].children;e.dom.innerHTML!==n&&(e.dom.innerHTML=n)}else if(null!=e.text||null!=t&&0!==t.length)throw new Error("Child node of a contenteditable must be trusted");return!0}function x(e,t,n,r){for(var o=n;o<r;o++){var l=t[o];null!=l&&k(e,l)}}function k(e,t){var n,r,o,l=0,u=t.state;if("string"!=typeof t.tag&&"function"==typeof t.state.onbeforeremove&&null!=(o=a.call(t.state.onbeforeremove,t))&&"function"==typeof o.then&&(l=1,n=o),t.attrs&&"function"==typeof t.attrs.onbeforeremove&&null!=(o=a.call(t.attrs.onbeforeremove,t))&&"function"==typeof o.then&&(l|=2,r=o),i(t,u),l){if(null!=n){var s=function(){1&l&&((l&=2)||c())};n.then(s,s)}null!=r&&(s=function(){2&l&&((l&=1)||c())},r.then(s,s))}else C(t),S(e,t);function c(){i(t,u),C(t),S(e,t)}}function E(e,t){for(var n=0;n<t.instance.length;n++)e.removeChild(t.instance[n])}function S(e,t){for(;null!=t.dom&&t.dom.parentNode===e;){if("string"!=typeof t.tag){if(null!=(t=t.instance))continue}else if("<"===t.tag)E(e,t);else{if("["!==t.tag&&(e.removeChild(t.dom),!Array.isArray(t.children)))break;if(1===t.children.length){if(null!=(t=t.children[0]))continue}else for(var n=0;n<t.children.length;n++){var r=t.children[n];null!=r&&S(e,r)}}break}}function C(e){if("string"!=typeof e.tag&&"function"==typeof e.state.onremove&&a.call(e.state.onremove,e),e.attrs&&"function"==typeof e.attrs.onremove&&a.call(e.attrs.onremove,e),"string"!=typeof e.tag)null!=e.instance&&C(e.instance);else{var t=e.children;if(Array.isArray(t))for(var n=0;n<t.length;n++){var r=t[n];null!=r&&C(r)}}}function j(e,t,n,o,l){if("key"!==t&&"is"!==t&&null!=o&&!A(t)&&(n!==o||function(e,t){return"value"===t||"checked"===t||"selectedIndex"===t||"selected"===t&&e.dom===u()||"option"===e.tag&&e.dom.parentNode===r.activeElement}(e,t)||"object"==typeof o)){if("o"===t[0]&&"n"===t[1])return L(e,t,o);if("xlink:"===t.slice(0,6))e.dom.setAttributeNS("http://www.w3.org/1999/xlink",t.slice(6),o);else if("style"===t)$(e.dom,n,o);else if(O(e,t,l)){if("value"===t){if(("input"===e.tag||"textarea"===e.tag)&&e.dom.value===""+o&&e.dom===u())return;if("select"===e.tag&&null!==n&&e.dom.value===""+o)return;if("option"===e.tag&&null!==n&&e.dom.value===""+o)return}"input"===e.tag&&"type"===t?e.dom.setAttribute(t,o):e.dom[t]=o}else"boolean"==typeof o?o?e.dom.setAttribute(t,""):e.dom.removeAttribute(t):e.dom.setAttribute("className"===t?"class":t,o)}}function z(e,t,n,r){if("key"!==t&&"is"!==t&&null!=n&&!A(t))if("o"!==t[0]||"n"!==t[1]||A(t))if("style"===t)$(e.dom,n,null);else if(!O(e,t,r)||"className"===t||"value"===t&&("option"===e.tag||"select"===e.tag&&-1===e.dom.selectedIndex&&e.dom===u())||"input"===e.tag&&"type"===t){var o=t.indexOf(":");-1!==o&&(t=t.slice(o+1)),!1!==n&&e.dom.removeAttribute("className"===t?"class":t)}else e.dom[t]=null;else L(e,t,void 0)}function A(e){return"oninit"===e||"oncreate"===e||"onupdate"===e||"onremove"===e||"onbeforeremove"===e||"onbeforeupdate"===e}function O(e,t,n){return void 0===n&&(e.tag.indexOf("-")>-1||null!=e.attrs&&e.attrs.is||"href"!==t&&"list"!==t&&"form"!==t&&"width"!==t&&"height"!==t)&&t in e.dom}var N=/[A-Z]/g;function T(e){return"-"+e.toLowerCase()}function P(e){return"-"===e[0]&&"-"===e[1]?e:"cssFloat"===e?"float":e.replace(N,T)}function $(e,t,n){if(t===n);else if(null==n)e.style.cssText="";else if("object"!=typeof n)e.style.cssText=n;else if(null==t||"object"!=typeof t)for(var r in e.style.cssText="",n)null!=(o=n[r])&&e.style.setProperty(P(r),String(o));else{for(var r in n){var o;null!=(o=n[r])&&(o=String(o))!==String(t[r])&&e.style.setProperty(P(r),o)}for(var r in t)null!=t[r]&&null==n[r]&&e.style.removeProperty(P(r))}}function I(){this._=n}function L(e,t,n){if(null!=e.events){if(e.events[t]===n)return;null==n||"function"!=typeof n&&"object"!=typeof n?(null!=e.events[t]&&e.dom.removeEventListener(t.slice(2),e.events,!1),e.events[t]=void 0):(null==e.events[t]&&e.dom.addEventListener(t.slice(2),e.events,!1),e.events[t]=n)}else null==n||"function"!=typeof n&&"object"!=typeof n||(e.events=new I,e.dom.addEventListener(t.slice(2),e.events,!1),e.events[t]=n)}function R(e,t,n){"function"==typeof e.oninit&&a.call(e.oninit,t),"function"==typeof e.oncreate&&n.push(a.bind(e.oncreate,t))}function _(e,t,n){"function"==typeof e.onupdate&&n.push(a.bind(e.onupdate,t))}return I.prototype=Object.create(null),I.prototype.handleEvent=function(e){var t,n=this["on"+e.type];"function"==typeof n?t=n.call(e.currentTarget,e):"function"==typeof n.handleEvent&&n.handleEvent(e),this._&&!1!==e.redraw&&(0,this._)(),!1===t&&(e.preventDefault(),e.stopPropagation())},function(t,r,o){if(!t)throw new TypeError("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.");var l=[],i=u(),a=t.namespaceURI;null==t.vnodes&&(t.textContent=""),r=e.normalizeChildren(Array.isArray(r)?r:[r]);var s=n;try{n="function"==typeof o?o:void 0,h(t,t.vnodes,r,l,null,"http://www.w3.org/1999/xhtml"===a?void 0:a)}finally{n=s}t.vnodes=r,null!=i&&u()!==i&&"function"==typeof i.focus&&i.focus();for(var c=0;c<l.length;c++)l[c]()}}(window),s=function(t,n,r){var o=[],l=!1,i=!1;function a(){if(l)throw new Error("Nested m.redraw.sync() call");l=!0;for(var n=0;n<o.length;n+=2)try{t(o[n],e(o[n+1]),u)}catch(e){r.error(e)}l=!1}function u(){i||(i=!0,n(function(){i=!1,a()}))}return u.sync=a,{mount:function(n,r){if(null!=r&&null==r.view&&"function"!=typeof r)throw new TypeError("m.mount(element, component) expects a component, not a vnode");var l=o.indexOf(n);l>=0&&(o.splice(l,2),t(n,[],u)),null!=r&&(o.push(n,r),t(n,e(r),u))},redraw:u}}(u,requestAnimationFrame,console),c=function(e){if("[object Object]"!==Object.prototype.toString.call(e))return"";var t=[];for(var n in e)r(n,e[n]);return t.join("&");function r(e,n){if(Array.isArray(n))for(var o=0;o<n.length;o++)r(e+"["+o+"]",n[o]);else if("[object Object]"===Object.prototype.toString.call(n))for(var o in n)r(e+"["+o+"]",n[o]);else t.push(encodeURIComponent(e)+(null!=n&&""!==n?"="+encodeURIComponent(n):""))}},f=Object.assign||function(e,t){t&&Object.keys(t).forEach(function(n){e[n]=t[n]})},d=function(e,t){if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw new SyntaxError("Template parameter names *must* be separated");if(null==t)return e;var n=e.indexOf("?"),r=e.indexOf("#"),o=r<0?e.length:r,l=n<0?o:n,i=e.slice(0,l),a={};f(a,t);var u=i.replace(/:([^\/\.-]+)(\.{3})?/g,function(e,n,r){return delete a[n],null==t[n]?e:r?t[n]:encodeURIComponent(String(t[n]))}),s=u.indexOf("?"),d=u.indexOf("#"),h=d<0?u.length:d,p=s<0?h:s,v=u.slice(0,p);n>=0&&(v+=e.slice(n,o)),s>=0&&(v+=(n<0?"?":"&")+u.slice(s,h));var m=c(a);return m&&(v+=(n<0&&s<0?"?":"&")+m),r>=0&&(v+=e.slice(r)),d>=0&&(v+=(r<0?"":"&")+u.slice(d)),v},h=function(e,t,n){var r=0;function o(e){return new t(e)}function l(e){return function(r,l){"string"!=typeof r?(l=r,r=r.url):null==l&&(l={});var i=new t(function(t,n){e(d(r,l.params),l,function(e){if("function"==typeof l.type)if(Array.isArray(e))for(var n=0;n<e.length;n++)e[n]=new l.type(e[n]);else e=new l.type(e);t(e)},n)});if(!0===l.background)return i;var a=0;function u(){0==--a&&"function"==typeof n&&n()}return function e(t){var n=t.then;return t.constructor=o,t.then=function(){a++;var r=n.apply(t,arguments);return r.then(u,function(e){if(u(),0===a)throw e}),e(r)},t}(i)}}function i(e,t){for(var n in e.headers)if({}.hasOwnProperty.call(e.headers,n)&&t.test(n))return!0;return!1}return o.prototype=t.prototype,o.__proto__=t,{request:l(function(t,n,r,o){var l,a=null!=n.method?n.method.toUpperCase():"GET",u=n.body,s=!(null!=n.serialize&&n.serialize!==JSON.serialize||u instanceof e.FormData),c=n.responseType||("function"==typeof n.extract?"":"json"),f=new e.XMLHttpRequest,d=!1,h=f,p=f.abort;for(var v in f.abort=function(){d=!0,p.call(this)},f.open(a,t,!1!==n.async,"string"==typeof n.user?n.user:void 0,"string"==typeof n.password?n.password:void 0),s&&null!=u&&!i(n,/^content0-type1$/i)&&f.setRequestHeader("Content-Type","application/json; charset=utf-8"),"function"==typeof n.deserialize||i(n,/^accept$/i)||f.setRequestHeader("Accept","application/json, text/*"),n.withCredentials&&(f.withCredentials=n.withCredentials),n.timeout&&(f.timeout=n.timeout),f.responseType=c,n.headers)({}).hasOwnProperty.call(n.headers,v)&&f.setRequestHeader(v,n.headers[v]);f.onreadystatechange=function(e){if(!d&&4===e.target.readyState)try{var l,i=e.target.status>=200&&e.target.status<300||304===e.target.status||/^file:\/\//i.test(t),a=e.target.response;if("json"===c?e.target.responseType||"function"==typeof n.extract||(a=JSON.parse(e.target.responseText)):c&&"text"!==c||null==a&&(a=e.target.responseText),"function"==typeof n.extract?(a=n.extract(e.target,n),i=!0):"function"==typeof n.deserialize&&(a=n.deserialize(a)),i)r(a);else{try{l=e.target.responseText}catch(e){l=a}var u=new Error(l);u.code=e.target.status,u.response=a,o(u)}}catch(e){o(e)}},"function"==typeof n.config&&(f=n.config(f,n,t)||f)!==h&&(l=f.abort,f.abort=function(){d=!0,l.call(this)}),null==u?f.send():"function"==typeof n.serialize?f.send(n.serialize(u)):u instanceof e.FormData?f.send(u):f.send(JSON.stringify(u))}),jsonp:l(function(t,n,o,l){var i=n.callbackName||"_mithril_"+Math.round(1e16*Math.random())+"_"+r++,a=e.document.createElement("script");e[i]=function(t){delete e[i],a.parentNode.removeChild(a),o(t)},a.onerror=function(){delete e[i],a.parentNode.removeChild(a),l(new Error("JSONP request failed"))},a.src=t+(t.indexOf("?")<0?"?":"&")+encodeURIComponent(n.callbackKey||"callback")+"="+encodeURIComponent(i),e.document.documentElement.appendChild(a)})}}(window,a,s.redraw),p=s,v=function(){return i.apply(this,arguments)};v.m=i,v.trust=i.trust,v.fragment=i.fragment,v.mount=p.mount;var m=i,y=a,g=function(e){if(""===e||null==e)return{};"?"===e.charAt(0)&&(e=e.slice(1));for(var t=e.split("&"),n={},r={},o=0;o<t.length;o++){var l=t[o].split("="),i=decodeURIComponent(l[0]),a=2===l.length?decodeURIComponent(l[1]):"";"true"===a?a=!0:"false"===a&&(a=!1);var u=i.split(/\]\[?|\[/),s=r;i.indexOf("[")>-1&&u.pop();for(var c=0;c<u.length;c++){var f=u[c],d=u[c+1],h=""==d||!isNaN(parseInt(d,10));if(""===f)null==n[i=u.slice(0,c).join()]&&(n[i]=Array.isArray(s)?s.length:0),f=n[i]++;else if("__proto__"===f)break;if(c===u.length-1)s[f]=a;else{var p=Object.getOwnPropertyDescriptor(s,f);null!=p&&(p=p.value),null==p&&(s[f]=p=h?[]:{}),s=p}}}return r},w=function(e){var t=e.indexOf("?"),n=e.indexOf("#"),r=n<0?e.length:n,o=t<0?r:t,l=e.slice(0,o).replace(/\/{2,}/g,"/");return l?("/"!==l[0]&&(l="/"+l),l.length>1&&"/"===l[l.length-1]&&(l=l.slice(0,-1))):l="/",{path:l,params:t<0?{}:g(e.slice(t+1,r))}},b=function(e){var t=w(e),n=Object.keys(t.params),r=[],o=new RegExp("^"+t.path.replace(/:([^\/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|\[\]{}]/g,function(e,t,n){return null==t?"\\"+e:(r.push({k:t,r:"..."===n}),"..."===n?"(.*)":"."===n?"([^/]+)\\.":"([^/]+)"+(n||""))})+"$");return function(e){for(var l=0;l<n.length;l++)if(t.params[n[l]]!==e.params[n[l]])return!1;if(!r.length)return o.test(e.path);var i=o.exec(e.path);if(null==i)return!1;for(l=0;l<r.length;l++)e.params[r[l].k]=r[l].r?i[l+1]:decodeURIComponent(i[l+1]);return!0}},x={};v.route=function(t,n){var r;function o(e,n,o){if(e=d(e,n),null!=r){r();var l=o?o.state:null,i=o?o.title:null;o&&o.replace?t.history.replaceState(l,i,h.prefix+e):t.history.pushState(l,i,h.prefix+e)}else t.location.href=h.prefix+e}var l,i,a,u,s=x,c=h.SKIP={};function h(d,p,v){if(null==d)throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined");var m,g=0,k=Object.keys(v).map(function(e){if("/"!==e[0])throw new SyntaxError("Routes must start with a `/`");if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw new SyntaxError("Route parameter names must be separated with either `/`, `.`, or `-`");return{route:e,component:v[e],check:b(e)}}),E="function"==typeof setImmediate?setImmediate:setTimeout,S=y.resolve(),C=!1;if(r=null,null!=p){var j=w(p);if(!k.some(function(e){return e.check(j)}))throw new ReferenceError("Default route doesn't match any known routes")}function z(){C=!1;var e=t.location.hash;"#"!==h.prefix[0]&&(e=t.location.search+e,"?"!==h.prefix[0]&&"/"!==(e=t.location.pathname+e)[0]&&(e="/"+e));var r=e.concat().replace(/(?:%[a-f89][a-f0-9])+/gim,decodeURIComponent).slice(h.prefix.length),d=w(r);function v(){if(r===p)throw new Error("Could not resolve default route "+p);o(p,null,{replace:!0})}f(d.params,t.history.state),function e(t){for(;t<k.length;t++)if(k[t].check(d)){var o=k[t].component,f=k[t].route,h=o,p=u=function(f){if(p===u){if(f===c)return e(t+1);l=null==f||"function"!=typeof f.view&&"function"!=typeof f?"div":f,i=d.params,a=r,u=null,s=o.render?o:null,2===g?n.redraw():(g=2,n.redraw.sync())}};return void(o.view||"function"==typeof o?(o={},p(h)):o.onmatch?S.then(function(){return o.onmatch(d.params,r,f)}).then(p,v):p("div"))}v()}(0)}return r=function(){C||(C=!0,E(z))},"function"==typeof t.history.pushState?(m=function(){t.removeEventListener("popstate",r,!1)},t.addEventListener("popstate",r,!1)):"#"===h.prefix[0]&&(r=null,m=function(){t.removeEventListener("hashchange",z,!1)},t.addEventListener("hashchange",z,!1)),n.mount(d,{onbeforeupdate:function(){return!(!(g=g?2:1)||x===s)},oncreate:z,onremove:m,view:function(){if(g&&x!==s){var t=[e(l,i.key,i)];return s&&(t=s.render(t[0])),t}}})}return h.set=function(e,t,n){null!=u&&((n=n||{}).replace=!0),u=null,o(e,t,n)},h.get=function(){return a},h.prefix="#!",h.Link={view:function(e){var t,n,r=e.attrs.options,o={};f(o,e.attrs),o.selector=o.options=o.key=o.oninit=o.oncreate=o.onbeforeupdate=o.onupdate=o.onbeforeremove=o.onremove=null;var l=m(e.attrs.selector||"a",o,e.children);return(l.attrs.disabled=Boolean(l.attrs.disabled))?(l.attrs.href=null,l.attrs["aria-disabled"]="true",l.attrs.onclick=null):(t=l.attrs.onclick,n=l.attrs.href,l.attrs.href=h.prefix+n,l.attrs.onclick=function(e){var o;"function"==typeof t?o=t.call(e.currentTarget,e):null==t||"object"!=typeof t||"function"==typeof t.handleEvent&&t.handleEvent(e),!1===o||e.defaultPrevented||0!==e.button&&0!==e.which&&1!==e.which||e.currentTarget.target&&"_self"!==e.currentTarget.target||e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||(e.preventDefault(),e.redraw=!1,h.set(n,null,r))}),l}},h.param=function(e){return i&&null!=e?i[e]:i},h}(window,p),v.render=u,v.redraw=p.redraw,v.request=h.request,v.jsonp=h.jsonp,v.parseQueryString=g,v.buildQueryString=c,v.parsePathname=w,v.buildPathname=d,v.vnode=e,v.PromisePolyfill=a,"undefined"!=typeof module?module.exports=v:window.m=v}();
\ No newline at end of file
diff --git a/jsapp/package-lock.json b/jsapp/package-lock.json
new file mode 100644
index 0000000..bfdbd02
--- /dev/null
+++ b/jsapp/package-lock.json
@@ -0,0 +1,31 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@types/estree": {
+      "version": "0.0.41",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.41.tgz",
+      "integrity": "sha512-rIAmXyJlqw4KEBO7+u9gxZZSQHaCNnIzYrnNmYVpgfJhxTqO0brCX0SYpqUTkVI5mwwUwzmtspLBGBKroMeynA=="
+    },
+    "@types/node": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.0.tgz",
+      "integrity": "sha512-zwrxviZS08kRX40nqBrmERElF2vpw4IUTd5khkhBTfFH8AOaeoLVx48EC4+ZzS2/Iga7NevncqnsUSYjM4OWYA=="
+    },
+    "acorn": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
+      "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
+    },
+    "rollup": {
+      "version": "1.27.14",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.14.tgz",
+      "integrity": "sha512-DuDjEyn8Y79ALYXMt+nH/EI58L5pEw5HU9K38xXdRnxQhvzUTI/nxAawhkAHUQeudANQ//8iyrhVRHJBuR6DSQ==",
+      "requires": {
+        "@types/estree": "0.0.41",
+        "@types/node": "13.1.0",
+        "acorn": "7.1.0"
+      }
+    }
+  }
+}
diff --git a/jsapp/postcss.config.js b/jsapp/postcss.config.js
new file mode 100644
index 0000000..ca2ce01
--- /dev/null
+++ b/jsapp/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer')
+    ]
+  };
\ No newline at end of file
diff --git a/jsapp/require1k.min.js b/jsapp/require1k.min.js
new file mode 100644
index 0000000..f885376
--- /dev/null
+++ b/jsapp/require1k.min.js
@@ -0,0 +1 @@
+R=function(e,n){function t(e,o,u,a){if(e.g)return o(e.e,e);var c=e.g=e.l,f=new XMLHttpRequest;f.onload=function(i,l){function s(){l--||o(n,e)}200==f.status||e.t?(i=[],(e.t=e.t||f.response).replace(/(\/\*[\w\W]*?\*\/|\/\/[^\n]*|[.$]r)|\brequire\s*\(\s*["']([^"']*)["']\s*\)/g,function(e,n,t){n||i.push(t)}),l=i.length,i.map(function(o){t(r(e.l,o),s,"."!=o[0]?c+"/../":n,o)}),s()):u?t(e.n=r(u+="../",a),o,u,a):(e.e=f,o(f,e))},e.t?f.onload():(f.open("GET",c,!0),f.send())}function r(e,n,t){if(e.e)throw e.e;return n?(f.href=e,i.href="."!=n[0]?"./node_modules/"+n:n,t=i.href+".js",f.href="",u[t]=u[t]||{l:t}):e.n?r(e.n):(e[c]||(e.f||a("(function(require,"+c+",module){"+e.t+"\n})//# sourceURL="+e.l))(function(n){return r(r(e.l,n))},e[c]={},e),e[c])}function o(e,n){t(e.call?{l:"",t:""+e,f:e}:r("",e),function(t,o){try{e=r(o)}catch(u){t=u}n&&n(t,e)})}var u={},a=eval,c="createElement",f=e[c]("base"),i=e[c]("a");return e.head.appendChild(f),c=e.querySelector("script[data-main]"),c&&o(c.dataset.main),c="exports",o}(document);
\ No newline at end of file
diff --git a/jsapp/rollup.config.js b/jsapp/rollup.config.js
new file mode 100644
index 0000000..ca215a7
--- /dev/null
+++ b/jsapp/rollup.config.js
@@ -0,0 +1,9 @@
+export default {
+  input: 'app_mithril.js',
+  //sourcemap: false,
+  //plugins,
+  output: {
+    file: '../public/bundle.js',
+    format: 'iife'
+  }
+};
\ No newline at end of file
diff --git a/jsapp/util.js b/jsapp/util.js
new file mode 100644
index 0000000..d739524
--- /dev/null
+++ b/jsapp/util.js
@@ -0,0 +1,9 @@
+var util = {};
+
+util.remove = function(arr, el){
+  var i=0;
+  while(arr[i] !== el){ i++; }
+  arr.splice(i,1)
+  };
+
+export default util;
\ No newline at end of file
diff --git a/jsapp/util/isArray.js b/jsapp/util/isArray.js
new file mode 100644
index 0000000..6d8ef24
--- /dev/null
+++ b/jsapp/util/isArray.js
@@ -0,0 +1,5 @@
+function isArray(x){
+  return Array.isArray(x);
+  }
+
+export default isArray;
\ No newline at end of file
diff --git a/jsapp/util/isNumber.js b/jsapp/util/isNumber.js
new file mode 100644
index 0000000..232d44c
--- /dev/null
+++ b/jsapp/util/isNumber.js
@@ -0,0 +1,5 @@
+var isNumber = function(x){
+  return !isNaN(x);
+  };
+
+export default isNumber;
\ No newline at end of file
diff --git a/jsapp/util/isObject.js b/jsapp/util/isObject.js
new file mode 100644
index 0000000..bfd7330
--- /dev/null
+++ b/jsapp/util/isObject.js
@@ -0,0 +1,5 @@
+function isObject(x){
+  return (typeof x === 'object');
+  }
+
+export default isObject;
\ No newline at end of file
diff --git a/jsapp/util/isUndefined.js b/jsapp/util/isUndefined.js
new file mode 100644
index 0000000..cd5cb9d
--- /dev/null
+++ b/jsapp/util/isUndefined.js
@@ -0,0 +1,5 @@
+var isUndefined = function(x){
+  return typeof(x)==="undefined";
+  }
+
+export default isUndefined;
\ No newline at end of file
diff --git a/jsapp/util/remove.js b/jsapp/util/remove.js
new file mode 100644
index 0000000..27cb212
--- /dev/null
+++ b/jsapp/util/remove.js
@@ -0,0 +1,11 @@
+var remove = function(arr, pred){
+  var len = arr.length
+  for(var i=0; i<len; i++){
+    if(pred(arr[i], i)){
+      arr.splice(i,1)
+      break;
+    }
+  }
+};
+
+export default remove;
\ No newline at end of file
diff --git a/jsapp/util/removeByIndex.js b/jsapp/util/removeByIndex.js
new file mode 100644
index 0000000..fb6d523
--- /dev/null
+++ b/jsapp/util/removeByIndex.js
@@ -0,0 +1,5 @@
+var removeByIndex = function(arr, i){
+  arr.splice(i,1);
+};
+
+export default removeByIndex;
\ No newline at end of file
diff --git a/jsapp/util/removeElement.js b/jsapp/util/removeElement.js
new file mode 100644
index 0000000..ae029f2
--- /dev/null
+++ b/jsapp/util/removeElement.js
@@ -0,0 +1,11 @@
+var removeElement = function(arr, el){
+  var len = arr.length
+  for(var i=0; i<len; i++){
+    if(arr[i] === el){
+      arr.splice(i,1);
+      break;
+    }
+  }
+};
+
+export default removeElement;
\ No newline at end of file
diff --git a/jsapp/util/toNumber.js b/jsapp/util/toNumber.js
new file mode 100644
index 0000000..93304f4
--- /dev/null
+++ b/jsapp/util/toNumber.js
@@ -0,0 +1,5 @@
+var toNumber = function(x){
+  return Number(x);
+  };
+
+export default toNumber;
\ No newline at end of file
diff --git a/public/accusoft-brands.svg b/public/accusoft-brands.svg
new file mode 100644
index 0000000..32548e4
--- /dev/null
+++ b/public/accusoft-brands.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accusoft" class="svg-inline--fa fa-accusoft fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M322.1 252v-1l-51.2-65.8s-12 1.6-25 15.1c-9 9.3-242.1 239.1-243.4 240.9-7 10 1.6 6.8 15.7 1.7.8 0 114.5-36.6 114.5-36.6.5-.6-.1-.1.6-.6-.4-5.1-.8-26.2-1-27.7-.6-5.2 2.2-6.9 7-8.9l92.6-33.8c.6-.8 88.5-81.7 90.2-83.3zm160.1 120.1c13.3 16.1 20.7 13.3 30.8 9.3 3.2-1.2 115.4-47.6 117.8-48.9 8-4.3-1.7-16.7-7.2-23.4-2.1-2.5-205.1-245.6-207.2-248.3-9.7-12.2-14.3-12.9-38.4-12.8-10.2 0-106.8.5-116.5.6-19.2.1-32.9-.3-19.2 16.9C250 75 476.5 365.2 482.2 372.1zm152.7 1.6c-2.3-.3-24.6-4.7-38-7.2 0 0-115 50.4-117.5 51.6-16 7.3-26.9-3.2-36.7-14.6l-57.1-74c-5.4-.9-60.4-9.6-65.3-9.3-3.1.2-9.6.8-14.4 2.9-4.9 2.1-145.2 52.8-150.2 54.7-5.1 2-11.4 3.6-11.1 7.6.2 2.5 2 2.6 4.6 3.5 2.7.8 300.9 67.6 308 69.1 15.6 3.3 38.5 10.5 53.6 1.7 2.1-1.2 123.8-76.4 125.8-77.8 5.4-4 4.3-6.8-1.7-8.2z"></path></svg>
\ No newline at end of file
diff --git a/public/address-book-solid.svg b/public/address-book-solid.svg
new file mode 100644
index 0000000..7f14da7
--- /dev/null
+++ b/public/address-book-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-book" class="svg-inline--fa fa-address-book fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"></path></svg>
\ No newline at end of file
diff --git a/public/bundle.js b/public/bundle.js
new file mode 100644
index 0000000..52e2c80
--- /dev/null
+++ b/public/bundle.js
@@ -0,0 +1,2523 @@
+(function () {
+  'use strict';
+
+  var _Root = {};
+
+  _Root.attrs = {};
+
+  _Root.allowFileDrop = function(cb){
+    _Root.attrs.ondragover = function(e){
+      e.preventDefault();
+      };
+    _Root.attrs.ondrop = function(e){
+      e.preventDefault();  // don't open the file in the browser
+      var files = [];
+      
+      // some browsers use `.items` and some use `.files`, so check for both:
+      if (e.dataTransfer.items) {
+        for (var i = 0; i < e.dataTransfer.items.length; i++) {
+          if (e.dataTransfer.items[i].kind === 'file') {  // If dropped items aren't files, reject them
+            files.push( e.dataTransfer.items[i].getAsFile() );
+            }
+          }
+        }
+      else {
+        for (var i = 0; i < e.dataTransfer.files.length; i++) {
+          files.push( e.dataTransfer.files[i] );
+          }
+        }
+      for(var i=0, file=null; i<files.length; i++){
+        file = files[i];
+        cb(file);
+        //console.log(file.name);
+        }
+      };
+    };
+
+  _Root.unallowFileDrop = function(){
+    _Root.attrs.ondragover = null;
+    _Root.attrs.ondrop = null;
+    };
+
+  var _Home = {};
+
+  _Home.carousel_images = [
+    {src: 'images/carousel1-960.jpg', description: 'Stylish Frames'},
+    {src: 'images/carousel2-960.jpg', description: 'Piazza Optical'},
+    {src: 'images/carousel3-960.jpg', description: 'Professional Optical Equipment'}
+    ];
+
+  var Carousel = function(){
+  return {
+  view: function(vnode){
+    var images = vnode.attrs.images;
+    var name = vnode.attrs.name;
+    
+    return m('.carousel', [
+      images.map(function(image,index){
+        return m('input.carousel-locator', {
+          id: 'slide-'+index,
+          type: 'radio',
+          name: name,
+          hidden: true,
+          checked: (index===0 ? true : false)
+          });
+        }),
+      m('.carousel-container', images.map(function(image, index){
+        var prev_index = (index === 0 ? images.length-1 : index-1);
+        var next_index = (index === images.length-1 ? 0 : index+1);
+        return m('figure.carousel-item', [
+          m('label.item-prev.btn.btn-action.btn-large', {
+            "for": 'slide-'+prev_index
+            }, [
+              m('i.icon.icon-arrow-left')
+              ]),
+          m('label.item-next.btn.btn-action.btn-large', {
+            "for": 'slide-'+next_index
+            }, [
+              m('i.icon.icon-arrow-right')
+              ]),
+          m('img.img-responsive.rounded', {
+            src: image.src,
+            alt: image.description
+            })
+          ]);
+        })),
+      m('.carousel-nav', images.map(function(image, index){
+        return m('label.nav-item.text-hide.c-hand',{
+          "for": 'slide-'+index 
+          }, index.toString());
+        })),
+      ]);
+  }
+  };
+  };
+
+  var Home = function(){
+    return {
+      view: function(vnode){
+        return m('.home', [
+          //m('h1', "Piazza Optical Home Page"),
+          m(Carousel, {images: _Home.carousel_images, name: 'home-carousel'})
+          ]);
+        }
+      };
+    };
+
+  var AboutUs = function(){
+    return {
+      view: function(vnode){
+        return m('.about-us', [
+          m('h1.text-center', "About Us"),
+          m('p', "Welcome to Piazza Optical, your number one source for all your optical needs. From frames and lenses to lab equipment and accessories, we are here to provide you with all these supplies while giving you personalized attention and customer service.  We're dedicated to making available products that rank the very best in the latest trends in frames and sunglasses, with a focus on quality of materials and craftsmanship at the lowest cost to aid you and your store/practice in achieving the most profits."),
+          m('p', "Founded in 1995, Piazza Optical has come a long way from its beginnings in a tiny office in North Miami, FL. When we first started out, our passion for fashion forward frames became an obsession and drove us to scour the best factories of the world in our industry, and gave us the pillars to become a leader in the optical supplies business without losing the personal touch, highlighting honesty and integrity which sets us apart from the competition far and near. Such is the base of our company, and our honesty towards and respect for our customers is what keeps our worldwide  following at the top after all these years."),
+          m('p', "We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us!"),
+          m('p',''),
+          m('p', "Bienvenidos a Piazza Optical la principal distribuidora de armazones ópticas, lentes oftálmicas y equipos de consultorio y de laboratorio. Estamos aquí para proveer a ópticas, distribuidores y oftalmólogos muchos de los artículos relacionados con su establecimiento, brindando a cada cliente atención personalizada y servicio al cliente. Estamos dedicados a poner a su disposición artículos ópticos de la más alta gama en las últimas tendencias de la moda en armazones y gafas de sol, poniendo especial enfoque en la calidad de materiales y mano de obra al menor costo para promover mayores ganancias para Ud. y su óptica."),
+          m('p', "Fundada en 1995, Piazza Optical ha logrado una larga trayectoria desde nuestros comienzos en aquella modesta oficina en North Miami, FL. Desde el principio, nuestra pasión por la moda en óptica se tornó en una obsesión y nos impulsó a buscar y establecer una firme relación con las mejores fábricas de la industria, lo cual es el pilar para convertirnos en líderes en el ramo sin por ello perder el toque personal, permitiendonos brillar en honestidad e integridad que nos diferencia de la competencia lejana y cercana. Tal es la base de nuestra empresa, ya que nuestra honestidad y respeto por nuestros clientes es lo que hace que éstos se mantengan fieles a nuestra compañía despues de tantos años."),
+          m('p', "Deseamos que disfruten de nuestros productos de la misma manera que nosotros disfrutamos ponerlos a vuestra disposición. Si tienen algún comentario o pregunta, por favor no duden en contactarnos!")
+          ]);
+        }
+      };
+    };
+
+  var Events = function(){
+    return {
+      view: function(vnode){
+        return m('.events', [
+          m('h1.text-center', "Upcoming Events")
+          ]);
+        }
+      };
+    };
+
+  var Policies = function(){
+  return {
+  view: function(vnode){
+  return m('.policies', [
+    m('h1.text-center', 'Policies'),
+    m('h2', 'General Policies'),
+    m('p', "All items are thoroughly inspected prior to shipping to insure customer receives a proper product."),
+    m('p', "Warranty is limited to manufacturer’s defects only. Returned pieces will be inspected to determine eligibility for warranty."),
+    m('p', "Our exclusive labels have 1 year manufacturer defect warranty from purchase date, not from dispensing date."),
+    m('p', "Designer Brand names closeouts are only guaranteed for exchange in the unlikely event the piece is shipped defective (within 7 days of purchase)."),
+    m('p', "Designer Brand names regular collections have 1 year warranty for manufacturers’ defects from the date of purchase."),
+    m('p', "These prices are for online purchases only."),
+    m('p', "Not all items available at all times."),
+    m('h2', 'Refund Policy'),
+    m('p', ''),
+    m('h2', 'Privacy Policy'),
+    m('p', '')
+    ]);
+  }};
+  };
+
+  var ContactUs = function(){
+  return {
+  view: function(vnode){
+    return m('.contactus', [
+      m('h1.text-center', 'Contact Us'),
+      m('h3', ['Phone ', m('small', 'Customer Service & General Inquiries')]),
+      m('p', '(305)-818-6786'),
+      m('h3', 'Email'),
+      m('p', 'silvano@piazzaoptical.com'),
+      m('h3', 'Hours'),
+      m('p', 'Mon-Fri 9:00-5:30'),
+      m('h3', 'Address'),
+      m('p', [
+        '8200 NW 27th. Street',
+        m('br'),
+        'Suite 105',
+        m('br'),
+        'Miami, FL  33122'
+        ])
+      ]);
+  }
+  };
+  };
+
+  var _Message$1 = {};
+
+  _Message$1.messages = [];
+
+  _Message$1.add = function(type, msg_text){
+    var msg = {type: type, text: msg_text};
+    _Message$1.messages.push(msg);
+    };
+
+  _Message$1.addSuccess = function(msg_text){
+    _Message$1.add('success', msg_text);
+    };
+    
+  _Message$1.addNotification = function(msg_text){
+    _Message$1.add('notification', msg_text);
+    };
+
+  _Message$1.addError = function(msg_text){
+    _Message$1.add('error', msg_text);
+    };
+
+  _Message$1.remove = function(index){
+    _Message$1.messages.splice(index,1);
+    };
+
+  var isUndefined = function(x){
+    return typeof(x)==="undefined";
+    };
+
+  function isArray(x){
+    return Array.isArray(x);
+    }
+
+  var remove = function(arr, pred){
+    var len = arr.length;
+    for(var i=0; i<len; i++){
+      if(pred(arr[i], i)){
+        arr.splice(i,1);
+        break;
+      }
+    }
+  };
+
+  var removeByIndex = function(arr, i){
+    arr.splice(i,1);
+  };
+
+  var _Cart = {};
+
+  _Cart.updateQuantityOfItem = function(item, quantity){
+    /*
+    var possible_lineitem = _Cart.lineItemOfItem(item);  // _Cart.current.lineitems.find(function(lineitem){ return lineitem.item.id === item.id; });
+    if(isUndefined(possible_lineitem)){
+      possible_lineitem = _LineItem.createFromItem(item); 
+      // possible_lineitem = _Cart.add(item);
+      }
+    possible_lineitem.quantity = quantity;
+    */
+    return m.request({
+      method: 'POST',
+      url: '/cgi/updateitemquantityincart',
+      body: {
+        session_hash: _User.session_hash,
+        item_id: item.id,
+        quantity: quantity
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        res.lineitems.forEach(function(lineitem, index){
+          lineitem.item_id = _DB.integrate(lineitem.item_id).id; // at first item_id has the actual object, which we integrate into _DB, but then we set it to the ID as is expected
+          res.lineitems[index] = _DB.integrate(lineitem).id;
+          });
+        _Cart.current.lineitem_ids = res.lineitems; // at this point, res.lineitems contains only IDs
+        }
+      else{
+        _Message$1.addError("There was an error adding to cart.");
+        }
+      });
+    };
+  _Cart.removeLineItemOfItem = function(item){
+    // TODO: do this on server-side, and return updated cart record with updated lineitem_ids
+    remove(_Cart.current.lineitem_ids, function(lineitem_id){ return lineitem_id === item.id; });
+    };
+  _Cart.removeLineItem = function(index){
+    // TODO: do this on server-side, and return updated cart record with updated lineitem_ids
+    removeByIndex(_Cart.current.lineitem_ids, index);
+    };
+  _Cart.lineItemOfItem = function(item){
+    if(_Cart.current !== null){
+      return _DB.getRecord(  _Cart.current.lineitem_ids.find(function(lineitem_id){ return _DB.getRecord(lineitem_id).item_id === item.id; })  );
+      }
+    };
+
+  _Cart.placeOrder = function(){
+    m.request({
+      method: 'POST', 
+      url: '/cgi/placeorder', 
+      body: {
+        session_hash: _User.session_hash
+        }})
+    .then(function(res){
+      if(res.success){
+        _Message$1.addNotification("Order #"+ res.order_id +" Received!");
+        _Cart.current = res.new_cart_record;
+        _Cart.current.lineitem_ids = [];
+        _DB.integrate(_Cart.current);
+        }
+      });
+    };
+
+  _Cart.current = null; //_Cart.new();
+
+  var _DB$1 = {};
+
+  _DB$1.records = {};
+
+  _DB$1.insertRecord = function(record, type, structure){
+    if(!isUndefined(type)){  record.type = type;  }
+    var record_copy = _DB$1.copyAndTransform(record, structure);  // make a copy in case the record has references to other objects, possibly circular
+    // TODO: Figure-out what to do for image, which has long `src_base64` property, so it must be stored in a file, with a mere reference in the DB. Also, upon creation the automatically makes thumbnails and updates the record accordingly, which is not possible to trigger.
+    return m.request({
+        method: 'POST',
+        url: '/cgi/insertrecord',
+        body: {
+          session_hash: _User.session_hash,
+          record: record_copy
+          }
+        })
+      .then(function(res){
+        if(res.success === true){
+          record.id = res.id;
+          _DB$1.integrate(record);
+          }
+        });
+    };
+
+  _DB$1.getRecord = function(id){
+    return _DB$1.records[id];
+    };
+
+  _DB$1.removeRecord = function(record){
+    delete _DB$1.records[record.id];
+    // TODO: make a call to server too? This is called by _Item.deleteImage, which itself calls the server anyway because deleting an image has special logic
+    };
+
+  _DB$1.integrate = function(new_record){
+    // check if record "exists" by id:
+    if(_DB$1.records.hasOwnProperty(new_record.id)){
+      // if it does exist, update its properties
+      var old_record = _DB$1.records[new_record.id];
+      Object.keys(new_record).forEach(function(key){
+        old_record[key] = new_record[key];
+        });
+      }
+    else{
+      // if it doesn't exist, make it
+      _DB$1.records[new_record.id] = new_record;
+      }
+    return _DB$1.records[new_record.id]; // in case we want the latest version of the record; see _OpenOrders for an example
+    };
+
+  _DB$1.integrateAll = function(new_records){
+    new_records.forEach(function(new_record, i){  // TODO: ensure this is best behavior e.g. cart.lineitems; we want the latest lineitem list, with the proper things removed and added, not only added and none removed
+      new_records[i] = _DB$1.integrate(new_record);
+      });
+    return new_records;
+    };
+  _DB$1.integrateAllReturnIds = function(new_records){
+    new_records.forEach(function(new_record, i){  // TODO: ensure this is best behavior e.g. cart.lineitems; we want the latest lineitem list, with the proper things removed and added, not only added and none removed
+      new_records[i] = _DB$1.integrate(new_record).id;
+      });
+    return new_records;
+    };
+
+
+  // determines whether to replace the whole array, or append to the existsing array, etc.
+  _DB$1.integrateArray = function(record_id, property, new_array){
+    
+    };
+
+  /*
+   schema = {
+    id: 'copy',
+    brand: 'copy',
+    item: 'replace-with-id',  // only get the id of the record, don't copy it
+    item2: {
+      id: 'copy',   // automatically makes separate top-level record for item2, and sets `record.item2 = item2`
+      brand: 'copy'
+      },
+    lineitems: [
+      'list',  // shows that this is a list
+      {                     // this is the substructure of each element in the list
+        id: 'copy',         // if substructure is left-out, then it's a list of scalars
+        quantity: 'copy'    // if substructure == 'replace-with-id', it's a list of records, but only ids are transferred
+        }
+      ]
+    }
+   */
+  _DB$1.getOne = function(id, type, structure){
+    return m.request({
+      method: 'POST',
+      url: '/cgi/getone',
+      body: {
+        session_hash: _User.session_hash,
+        id: id,
+        type: type,
+        structure: structure
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        _DB$1.integrate(res.record);
+        }
+      });
+    };
+
+  /* // exclude: big security problem, since record permissions aren't individualized; an attacker could just send an empty `structure` and get the whole DB
+  _DB.getAll = function(filter, structure){
+    return m.request({
+      method: 'POST',
+      url: '/cgi/getall',
+      body: {
+        session_hash: _User.session_hash,
+        filter: filter,
+        structure: structure
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        if(!isArray(res.records)){ res.records = []; }  // the JSON encoder sends an empty array as an object instead of array
+        res.records.forEach(_DB.integrate);
+        }
+      });
+    }
+    */
+
+  _DB$1.setProperty = function(record, key, value){
+    var old_value = record[key];
+    record[key] = value;
+    return m.request({
+      method: 'POST',
+      url: '/cgi/setproperty',
+      body: {
+        session_hash: _User.session_hash,
+        record_id: record.id,
+        record_type: record.type,
+        key: key,
+        value: value
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        return value;
+        }
+      else{
+        record[key] = old_value;
+        _Message.addError('There was an error updating '+record.type+' #'+record.id+'.');
+        return old_value;
+        }
+      });
+    };
+
+  _DB$1.copyAndTransform = function(record, structure){
+    var record_copy = {};
+    Object.keys(structure).forEach(function(key){
+      var operation = structure[key];
+      if(operation === 'copy'){
+        record_copy[key] = record[key];
+        }
+      else if(operation === 'replace-with-id'){
+        record_copy[key] = record[key].id;
+        }
+      });
+    return record_copy;
+    };
+
+  var _User = {};
+
+  _User.guest = {tier: 'silver'};
+  _User.current = _User.guest;
+
+  _User.session_hash = null;
+
+  _User.isGold = function(){
+    return _User.current.tier === 'gold';
+    };
+
+  _User.isLoggedIn = function(){
+    return !(_User.current === _User.guest);
+    };
+
+  _User.isGuest = function(){
+    return (_User.current === _User.guest);
+    };
+
+  _User.isAdmin = function(){
+    return (_User.current.is_admin);
+    };
+
+  _User.attemptLogin = function(username, password){
+    m.request({
+      method: 'POST',
+      url: '/cgi/attemptlogin', 
+      body: { username: username, password: password }
+      })
+    .then(function(res){
+      if(res.success === true){
+        var user = res.user;
+        _User.current = user;
+        _User.session_hash = res.session_hash;
+        _Message$1.addNotification("Welcome, "+user.firstname+"!");
+        
+        if(!isArray(res.cart.lineitem_ids)){
+          res.cart.lineitem_ids = [];
+          }
+        res.cart.lineitem_ids.forEach(function(lineitem, index){
+          lineitem.item_id = _DB$1.integrate(lineitem.item_id).id;
+          res.cart.lineitem_ids[index] = _DB$1.integrate(lineitem).id;
+          });
+        _Cart.current = _DB$1.integrate(res.cart);
+        
+        return _Cart.current;
+        }
+      else{
+        _Message$1.addError("Wrong Username/Password!");
+        //return false;
+        }
+      });
+    };
+
+  _User.logout = function(){
+    m.request({
+      method: 'POST',
+      url: '/cgi/logout', 
+      body: { session_hash: _User.session_hash }
+      })
+    .then(function(res){
+      if(res.success === true){
+        _User.current = _User.guest;
+        _User.session_hash = null;
+        _Cart.current = null;
+        _Message$1.addNotification("Logged out!");
+        _Navigation.component = Home;
+        _Navigation.attrs = null;
+        }
+      else{
+        _Message$1.addError("Couldn't log out for some reason...");
+        }
+      });
+    };
+
+  var removeElement = function(arr, el){
+    var len = arr.length;
+    for(var i=0; i<len; i++){
+      if(arr[i] === el){
+        arr.splice(i,1);
+        break;
+      }
+    }
+  };
+
+  //import filterCollection from "./lodash-es/filter.js";
+
+  var _Item$1 = {};
+
+  _Item$1.collection = [];
+
+  _Item$1.priceOf = function(item){
+    if(isUndefined(item.price_user)){
+      if(_User.isGold()){
+        return item.price_gold;
+        }
+      else{
+        return item.price_silver;
+        }
+      }
+    else{
+      return item.price_user;
+      }
+    };
+
+  /*
+   Rationale for model-specific accessors like this, instead of directly using the general `_DB` module:
+   Each model, whether for reads or writes on the server, may have special logic.
+   For example, items. If a user isn't logged-in, only certain brands may be returned by the server.
+   Another example, images. When a new image record is inserted into the DB, it saves the binary image data to a file, makes thumbnails, and saves the files' paths in the record, and returns the entire record to the client to update the path info.
+   These can be accomplished by having a very smart client `_DB` module, which can direct each individual step on the server (e.g. make thumbnail, save to file, etc.).
+   However, it's dangerous for a client to have the ability to "send code" to the server. The logic should reside on the server, only invoked by the client.
+   Another problem with this is that it would require a lot of round-trips -- one for each step. 
+   Another problem is that it's harder to implement atomic modifications. For example, if making a thumbnail fails, the entire image record is discarded from the DB. (This isn't actually the desired behavior, this is just for illustration.)
+   In conclusion, we've opted for model-specific getters/setters, both on client and on server.
+   
+   However, the model-specific logic on both ends should still make sure to integrate data they receive into the DB, to keep all data in one place, and not have a bunch of copies of data with the same 'id' but different properties.
+   */
+  _Item$1.getItems = function(filter){
+    return m.request({
+      method:"POST",
+      url:"/cgi/itemsbyfilter",
+      body: {
+        session_hash: _User.session_hash,
+        filter:filter
+        }})
+    .then(function(res){
+      if(res.success === true){
+        // the server encodes an empty set as an Object instead of Array, so we have to detect it:
+        if(!isArray(res.items)){
+          res.items = [];
+          }
+        res.items.forEach(function(item, index){
+          if(!isArray(item.image_ids)){
+            item.image_ids = [];
+            }
+          _DB.integrateAllReturnIds(item.image_ids); // converts objects to ids in-place
+          res.items[index] = _DB.integrate(item);  // TODO: ensure all integrations are captured and return, as this is, so everything refers to the same record in the DB
+          });
+        return res.items;
+        }
+      });
+    };
+
+  _Item$1.getFullItemInfo = function(item){
+    return m.request({
+      method:"POST",
+      url:"/cgi/fulliteminfo",
+      body: {
+        item_id: item.id
+        }})
+    .then(function(res){
+      var item = _DB.integrate(res.item);
+      return item;
+      });
+    };
+
+  _Item$1.searchByString = function(search_string){
+    return m.request({
+      method:"POST",
+      url:"/cgi/itemsbystring",
+      body: {
+        session_hash: _User.session_hash,
+        search_string: search_string
+        }});
+    };
+
+  _Item$1.addImage = function(item, image){
+    var image_index = item.image_ids.push(image) - 1;
+    return m.request({
+      method:"POST",
+      url:"/cgi/addimagetoitem",
+      body: {
+        session_hash: _User.session_hash,
+        item_id: item.id,
+        image_base64: image.src_base64,
+        original_filename: image.original_filename
+        },
+      config: function(xhr){
+        image.is_uploading = true;
+        image.progress = 0;
+        xhr.addEventListener('progress', function(e){
+          image.progress = e.loaded / e.total;
+          });
+        }
+      })
+    .then(function(res){
+      delete image.is_uploading;
+      delete image.progress;
+      if(res.success === true){
+        _Message$1.addSuccess("Uploaded "+image.original_filename);
+        // At this point, `image` is still not its own record in `_DB`
+        // `image` has a large `src_base64` property, whereas `res.image` has a bunch of properties which were set by the server, namely the paths to the different thumbnails of the image, and the original
+        // Therefore, we choose to integrate `res.image` into `_DB`, and simply attach
+        item.image_ids[image_index] = res.image.id;
+        res.image = _DB.integrate(res.image);
+        return res.image;
+        }
+      else{
+        res.errors.forEach(function(err){
+          _Message$1.addError("Error uploading "+image.original_filename+": "+err);
+          });
+        }
+      });
+    };
+
+  _Item$1.loadImages = function(item){
+    return m.request({
+      method:"POST",
+      url:"/cgi/itemimages",
+      body: {
+        session_hash: _User.session_hash,
+        item_id: item.id
+        }})
+    .then(function(res){
+      if(res.success === true){
+        var images;
+        if(isArray(res.images)){
+          images = _DB.integrateAll(res.images);
+          item.image_ids = res.images.map(function(i){ return i.id; });
+          }
+        else{
+          item.image_ids = [];
+          images = [];
+          }
+        return images;
+        }
+      else{
+        res.errors.forEach(function(err){
+          _Message$1.addError("Error uploading "+image.original_filename+": "+err);
+          });
+        }
+      });
+    };
+
+  _Item$1.deleteImage = function(item, image){
+    removeElement(item.image_ids, image.id);
+    _DB.removeRecord(image);
+    return m.request({
+      method:"POST",
+      url:"/cgi/deleteitemimage",
+      body: {
+        session_hash: _User.session_hash,
+        item_id: item.id,
+        image_id: image.id
+        }});
+    };
+
+  var _Modal = {};
+
+  _Modal.component = null;
+  _Modal.attrs = null;
+  _Modal.show = function(component, attrs){
+    _Modal.component = component;
+    _Modal.attrs = attrs;
+    };
+  _Modal.close = function(){
+    _Modal.component = null;
+    _Modal.attrs = null;
+    };
+
+  var _File = {};
+
+  _File.readAsBase64 = function(file){
+    var reader = new FileReader();
+    
+    return new Promise(function(resolve, reject){
+      reader.onerror = function(){
+        reader.abort();
+        reject('Problem reading file.');
+        };
+      reader.onload = function(){
+        resolve(reader.result);
+        };
+      reader.readAsDataURL(file);
+      });
+    };
+
+  var _Image = {};
+
+  _Image.placeholder_img_180_path = './images/placeholder-180x180.png';
+  _Image.placeholder_img_960_path = './images/placeholder-960x720.png';
+
+  // Make a temporary Image instance (for use before it's uploaded); it cannot and should not be attached to item.image_ids. Once it's uploaded, the server returns a proper Image record, which can be attached to item.image_ids.
+  _Image.newFromFile = function(file){
+    var image = {};
+    image.original_filename = file.name;  // TODO: extract only filename without the path
+    return _File.readAsBase64(file)
+      .then(function(src_base64){
+        image.src_base64 = src_base64;
+        return image;
+        });
+    };
+
+  /*
+  _Image.upload = function(image){
+    return m.request({
+      method: "POST",
+      url: "/cgi/newimage",
+      body: {
+        session_hash: _User.session_hash,
+        image_base64: image.src_base64,
+        original_filename: image.original_filename
+        }
+      });
+    };
+  */
+
+  _Image.addToItem = function(image, item){
+    return _Item.addImage(item, image);
+    };
+
+  _Image.thumbnailPath = function(image, size){
+    var thumbnail_id = image['thumbnail_'+size+'_id'];
+    if(isUndefined(thumbnail_id)){
+      return _Image['placeholder_img_'+size+'_path']
+      }
+    else{
+      return '/thumbnailsdb/'+thumbnail_id+'.png';
+      }
+    };
+
+  //import _LargeImage from './_LargeImage.js';
+
+  var _chosen_image = {
+    item: null,
+    chosen_image: null
+    };
+
+  var ItemModalView = function(){
+  return {
+  view: function(vnode){
+  var item = vnode.attrs.item;
+  if(_chosen_image.item !== item){
+    _chosen_image.item = item;
+    _chosen_image.chosen_image = item.image_ids[0];
+    }
+  var chosen_image = _chosen_image.chosen_image;
+  var thumbnail_path = ( chosen_image ? _Image.thumbnailPath(_DB.getRecord(chosen_image), '960') : false );
+  /*
+  return [
+    m('.modal-header', [
+      m('a.btn.btn-clear.float-right', {'aria-label':"Close", onclick: function(){ _Modal.close(); }}),
+      m('.modal-title.h4', item.name)
+      ]),
+    m('.modal-body', [
+      m("img.img-responsive", {src: thumbnail_path || _Image.placeholder_img_960_path })
+      ]),
+    m('.modal-footer', [
+      m('div', '$'+_Item.priceOf(item)),
+      m('button.btn.btn-primary', 'Add to Cart')
+      ])
+    ];
+    */
+  return m('.item-modal-view', [
+    m('a.btn.btn-clear.float-right', {'aria-label':"Close", onclick: function(){ _Modal.close(); }}),
+    m('.h4.text-center', item.name),
+    m("img.img-responsive", {
+      src: thumbnail_path || _Image.placeholder_img_960_path,
+      onclick: function(e){
+        e.stopPropagation();
+        if(thumbnail_path !== false){
+          window.open(_Image.thumbnailPath(_DB.getRecord(chosen_image), 'original'), '_blank');
+          }
+        //_LargeImage.src = (thumbnail_path ? _Image.thumbnailPath(_DB.getRecord(item.image_ids[0]), 'original') : null);
+        }
+      }),
+    m('.form-group.text-center',
+      item.image_ids.map(function(image_id){
+        return m('label.form-radio.label-sm.form-inline', [
+          m('input.input-sm', {
+            type:'radio', 
+            name: item.id.toString()+'modal', // to distinguish from 'ItemListingEntry' radio buttons
+            value: image_id, // is this converted to string?
+            checked: chosen_image===image_id,
+            onchange: function(e){
+              _chosen_image.chosen_image = image_id;
+              }
+            }),
+          m('i.form-icon',"")
+          ]);
+        })
+      ),
+    m('ul', [
+      m('li', 'Color: '+item.color+' ('+item.color_description+')'),
+      m('li', 'Size: '+(item.size || 'N/A')),
+      m('li', 'Material: '+(item.material || 'N/A'))
+      ]),
+    m('p', item.description_short),
+    ( _User.isLoggedIn() ? [
+      m('div', '$'+_Item$1.priceOf(item) ),
+      m('button.btn.btn-primary', 'Add to Cart')
+      ]
+      : null )
+    ]);
+  }
+  };
+  };
+
+  var toNumber = function(x){
+    return Number(x);
+    };
+
+  var isNumber = function(x){
+    return !isNaN(x);
+    };
+
+  //var ItemListingEntry = require('./ItemListingEntry');
+
+  function ItemListingEntry(initialVnode) {
+    return {
+      view: function(vnode) {
+        var item = vnode.attrs.item;
+        var index = vnode.attrs.index;
+        var chosen_images = vnode.attrs.chosen_images;
+        var chosen_image = chosen_images[index];
+        var lineitem = _Cart.lineItemOfItem(item);
+        var thumbnail_path = ( chosen_image ? _Image.thumbnailPath(_DB$1.getRecord(chosen_image), '180') : false );
+        return m('.column.col-3.col-md-6.col-xs-12.mt-2', [
+                  m(".card.c-hand", {
+                      onclick: function(e){
+                        _Item$1.getFullItemInfo(item).then(function(){
+                          _Modal.show(ItemModalView, {item: item});
+                          });
+                        }
+                      },[
+                    m('.card-image.p-centered',[
+                      (item.image_ids.length === 0
+                        ?
+                        m("img.img-responsive", {src: _Image.placeholder_img_180_path })
+                        :
+                        [
+                          m("img.img-responsive", {src: thumbnail_path }),
+                          m('.form-group.text-center',
+                            item.image_ids.map(function(image_id){
+                              return m('label.form-radio.label-sm.form-inline', [
+                                m('input.input-sm', {
+                                  type:'radio', 
+                                  name: item.id.toString(),
+                                  value: image_id, // is this converted to string?
+                                  checked: chosen_image===image_id,
+                                  onchange: function(e){
+                                    chosen_images[index] = image_id;
+                                    e.stopPropagation();
+                                    }
+                                  }),
+                                m('i.form-icon',{onclick:function(e){
+                                    chosen_images[index] = image_id;
+                                    e.stopPropagation(); // So a modal box doesn't open-up
+                                    return false; // I don't know why I need this in addition to stopPropagation().
+                                    }
+                                  },"")
+                                ])
+                              })
+                            )
+                          ]
+                        )
+                      ]),
+                    m('.card-header', [
+                      m(".card-title.h6.text-ellipsis", item.name),
+                      m(".card-subtitle.text-gray", item.color),
+                      ]),
+                    (_User.isGuest() ? null : [
+                      m('card-body',[
+                        m(".price", '$'+_Item$1.priceOf(item)),
+                        ]),
+                      m('card-footer', [
+                          m("input[type=text].form-input.text-center.c-auto", {
+                            onchange: function(e){
+                                        var new_quantity = toNumber(e.target.value);
+                                        if(new_quantity === 0){
+                                          _Cart.removeByItem(item);
+                                          }
+                                        else if(!isNumber(new_quantity)){
+                                          //console.log("Qty. is not a number.");
+                                          _Message$1.addError("Quantity '"+new_quantity+"' is not a number.");
+                                          }
+                                        else{
+                                          _Cart.updateQuantityOfItem(item, new_quantity);
+                                          }
+                                        },
+                            onfocus: function(e){e.target.select();},
+                            onclick: function(e){ e.stopPropagation(); },
+                            value: (isUndefined(lineitem) ? 0 : lineitem.quantity)
+                            })
+                          ])
+                        ])
+                    ])
+        ]);
+      }
+    }
+  }
+
+  function ItemListing(initialVnode) {
+    var chosen_images = {
+      items: null,
+      chosen_images: []
+      };
+    return {
+      view: function(vnode) {
+        //var items = _Item.filter(vnode.attrs.filter);
+        //var items = _Item.collection;
+        var items = vnode.attrs.items;
+        if(items.length === 0){
+          return m('h5', 'Please contact us directly to order.');
+          }
+        if(chosen_images.items !== items){
+          chosen_images.chosen_images = items.map(function(item){
+            return item.image_ids[0];
+            });
+          chosen_images.items = items;
+          }
+        return m(".columns", items.map(function(item, i){ 
+            return m(ItemListingEntry, {item:item, index: i, chosen_images: chosen_images.chosen_images})
+            }));
+      }
+    }
+  }
+
+  //import ItemFilter from './ItemFilter.js';
+
+  function cmp_fn(a,b){
+    var A = (a.model+a.color).toUpperCase(); // ignore upper and lowercase
+    var B = (b.model+b.color).toUpperCase(); // ignore upper and lowercase
+    if (A < B) {
+      return -1;
+      }
+    else if (A > B) {
+      return 1;
+      }
+    else{ // names must be equal
+      return 0;
+      }
+    }
+
+  function ItemBrowser(initialVnode) {
+    return {
+      view: function(vnode) {
+        var items = vnode.attrs.items;
+        items.sort(cmp_fn);
+        return m(".item-browser.container", [
+          //m(ItemFilter),
+          m(ItemListing, {items: items})
+          ]);
+      }
+    }
+  }
+
+  var _CollectionsList = {};
+
+  _CollectionsList.house_brands = [
+    'Kadima',
+    'Kapricci',
+    'BubbleGum',
+    'Primmera'
+    ];
+  _CollectionsList.designer_brands = [
+    //'Kadima',
+    //'Kapricci',
+    //'BubbleGum',
+    //'Primmera',
+    'Adidas',
+    'Armani Exchange',
+    'Bvlgari',
+    'Burberry',
+    'Calvin Klein',
+    'Carolina Herrera',
+    'Carrera',
+    'Christian Dior',
+    'Coach',
+    'Converse',
+    'Diesel',
+    'Dolce Gabbana',
+    'Emporio Armani',
+    'Ermenegildo Zegna',
+    'Escada',
+    'Fendi',
+    'Fila',
+    'Furla',
+    'Gant',
+    'Giorgio Armani',
+    'Gucci',
+    'Guess',
+    'Harley Davidson',
+    'Hugo Boss',
+    'Just Cavalli',
+    'Kenneth Cole Reaction',
+    'Kenneth Cole New York',
+    'Lacoste',
+    'Michael Kors',
+    'Mont Blanc',
+    'Nike',
+    'Nina Ricci',
+    'Oakley',
+    'Persol',
+    'Prada',
+    'Prada Sport',
+    'Puma',
+    'Ray Ban',
+    'Roberto Cavalli',
+    'Salvatore Ferragamo',
+    'Silhouette',
+    'Skechers',
+    'Timberland',
+    'Tom Ford',
+    'Tommy Hilfiger',
+    'Tory Burch',
+    'Tous',
+    'Valentino',
+    'Versace',
+    'Vogue'
+    ];
+
+  var CollectionsList = function(){
+  return {view: function(vnode){
+    var brands = _CollectionsList.house_brands;
+    return m('.container', [
+      m('.columns', [
+        m('.column.col-12', [
+          m('h1.text-center', 'Collections')
+          ])
+        ]),
+      m('.columns', brands.map(function(brand){
+        return m('.column.col-4.col-md-6.col-xs-12.mt-1', [
+          m('.card.c-hand', {onclick: function(e){
+              //var item_browser_attrs = {};
+              //item_browser_attrs.items = [];
+              _Item$1.getItems({brand:brand}).then(function(items){
+                //item_browser_attrs.items = items;
+                _Navigation.navigateTo(ItemBrowser, {items: items});
+                });
+              }},[
+            m('.card-header', [
+              m('.card-title.h3.text-center', brand)
+              ])
+            ])
+          ]);
+          }
+        ))
+      ]);
+  }};
+  };
+
+  var DesignerCollectionsList = function(){
+  return {view: function(vnode){
+    var brands = _CollectionsList.designer_brands;
+    return m('.container', [
+      m('.columns', [
+        m('.column.col-12', [
+          m('h1.text-center', 'Designer Collections')
+          ])
+        ]),
+      _User.isGuest() ? m('.columns', [m('.column.col-12', 'Please Sign-In to See Designer Brands')]) : 
+      m('.columns', brands.map(function(brand){
+        return m('.column.col-4.col-md-6.col-xs-12.mt-1', [
+          m('.card.c-hand', {onclick: function(e){
+              //var item_browser_attrs = {};
+              //item_browser_attrs.items = [];
+              _Item$1.getItems({brand:brand}).then(function(items){
+                //item_browser_attrs.items = items;
+                _Navigation.navigateTo(ItemBrowser, {items: items});
+                });
+              }},[
+            m('.card-header', [
+              m('.card-title.h3.text-center', brand)
+              ])
+            ])
+          ]);
+          }
+        ))
+      ]);
+  }};
+  };
+
+  var _Equipment = {};
+
+  _Equipment.items = [];
+
+  var Equipment = function(){
+  return {
+  view: function(){
+  return m('.equipment', [
+    m('h1.text-center','Equipment'),
+    m(ItemBrowser, {items: _Equipment.items})
+    ]);
+  }
+  };
+  };
+
+  var _Accessories = {};
+
+  _Accessories.items = [];
+
+  var Accessories = function(){
+  return {
+  view: function(){
+  return m('.equipment', [
+    m('h1.text-center','Accessories'),
+    m(ItemBrowser, {items: _Accessories.items})
+    ]);
+  }
+  };
+  };
+
+  var _OpenOrders = {};
+
+  _OpenOrders.orders = [];
+
+  _OpenOrders.getOpenOrders = function(){
+    return m.request({
+      method: 'POST',
+      url: '/cgi/listopenorders',
+      body: {
+        session_hash: _User.session_hash
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        if(!isArray(res.orders)){
+          res.orders = [];
+          }
+        _OpenOrders.orders = res.orders;
+        _OpenOrders.orders.forEach(function(order){
+          order.user_id = _DB$1.integrate(order.user_id).id;
+          _DB$1.integrate(order);
+          });
+        return _OpenOrders.orders;
+        }
+      else{
+        res.errors.forEach(function(err){
+          _Message$1.addError("Error getting open Orders: "+err);
+          });
+        }
+      });
+    };
+
+  _OpenOrders.loadOrder = function(order){
+    return m.request({
+      method: 'POST',
+      url: '/cgi/loadorder',
+      body: {
+        session_hash: _User.session_hash,
+        order_id: order.id
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        order = res.order;
+        order.cart_id.lineitem_ids.forEach(function(lineitem){
+          lineitem.item_id = _DB$1.integrate(lineitem.item_id).id;
+          });
+        _DB$1.integrateAllReturnIds(order.cart_id.lineitem_ids); // integrateAll modifies the Array in-place, so no need for '='
+        order.cart_id = _DB$1.integrate(order.cart_id).id;
+        order = _DB$1.integrate(res.order);
+        
+        return order;
+        }
+      else{
+        res.errors.forEach(function(err){
+          _Message$1.addError("Error loading Order #"+order.id+": "+err);
+          });
+        }
+      });
+    };
+
+  var OrderView = function(){
+  return {
+  view: function(vnode){
+  var order = vnode.attrs.order;
+  var user = _DB$1.getRecord(order.user_id);
+  var cart = _DB$1.getRecord(order.cart_id);
+  var lineitems = cart.lineitem_ids.map(_DB$1.getRecord);
+  var cart_total = 0;
+  return m('.order-view', [
+    m('h1', [
+      'Order #'+order.id,
+      m('small', 'Ordered On: '+order.date_ordered)
+      ]),
+    m('p', user.store+' ('+user.firstname+' '+user.lastname+')'),
+    ( order.status === 'open'
+      ?
+        m('button.btn.btn-primary',{onclick: function(e){
+          _DB$1.setProperty(order, 'status', 'closed');
+          }},'Close Order')
+      :
+        m('button.btn.btn-primary',{onclick: function(e){
+          _DB$1.setProperty(order, 'status', 'open');
+          }},'Re-open Order')
+      ),
+    m('.steps', [
+      m('ul.step', [
+        m('li.step-item'+(order.progress==='ordered'?'.active':''), [
+          m('a.tooltip', {
+            href:'#',
+            'data-tooltip':'Customer Placed Order on '+order.date_ordered,
+            onclick: function(e){
+              e.preventDefault();
+              e.stopPropagation();
+              _DB$1.setProperty(order, 'progress', 'ordered');
+              }
+            }, 'Ordered')
+          ]),
+        m('li.step-item'+(order.progress==='picked'?'.active':''), [
+          m('a.tooltip', {
+            href:'#',
+            'data-tooltip':'Piazza Picked the Order',
+            onclick: function(e){
+              e.preventDefault();
+              e.stopPropagation();
+              _DB$1.setProperty(order, 'progress', 'picked');
+              }
+            }, 'Picked')
+          ]),
+        m('li.step-item'+(order.progress==='shipped'?'.active':''), [
+          m('a.tooltip', {
+            href:'#',
+            'data-tooltip':'Piazza Shipped the Order',
+            onclick: function(e){
+              e.preventDefault();
+              e.stopPropagation();
+              _DB$1.setProperty(order, 'progress', 'shipped');
+              }
+            }, 'Shipped')
+          ]),
+        m('li.step-item'+(order.progress==='paid'?'.active':''), [
+          m('a.tooltip', {
+            href:'#', 
+            'data-tooltip':'Customer Paid for the Order in Full',
+            onclick: function(e){
+              e.preventDefault();
+              e.stopPropagation();
+              _DB$1.setProperty(order, 'progress', 'paid');
+              }
+            }, 'Paid')
+          ])
+        ])
+      ]),
+    m('.items', [
+      m('table.table.table-striped.table-hover', [
+        m('thead', [
+          m('tr', [
+            m('th', 'Item'),
+            m('th', 'Quantity'),
+            m('th', 'Price'),
+            m('th', 'Subtotal')
+            ])
+          ]),
+        m('tbody', lineitems.map(function(lineitem){
+          var subtotal = lineitem.quantity*lineitem.price;
+          cart_total += subtotal;
+          return m('tr', [
+            m('td', _DB$1.getRecord(lineitem.item_id).name),
+            m('td', lineitem.quantity),
+            m('td', '$'+lineitem.price),
+            m('td', '$'+subtotal)
+            ]);
+          }))
+        ]),
+      m('h6', "Grand Total: $"+cart_total)
+      ])
+    ]);
+  }
+  };
+  };
+
+  var OpenOrders = function(){
+  return {
+  view: function(vnode){
+  return m('.open-orders', [
+    m('h2', 'Open Orders'),
+    m('button.btn.refresh-application-button',{onclick: function(){
+                _OpenOrders.getOpenOrders();
+                }},[m('i.icon.icon-refresh'), 'Refresh']),
+    m('.order-list', 
+      m('table.table.table-striped.table-hover', [
+        m('thead', [
+          m('tr', [
+            m('th', 'Customer'),
+            m('th', 'Date Ordered'),
+            m('th', 'Order Number')
+            ])
+          ]),
+        m('tbody',
+            _OpenOrders.orders.map(function(order){
+              var user = _DB$1.getRecord(order.user_id);
+              var company_name = user.store || 'No Company: User#'+user.id;
+              var date_ordered = order.date_ordered;
+              var order_number = order.id;
+              return m('tr', {onclick: function(e){
+                      e.stopPropagation();
+                      _OpenOrders.loadOrder(order).then(function(order){
+                        _Navigation.navigateTo(OrderView, {order: order});
+                        });
+                      }},[
+                m('td', company_name),
+                m('td', date_ordered),
+                m('td', order_number)
+                ])
+              })
+            )
+        ])
+      )
+    ]);
+  }
+  };
+  };
+
+  var util = {};
+
+  util.remove = function(arr, el){
+    var i=0;
+    while(arr[i] !== el){ i++; }
+    arr.splice(i,1);
+    };
+
+  var _Admin = {};
+
+  _Admin.page = OpenOrders;
+
+  _Admin.open_applications = [];
+
+  _Admin.getOpenApplications = function(){
+    return m.request({
+      method:'POST', 
+      url: '/cgi/listnewuserapplications',
+      body: {
+        session_hash: _User.session_hash
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        _Admin.open_applications = res.open_applications;
+        // the server encodes an empty set as an Object instead of Array, so we have to detect it:
+        if(typeof _Admin.open_applications.length === 'undefined'){
+          _Admin.open_applications = [];
+          }
+        }
+      });
+    };
+
+  _Admin.acceptApplication = function(a){
+    return m.request({
+      method:'POST', 
+      url: '/cgi/acceptnewuserapplication',
+      body: {
+        session_hash: _User.session_hash,
+        application_id: a.id,
+        password: a.password
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        util.remove(_Admin.open_applications, a); // TODO: maybe get whole new list of open application IDs, instead of assuming the only change was this one. What if two admins are signed-on to two computers, each knocking-off open applications?
+        }
+      });
+    };
+
+  function ApplicationManager(ivnode){
+  return { view: function(vnode){
+    return m('.application-manager',[
+              m('h2', 'Open Applications'),
+              m('button.btn.refresh-application-button',{onclick: function(){
+                _Admin.getOpenApplications();
+                }},[m('i.icon.icon-refresh'), 'Refresh']),
+              m('ul.open-application-list', _Admin.open_applications.map(function(a){
+                return m('li', [
+                  m('.name', a.salutation+' '+a.firstname+' '+a.lastname+ '('+a.position+' @ '+a.store+')'),
+                  m('.info', a.practice_type+' (Office: '+a.phone_office+', Cell: '+a.phone_cell+', Email: '+a.email+')'),
+                  m('.address', a.address),
+                  m('input[type=text][placeholder=Password].application',{
+                    onchange: function(e){ a.password = e.target.value; },
+                    value: a.password
+                    }),
+                  m('button.btn.btn-success.accept-application-button', {onclick: function(){
+                    _Admin.acceptApplication(a);
+                    }}, 'Accept'),
+                  m('button.btn.btn-error.accept-application-button', {onclick: function(){
+                    _Admin.declineApplication(a);
+                    }}, 'Decline')
+                  ]);
+                }))
+      ]);
+  }}}
+
+  var ItemChooser = function(){
+  var search_term = '';
+  var results = [];
+  var chosen_item = null;
+  return {
+  view: function(vnode){
+    var onchoose = vnode.attrs.onchoose;
+    return m('.item-search', [
+      m('input[type=text][placeholder=Model]', {
+        onchange: function(e){
+          search_term = e.target.value;
+          results = [];
+          if(search_term !== ''){
+            _Item$1.searchByString(search_term)
+              .then(function(res){
+                if(res.success === true){
+                  if(isArray(res.results)){ // empty list comes back as `{}` from server instead of `[]`
+                    results = res.results;
+                    }
+                  else{
+                    results = [];
+                    }
+                  }
+                });
+              }
+          },
+        value: search_term
+        }),
+      m('table.table.table-striped.table-hover.results', [
+        m('thead', [
+          m('tr', [
+            m('th', 'Brand'),
+            m('th', 'Model'),
+            m('th', 'Color')
+            ])
+          ]),
+        m('tbody',
+            results.map(function(item){
+              var active_class = (chosen_item === item ? '.active' : '');
+              return m('tr'+active_class, {
+                  onclick: function(e){
+                    e.stopPropagation();
+                    chosen_item = item;
+                    onchoose(item);
+                    }
+                  },[
+                m('td', item.brand),
+                m('td', item.model),
+                m('td', item.color)
+                ])
+              })
+            )
+        ]
+      )
+    ]);
+  }
+  };
+  };
+
+  function isObject(x){
+    return (typeof x === 'object');
+    }
+
+  function ItemImageController(ivnode){
+  return { view: function(vnode){
+    var item = vnode.attrs.item;
+    if(item === null){
+      return m('.msg', 'No item chosen.');
+      }
+    if(typeof item.image_ids === 'undefined'){ item.image_ids=[]; }
+    var images = item.image_ids.map(function(image_id){
+      if(isObject(image_id)){
+        return image_id;
+        }
+      else{
+        return _DB$1.getRecord(image_id);
+        }
+      }); 
+    var no_images = (images.length === 0);
+    return m('.item-image-controller.bg-secondary', {
+          ondragover: function(e){
+            e.preventDefault();
+            },
+          ondrop: function(e){
+            e.preventDefault();  // don't open the file in the browser
+            var files = [];
+            
+            // some browsers use `.items` and some use `.files`, so check for both:
+            if (e.dataTransfer.items) {
+              for (var i = 0; i < e.dataTransfer.items.length; i++) {
+                if (e.dataTransfer.items[i].kind === 'file') {  // If dropped items aren't files, reject them
+                  files.push( e.dataTransfer.items[i].getAsFile() );
+                  }
+                }
+              }
+            else {
+              for (var i = 0; i < e.dataTransfer.files.length; i++) {
+                files.push( e.dataTransfer.files[i] );
+                }
+              }
+            for(var i=0; i<files.length; i++){
+              _Image.newFromFile(files[i]).then(function(image){
+                _Item$1.addImage(item, image).then(m.redraw);
+                });
+              }
+            m.redraw();
+            }
+          }, [
+      m('.container.image-list', [
+        m('.columns',
+                  no_images ? [m('.column.col-12', 'Drop Images Here')] : images.map(function(image){
+                    return m('.column.col-4', [
+                      m('.card.c-hand', {onclick: function(){ _LargeImage.src = (image.thumbnail_original_id ? '/thumbnailsdb/'+image.thumbnail_original_id+'.png' : image.src_base64); }},[
+                        m('figure', [
+                          m('img.img-responsive', {src: (image.thumbnail_180_id ? _Image.thumbnailPath(image, '180') : image.src_base64) }),
+                          m('figcaption', image.original_filename)
+                          ]),
+                        m('button.btn.btn-clear.delete', {onclick: function(e){
+                          e.stopPropagation();
+                          _Item$1.deleteImage(item, image);
+                          }},'Delete'),
+                        (image.is_uploading ? m('progress.progress',{value: image.progress, max: 1.0}) : null)
+                        ])
+                      ]);
+                    })
+          )
+        ])
+      ]);
+  }}}
+
+  function ItemImageUploader(){
+  var item = null;
+  return {
+  view: function(){
+    return m('.item-image-uploader', [
+      m('h2', 'Upload Images to Items'),
+      m('.container', [
+        m('.columns', [
+          m('.column.col-6', [
+            m(ItemChooser, {onchoose: function(_item){
+                    item = _item;
+                    _Item$1.loadImages(item);
+                    }})
+            ]),
+          m('.column.col-6', [
+            m(ItemImageController, {item: item})
+            ])
+          ])
+        ])
+      ]);
+  }
+  };
+  }
+
+  var _FrameAdmin = {};
+
+  _FrameAdmin.search_term = '';
+  _FrameAdmin.working_frames = [];
+  _FrameAdmin.results_frames = [];
+
+  _FrameAdmin.search_onchange_handler = function(e){
+              _FrameAdmin.search_term = e.target.value;
+              _FrameAdmin.results_frames = [];
+              if(_FrameAdmin.search_term !== ''){
+                //return _Item.searchByString(_FrameAdmin.search_term)
+                return m.request({
+                    method: 'POST',
+                    url: '/cgi/framesbystring',
+                    body: {
+                      session_hash: _User.session_hash,
+                      search_string: _FrameAdmin.search_term
+                      }
+                    })
+                  .then(function(res){
+                    if(res.success === true){
+                      if(isArray(res.results)){ // empty list comes back as `{}` from server instead of `[]`
+                        _FrameAdmin.results_frames = res.results;
+                        }
+                      else{
+                        _FrameAdmin.results_frames = [];
+                        }
+                      return _FrameAdmin.results_frames;
+                      }
+                    });
+                  }
+              };
+
+  _FrameAdmin.add_button_onclick_handler = function(e){
+    var loading_placeholder = {loading: true};
+    loading_placeholder.index = _FrameAdmin.working_frames.push(loading_placeholder);
+    return m.request({
+      method: 'POST',
+      url: '/cgi/createnewframe',
+      body: {
+        session_hash: _User.session_hash
+        }
+      }).then(function(res){
+        if(res.success === true){
+          _DB.integrate(res.new_frame);
+          _FrameAdmin.working_frames[loading_placeholder.index] = res.new_frame;
+          //_FrameAdmin.working_frames.push({idname: '', brand: '', model: '', color: '', color_description: '', description_short: '', size: '', material: '', price_silver: 0.00, price_gold: 0.00});
+          }
+        });
+    };
+
+  _FrameAdmin.clear_button_onclick_handler = function(e){
+    _FrameAdmin.working_frames = [];
+    };
+
+  var _FrameAdminListItem = {};
+
+  _FrameAdminListItem.update = function(frame, property, value){
+    var properties_to_update = {};
+    properties_to_update[property] = value;
+    return m.request({
+      method: 'POST',
+      url: '/cgi/updateitem',
+      body: {
+        session_hash: _User.session_hash,
+        item_id: frame.id,
+        properties_to_update: properties_to_update
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        frame[property] = value;
+        }
+      });
+    };
+
+  _FrameAdminListItem.delete = function(frame, collection, index_in_collection){
+    return m.request({
+      method: 'POST',
+      url: '/cgi/deleteitem',
+      body: {
+        session_hash: _User.session_hash,
+        item_id: frame.id
+        }
+      })
+    .then(function(res){
+      if(res.success === true){
+        _DB.removeRecord(frame);
+        collection.splice(index_in_collection, 1);
+        }
+      });
+    };
+
+  var FrameAdminListItem = function(){
+  return {
+  view: function(vnode){
+    var frame = vnode.attrs.frame;
+    var collection = vnode.attrs.collection;
+    var index_in_collection = vnode.attrs.index_in_collection;
+    if(frame.loading === true){
+      return m('tr', [
+        m('td', {colspan: 11}, [
+          m('.loading-lg')
+          ])
+        ]);
+      }
+    else{
+      return m('tr', [
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'name', e.target.value);
+            }, value: frame.name})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'brand', e.target.value);
+            }, value: frame.brand})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'model', e.target.value);
+            }, value: frame.model})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'color', e.target.value);
+            }, value: frame.color})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'color_description', e.target.value);
+            }, value: frame.color_description})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'description_short', e.target.value);
+            }, value: frame.description_short})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'size', e.target.value);
+            }, value: frame.size})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            _FrameAdminListItem.update(frame, 'material', e.target.value);
+            }, value: frame.material})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            var price = Number(e.target.value);
+            if(price !== NaN){
+              _FrameAdminListItem.update(frame, 'price_silver', price);
+              }
+            }, value: frame.price_silver})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            var price = Number(e.target.value);
+            if(price !== NaN){
+              _FrameAdminListItem.update(frame, 'price_gold', price);
+              }
+            }, value: frame.price_gold})
+          ]),
+        m('td', [
+          m('input', {type:'text', onchange: function(e){
+            var inventory = Number(e.target.value);
+            if(inventory !== NaN){
+              _FrameAdminListItem.update(frame, 'inventory', inventory);
+              }
+            }, value: frame.inventory})
+          ]),
+        m('td', [
+          m('button.btn.btn-action.btn-primary.s-circle', {onclick: function(e){
+            _FrameAdminListItem.delete(frame, collection, index_in_collection);
+            }}, [m('i.icon.icon-delete')])
+          ])
+        ]);
+      }
+  }
+  };
+  };
+
+  var FrameAdmin = function(){
+  return {
+  view: function(){
+  var results_frames = _FrameAdmin.results_frames;
+  var working_frames = _FrameAdmin.working_frames;
+  return m('.frame-listing', [
+        m('h4', 'Frame Editor'),
+        m('.search', [
+          m('input[type=text][placeholder=Model]', {
+            onchange: _FrameAdmin.search_onchange_handler,
+            value: _FrameAdmin.search_term
+            })
+          ]),
+        m('table.table.table-striped', [
+          m('thead', [
+            m('tr', [
+              m('th', 'Name'),
+              m('th', 'Brand'),
+              m('th', 'Model'),
+              m('th', 'Color Code'),
+              m('th', 'Color Description'),
+              m('th', 'Description (Short)'),
+              m('th', 'Size'),
+              m('th', 'Material'),
+              m('th', 'Price (Silver)'),
+              m('th', 'Price (Gold)'),
+              m('th', 'Inventory'),
+              m('th', 'Delete')
+              ])
+            ]),
+          m('tbody', [
+            m('tr', [
+              m('td.text-center', {colspan: 11}, [
+                m('button.btn.btn-primary.btn-lg.btn-block', {onclick: _FrameAdmin.add_button_onclick_handler}, [
+                  m('i.icon.icon-plus'),
+                  ' Add ',
+                  m('i.icon.icon-plus')
+                  ])
+                ])
+              ]),
+            working_frames.map(function(frame, i){
+              return m(FrameAdminListItem, {frame: frame, collection: working_frames, index_in_collection: i});
+              }),
+            m('tr', [
+              m('td.text-center', {colspan: 11}, [
+                m('button.btn.btn-primary.btn-lg.btn-block', {onclick: _FrameAdmin.clear_button_onclick_handler}, [
+                  m('i.icon.icon-refresh'),
+                  ' Clear'
+                  ])
+                ])
+              ]),
+            results_frames.map(function(frame, i){
+              return m(FrameAdminListItem, {frame: frame, collection: results_frames, index_in_collection: i});
+              })
+            ])
+          ])
+        ]);
+  }
+  };
+  };
+
+  //import _Image from './_Image.js';
+
+  var c = function(page){
+    return (_Admin.page === page ? '.active' : '')
+    };
+
+  var Admin = function(){
+    return {
+      view: function(vnode){
+        return m('.admin',[
+                  m('h1.text-center','Admin'),
+                  m('ul.tab.tab-block.c-hand', [
+                    m('li.tab-item'+c(OpenOrders), {
+                        onclick: function(){ _Admin.page = OpenOrders; }
+                        }, [
+                      m('a', 'Orders')
+                      ]),
+                    m('li.tab-item'+c(ApplicationManager), {
+                        onclick: function(){ _Admin.page = ApplicationManager; }
+                        }, [
+                      m('a', 'Account Applications')
+                      ]),
+                    m('li.tab-item'+c(FrameAdmin), {
+                        onclick: function(){ _Admin.page = FrameAdmin; }
+                        }, [
+                      m('a', 'Frames')
+                      ]),
+                    m('li.tab-item'+c(ItemImageUploader), {
+                        onclick: function(){ _Admin.page = ItemImageUploader; }
+                        }, [
+                      m('a', 'Image Upload')
+                      ])
+                    ]),
+                  m(_Admin.page)
+                  ])
+        }
+      };
+    };
+
+  function UnderConstruction(initialVnode) {
+    return {
+      view: function(vnode) {
+        return m('h1.text-center.under-construction', 'Under Construction!');
+        }
+      }
+    }
+
+  var _Navigation = {};
+
+  _Navigation.is_hidden = true;
+
+  _Navigation.component = Home;
+  _Navigation.attrs = null;
+
+  _Navigation.navigateTo = function(component, attrs){
+    _Navigation.component = component;
+    _Navigation.attrs = attrs;
+    };
+
+  _Navigation.navigateToFunction = function(component, attrs){
+    return function(e){
+      _Navigation.component = component;
+      _Navigation.attrs = attrs;
+      };
+    };
+
+  _Navigation.menu = [
+    {label: "Home", component: Home, attrs: null, children: [], run: null, restricted: false},
+    {label: "About Us", component: AboutUs, attrs: null, children: [], run: null, restricted: false},
+    {label: "Events", component: Events, attrs: null, children: [
+      //{label: "Upcoming Trade Shows", component: Events, attrs: null, children: [], run: null, restricted: false}
+      ], run: null, restricted: false},
+    {label: "Collections", component: CollectionsList, attrs: null, children: [], run: null},
+    {label: "Designer Collections", component: DesignerCollectionsList, attrs: null, children: [], run: null},
+    //{label: "Lenses", component: LensBrowser, attrs: null, children: [], run: null, restricted: false},
+    {label: "Lenses", component: UnderConstruction, attrs: null, children: [], run: null, restricted: false},
+    {label: "Equipment", component: Equipment, attrs: null, children: [], run: function(){
+                                  _Equipment.items=[];
+                                  _Item$1.getItems({subtype:'equipment'})
+                                    .then(function(items){ _Equipment.items=items; });
+                                  }, restricted: false},
+    {label: "Accessories", component: Accessories, attrs: null, children: [], run: function(){
+                                  _Accessories.items=[];
+                                  _Item$1.getItems({subtype:'accessory'})
+                                    .then(function(items){ _Accessories.items=items; });
+                                  }, restricted: false},
+    {label: "Contact Us", component: ContactUs, attrs: null, children: [], run: null, restricted: false},
+    {label: "Policies", component: Policies, attrs: null, children: [], run: null, restricted: false},
+    {label: "Admin", component: Admin, attrs: null, children: [], run: null, restricted: 'admin'}
+    ];
+
+  var MenuItem = function(){
+  return { view: function(vnode){
+    var menuitem = vnode.attrs.menuitem;
+    var attrs = {};
+    if(menuitem.component !== null || menuitem.run !== null){ // note to self for continuation: make a proper onclick handler to both navigateTo and run the 'run', or either one if only one is provided
+      attrs.onclick = function(){
+        if(menuitem.component !== null){ _Navigation.navigateTo(menuitem.component,menuitem.attrs); }
+        if(menuitem.run !== null){ menuitem.run(); }
+        };
+      }
+    return m("a.btn.btn-link", attrs, [
+            menuitem.label,
+            m('.list',
+              menuitem.children.map(function(mi){
+                if(!menuitem.restricted || _User.isLoggedIn()){
+                  return m(MenuItem, {menuitem: mi});
+                  }
+                }))
+            ]);
+    }
+  };
+  };
+
+  var Navigation = function(){
+  return {view: function(){
+      var hidden_class = _Navigation.is_hidden ?'.hidden':'';
+      var v = m("section.navbar-section", _Navigation.menu.map(function(menuitem){
+        if(!menuitem.restricted){
+          return m(MenuItem, {menuitem: menuitem})
+          }
+        else if(menuitem.restricted === 'admin' && _User.isAdmin()){
+          return m(MenuItem, {menuitem: menuitem})
+          }
+        else if(menuitem.restricted === true && _User.isLoggedIn()){
+          return m(MenuItem, {menuitem: menuitem})
+          }
+        }));
+      return m('header.navbar'+hidden_class, [
+        //m('button',{onclick: function(){ _Navigation.is_hidden = true; }},'Close'),
+        v
+        ]);
+      /*
+      return m("ul.flex.items-center.justify-center.bg-gray-900.text-white.cursor-default", [
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", {onclick: navigateTo(Home,null)}, "Home")
+          ]),
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", {onclick: navigateTo(AboutUs,null)}, "About Us")
+          ]),
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", {onclick: navigateTo(Events,null)}, "Events"),
+          m(".menu.hidden", [
+            m(".item", "Upcoming Trade Shows")
+            ])
+          ]),
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Collections Catalog"),
+          m(".menu.hidden", [
+            m(".section-heading", "Optical Frames"),
+            m(".heading", "Style"),
+            m(".subheading", "Adults"),
+            m(".item", {onclick: navigateTo(ItemBrowser, {filter:{type: "frame", gender: "mens"}})}, "Mens"),
+            m(".item", "Womens"),
+            m(".item", "Unisex"),
+            m(".subheading.item", "Teens"),
+            m(".subheading.item", "Kids"),
+            m(".heading", "Material"),
+            m(".subheading", "Plastic"),
+            m(".item", "Acetate"),
+            m(".item", "TR90 & Silicone"),
+            m(".item", "Injection"),
+            m(".subheading", "Metal"),
+            m(".item", "Aluminum"),
+            m(".item", "Monel"),
+            m(".item", "Stainless Steel"),
+            m(".item", "Titanium"),
+            m(".section-heading", "Sunglasses"),
+            m(".heading", "Brand"),
+            m(".subheading.item", "Designer Brands"),
+            m(".subheading", "Exclusive Labels"),
+            m(".item", "Kadima"),
+            m(".item", "Kapricci"),
+            m(".item", "Bubble Gum"),
+            m(".item", "Primmera"),
+            m(".heading", "Gender"),
+            m(".item", "Mens"),
+            m(".item", "Womens"),
+            m(".item", "Unisex"),
+            m(".heading.item", "Clearance Items")
+            ])
+          ]),
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Lenses"),
+          m(".menu.hidden", [
+            m(".section-heading", "Finished"),
+            m(".heading", "Blue Bocker"),
+            m(".heading", "Single Vision"),
+            m(".heading", "Multifocals"),
+            m(".section-heading", "Semi-Finished"),
+            m(".heading", "Blue Bocker"),
+            m(".heading", "Single Vision"),
+            m(".heading", "Multifocals")
+            ])
+          ]),
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Equipment"),
+          m(".menu.hidden", [
+            m(".heading", "Autorefractometer"),
+            m(".heading", "Chart Projector"),
+            m(".heading", "Lensometer"),
+            m(".heading", "Ophthalmoscope"),
+            m(".heading", "Pachimeter"),
+            m(".heading", "Phoropter"),
+            m(".heading", "Prism bar"),
+            m(".heading", "Pupilometer"),
+            m(".heading", "Retinoscope"),
+            m(".heading", "Slit Lamp"),
+            m(".heading", "Trial Lens Set"),
+            m(".item", "*104 pcs"),
+            m(".item", "*158 pcs"),
+            m(".item", "*232 pcs"),
+            m(".item", "*266 pcs")
+            ])
+          ]),
+        m("li", [
+          m(".hover:bg-gray-700.rounded.px-2.py-1.text-center", "Accessories"),
+          m(".menu.hidden", [
+            m(".heading", "Cases"),
+            m(".heading", "Cords"),
+            m(".heading", "Microfiber Cloth Lens Cleaner"),
+            m(".heading", "Lens Cleaner Bottles"),
+            m(".heading", "Nosepads"),
+            m(".heading", "Screws")
+            ])
+          ])
+        ]);
+        */
+        }}};
+
+  function Cart(initialVnode) {
+    return {
+      view: function(vnode) {
+        if(!_User.isLoggedIn()){
+          return m('.cart', [
+            m("h1.text-center", "Shopping Cart"),
+            m('p', 'You must be logged-in to see your cart.')
+            ]);
+          }
+        var grand_total = 0;
+        return m(".cart", [
+          m("h1.text-center", "Shopping Cart"),
+          m("table.table.table-striped.table-hover.line-item-list", [
+            m('thead', [
+              m('tr', [
+                m('th', 'Item'),
+                m('th', 'Price'),
+                m('th', 'Quantity'),
+                m('th', 'Subtotal')
+                ])
+              ]),
+            m('tbody',
+                _Cart.current.lineitem_ids.map(function(lineitem_id, lineitem_index){
+                  var lineitem = _DB$1.getRecord(lineitem_id);
+                  var item = _DB$1.getRecord(lineitem.item_id);
+                  var price = lineitem.price;
+                  var quantity = lineitem.quantity;
+                  var sub_total = price*quantity;
+                  grand_total += sub_total;
+                  return m('tr.line-item', [
+                      m('td.item-title', item.name),
+                      m('td.price', "$"+price),
+                      m('td', [
+                        m('input[type=text].quantity.form-input', {
+                          // TODO: Don't update quantity if it's not a (whole) number
+                          onchange: function (e) {
+                            //lineitem.quantity = toNumber(e.target.value);
+                            var new_quantity = toNumber(e.target.value);
+                            //if(new_quantity === 0){
+                            //  _Cart.removeLineItem(lineitem_index);  // TODO: change to removeByLineitem, it's more efficient
+                            //  }
+                            //else if(!isNumber(new_quantity)){
+                            if(!isNumber(new_quantity)){
+                              //console.log("Qty. is not a number.");
+                              _Message$1.addError("Quantity '"+new_quantity+"' is not a number.");
+                              }
+                            else{
+                              _Cart.updateQuantityOfItem(item, new_quantity);
+                              //lineitem.quantity = new_quantity;
+                              }
+                            },
+                          value: lineitem.quantity
+                          }),
+                        ]),
+                      m('td.line-item-total', '$'+sub_total)
+                      ]);
+                    })
+              )
+            ]),
+          m('.total', [
+            m('label.grand-total-label', "Grand Total: "),
+            m('span.grand-total', '$'+grand_total)
+            ]),
+          m("button.btn.btn-primary", {onclick: _Cart.placeOrder}, "Place Order")
+          ]);
+      }
+    }
+  }
+
+  var Messages = function(){
+    return {
+      view: function(vnode){
+        return m('.messages-box.p-fixed.p-2', {style: 'left:0px;top:0px;width:100%;'},_Message$1.messages.map(function(msg, index){
+          var message_class;
+          if(msg.type === 'success'){
+            message_class = 'toast-success';
+            }
+          else if(msg.type === 'notification'){
+            message_class = 'toast-primary';
+            }
+          else if(msg.type === 'error'){
+            message_class = 'toast-error';
+            }
+          return m('.toast.'+message_class, [
+            m('button.btn.btn-clear.float-right', {onclick: function(){ _Message$1.remove(index); }}, ""),
+            msg.text
+            ]);
+          }));
+        }
+      };
+    };
+
+  var _Login = {};
+
+  _Login.username = "";
+  _Login.password = "";
+
+  _Login.is_hidden = true;
+
+  var _AccountApplication = {};
+
+  //_AccountApplication._show = false;
+  _AccountApplication.username = '';
+  _AccountApplication.salutation = '';
+  _AccountApplication.firstname = '';
+  _AccountApplication.lastname = '';
+  _AccountApplication.position = '';
+  _AccountApplication.store = '';
+  _AccountApplication.address = '';
+  _AccountApplication.practice_type = '';
+  _AccountApplication.phone_office = '';
+  _AccountApplication.phone_cell = '';
+  _AccountApplication.email = '';
+
+  _AccountApplication.salutations = [
+    {value: 'mr', text: 'Mr.'},
+    {value: 'ms', text: 'Ms.'},
+    {value: 'mrs', text: 'Mrs.'},
+    {value: 'dr', text: 'Dr.'}
+    ];
+  _AccountApplication.positions = [
+    {value: 'owner', text: 'Owner'},
+    {value: 'manager', text: 'Manager'},
+    {value: 'buyer', text: 'Buyer'},
+    {value: 'other', text: 'Other'}
+    ];
+  _AccountApplication.practice_types = [
+    {value: 'optometrist', text: 'Optometrist'},
+    {value: 'ophthalmologist', text: 'Ophthalmologist'},
+    {value: 'optician', text: 'Optician'},
+    {value: 'optical_retail_store', text: 'Optical Retail Store'},
+    {value: 'optical_lab', text: 'Optical Lab'},
+    {value: 'importer_distributor', text: 'Importer/Distributor'}
+    ];
+
+  //_AccountApplication.show = function(){
+  //  _AccountApplication._show = true;
+  //  };
+  //_AccountApplication.hide = function(){
+  //  _AccountApplication._show = false;
+  //  };
+  //_AccountApplication.isShowing = function(){
+  //  return _AccountApplication._show === true;
+  //  };
+  _AccountApplication.submit = function(){
+    m.request({
+      method: 'POST',
+      url: '/cgi/submitnewuserapplication',
+      body: {
+        username: _AccountApplication.username,
+        salutation: _AccountApplication.salutation,
+        firstname: _AccountApplication.firstname,
+        lastname: _AccountApplication.lastname,
+        position: _AccountApplication.position,
+        store: _AccountApplication.store,
+        address: _AccountApplication.address,
+        practice_type: _AccountApplication.practice_type,
+        phone_office: _AccountApplication.phone_office,
+        phone_cell: _AccountApplication.phone_cell,
+        email: _AccountApplication.email
+        }
+      }).then(function(){
+        _Message$1.addNotification('Application Submitted!');
+        _AccountApplication._show = false;
+        _AccountApplication.username = '';
+        _AccountApplication.salutation = '';
+        _AccountApplication.firstname = '';
+        _AccountApplication.lastname = '';
+        _AccountApplication.position = '';
+        _AccountApplication.store = '';
+        _AccountApplication.address = '';
+        _AccountApplication.practice_type = '';
+        _AccountApplication.phone_office = '';
+        _AccountApplication.phone_cell = '';
+        _AccountApplication.email = '';
+        });
+    };
+
+  var AccountApplicationBox = function(){
+    return {
+      view: function(vnode){
+          return m('.account-application.form-horizontal', [
+                m('h1.text-center', 'Account Application Form'),
+                m('h3', 'Account Information'),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', [
+                        'Username',
+                        m('small', '(use your email address)')
+                        ])
+                      ]),
+                    m('col-9', [
+                        m('input[type=text]', {
+                          onchange: function(e){ _AccountApplication.username = e.target.value; },
+                          value: _AccountApplication.username
+                          })
+                        ])
+                    ]),
+                m('h3', 'Personal Information'),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Salutation')
+                      ]),
+                    m('.col-9', [
+                        _AccountApplication.salutations.map(function(s){
+                          return [
+                            m('label.form-radio.form-inline', [
+                              m('input[type=radio][name=salutation]', {
+                                onchange: function(e){ _AccountApplication.salutation = e.target.value; },
+                                value: s.value
+                                }),
+                              m('i.form-icon',''),
+                              s.text
+                              ])
+                            ];
+                          })
+                        ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'First Name')
+                      ]),
+                    m('.col-9', [
+                      m('input[type=text][placeholder=First Name]', {
+                        onchange: function(e){ _AccountApplication.firstname = e.target.value; },
+                        value: _AccountApplication.firstname
+                        })
+                      ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Last Name')
+                      ]),
+                    m('.col-9', [
+                        m('input[type=text][placeholder=Last Name]', {
+                          onchange: function(e){ _AccountApplication.lastname = e.target.value; },
+                          value: _AccountApplication.lastname
+                          })
+                        ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Position in Company')
+                      ]),
+                    m('.col-9', _AccountApplication.positions.map(function(s){
+                          return [
+                            m('label.form-radio.form-inline', [
+                              m('input[type=radio][name=position]', {
+                                onchange: function(e){ _AccountApplication.position = e.target.value; },
+                                value: s.value
+                                }),
+                              m('i.form-icon',''),
+                              s.text
+                              ])
+                            ];
+                          })
+                        )
+                    ]),
+                m('h3', 'Business Information'),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Name of Business')
+                      ]),
+                    m('.col-9', [
+                        m('input[type=text][placeholder=Name of Business (your shop/clinic/practice name)]', {
+                          onchange: function(e){ _AccountApplication.store = e.target.value; },
+                          value: _AccountApplication.store
+                          })
+                        ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', [
+                        'Address',
+                        m('small', '(full address including city and country)')
+                        ])
+                      ]),
+                    m('.col-9', [
+                      m('input[type=text][placeholder=Address (full address including city and country)]', {
+                        onchange: function(e){ _AccountApplication.address = e.target.value; },
+                        value: _AccountApplication.address
+                        })
+                      ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Type of Business')
+                      ]),
+                    m('.col-9', [
+                        _AccountApplication.practice_types.map(function(s){
+                          return [
+                            m('label.form-radio.form-inline', [
+                              m('input[type=radio][name=practice_type].practice-type', {
+                                onchange: function(e){ _AccountApplication.practice_type = e.target.value; },
+                                value: s.value
+                                }),
+                              m('i.form-icon', ''),
+                              s.text
+                              ])
+                            ];
+                          })
+                        ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Phone (Office)')
+                      ]),
+                    m('.col-9', [
+                      m('input[type=text][placeholder=Phone (Office)]', {
+                        onchange: function(e){ _AccountApplication.phone_office = e.target.value; },
+                        value: _AccountApplication.phone_office
+                        })
+                      ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Phone (Cell/WhatsApp)')
+                      ]),
+                    m('.col-9', [
+                      m('input[type=text][placeholder=Phone (Cell/WhatsApp)]', {
+                        onchange: function(e){ _AccountApplication.phone_cell = e.target.value; },
+                        value: _AccountApplication.phone_cell
+                        })
+                      ])
+                    ]),
+                m('.form-group', [
+                    m('.col-3', [
+                      m('label.form-label', 'Email Address')
+                      ]),
+                    m('.col-9', [
+                      m('input[type=text][placeholder=Email Address].email', {
+                        onchange: function(e){ _AccountApplication.email = e.target.value; },
+                        value: _AccountApplication.email
+                        })
+                      ])
+                    ]),
+                m('button.btn.btn-primary.application-submit-button', {onclick: function(e){
+                  e.preventDefault(); // this is require since the button is in a form
+                  _AccountApplication.submit();
+                  }}, "Submit")
+                ]);
+        }
+      };
+    };
+
+  var LoginBox = function(){
+    return {
+      view: function(vnode){
+        if(!_User.isLoggedIn()){
+          return m('.column.col-8', [
+              m('.form-group', [
+                //m('button.red',{onclick: function(){ _Login.is_hidden = true; }},'Close'),
+                m('.has-icon-left', [
+                  m('input[type=text][placeholder=Username].form-input', {
+                    onchange: function(e){ _Login.username = e.target.value; },
+                    value: _Login.username
+                    }),
+                  m('i.form-icon.icon.icon-arrow-right')
+                  ]),
+                m('input[type=password][placeholder=Password].form-input', {
+                  onchange: function(e){ _Login.password = e.target.value; },
+                  value: _Login.password
+                  }),
+                m('button.btn.btn-primary', {onclick: function(e){
+                  e.preventDefault(); // this is require since the button is in a form
+                  _User.attemptLogin(_Login.username, _Login.password);
+                  }}, "Login"),
+                m('button.btn', {onclick: function(e){
+                  e.preventDefault(); // this is require since the button is in a form
+                  _Navigation.navigateTo(AccountApplicationBox, null);
+                  }}, "Apply for Account")
+                ])
+            ]);
+          }
+        else{
+          return m('.logout_box.column.col-11', [
+            m('button.btn.btn-primary', {
+              onclick: function(){
+                _User.logout();
+                _Login.username = "";
+                _Login.password = "";
+                }}, 'Logout')
+            ])
+          }
+        }
+      };
+    };
+
+  var Modal = function(){
+    return {
+      view: function(vnode){
+        var active_class = (_Modal.component === null ? '' : '.active');
+        return m('.modal'+active_class, [
+          m('a.modal-overlay', {
+            'aria-label':"Close",
+            onclick: function(){ _Modal.close(); }
+            }),
+          m('.modal-container', [
+            (_Modal.component === null ?
+              ''
+              :
+              m(_Modal.component, _Modal.attrs)
+              )
+            ])
+          ]);
+        }
+      };
+    };
+
+  var root = document.body;
+  window._DB = _DB$1;
+
+  var Page = {
+  view: function(){
+    return [
+          m('#root.container.grid-lg', _Root.attrs, [
+            m('#head.columns', [
+              m('img.img-responsive.column.col-3', {src: 'images/piazza-optical-logo.jpg'}),
+              m(LoginBox),
+              m('.column.col-1', [
+                m('button.btn.btn-primary', {onclick: _Navigation.navigateToFunction(Cart,null)}, [
+                  m('i.icon-basket'),
+                  'Cart'
+                  ])
+                ])
+              ]),
+            m(Navigation),
+            m('#main', [
+              m(_Navigation.component, _Navigation.attrs)
+              //m(ItemBrowser)
+              ]),
+            m(Modal),
+            //m(LargeImage),
+            m(Messages) // last so it's always on top
+            ]),
+          m("#footer.bg-dark", [
+            m("h6#copyright.text-center", "Copyright ©2019 Piazza Optical")
+            ])
+      ]
+    }
+  };
+  m.mount(root, Page);
+
+  // TODO: get rid of this function in production
+  function api(endpoint, payload){
+    return m.request({
+      method: 'POST',
+      url: '/cgi/'+endpoint,
+      body: payload
+      });
+    }
+  window.api = api;
+
+  //module.exports = {};
+
+}());
diff --git a/public/css/app-supplement.css b/public/css/app-supplement.css
new file mode 100644
index 0000000..45c3b99
--- /dev/null
+++ b/public/css/app-supplement.css
@@ -0,0 +1,19 @@
+/*
+img.enlarged {
+  transition: transform 0.5s ease 0s;
+  transform: scale(1.5);
+  }
+img {
+  transition: transform 0.5s ease 0s;
+  }
+*/
+
+img.large-image {
+  position: fixed;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.sph > select { width: min-content; }
+
+body { overflow: auto; }
\ No newline at end of file
diff --git a/public/css/app.less b/public/css/app.less
new file mode 100644
index 0000000..3c33dc8
--- /dev/null
+++ b/public/css/app.less
@@ -0,0 +1,155 @@
+/* RGB */
+@color1: rgba(34, 116, 165, 1);
+@color2: rgba(34, 72, 112, 1);
+@color3: rgba(163, 206, 241, 1);
+@color4: rgba(231, 236, 239, 1);
+@color5: rgba(48, 50, 56, 1);
+
+/* Always show scrollarbar, so width of browser window doesn't change and refloaw content*/
+html {overflow-y: scroll; font-size: 12pt;}
+
+.overlay{
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0, 0.5);
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal{
+  border: 2px black solid;
+  background-color: white;
+}
+
+.messages-box{
+  position: fixed;
+  top: 5px;
+  
+  /*display: flex;*/
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  }
+.messages-box > .error{
+  border: 1px red solid;
+  background-color: pink;
+  }
+.messages-box > .notification{
+  border: 1px green solid;
+  background-color: lightgreen;
+  }
+.messages-box > .error, .messages-box > .notification {
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  }
+/* Colors */
+form {
+  input[type=text] {
+    outline: none;
+    border: 1px solid @color4;
+    border-radius: 3px;
+  }
+}
+button {
+  border: none;
+  border-radius: 4px;
+  color: rgba(250, 252, 255, 1);
+  font-size: 1.5em;
+  font-weight: bold;
+}
+button.blue {
+  background-color: rgba(55, 139, 250, 1)
+}
+button.blue:active {
+  background-color: rgba(43, 122, 227, 1)
+}
+button.green {
+  background-color: rgba(91, 196, 4, 1)
+}
+button.green:active {
+  background-color: rgba(81, 166, 10, 1)
+}
+button.red {
+  background-color: rgba(240, 29, 57, 1)
+}
+button.red:active {
+  background-color: rgba(212, 23, 48, 1)
+}
+
+/* Positioning */
+
+.cart {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  width: 90%;
+  border: 1px black solid;
+  border-radius: 6px;
+  background-color: white;
+  transition: right 0.3s ease-out;
+  
+  .heading {
+    background-color: @color1;
+    text-align: center;
+  }
+  .line-item-list{
+    list-style-type: none;
+    /*padding-inline-start: 10px;*/
+    .line-item {
+      /*display: grid;*/
+    }
+  }
+}
+.cart.hidden{
+  right: -90%;
+  transition: right 0.3s ease-out;
+}
+
+
+
+.login-form {
+  position:fixed;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  transition: top 0.3s ease-out;
+  
+  input{
+    display:block;
+    width: 100%;
+  }
+}
+.login-form.hidden {
+  top: -100px;
+  transition: top 0.3s ease-out;
+}
+.login-button {
+}
+.show-application-button{
+}
+
+
+/* Navigation Menu */
+.navigation {
+  position:fixed;
+  width: 90%;
+  top: 0px;
+  left: 0px;
+  background-color: grey;
+  transition: left 0.3s ease-out;
+}
+.navigation.hidden{
+  left: -90%;
+  transition: left 0.3s ease-in;
+}
+
+/* For large screens: */
+@media only screen and (min-width: 600px) {
+
+}
\ No newline at end of file
diff --git a/public/css/fontello/LICENSE.txt b/public/css/fontello/LICENSE.txt
new file mode 100644
index 0000000..da1247c
--- /dev/null
+++ b/public/css/fontello/LICENSE.txt
@@ -0,0 +1,12 @@
+Font license info
+
+
+## Typicons
+
+   (c) Stephen Hutchings 2012
+
+   Author:    Stephen Hutchings
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://typicons.com/
+
+
diff --git a/public/css/fontello/README.txt b/public/css/fontello/README.txt
new file mode 100644
index 0000000..beaab33
--- /dev/null
+++ b/public/css/fontello/README.txt
@@ -0,0 +1,75 @@
+This webfont is generated by http://fontello.com open source project.
+
+
+================================================================================
+Please, note, that you should obey original font licenses, used to make this
+webfont pack. Details available in LICENSE.txt file.
+
+- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
+  site in "About" section.
+
+- If your project is open-source, usually, it will be ok to make LICENSE.txt
+  file publicly available in your repository.
+
+- Fonts, used in Fontello, don't require a clickable link on your site.
+  But any kind of additional authors crediting is welcome.
+================================================================================
+
+
+Comments on archive content
+---------------------------
+
+- /font/* - fonts in different formats
+
+- /css/*  - different kinds of css, for all situations. Should be ok with 
+  twitter bootstrap. Also, you can skip <i> style and assign icon classes
+  directly to text elements, if you don't mind about IE7.
+
+- demo.html - demo file, to show your webfont content
+
+- LICENSE.txt - license info about source fonts, used to build your one.
+
+- config.json - keeps your settings. You can import it back into fontello
+  anytime, to continue your work
+
+
+Why so many CSS files ?
+-----------------------
+
+Because we like to fit all your needs :)
+
+- basic file, <your_font_name>.css - is usually enough, it contains @font-face
+  and character code definitions
+
+- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
+  directly into html
+
+- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
+  rules, but still wish to benefit from css generation. That can be very
+  convenient for automated asset build systems. When you need to update font -
+  no need to manually edit files, just override old version with archive
+  content. See fontello source code for examples.
+
+- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
+  CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
+  We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
+  server headers. But if you ok with dirty hack - this file is for you. Note,
+  that data url moved to separate @font-face to avoid problems with <IE9, when
+  string is too long.
+
+- animate.css - use it to get ideas about spinner rotation animation.
+
+
+Attention for server setup
+--------------------------
+
+You MUST setup server to reply with proper `mime-types` for font files -
+otherwise some browsers will fail to show fonts.
+
+Usually, `apache` already has necessary settings, but `nginx` and other
+webservers should be tuned. Here is list of mime types for our file extensions:
+
+- `application/vnd.ms-fontobject` - eot
+- `application/x-font-woff` - woff
+- `application/x-font-ttf` - ttf
+- `image/svg+xml` - svg
diff --git a/public/css/fontello/config.json b/public/css/fontello/config.json
new file mode 100644
index 0000000..9dfbbaf
--- /dev/null
+++ b/public/css/fontello/config.json
@@ -0,0 +1,16 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "e0d15ef5945000f5f264acc35494002f",
+      "css": "basket",
+      "code": 59392,
+      "src": "typicons"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/css/fontello/css/animation.css b/public/css/fontello/css/animation.css
new file mode 100644
index 0000000..ac5a956
--- /dev/null
+++ b/public/css/fontello/css/animation.css
@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
diff --git a/public/css/fontello/css/fontello-codes.css b/public/css/fontello/css/fontello-codes.css
new file mode 100644
index 0000000..7e4349a
--- /dev/null
+++ b/public/css/fontello/css/fontello-codes.css
@@ -0,0 +1,2 @@
+
+.icon-basket:before { content: '\e800'; } /* '' */
\ No newline at end of file
diff --git a/public/css/fontello/css/fontello-embedded.css b/public/css/fontello/css/fontello-embedded.css
new file mode 100644
index 0000000..8d036a4
--- /dev/null
+++ b/public/css/fontello/css/fontello-embedded.css
@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?88801174');
+  src: url('../font/fontello.eot?88801174#iefix') format('embedded-opentype'),
+       url('../font/fontello.svg?88801174#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'fontello';
+  src: url('data:application/octet-stream;base64,d09GRgABAAAAAAuwAA8AAAAAFCAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADsAAABUIIslek9TLzIAAAGUAAAAQwAAAFY+IEl5Y21hcAAAAdgAAABKAAABcOkou6pjdnQgAAACJAAAABMAAAAgBtX/BGZwZ20AAAI4AAAFkAAAC3CKkZBZZ2FzcAAAB8gAAAAIAAAACAAAABBnbHlmAAAH0AAAAUcAAAFa3UDBOWhlYWQAAAkYAAAAMgAAADYXaF8TaGhlYQAACUwAAAAfAAAAJAdBA1ZobXR4AAAJbAAAAAgAAAAIB9P//2xvY2EAAAl0AAAABgAAAAYArQAAbWF4cAAACXwAAAAgAAAAIAFFC/ZuYW1lAAAJnAAAAXcAAALNzJ0fIXBvc3QAAAsUAAAAHwAAADDI5nRzcHJlcAAACzQAAAB6AAAAhuVBK7x4nGNgZGBg4GIwYLBjYHJx8wlh4MtJLMljkGJgYYAAkDwymzEnMz2RgQPGA8qxgGkOIGaDiAIAJjsFSAB4nGNgZH7FOIGBlYGBqYppDwMDQw+EZnzAYMjIBBRlYGVmwAoC0lxTGBxeMLxgYA76n8UQxRzEMA0ozAiSAwALEwwXAHic7ZCxDYAwEAPPykOBGIEqNbNQsX/NFsnHwBaxdJZ8+uqBBSjJmQToRoxcaWVf2OyD6psY/qG1v3OHG63M7O7jW/7VC+ot1glxAAB4nGNgQAMSEMgc9D8LhAESbAPdAHicrVZpd9NGFB15SZyELCULLWphxMRpsEYmbMGACUGyYyBdnK2VoIsUO+m+8Ynf4F/zZNpz6Dd+Wu8bLySQtOdwmpOjd+fN1czbZRJaktgL65GUmy/F1NYmjew8CemGTctRfCg7eyFlisnfBVEQrZbatx2HREQiULWusEQQ+x5ZmmR86FFGy7akV03KLT3pLlvjQb1V334aOsqxO6GkZjN0aD2yJVUYVaJIpj1S0qZlqPorSSu8v8LMV81QwohOImm8GcbQSN4bZ7TKaDW24yiKbLLcKFIkmuFBFHmU1RLn5IoJDMoHzZDyyqcR5cP8iKzYo5xWsEu20/y+L3mndzk/sV9vUbbkQB/Ijuzg7HQlX4RbW2HctJPtKFQRdtd3QmzZ7FT/Zo/ymkYDtysyvdCMYKl8hRArP6HM/iFZLZxP+ZJHo1qykRNB62VO7Es+gdbjiClxzRhZ0N3RCRHU/ZIzDPaYPh788d4plgsTAngcy3pHJZwIEylhczRJ2jByYCVliyqp9a6YOOV1WsRbwn7t2tGXzmjjUHdiPFsPHVs5UcnxaFKnmUyd2knNoykNopR0JnjMrwMoP6JJXm1jNYmVR9M4ZsaERCICLdxLU0EsO7GkKQTNoxm9uRumuXYtWqTJA/Xco/f05la4udNT2g70s0Z/VqdiOtgL0+lp5C/xadrlIkXp+ukZfkziQdYCMpEtNsOUgwdv/Q7Sy9eWHIXXBtju7fMrqH3WRPCkAfsb0B5P1SkJTIWYVYhWQGKta1mWydWsFqnI1HdDmla+rNMEinIcF8e+jHH9XzMzlpgSvt+J07MjLj1z7UsI0xx8m3U9mtepxXIBcWZ5TqdZlu/rNMfyA53mWZ7X6QhLW6ejLD/UaYHlRzodY3lBC5p038GQizDkAg6QMISlA0NYXoIhLBUMYbkIQ1gWYQjLJRjC8mMYwnIZhrC8rGXV1FNJ49qZWAZsQmBijh65zEXlaiq5VEK7aFRqQ54SbpVUFM+qf2WgXjzyhjmwFkiXyJpfMc6Vj0bl+NYVLW8aO1fAsepvH472OfFS1ouFPwX/1dZUJb1izcOTq/Abhp5sJ6o2qXh0TZfPVT26/l9UVFgL9BtIhVgoyrJscGcihI86nYZqoJVDzGzMPLTrdcuan8P9NzFCFlD9+DcUGgvcg05ZSVnt4KzV19uy3DuDcjgTLEkxN/P6VvgiI7PSfpFZyp6PfB5wBYxKZdhqA60VvNknMQ+Z3iTPBHFbUTZI2tjOBIkNHPOAefOdBCZh6qoN5E7hhg34BWFuwXknXKJ6oyyH7kXs8yik/Fun4kT2qGiMwLPZG2Gv70LKb3EMJDT5pX4MVBWhqRg1FdA0Um6oBl/G2bptQsYO9CMqdsOyrOLDxxb3lZJtGYR8pIjVo6Of1l6iTqrcfmYUl++dvgXBIDUxf3vfdHGQyrtayTJHbQNTtxqVU9eaQ+NVh+rmUfW94+wTOWuabronHnpf06rbwcVcLLD2bQ7SUiYX1PVhhQ2iy8WlUOplNEnvuAcYFhjQ71CKjf+r+th8nitVhdFxJN9O1LfR52AM/A/Yf0f1A9D3Y+hyDS7P95oTn2704WyZrqIX66foNzBrrblZugbc0HQD4iFHrY64yg18pwZxeqS5HOkh4GPdFeIBwCaAxeAT3bWM5lMAo/mMOT7A58xh0GQOgy3mMNhmzhrADnMY7DKHwR5zGHzBnHWAL5nDIGQOg4g5DJ4wJwB4yhwGXzGHwdfMYfANc+4DfMscBjFzGCTMYbCv6dYwzC1e0F2gtkFVoANTT1jcw+JQU2XI/o4Xhv29Qcz+wSCm/qjp9pD6Ey8M9WeDmPqLQUz9VdOdIfU3Xhjq7wYx9Q+DmPpMvxjLZQa/jHyXCgeUXWw+5++J9w/bxUC5AAEAAf//AA94nB2Gv07CcBRG770/SilVoH9oCSEFWqAoaKSlIAEJSqIOBhcHJ9K4ALtPYOJgHFnL5hMwkLg7mLi4+Bg8AmD1JOc7Hwi73e6FrZkLebDAhho0wIMO9GEIz4MnBRnhFXAQAS7iawh7MYryEB3vC8RLepLFRT4+TiVIBCQRfSBgMjFfRVlR5LswsnKfRkVWbhwHYXhxPuif9bqd03bL8Ryv6TZOjuq1w4OqXSmXLLNYyGU1VUqKQiwKecxnOLWGjsazBNpFvegYGLWLZsVmlnmMrbbraHnkrLRrh6ZDmaW3usjrrse5bQubjmqW/4at9AJ5ZCibpUApzSBT3XyoBj5c//9HxSCR5p/v60XI90pmXBBIrxh5Syy3fhDgTxDQVymznctZ9ApVk7ISXRr1HGXU3mwymXhTjMzIm4Zs5dHidrSAX+M4P+kAeJxjYGRgYABiTuXe+Hh+m68M3MwvgCIMt/R6d8Lo////dzK/ZTYGcjkYmECiAE2cDQIAAHicY2BkYGAO+p8FJF//////H/NbBqAICmACALcxB5wAA+gAAAPr//8AAAAAAK0AAAABAAAAAgBEAAkAAAAAAAIAMABAAHMAAACWC3AAAAAAeJx1kMtOwkAUhv+RiwqJGk3cOisDMZZL4gISEhIMbHRDDFtTSmlLSodMBxJew3fwYXwJn8WfdjAGYpvpfOebM2dOB8A1viGQP08cOQucMcr5BKfoWS7QP1sukl8sl1DFm+Uy/bvlCh4QWK7iBh+sIIrnjBb4tCxwJS4tn+BC3Fku0D9aLpJ7lku4Fa+Wy/Se5QomIrVcxb34GqjVVkdBaGRtUJftZqsjp1upqKLEjaW7NqHSqezLuUqMH8fK8dRyz2M/WMeu3of7eeLrNFKJbDnNvRr5ia9d48921dNN0DZmLudaLeXQZsiVVgvfM05ozKrbaPw9DwMorLCFRsSrCmEgUaOtc26jiRY6pCkzJDPzrAgJXMQ0LtbcEWYrKeM+x5xRQuszIyY78PhdHvkxKeD+mFX00ephPCHtzogyL9mXw+4Os0akJMt0Mzv77T3Fhqe1aQ137brUWVcSw4MakvexW1vQePROdiuGtosG33/+7wfseIRVAHicY2BigAAuBuyAiZGJkZmBLSmxODu1hIEBABAtApYAeJxj8N7BcCIoYiMjY1/kBsadHAwcDMkFGxlYnTYxMDJogRibuZgYOSAsPgYwi81pF9MBoDQnkM3utIvBAcJmZnDZqMLYERixwaEjYiNzistGNRBvF0cDAyOLQ0dySARISSQQbOZhYuTR2sH4v3UDS+9GJgYXAAx2I/QAAA==') format('woff'),
+       url('data:application/octet-stream;base64,AAEAAAAPAIAAAwBwR1NVQiCLJXoAAAD8AAAAVE9TLzI+IEl5AAABUAAAAFZjbWFw6Si7qgAAAagAAAFwY3Z0IAbV/wQAAAgIAAAAIGZwZ22KkZBZAAAIKAAAC3BnYXNwAAAAEAAACAAAAAAIZ2x5Zt1AwTkAAAMYAAABWmhlYWQXaF8TAAAEdAAAADZoaGVhB0EDVgAABKwAAAAkaG10eAfT//8AAATQAAAACGxvY2EArQAAAAAE2AAAAAZtYXhwAUUL9gAABOAAAAAgbmFtZcydHyEAAAUAAAACzXBvc3TI5nRzAAAH0AAAADBwcmVw5UErvAAAE5gAAACGAAEAAAAKADAAPgACREZMVAAObGF0bgAaAAQAAAAAAAAAAQAAAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAED6gGQAAUAAAJ6ArwAAACMAnoCvAAAAeAAMQECAAACAAUDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBmRWQAQOgA6AADUv9qAFoDUgCWAAAAAQAAAAAAAAAAAAUAAAADAAAALAAAAAQAAAFUAAEAAAAAAE4AAwABAAAALAADAAoAAAFUAAQAIgAAAAQABAABAADoAP//AADoAP//AAAAAQAEAAAAAQAAAQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAHAAAAAAAAAABAADoAAAA6AAAAAABAAn///+JA+0DMwAfACMAJwArADEANQA5AD4AQwCFQIITAQMCAUcABQAEAAUEYBYBAAwIAgYHAAZeDQkCBxEXDwMKCwcKXhAOAgsAAQILAWAAAgADEgIDYBQBEhMTElQUARISE1gVARMSE0wyMgEAQ0JBQD49PDs5ODc2MjUyNTQzMTAtLCsqKSgnJiUkIyIhIBwaFhQRDwsJCAYAHwEfGAUUKwEyFgcDDgEnIRchMh4BBichIiYnAyMiLgE2NzMyFh8BBSMVMycjFTMVIxUzAyMXNjsBBxczNQUzNyMBNDIUIiU0MhQiA7YXIAI1Ah4T/bIJAhAWHgIiFP3EFB4BYkgWHgIiFHQTHgILApPIue2dnZ2d0LYSAwWcnBGLAQSkDrL+YJycAdWcnALLJBj+kxIaATUgKCICGhECRh4sHAIYFDxpZ2dnNWgBBGkCNWhoaGj+Ek6dT06dAAAAAAEAAAABAAAJI41fXw889QALA+gAAAAA2i6NuQAAAADaLo25////iQPtAzMAAAAIAAIAAAAAAAAAAQAAA1L/agAAA+v////+A+0AAQAAAAAAAAAAAAAAAAAAAAID6AAAA+v//wAAAAAArQAAAAEAAAACAEQACQAAAAAAAgAwAEAAcwAAAJYLcAAAAAAAAAASAN4AAQAAAAAAAAA1AAAAAQAAAAAAAQAIADUAAQAAAAAAAgAHAD0AAQAAAAAAAwAIAEQAAQAAAAAABAAIAEwAAQAAAAAABQALAFQAAQAAAAAABgAIAF8AAQAAAAAACgArAGcAAQAAAAAACwATAJIAAwABBAkAAABqAKUAAwABBAkAAQAQAQ8AAwABBAkAAgAOAR8AAwABBAkAAwAQAS0AAwABBAkABAAQAT0AAwABBAkABQAWAU0AAwABBAkABgAQAWMAAwABBAkACgBWAXMAAwABBAkACwAmAclDb3B5cmlnaHQgKEMpIDIwMTkgYnkgb3JpZ2luYWwgYXV0aG9ycyBAIGZvbnRlbGxvLmNvbWZvbnRlbGxvUmVndWxhcmZvbnRlbGxvZm9udGVsbG9WZXJzaW9uIDEuMGZvbnRlbGxvR2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0Lmh0dHA6Ly9mb250ZWxsby5jb20AQwBvAHAAeQByAGkAZwBoAHQAIAAoAEMAKQAgADIAMAAxADkAIABiAHkAIABvAHIAaQBnAGkAbgBhAGwAIABhAHUAdABoAG8AcgBzACAAQAAgAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAGYAbwBuAHQAZQBsAGwAbwBSAGUAZwB1AGwAYQByAGYAbwBuAHQAZQBsAGwAbwBmAG8AbgB0AGUAbABsAG8AVgBlAHIAcwBpAG8AbgAgADEALgAwAGYAbwBuAHQAZQBsAGwAbwBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwAGYmFza2V0AAAAAQAB//8ADwAAAAAAAAAAAAAAAAAAAAAAGAAYABgAGANS/2oDUv9qsAAsILAAVVhFWSAgS7gADlFLsAZTWliwNBuwKFlgZiCKVViwAiVhuQgACABjYyNiGyEhsABZsABDI0SyAAEAQ2BCLbABLLAgYGYtsAIsIGQgsMBQsAQmWrIoAQpDRWNFUltYISMhG4pYILBQUFghsEBZGyCwOFBYIbA4WVkgsQEKQ0VjRWFksChQWCGxAQpDRWNFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwAStZWSOwAFBYZVlZLbADLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbAELCMhIyEgZLEFYkIgsAYjQrEBCkNFY7EBCkOwAWBFY7ADKiEgsAZDIIogirABK7EwBSWwBCZRWGBQG2FSWVgjWSEgsEBTWLABKxshsEBZI7AAUFhlWS2wBSywB0MrsgACAENgQi2wBiywByNCIyCwACNCYbACYmawAWOwAWCwBSotsAcsICBFILALQ2O4BABiILAAUFiwQGBZZrABY2BEsAFgLbAILLIHCwBDRUIqIbIAAQBDYEItsAkssABDI0SyAAEAQ2BCLbAKLCAgRSCwASsjsABDsAQlYCBFiiNhIGQgsCBQWCGwABuwMFBYsCAbsEBZWSOwAFBYZVmwAyUjYUREsAFgLbALLCAgRSCwASsjsABDsAQlYCBFiiNhIGSwJFBYsAAbsEBZI7AAUFhlWbADJSNhRESwAWAtsAwsILAAI0KyCwoDRVghGyMhWSohLbANLLECAkWwZGFELbAOLLABYCAgsAxDSrAAUFggsAwjQlmwDUNKsABSWCCwDSNCWS2wDywgsBBiZrABYyC4BABjiiNhsA5DYCCKYCCwDiNCIy2wECxLVFixBGREWSSwDWUjeC2wESxLUVhLU1ixBGREWRshWSSwE2UjeC2wEiyxAA9DVVixDw9DsAFhQrAPK1mwAEOwAiVCsQwCJUKxDQIlQrABFiMgsAMlUFixAQBDYLAEJUKKiiCKI2GwDiohI7ABYSCKI2GwDiohG7EBAENgsAIlQrACJWGwDiohWbAMQ0ewDUNHYLACYiCwAFBYsEBgWWawAWMgsAtDY7gEAGIgsABQWLBAYFlmsAFjYLEAABMjRLABQ7AAPrIBAQFDYEItsBMsALEAAkVUWLAPI0IgRbALI0KwCiOwAWBCIGCwAWG1EBABAA4AQkKKYLESBiuwcisbIlktsBQssQATKy2wFSyxARMrLbAWLLECEystsBcssQMTKy2wGCyxBBMrLbAZLLEFEystsBossQYTKy2wGyyxBxMrLbAcLLEIEystsB0ssQkTKy2wHiwAsA0rsQACRVRYsA8jQiBFsAsjQrAKI7ABYEIgYLABYbUQEAEADgBCQopgsRIGK7ByKxsiWS2wHyyxAB4rLbAgLLEBHistsCEssQIeKy2wIiyxAx4rLbAjLLEEHistsCQssQUeKy2wJSyxBh4rLbAmLLEHHistsCcssQgeKy2wKCyxCR4rLbApLCA8sAFgLbAqLCBgsBBgIEMjsAFgQ7ACJWGwAWCwKSohLbArLLAqK7AqKi2wLCwgIEcgILALQ2O4BABiILAAUFiwQGBZZrABY2AjYTgjIIpVWCBHICCwC0NjuAQAYiCwAFBYsEBgWWawAWNgI2E4GyFZLbAtLACxAAJFVFiwARawLCqwARUwGyJZLbAuLACwDSuxAAJFVFiwARawLCqwARUwGyJZLbAvLCA1sAFgLbAwLACwAUVjuAQAYiCwAFBYsEBgWWawAWOwASuwC0NjuAQAYiCwAFBYsEBgWWawAWOwASuwABa0AAAAAABEPiM4sS8BFSotsDEsIDwgRyCwC0NjuAQAYiCwAFBYsEBgWWawAWNgsABDYTgtsDIsLhc8LbAzLCA8IEcgsAtDY7gEAGIgsABQWLBAYFlmsAFjYLAAQ2GwAUNjOC2wNCyxAgAWJSAuIEewACNCsAIlSYqKRyNHI2EgWGIbIVmwASNCsjMBARUUKi2wNSywABawBCWwBCVHI0cjYbAJQytlii4jICA8ijgtsDYssAAWsAQlsAQlIC5HI0cjYSCwBCNCsAlDKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgsAhDIIojRyNHI2EjRmCwBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2EjICCwBCYjRmE4GyOwCENGsAIlsAhDRyNHI2FgILAEQ7ACYiCwAFBYsEBgWWawAWNgIyCwASsjsARDYLABK7AFJWGwBSWwAmIgsABQWLBAYFlmsAFjsAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wNyywABYgICCwBSYgLkcjRyNhIzw4LbA4LLAAFiCwCCNCICAgRiNHsAErI2E4LbA5LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWG5CAAIAGNjIyBYYhshWWO4BABiILAAUFiwQGBZZrABY2AjLiMgIDyKOCMhWS2wOiywABYgsAhDIC5HI0cjYSBgsCBgZrACYiCwAFBYsEBgWWawAWMjICA8ijgtsDssIyAuRrACJUZSWCA8WS6xKwEUKy2wPCwjIC5GsAIlRlBYIDxZLrErARQrLbA9LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrErARQrLbA+LLA1KyMgLkawAiVGUlggPFkusSsBFCstsD8ssDYriiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSsBFCuwBEMusCsrLbBALLAAFrAEJbAEJiAuRyNHI2GwCUMrIyA8IC4jOLErARQrLbBBLLEIBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAlDKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7ACYiCwAFBYsEBgWWawAWNgILABKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwAmIgsABQWLBAYFlmsAFjYbACJUZhOCMgPCM4GyEgIEYjR7ABKyNhOCFZsSsBFCstsEIssDUrLrErARQrLbBDLLA2KyEjICA8sAQjQiM4sSsBFCuwBEMusCsrLbBELLAAFSBHsAAjQrIAAQEVFBMusDEqLbBFLLAAFSBHsAAjQrIAAQEVFBMusDEqLbBGLLEAARQTsDIqLbBHLLA0Ki2wSCywABZFIyAuIEaKI2E4sSsBFCstsEkssAgjQrBIKy2wSiyyAABBKy2wSyyyAAFBKy2wTCyyAQBBKy2wTSyyAQFBKy2wTiyyAABCKy2wTyyyAAFCKy2wUCyyAQBCKy2wUSyyAQFCKy2wUiyyAAA+Ky2wUyyyAAE+Ky2wVCyyAQA+Ky2wVSyyAQE+Ky2wViyyAABAKy2wVyyyAAFAKy2wWCyyAQBAKy2wWSyyAQFAKy2wWiyyAABDKy2wWyyyAAFDKy2wXCyyAQBDKy2wXSyyAQFDKy2wXiyyAAA/Ky2wXyyyAAE/Ky2wYCyyAQA/Ky2wYSyyAQE/Ky2wYiywNysusSsBFCstsGMssDcrsDsrLbBkLLA3K7A8Ky2wZSywABawNyuwPSstsGYssDgrLrErARQrLbBnLLA4K7A7Ky2waCywOCuwPCstsGkssDgrsD0rLbBqLLA5Ky6xKwEUKy2wayywOSuwOystsGwssDkrsDwrLbBtLLA5K7A9Ky2wbiywOisusSsBFCstsG8ssDorsDsrLbBwLLA6K7A8Ky2wcSywOiuwPSstsHIsswkEAgNFWCEbIyFZQiuwCGWwAyRQeLABFTAtAEu4AMhSWLEBAY5ZsAG5CAAIAGNwsQAFQrIAAQAqsQAFQrMKAgEIKrEABUKzDgABCCqxAAZCugLAAAEACSqxAAdCugBAAAEACSqxAwBEsSQBiFFYsECIWLEDZESxJgGIUVi6CIAAAQRAiGNUWLEDAERZWVlZswwCAQwquAH/hbAEjbECAEQAAA==') format('truetype');
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?88801174#fontello') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+     
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+.icon-basket:before { content: '\e800'; } /* '' */
\ No newline at end of file
diff --git a/public/css/fontello/css/fontello-ie7-codes.css b/public/css/fontello/css/fontello-ie7-codes.css
new file mode 100644
index 0000000..9ff5f8b
--- /dev/null
+++ b/public/css/fontello/css/fontello-ie7-codes.css
@@ -0,0 +1,2 @@
+
+.icon-basket { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
\ No newline at end of file
diff --git a/public/css/fontello/css/fontello-ie7.css b/public/css/fontello/css/fontello-ie7.css
new file mode 100644
index 0000000..8b6a659
--- /dev/null
+++ b/public/css/fontello/css/fontello-ie7.css
@@ -0,0 +1,13 @@
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'fontello';
+  font-style: normal;
+  font-weight: normal;
+ 
+  /* fix buttons height */
+  line-height: 1em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+}
+ 
+.icon-basket { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
\ No newline at end of file
diff --git a/public/css/fontello/css/fontello.css b/public/css/fontello/css/fontello.css
new file mode 100644
index 0000000..0834ad9
--- /dev/null
+++ b/public/css/fontello/css/fontello.css
@@ -0,0 +1,58 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?35157520');
+  src: url('../font/fontello.eot?35157520#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?35157520') format('woff2'),
+       url('../font/fontello.woff?35157520') format('woff'),
+       url('../font/fontello.ttf?35157520') format('truetype'),
+       url('../font/fontello.svg?35157520#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?35157520#fontello') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-basket:before { content: '\e800'; } /* '' */
\ No newline at end of file
diff --git a/public/css/fontello/demo.html b/public/css/fontello/demo.html
new file mode 100644
index 0000000..78cc310
--- /dev/null
+++ b/public/css/fontello/demo.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html>
+  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <meta charset="UTF-8"><style>/*
+ * Bootstrap v2.2.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.clearfix:after {
+  clear: both;
+}
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+a:hover,
+a:active {
+  outline: 0;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+button,
+input {
+  *overflow: visible;
+  line-height: normal;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333;
+  background-color: #fff;
+}
+a {
+  color: #08c;
+  text-decoration: none;
+}
+a:hover {
+  color: #005580;
+  text-decoration: underline;
+}
+.row {
+  margin-left: -20px;
+  *zoom: 1;
+}
+.row:before,
+.row:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.row:after {
+  clear: both;
+}
+[class*="span"] {
+  float: left;
+  min-height: 1px;
+  margin-left: 20px;
+}
+.container,
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  width: 940px;
+}
+.span12 {
+  width: 940px;
+}
+.span11 {
+  width: 860px;
+}
+.span10 {
+  width: 780px;
+}
+.span9 {
+  width: 700px;
+}
+.span8 {
+  width: 620px;
+}
+.span7 {
+  width: 540px;
+}
+.span6 {
+  width: 460px;
+}
+.span5 {
+  width: 380px;
+}
+.span4 {
+  width: 300px;
+}
+.span3 {
+  width: 220px;
+}
+.span2 {
+  width: 140px;
+}
+.span1 {
+  width: 60px;
+}
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  *zoom: 1;
+}
+.container:before,
+.container:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.container:after {
+  clear: both;
+}
+p {
+  margin: 0 0 10px;
+}
+.lead {
+  margin-bottom: 20px;
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+}
+small {
+  font-size: 85%;
+}
+h1 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+h1 small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999;
+}
+h1 {
+  line-height: 40px;
+}
+h1 {
+  font-size: 38.5px;
+}
+h1 small {
+  font-size: 24.5px;
+}
+body {
+  margin-top: 90px;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  margin-left: -480px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  padding-top: 10px;
+  z-index: 10;
+}
+.footer {
+  color: #ddd;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 20px;
+}
+.footer a {
+  color: #ccc;
+  text-decoration: underline;
+}
+.the-icons {
+  font-size: 14px;
+  line-height: 24px;
+}
+.switch {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  color: #666;
+}
+.switch input {
+  margin-right: 0.3em;
+}
+.codesOn .i-name {
+  display: none;
+}
+.codesOn .i-code {
+  display: inline;
+}
+.i-code {
+  display: none;
+}
+@font-face {
+      font-family: 'fontello';
+      src: url('./font/fontello.eot?30559621');
+      src: url('./font/fontello.eot?30559621#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?30559621') format('woff'),
+           url('./font/fontello.ttf?30559621') format('truetype'),
+           url('./font/fontello.svg?30559621#fontello') format('svg');
+      font-weight: normal;
+      font-style: normal;
+    }
+     
+     
+    .demo-icon
+    {
+      font-family: "fontello";
+      font-style: normal;
+      font-weight: normal;
+      speak: none;
+     
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      margin-right: .2em;
+      text-align: center;
+      /* opacity: .8; */
+     
+      /* For safety - reset parent styles, that can break glyph codes*/
+      font-variant: normal;
+      text-transform: none;
+     
+      /* fix buttons height, for twitter bootstrap */
+      line-height: 1em;
+     
+      /* Animation center compensation - margins should be symmetric */
+      /* remove if not needed */
+      margin-left: .2em;
+     
+      /* You can be more comfortable with increased icons size */
+      /* font-size: 120%; */
+     
+      /* Font smoothing. That was taken from TWBS */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+     
+      /* Uncomment for 3D effect */
+      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+     </style>
+    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
+    <script>
+      function toggleCodes(on) {
+        var obj = document.getElementById('icons');
+      
+        if (on) {
+          obj.className += ' codesOn';
+        } else {
+          obj.className = obj.className.replace(' codesOn', '');
+        }
+      }
+      
+    </script>
+  </head>
+  <body>
+    <div class="container header">
+      <h1>fontello <small>font demo</small></h1>
+      <label class="switch">
+        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
+      </label>
+    </div>
+    <div class="container" id="icons">
+      <div class="row">
+        <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-basket">&#xe800;</i> <span class="i-name">icon-basket</span><span class="i-code">0xe800</span></div>
+      </div>
+    </div>
+    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/fontello/font/fontello.eot b/public/css/fontello/font/fontello.eot
new file mode 100644
index 0000000..ba5403e
Binary files /dev/null and b/public/css/fontello/font/fontello.eot differ
diff --git a/public/css/fontello/font/fontello.svg b/public/css/fontello/font/fontello.svg
new file mode 100644
index 0000000..6234f87
--- /dev/null
+++ b/public/css/fontello/font/fontello.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="basket" unicode="&#xe800;" d="M950 715q23 0 39-18t14-42l-53-365q-2-18-17-31t-34-12l-590 0 9-53 528 0q22 0 37-16t16-36-16-37-37-15l-572 0q-20 0-35 13t-16 30l-98 582-72 0q-22 0-37 15t-16 37 16 36 37 16l116 0q19 0 34-12t17-32l11-60 719 0z m-60-105l-200 0 0-103 185 0z m-252 0l-157 0 0-103 157 0 0 103z m0-156l-157 0 0-104 157 0 0 104z m-208 156l-182 0 18-105q3 2 8 2l156 0 0 103z m-156-156l17-104 139 0 0 104-156 0z m416-104l164 0 14 104-178 0 0-104z m-416-390q0 78 77 78 79 0 79-78 0-79-79-79-77 0-77 79z m469 0q0 78 77 78 79 0 79-78 0-79-79-79-77 0-77 79z" horiz-adv-x="1003" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/public/css/fontello/font/fontello.ttf b/public/css/fontello/font/fontello.ttf
new file mode 100644
index 0000000..1eb97a9
Binary files /dev/null and b/public/css/fontello/font/fontello.ttf differ
diff --git a/public/css/fontello/font/fontello.woff b/public/css/fontello/font/fontello.woff
new file mode 100644
index 0000000..259ef3a
Binary files /dev/null and b/public/css/fontello/font/fontello.woff differ
diff --git a/public/css/fontello/font/fontello.woff2 b/public/css/fontello/font/fontello.woff2
new file mode 100644
index 0000000..248ceeb
Binary files /dev/null and b/public/css/fontello/font/fontello.woff2 differ
diff --git a/public/css/palette.less b/public/css/palette.less
new file mode 100644
index 0000000..abd3e99
--- /dev/null
+++ b/public/css/palette.less
@@ -0,0 +1,6 @@
+/* RGB */
+@color1: rgba(34, 116, 165, 1);
+@color2: rgba(34, 72, 112, 1);
+@color3: rgba(163, 206, 241, 1);
+@color4: rgba(231, 236, 239, 1);
+@color5: rgba(48, 50, 56, 1);
\ No newline at end of file
diff --git a/public/css/palette.scss b/public/css/palette.scss
new file mode 100644
index 0000000..9e472dd
--- /dev/null
+++ b/public/css/palette.scss
@@ -0,0 +1,15 @@
+/* Coolors Exported Palette - coolors.co/2274a5-224870-a3cef1-e7ecef-303238 */
+
+/* HSL */
+$color1: hsla(202%, 66%, 39%, 1);
+$color2: hsla(211%, 53%, 29%, 1);
+$color3: hsla(207%, 74%, 79%, 1);
+$color4: hsla(203%, 20%, 92%, 1);
+$color5: hsla(225%, 8%, 20%, 1);
+
+/* RGB */
+$color1: rgba(34, 116, 165, 1);
+$color2: rgba(34, 72, 112, 1);
+$color3: rgba(163, 206, 241, 1);
+$color4: rgba(231, 236, 239, 1);
+$color5: rgba(48, 50, 56, 1);
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/.csscomb.json b/public/css/spectre-0.5.8/.csscomb.json
new file mode 100644
index 0000000..270371d
--- /dev/null
+++ b/public/css/spectre-0.5.8/.csscomb.json
@@ -0,0 +1,30 @@
+{
+  "remove-empty-rulesets": true,
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "eof-newline": false,
+  "leading-zero": false,
+  "quotes": "double",
+  "sort-order-fallback": "abc",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": " ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": "\n",
+  "space-before-selector-delimiter": "",
+  "space-before-closing-brace": "\n",
+  "strip-spaces": true,
+  "tab-size": true,
+  "unitless-zero": true,
+  "sort-order": [[
+    "$variable",
+    "$include",
+    "$import"
+  ]]
+}
diff --git a/public/css/spectre-0.5.8/.gitattributes b/public/css/spectre-0.5.8/.gitattributes
new file mode 100644
index 0000000..892abd6
--- /dev/null
+++ b/public/css/spectre-0.5.8/.gitattributes
@@ -0,0 +1 @@
+**/*.html linguist-documentation
diff --git a/public/css/spectre-0.5.8/.gitignore b/public/css/spectre-0.5.8/.gitignore
new file mode 100644
index 0000000..40b717f
--- /dev/null
+++ b/public/css/spectre-0.5.8/.gitignore
@@ -0,0 +1,8 @@
+.idea/
+node_modules/
+.*
+!.csscomb.json
+!.gitignore
+!.gitattributes
+!.hound.yml
+!.scss-lint.yml
diff --git a/public/css/spectre-0.5.8/.hound.yml b/public/css/spectre-0.5.8/.hound.yml
new file mode 100644
index 0000000..dc8c607
--- /dev/null
+++ b/public/css/spectre-0.5.8/.hound.yml
@@ -0,0 +1,2 @@
+scss:
+  config_file: .scss-lint.yml
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/.scss-lint.yml b/public/css/spectre-0.5.8/.scss-lint.yml
new file mode 100644
index 0000000..a59b85a
--- /dev/null
+++ b/public/css/spectre-0.5.8/.scss-lint.yml
@@ -0,0 +1,253 @@
+# Default application configuration that all configurations inherit from.
+
+scss_files: "**/*.scss"
+plugin_directories: ['.scss-linters']
+
+# List of gem names to load custom linters from (make sure they are already
+# installed)
+plugin_gems: []
+
+# Default severity of all linters.
+severity: warning
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ChainedClasses:
+    enabled: false
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: true
+
+  Comment:
+    enabled: false
+    style: silent
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: false
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 4
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: false
+
+  PrivateNamingConvention:
+    enabled: false
+    prefix: _
+
+  PropertyCount:
+    enabled: true
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+    disabled_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  PseudoElement:
+    enabled: true
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 2
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: false
+    allowed_shorthands: [1, 2, 3, 4]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space'
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableColon:
+    enabled: false
+    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'at_least_one_space', or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes # or single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: true
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/CHANGELOG.md b/public/css/spectre-0.5.8/CHANGELOG.md
new file mode 100644
index 0000000..b192b23
--- /dev/null
+++ b/public/css/spectre-0.5.8/CHANGELOG.md
@@ -0,0 +1,298 @@
+#### Spectre.css Changelog
+
+##### v0.5.8 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.8)
+
+- IMPORTANT: Moving 
+- Add Auto width column #541
+- Add more Menu badge support #545
+- Improve 360-Degree Viewer
+- Fix gulp issue #547
+- Fix the errors in the Docs #538
+
+##### v0.5.7 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.7)
+
+- Add pure CSS 360-Degree Viewer
+- Improve Docs SEO
+- Change Carousels image number to variable #428
+- Fix Form textarea height issue
+
+##### v0.5.6 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.6)
+
+- Add Docs Search #509 #291
+- Add Copy icon
+- Add Hero layout #380
+- Add multiline Tooltips #500
+- Replace transition: all; #526
+- Fix #511 issue
+- Fix sidebar background height for short docs pages
+
+##### v0.5.5 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.5)
+
+- IMPORTANT: New Docs
+- Add Changelog to What's New section
+- Fix chip vertical scrollbar #521
+- Fix circle -> s-circle #489
+- Fix code font-family issue for asian languages #476
+
+##### v0.5.4 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.4)
+
+- IMPORTANT: Change naming of position utilities to avoid conflicts
+- Update dark color variable
+- Fix sidebar hash link bug #482
+- Fix browser support typo #469
+- Fix code typo #460
+- Fix GitHub button z-index bug #458
+- Fix Bar background color issue by adding !important to color utilities
+- Fix chip bug when content is too long #506
+- Fix multiple select height bug #508
+
+##### v0.5.3 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.3)
+
+- Add dark text color to utilities
+- Add error state to the indeterminate checkbox
+- Add inline forms
+- Add more code examples
+- Fix errors in the Docs
+
+##### v0.5.2 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.2)
+
+- IMPORTANT:  Move Docs to Pug templates
+- Add more Docs examples
+- Add visited link style
+- Add 100% modal height class #391
+- Fix off-canvas-overlay bug #392
+- Fix margin and padding values #431
+- Fix Accordion example #438
+- Fix a bug of input addons width on mobile devices #449
+- Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)
+
+##### v0.5.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.1)
+
+IMPORTANT: Move Autocomplete to the Experimentals
+- Add form checkbox, radio and switch support to Menus
+- Add responsive horizontal form support #375
+- Add Favicons in the docs #398
+- Fix Off-canvas z-index problem #361
+- Fix icons disappearing on group classes on focus
+- Fix Deprecation Warning #396 #356
+- Initial commit of RTL support (not finished)
+
+##### v0.5.0 [#](https://github.com/picturepan2/spectre/releases/tag/v0.5.0)
+
+- IMPORTANT: Restore /dist folder
+- Add Grid nesting example #353
+- Add Form control sizes support
+- Update Off-canvas default behavior and new option available #347
+- Split Mixins
+- Fix Navbar last-child align right bug #346
+- Fix modal doc typo
+- Fix docs examples #348
+
+##### v0.4.7 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.7)
+
+- Add new button colors (success and error) #227 #241 #342
+- Add overflow-scrolling: touch; CSS for better scrolling
+- Add touch support to Parallax image hover effect
+- Update the Modal example code
+- Fix form horizontal layout spacing
+
+##### v0.4.6 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.6)
+
+- Add new Sliders example #328
+- Add Table with horizontal scroll support #333
+- Update Calendar event style which makes use of color utilities #326 
+- Define $parallax-fade-color as default variable #332
+- Fix the Docs content mistake
+- Fix breadcrumb-item extra spacing #337
+- Fix comparison slider image responsive bug #338
+
+##### v0.4.5 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.5)
+
+- Rewrite Off-canvas component
+- Add `active` support to the Off-canvas #308
+- Update the Docs pages
+
+##### v0.4.4 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.4)
+
+- IMPORTANT: Increase default font sizes to 16px #271
+- Add version number to CSS #288 #289
+
+##### v0.4.3 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.3)
+
+- Add Icon Sizes #284
+- Add Large Modals #293
+- Update primary color to #5755d9
+- Change Tooltips `white-space` to `pre` #292
+- Encode SVG Data URI (thanks to @mariodev) #297 #298
+- Improve Buttons and Forms small and large variables
+- Improve Filters code
+- Improve gulpfile and package
+- Add Importing Sass Docs
+
+##### v0.4.2 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.2)
+
+- Add Off-screen experimental
+- Fix Docs rendering bug in Safari
+
+
+##### v0.4.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.1)
+
+- Add default modifier to all variables 
+- Add `address` reset which changes font-style to normal
+- Add Details and Summary Accordions support
+- Fix responsive video
+- Update the Docs
+
+##### v0.4.0 [#](https://github.com/picturepan2/spectre/releases/tag/v0.4.0)
+
+- Switch from Less to Sass
+- Add Cursor utilities
+
+##### v0.3.2 [#](https://github.com/picturepan2/spectre/releases/tag/v0.3.2)
+
+- Add label-rounded classes
+- Add Avatars presence status code
+- Add Typography Fonts Docs
+- Add Button variant mixins
+- Update Autocomplete style
+- Update Autoprefixer rules
+- Update label mixin and code mono font family
+
+##### v0.3.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.3.1)
+
+*IMPORTANT*: The default root font-size has been changed to `20px`, please update your `rem` numbers if you're using the custom sizes. [Learn more](https://picturepan2.github.io/spectre/getting-started/custom.html#variables-sizes).
+
+- Fix margin and padding utilities bug
+- Add grid offset
+- Rename Display utilities class names
+- Move Panels and Empty states to Components from Layout
+- Fix Docs bugs and cleanup codes
+
+##### v0.2.15 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.15)
+
+- BIG Update to the Docs experience, completely rewritten and improved #240 
+- Add Text and Background colors utilities #205 #219 
+- Add Install from CDN option #191 
+- Add unit size (4px) and unit size variables
+- Add Responsive container (max width container) #222
+- Add error and success states to checkbox, radio and switch #246 
+- Fix Rem unit issue in East Asian Chrome #110 
+- Fix icon direction bug #218
+- Fix Dropdown menu max items/height #226 
+
+##### v0.2.14 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.14)
+
+- Add vertical divider
+- Add Form icon support
+- Add Accordions
+- Add anchor links to Docs
+- Add new container grid size
+- Fix link error and typo
+
+##### v0.2.13 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.13)
+
+- Add Timelines code
+- Add input readonly style
+- Change Gulp building process and ignore /dist
+- Change naming `danger` to `error`
+- Change label-variant mixin
+- Fix dropdown-toggle border radius in button groups
+- Fix Calendars date item width bug under Firefox
+
+##### v0.2.12 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.12)
+
+- Add pure CSS Comparison Sliders
+- Add pure CSS content Filters
+- Add Avatars badge support
+- Add more icons
+- Change :focus support
+- Change Docs image sizes and add object-fit support
+- Update Navbar code
+- Fix typos, Modals bugs
+
+##### v0.2.11 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.11)
+
+- Add pure CSS Popovers
+- Add pure CSS Icons 
+- Add Slider bars
+- Add tvOS Parallax effect text layer
+- Update shadow mixin
+
+##### v0.2.10 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.10)
+
+- Add Shadows and Z-index variables
+- Add Divider text
+- Improve color variables
+- Cleanup components code
+- Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)
+
+##### v0.2.9 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.9)
+
+- Add Panels layout: flexible view container layout with auto-expand content section
+- Update Navbar layout
+- Update docs and examples
+
+##### v0.2.8 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.8)
+
+- Add Carousels previous and next buttons
+- Improve disabled state for forms
+- Improve calendar events style
+- Improve Sliders disabled style
+- Improve Autocomplete menu position
+- Merge Menus and Dropdowns
+
+##### v0.2.7 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.7)
+
+- Add Calendars experimental support
+- Add tabindex note to the dropdowns docs
+- Add shrink-to-fit=no to head meta
+- Add Colors docs and update colors
+- Fix wrong shadow colors with form-select
+- Fix grid-480
+
+##### v0.2.6 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.6)
+
+- Add Carousels initial experimental version
+- Add Spectre.css Twitter account (@spectrecss) link
+- Improve Docs experience and navbar
+- Fix the bug of form input focus colors
+
+##### v0.2.5 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.5)
+
+- Improve color variables completely
+- Add Menu badges
+- Add Responsive visibility (show-x)
+- Add Parallax effect (pure CSS)
+- Fix elements and components
+- Update empty state layout code
+
+##### v0.2.4 [#]    (https://github.com/picturepan2/spectre/releases/tag/v0.2.4)
+
+- ADD: Meters element experimental support
+- ADD: Progress indeterminate animation
+- ADD: Text-decoration-skip support
+- CHG: Split Codes and improve docs codes
+- FIX: Steps with tooltips z-index bug
+
+##### v0.2.3 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.3)
+
+- Bars component
+- Badges for buttons
+- Experimentals CSS and docs
+- Sliders experimental component
+- A number of fixes as usual
+
+##### v0.2.1 [#](https://github.com/picturepan2/spectre/releases/tag/v0.2.1)
+
+I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:
+- New Docs experience with better navigations and better mobile off-canvas menu
+- New components: Tiles, Steps and Navs (part of Navigation)
+- Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support
+- Improvements: better focus style
+- Fixes
+
+##### v0.0.1 - March 2016
+
+Initial commit
+
+Thank you. ♥
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/LICENSE b/public/css/spectre-0.5.8/LICENSE
new file mode 100644
index 0000000..e956cb2
--- /dev/null
+++ b/public/css/spectre-0.5.8/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - 2018 Yan Zhu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/public/css/spectre-0.5.8/README.md b/public/css/spectre-0.5.8/README.md
new file mode 100644
index 0000000..e6183ee
--- /dev/null
+++ b/public/css/spectre-0.5.8/README.md
@@ -0,0 +1,115 @@
+<a href="https://picturepan2.github.io/spectre">
+  <img src="https://picturepan2.github.io/spectre/img/spectre-logo.svg" width="72" height="72">
+</a>
+
+## Spectre.css
+
+Spectre.css is a lightweight, responsive and modern CSS framework.
+
+- Lightweight (~10KB gzipped) starting point for your projects
+- Flexbox-based, responsive and mobile-friendly layout
+- Elegantly designed and developed elements and components
+
+Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.
+
+Spectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) or [via Patreon](https://www.patreon.com/spectrecss) for the further development. ♥ 
+
+
+## Getting started
+
+There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.
+
+### Install manually
+Download the compiled and minified [Spectre CSS files](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; part.
+
+`<link rel="stylesheet" href="spectre.min.css">`
+
+### Install from CDN
+Alternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cdnjs.com/libraries/spectre.css) CDN to load compiled Spectre.css.
+
+`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">`
+
+### Install with NPM
+`$ npm install spectre.css --save`
+
+### Install with Yarn
+`$ yarn add spectre.css`
+
+### Install with Bower
+`$ bower install spectre.css --save`
+
+## Compiling custom version
+
+You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started/custom.html).
+
+## Documentation and examples
+
+### Elements
+
+- [Typography](https://picturepan2.github.io/spectre/elements/typography.html)
+- [Tables](https://picturepan2.github.io/spectre/elements/tables.html)
+- [Buttons](https://picturepan2.github.io/spectre/elements/buttons.html)
+- [Forms](https://picturepan2.github.io/spectre/elements/forms.html)
+- [Icons.css](https://picturepan2.github.io/icons.css) - CSS ONLY
+- [Labels](https://picturepan2.github.io/spectre/elements/labels.html)
+- [Code](https://picturepan2.github.io/spectre/elements/code.html)
+- [Media](https://picturepan2.github.io/spectre/elements/media.html)
+
+### Layout
+- [Flexbox grid](https://picturepan2.github.io/spectre/layout/grid.html) 
+- [Responsive](https://picturepan2.github.io/spectre/layout/responsive.html)
+- [Hero](https://picturepan2.github.io/spectre/layout/hero.html)
+- [Navbar](https://picturepan2.github.io/spectre/layout/navbar.html)
+
+### Components
+- [Accordions](https://picturepan2.github.io/spectre/components/accordions.html)
+- [Avatars](https://picturepan2.github.io/spectre/components/avatars.html)
+- [Badges](https://picturepan2.github.io/spectre/components/badges.html)
+- [Breadcrumbs](https://picturepan2.github.io/spectre/components/breadcrumbs.html)
+- [Bars](https://picturepan2.github.io/spectre/components/bars.html)
+- [Cards](https://picturepan2.github.io/spectre/components/cards.html)
+- [Chips](https://picturepan2.github.io/spectre/components/chips.html)
+- [Empty states](https://picturepan2.github.io/spectre/components/empty.html)
+- [Menu](https://picturepan2.github.io/spectre/components/menu.html)
+- [Nav](https://picturepan2.github.io/spectre/components/nav.html)
+- [Modals](https://picturepan2.github.io/spectre/components/modals.html)
+- [Pagination](https://picturepan2.github.io/spectre/components/pagination.html)
+- [Panels](https://picturepan2.github.io/spectre/components/panels.html)
+- [Popovers](https://picturepan2.github.io/spectre/components/popovers.html)
+- [Steps](https://picturepan2.github.io/spectre/components/steps.html)
+- [Tabs](https://picturepan2.github.io/spectre/components/tabs.html)
+- [Tiles](https://picturepan2.github.io/spectre/components/tiles.html)
+- [Toasts](https://picturepan2.github.io/spectre/components/toasts.html)
+- [Tooltips](https://picturepan2.github.io/spectre/components/tooltips.html)
+
+### Utilities
+
+- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities
+
+### Experimentals
+- [360-Degree Viewer](https://picturepan2.github.io/spectre/experimentals/viewer-360.html) - CSS ONLY
+- [Autocomplete](https://picturepan2.github.io/spectre/experimentals/autocomplete.html)
+- [Calendars](https://picturepan2.github.io/spectre/experimentals/calendars.html)
+- [Carousels](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS ONLY
+- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals/comparison.html) - CSS ONLY
+- [Filters](https://picturepan2.github.io/spectre/experimentals/filters.html) - CSS ONLY
+- [Meters](https://picturepan2.github.io/spectre/experimentals/meters.html)
+- [Off-canvas](https://picturepan2.github.io/spectre/experimentals/off-canvas.html) - CSS ONLY
+- [Parallax](https://picturepan2.github.io/spectre/experimentals/parallax.html) - CSS ONLY
+- [Progress](https://picturepan2.github.io/spectre/experimentals/progress.html)
+- [Sliders](https://picturepan2.github.io/spectre/experimentals/sliders.html)
+- [Timelines](https://picturepan2.github.io/spectre/experimentals/timelines.html)
+
+## Browser support
+Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
+
+- Chrome (LAST 4)
+- Microsoft Edge (LAST 4)
+- Firefox (EXTENDED SUPPORT RELEASE)
+- Safari (LAST 4)
+- Opera (LAST 4)
+- Internet Explorer 10+
+
+Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
+
+Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.
diff --git a/public/css/spectre-0.5.8/bower.json b/public/css/spectre-0.5.8/bower.json
new file mode 100644
index 0000000..d6b0c53
--- /dev/null
+++ b/public/css/spectre-0.5.8/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "spectre.css",
+  "version": "0.5.8",
+  "description": "Spectre.css: A lightweight, responsive and modern CSS framework",
+  "homepage": "http://picturepan2.github.io/spectre",
+  "repository": "picturepan2/spectre",
+  "license": "MIT",
+  "author": "Yan Zhu <picturepan2@hotmail.com>",
+  "main": "dist/spectre.css",
+  "keywords": [
+    "css",
+    "framework",
+    "flexbox",
+    "responsive",
+    "mobile-friendly",
+    "front-end",
+    "sass",
+    "modern"
+  ],
+  "ignore": [
+    ".idea",
+    ".gitignore",
+    "bower.json",
+    "package.json",
+    "node_modules"
+  ]
+}
diff --git a/public/css/spectre-0.5.8/docs/components.html b/public/css/spectre-0.5.8/docs/components.html
new file mode 100644
index 0000000..2729c21
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components.html
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Accordions, Avatars, Badges, Bars, Breadcrumbs, Cards, Chips, Empty states, Menu, Modals, Nav, Pagination, Panels, Popovers, teps, Tabs, TIles, Toasts, Tooltips">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components.html">
+    <meta property="og:title" content="Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Accordions, Avatars, Badges, Bars, Breadcrumbs, Cards, Chips, Empty states, Menu, Modals, Nav, Pagination, Panels, Popovers, teps, Tabs, TIles, Toasts, Tooltips">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="components">
+            <h3 class="s-title">Components<a class="anchor" href="#components" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p>
+               Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Accordions</div>
+                  </div>
+                  <div class="card-body">Used to toggle sections of content</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/accordions.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Avatars</div>
+                  </div>
+                  <div class="card-body">User profile pictures</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/avatars.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Badges</div>
+                  </div>
+                  <div class="card-body">Used as unread number indicators</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/badges.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Bars</div>
+                  </div>
+                  <div class="card-body">Progress of a task or the value within the known range</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/bars.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Breadcrumbs</div>
+                  </div>
+                  <div class="card-body">Navigational hierarchies to indicate current location</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/breadcrumbs.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Cards</div>
+                  </div>
+                  <div class="card-body">Flexible content containers</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/cards.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Chips</div>
+                  </div>
+                  <div class="card-body">Complex entities in small blocks</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/chips.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Empty states</div>
+                  </div>
+                  <div class="card-body">Navigational hierarchies to indicate current location</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/empty.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Menu</div>
+                  </div>
+                  <div class="card-body">Vertical list of links or buttons for actions and navigation</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/menu.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Modals</div>
+                  </div>
+                  <div class="card-body">Flexible dialog prompts</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/modals.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Nav</div>
+                  </div>
+                  <div class="card-body">Vertical list of links</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/nav.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Pagination</div>
+                  </div>
+                  <div class="card-body">Vertical list of links or buttons for actions and navigation</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/pagination.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Panels</div>
+                  </div>
+                  <div class="card-body">Flexible view container with auto-expand content section</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/panels.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Popovers</div>
+                  </div>
+                  <div class="card-body">Small overlay content containers</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/popovers.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Steps</div>
+                  </div>
+                  <div class="card-body">Progress indicators of a sequence of task steps</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/steps.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Tabs</div>
+                  </div>
+                  <div class="card-body">Switch between different views</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/tabs.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Tiles</div>
+                  </div>
+                  <div class="card-body">Repeatable or embeddable information blocks</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/tiles.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Toasts</div>
+                  </div>
+                  <div class="card-body">Progress indicators of a sequence of task steps</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/toasts.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Tooltips</div>
+                  </div>
+                  <div class="card-body">Context information labels that appear on hover and focus</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="components/tooltips.html">View</a></div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/accordions.html b/public/css/spectre-0.5.8/docs/components/accordions.html
new file mode 100644
index 0000000..ab31324
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/accordions.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Accordions - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/accordions.html">
+    <meta property="og:title" content="Accordions - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/accordions.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="accordions">
+            <h3 class="s-title">Accordions<a class="anchor" href="#accordions" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Accordions are used to toggle sections of content.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-md-12">
+                <div class="accordion">
+                  <input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked="">
+                  <label class="accordion-header c-hand" for="accordion-1"><i class="icon icon-arrow-right mr-1"></i>Elements</label>
+                  <div class="accordion-body">
+                    <ul class="menu menu-nav">
+                      <li class="menu-item"><a href="#accordions">Element 1</a></li>
+                      <li class="menu-item"><a href="#accordions">Element 2</a></li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="accordion">
+                  <input id="accordion-2" type="radio" name="accordion-radio" hidden="">
+                  <label class="accordion-header c-hand" for="accordion-2"><i class="icon icon-arrow-right mr-1"></i>Layout</label>
+                  <div class="accordion-body">
+                    <ul class="menu menu-nav">
+                      <li class="menu-item"><a href="#accordions">Layout 1</a></li>
+                      <li class="menu-item"><a href="#accordions">Layout 2</a></li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="accordion">
+                  <input id="accordion-3" type="radio" name="accordion-radio" hidden="">
+                  <label class="accordion-header c-hand" for="accordion-3"><i class="icon icon-arrow-right mr-1"></i>Components</label>
+                  <div class="accordion-body">
+                    <ul class="menu menu-nav">
+                      <li class="menu-item"><a href="#accordions">Component 1</a></li>
+                      <li class="menu-item"><a href="#accordions">Component 2</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-6 col-md-12">
+                <div class="accordion">
+                  <input id="accordion-4" type="checkbox" name="accordion-checkbox" hidden="" checked="">
+                  <label class="accordion-header c-hand" for="accordion-4">Elements</label>
+                  <div class="accordion-body">
+                    <ul class="menu menu-nav">
+                      <li class="menu-item"><a href="#accordions">Element 1</a></li>
+                      <li class="menu-item"><a href="#accordions">Element 2</a></li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="accordion">
+                  <input id="accordion-5" type="checkbox" name="accordion-checkbox" hidden="">
+                  <label class="accordion-header c-hand" for="accordion-5">Layout</label>
+                  <div class="accordion-body">
+                    <ul class="menu menu-nav">
+                      <li class="menu-item"><a href="#accordions">Layout 1</a></li>
+                      <li class="menu-item"><a href="#accordions">Layout 2</a></li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="accordion">
+                  <input id="accordion-6" type="checkbox" name="accordion-checkbox" hidden="">
+                  <label class="accordion-header c-hand" for="accordion-6">Components</label>
+                  <div class="accordion-body">
+                    <ul class="menu menu-nav">
+                      <li class="menu-item"><a href="#accordions">Component 1</a></li>
+                      <li class="menu-item"><a href="#accordions">Component 2</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- standard Accordions example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-checkbox"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    Title
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- mutually exclusive Accordions example (with same input names) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-radio"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>&gt;</span>
+    Title
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick.
+              Add the <code>open</code> attribute to <code>details</code> to expand it.
+              Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">under consideration</a>.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- details and summary Accordions example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    Title
+  <span class="hljs-tag">&lt;/<span class="hljs-name">summary</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/avatars.html b/public/css/spectre-0.5.8/docs/components/avatars.html
new file mode 100644
index 0000000..7201f60
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/avatars.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Avatars - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/avatars.html">
+    <meta property="og:title" content="Avatars - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/avatars.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="avatars">
+            <h3 class="s-title">Avatars<a class="anchor" href="#avatars" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Avatars are user profile pictures. </p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
+                <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
+                <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
+                <figure class="avatar avatar-xs mr-2"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <figure class="avatar avatar-xl mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-lg mr-2" data-initial="YZ"></figure>
+                <figure class="avatar mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-sm mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-xs mr-2" data-initial="YZ"></figure>
+              </div>
+            </div>
+            <p>Add the <code>avatar</code> class to &lt;img&gt; element.
+              There are 4 additional sizes available, including <code>avatar-xl</code>(64px), <code>avatar-lg</code>(48px), <code>avatar-sm</code>(24px), and <code>avatar-xs</code>(16px).
+              By default, the avatar size is 32px.
+            </p>
+            <p>
+              For users who don't have profile pictures, you may use their initials for avatars.
+              Add the <code>avatar</code> class and avatar size class to &lt;div&gt;  element.
+              The <code>data-initial</code> attribute is the name appear inside the avatar.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Basic avatar examples --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="avatars-icons">Avatar icons<a class="anchor" href="#avatars-icons" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
+                <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-1.png" alt="Avatar"></figure>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-5.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-icon"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <figure class="avatar avatar-xl mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+                <figure class="avatar avatar-lg mr-2" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
+                <figure class="avatar mr-2" data-initial="YZ"><i class="avatar-presence away"></i></figure>
+                <figure class="avatar avatar-sm mr-2" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
+                <figure class="avatar avatar-xs mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+              </div>
+            </div>
+            <p>
+              Avatars support presence indicators.
+              You can add an &lt;i&gt; element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors.
+              The default is gray which means offline.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/badges.html b/public/css/spectre-0.5.8/docs/components/badges.html
new file mode 100644
index 0000000..23ac528
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/badges.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Badges - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/badges.html">
+    <meta property="og:title" content="Badges - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/badges.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="badges">
+            <h3 class="s-title">Badges<a class="anchor" href="#badges" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Badges are often used as unread number indicators.</p>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
+              <div class="column col-3 col-xs-6"><span class="badge" data-badge="8">Notifications</span></div>
+              <div class="column col-3 col-xs-6"><span class="badge" data-badge="88">Notifications</span></div>
+              <div class="column col-3 col-xs-6"><span class="badge" data-badge="888">Notifications</span></div>
+            </div>
+            <p>Add the <code>badge</code> class to non self closing elements.
+              And add the <code>data-badge</code> attribute to define the content of a badge.
+              The badge will appear in the top-right direction of the element.
+            </p>
+            <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
+            <div class="docs-demo columns">
+              <div class="column col-sm-12">
+                <button class="btn badge" data-badge="">Button</button>
+                <button class="btn badge" data-badge="8">Button</button>
+              </div>
+              <div class="column col-sm-12">
+                <button class="btn btn-primary badge" data-badge="">Button</button>
+                <button class="btn btn-primary badge" data-badge="8">Button</button>
+              </div>
+              <div class="column col-sm-12">
+                <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-1.png" alt="YZ"></figure>
+                <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-2.png" alt="YZ"></figure>
+                <figure class="avatar badge" data-badge="8" data-initial="YZ"><img src="../img/avatar-3.png" alt="YZ"></figure>
+              </div>
+            </div>
+            <p>Badges support <code>button</code> and <code>avatars</code> elements as well.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>&gt;</span>
+  Notifications
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>&gt;</span>
+  Notifications
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>&gt;</span>
+  Button
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"YZ"</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/bars.html b/public/css/spectre-0.5.8/docs/components/bars.html
new file mode 100644
index 0000000..f3e64bb
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/bars.html
@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Bars - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/bars.html">
+    <meta property="og:title" content="Bars - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/bars.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="bars">
+            <h3 class="s-title">Bars<a class="anchor" href="#bars" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>
+              Bars represent the progress of a task or the value within the known range.
+              Bars are custom components for displaying HTML5 &lt;progress&gt;, &lt;meter&gt; and input range elements.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-8 col-xs-12">
+                <div class="bar bar-sm">
+                  <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+              </div>
+              <div class="column col-8 col-xs-12">
+                <div class="bar">
+                  <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
+                </div>
+              </div>
+              <div class="column col-8 col-xs-12">
+                <div class="bar">
+                  <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
+                  <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div>
+                  <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div>
+                  <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div>
+                </div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>bar</code> class.
+              And add child elements with the <code>bar-item</code> class.
+              The width percentage value is needed for every <code>bar-item</code>.
+            </p>
+            <p>There is the <code>bar-sm</code> class for thinner Bars.
+              Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal bars --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-sm"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- multi-bars --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"25%"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>&gt;</span>25%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;background:#818bd5;"</span>&gt;</span>15%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="bars-slider">Slider bars<a class="anchor" href="#bars-slider" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-8 col-xs-12">
+                <div class="bar bar-slider">
+                  <div class="bar-item" role="progressbar" style="width:50%;">
+                    <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-8 col-xs-12">
+                <div class="bar bar-slider">
+                  <div class="bar-item" role="progressbar" style="width:15%;">
+                    <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button>
+                  </div>
+                  <div class="bar-item" role="progressbar" style="width:65%;">
+                    <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>You can add the <code>bar-slider</code> class to the Bars container.
+              And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item.
+              You need to set the <code>bar-item</code> width manually to have the slider point.
+            </p>
+            <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal slider --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- range slider --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:65%;"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/breadcrumbs.html b/public/css/spectre-0.5.8/docs/components/breadcrumbs.html
new file mode 100644
index 0000000..a38729c
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/breadcrumbs.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Breadcrumbs - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/breadcrumbs.html">
+    <meta property="og:title" content="Breadcrumbs - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/breadcrumbs.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="breadcrumbs">
+            <h3 class="s-title">Breadcrumbs<a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <ul class="breadcrumb">
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
+                </ul>
+              </div>
+              <div class="column col-12">
+                <ul class="breadcrumb">
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Change avatar">Change avatar</a></li>
+                </ul>
+              </div>
+              <div class="column col-12">
+                <ul class="breadcrumb">
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
+                  <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
+                  <li class="breadcrumb-item">Search result: <a class="tooltip" href="#breadcrumbs" data-tooltip="Search result: Spectre">Spectre</a></li>
+                </ul>
+              </div>
+            </div>
+            <p>Add a container element with the <code>breadcrumb</code> class.
+              And add child elements with the <code>breadcrumb-item</code> class.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Change avatar<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/cards.html b/public/css/spectre-0.5.8/docs/components/cards.html
new file mode 100644
index 0000000..9212fff
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/cards.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Cards - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/cards.html">
+    <meta property="og:title" content="Cards - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/cards.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="cards">
+            <h3 class="s-title">Cards<a class="anchor" href="#cards" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Cards are flexible content containers.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-image"><img class="img-responsive" src="../img/osx-el-capitan.jpg" alt="OS X El Capitan"></div>
+                  <div class="card-header">
+                    <div class="card-title h5">Microsoft</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
+                  </div>
+                  <div class="card-body">Empower every person and every organization on the planet to achieve more.</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="#cards">Do</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Apple</div>
+                    <div class="card-subtitle text-gray">Hardware and software</div>
+                  </div>
+                  <div class="card-image"><img class="img-responsive" src="../img/osx-yosemite.jpg" alt="OS X Yosemite"></div>
+                  <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+                  <div class="card-footer">
+                    <div class="btn-group btn-group-block">
+                      <button class="btn btn-primary">Buy</button>
+                      <button class="btn">Buy</button>
+                      <button class="btn">Buy</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-image"><img class="img-responsive" src="../img/macos-sierra-2.jpg" alt="macOS Sierra"></div>
+                  <div class="card-header">
+                    <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
+                    <div class="card-title h5">Google I/O</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
+                  </div>
+                  <div class="card-body">An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.</div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-image"><img class="img-responsive" src="../img/osx-el-capitan-2.jpg" alt="OS X El Capitan"></div>
+                  <div class="card-footer"><a class="btn btn-primary" href="#cards">Buy</a><a class="btn btn-link" href="#cards">Share</a></div>
+                  <div class="card-body"><strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.</div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Apple</div>
+                    <div class="card-subtitle text-gray">Hardware and software</div>
+                  </div>
+                  <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+                  <div class="card-image"><img class="img-responsive" src="../img/macos-sierra.jpg" alt="macOS Sierra"></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Google</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
+                  </div>
+                  <div class="card-body">Organize the world’s information and make it universally accessible and useful.</div>
+                  <div class="card-image"><img class="img-responsive" src="../img/osx-yosemite-2.jpg" alt="OS X Yosemite"></div>
+                  <div class="card-footer"><a class="btn btn-primary" href="#cards">Search</a><a class="btn btn-link" href="#cards">Share</a></div>
+                </div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>card</code> class.
+              And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes.
+              The <code>card-image</code> can be placed in any position.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-image"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive"</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-title h5"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-subtitle text-gray"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>&gt;</span>
+    ...
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/chips.html b/public/css/spectre-0.5.8/docs/components/chips.html
new file mode 100644
index 0000000..fd08136
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/chips.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Chips - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/chips.html">
+    <meta property="og:title" content="Chips - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/chips.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="chips">
+            <h3 class="s-title">Chips<a class="anchor" href="#chips" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Chips are complex entities in small blocks.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
+              <div class="column col-12">
+                <div class="chip">
+                  <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
+                </div>
+                <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Thor Odinson">Thor Odinson</div>
+                <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Steve Rogers">Steve Rogers</div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>chip</code> class.
+              And add child text element, buttons or avatars with the <code>avatar</code> class.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>Crime<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>
+  Biography
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-sm"</span>&gt;</span>
+  Yan Zhu
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/empty.html b/public/css/spectre-0.5.8/docs/components/empty.html
new file mode 100644
index 0000000..505edac
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/empty.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Empty states - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/empty.html">
+    <meta property="og:title" content="Empty states - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/empty.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="empty">
+            <h3 class="s-title">Empty states<a class="anchor" href="#empty" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="empty">
+                  <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
+                  <p class="empty-title h5">You have no new messages</p>
+                  <p class="empty-subtitle">Click the button to start a conversation</p>
+                  <div class="empty-action">
+                    <button class="btn btn-primary">Send a message</button>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-12">
+                <div class="empty">
+                  <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
+                  <p class="empty-title h5">You've successfully signed up</p>
+                  <p class="empty-subtitle">Click the button to invite your friends</p>
+                  <div class="empty-action">
+                    <button class="btn btn-primary">Invite your friends</button>
+                  </div>
+                  <div class="empty-action">
+                    <button class="btn btn-link">Skip</button>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-12">
+                <div class="empty">
+                  <div class="empty-icon"><i class="icon icon-3x icon-people"></i></div>
+                  <p class="empty-title h5">You are not following anyone</p>
+                  <p class="empty-subtitle">Start to meet new friends</p>
+                  <div class="empty-action input-group input-inline">
+                    <input class="form-input" type="text" placeholder="">
+                    <button class="btn btn-primary input-group-btn">Search</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>
+              An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+              Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements.
+              HTML structure is exampled below.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-icon"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-people"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-title h5"</span>&gt;</span>You have no new messages<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-subtitle"</span>&gt;</span>Click the button to start a conversation.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-action"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Send a message<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/menu.html b/public/css/spectre-0.5.8/docs/components/menu.html
new file mode 100644
index 0000000..9607923
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/menu.html
@@ -0,0 +1,414 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Menu - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/menu.html">
+    <meta property="og:title" content="Menu - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/menu.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="menu">
+            <h3 class="s-title">Menu<a class="anchor" href="#menu" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Menus are vertical list of links or buttons for actions and navigation.</p>
+            <div class="docs-demo columns">
+              <div class="column col-4 col-xs-12">
+                <ul class="menu">
+                  <li class="menu-item">
+                    <div class="tile tile-centered">
+                      <div class="tile-icon"><img class="avatar" src="../img/avatar-4.png" alt="Avatar"></div>
+                      <div class="tile-content">Steve Rogers</div>
+                    </div>
+                  </li>
+                  <li class="divider"></li>
+                  <li class="menu-item"><a class="active" href="#menus">My profile</a>
+                    <div class="menu-badge">
+                      <label class="form-checkbox">
+                        <input type="checkbox"><i class="form-icon"></i>Public
+                      </label>
+                    </div>
+                  </li>
+                  <li class="menu-item"><a href="#menus">Settings</a>
+                    <div class="menu-badge">
+                      <label class="label label-primary">2</label>
+                    </div>
+                  </li>
+                  <li class="menu-item"><a href="#menus">Logout</a></li>
+                </ul>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <ul class="menu">
+                  <li class="divider" data-content="LINKS"></li>
+                  <li class="menu-item"><a href="#menus">Slack</a></li>
+                  <li class="menu-item"><a href="#menus">Hipchat</a></li>
+                  <li class="menu-item"><a href="#menus">Skype</a></li>
+                </ul>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <ul class="menu">
+                  <li class="menu-item">
+                    <label class="form-checkbox">
+                      <input type="checkbox" checked=""><i class="form-icon"></i> form-checkbox
+                    </label>
+                  </li>
+                  <li class="menu-item">
+                    <label class="form-radio">
+                      <input type="radio" checked=""><i class="form-icon"></i> form-radio
+                    </label>
+                  </li>
+                  <li class="menu-item">
+                    <label class="form-switch">
+                      <input type="checkbox" checked=""><i class="form-icon"></i> form-switch
+                    </label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <p>Add a container element with the <code>menu</code> class.
+              And add child elements with the <code>menu-item</code> class.
+              You can separate menu items with a <code>divider</code>.
+              Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+            </p>
+            <p>Menus also have <a href="../elements/forms.html" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- menu header text --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"LINKS"</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- menu item standard --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Slack
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- menu item with form control --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> form-checkbox
+    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- menu divider --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- menu item with badge --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Settings
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>My profile<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Public
+      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+  </code></pre>
+            <h4 class="s-subtitle" id="menu-dropdown">Dropdown menu<a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a></h4>
+            <p>The dropdown is a combination of buttons and menus.</p>
+            <div class="docs-demo columns">
+              <div class="column col-xs-12">
+                <div class="dropdown">
+                  <div class="btn-group"><a class="btn btn-primary">dropdown button</a><a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a>
+                    <ul class="menu">
+                      <li class="menu-item"><a href="#dropdowns">Slack</a></li>
+                      <li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
+                      <li class="menu-item"><a href="#dropdowns">Skype</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-xs-12">
+                <div class="dropdown"><a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
+                  <ul class="menu">
+                    <li class="menu-item"><a href="#dropdowns">Slack</a></li>
+                    <li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
+                    <li class="menu-item"><a href="#dropdowns">Skype</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
+            <p>Add a container element with the <code>dropdown</code> class.
+              And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it.
+              You also need to add <code>tabindex</code> to make the buttons focusable.
+            </p>
+            <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
+            <div class="docs-demo columns">
+              <div class="column col-xs-12 text-right">
+                <div class="dropdown dropdown-right"><a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
+                  <ul class="menu text-left">
+                    <li class="menu-item"><a href="#dropdowns">Slack</a></li>
+                    <li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
+                    <li class="menu-item"><a href="#dropdowns">Skype</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- basic dropdown button --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>&gt;</span>
+    dropdown menu <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- menu component --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
+    ...
+  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- dropdown button group --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>
+      dropdown button
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+    <span class="hljs-comment">&lt;!-- menu component --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
+      ...
+    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/modals.html b/public/css/spectre-0.5.8/docs/components/modals.html
new file mode 100644
index 0000000..70ebddd
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/modals.html
@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Modals - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/modals.html">
+    <meta property="og:title" content="Modals - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/modals.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="modals">
+            <h3 class="s-title">Modals<a class="anchor" href="#modals" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Modals are flexible dialog prompts.</p>
+            <div class="docs-demo columns">
+              <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a>
+                <div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a>
+                  <div class="modal-container" role="document">
+                    <div class="modal-header"><a class="btn btn-clear float-right" href="#modals" aria-label="Close"></a>
+                      <div class="modal-title h5">Modal title</div>
+                    </div>
+                    <div class="modal-body">
+                      <div class="content">
+                        <p>This is the content inside the modal.</p>
+                        <h4>Lorem ipsum</h4>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+                        <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
+                        <h4>Cupcake ipsum</h4>
+                        <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
+                        <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
+                        <h4>Candy ipsum</h4>
+                        <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
+                        <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+                      </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals">Close</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>modal</code> class.
+              And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it.
+              You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them.
+            </p>
+            <p>
+              Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+              To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-id"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>&gt;</span>Modal title<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>&gt;</span>
+        <span class="hljs-comment">&lt;!-- content here --&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>&gt;</span>
+      ...
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="modals-sizes">Modal sizes<a class="anchor" href="#modals-sizes" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a>
+                <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
+                  <div class="modal-container" role="document">
+                    <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
+                      <div class="modal-title h5">Modal title</div>
+                    </div>
+                    <div class="modal-body">
+                      <div class="content">
+                        <form>
+                          <div class="form-group">
+                            <label class="form-label" for="input-example-7">Name</label>
+                            <input class="form-input" id="input-example-7" type="text" placeholder="Name">
+                          </div>
+                          <div class="form-group">
+                            <label class="form-label">Gender</label>
+                            <label class="form-radio">
+                              <input type="radio" name="gender"><i class="form-icon"></i> Male
+                            </label>
+                            <label class="form-radio">
+                              <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
+                            </label>
+                          </div>
+                        </form>
+                      </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button class="btn btn-primary">Submit</button><a class="btn btn-link" href="#modals-sizes" aria-label="Close">Close</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Use the <code>modal-sm</code> class for a smaller modal dialog.
+              The container max width is <code>320px</code>.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a>
+                <div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
+                  <div class="modal-container" role="document">
+                    <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
+                      <div class="modal-title h5">Modal title</div>
+                    </div>
+                    <div class="modal-body">
+                      <div class="content">
+                        <p>This is the content inside the modal.</p>
+                        <h4>Lorem ipsum</h4>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+                        <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
+                        <h4>Cupcake ipsum</h4>
+                        <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
+                        <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
+                        <h4>Candy ipsum</h4>
+                        <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
+                        <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+                      </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals-sizes">Close</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Use the <code>modal-lg</code> class for a full size modal.
+              The container max width is <code>960px</code>.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal modal-sm"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- modal structure here --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/nav.html b/public/css/spectre-0.5.8/docs/components/nav.html
new file mode 100644
index 0000000..2b4b08c
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/nav.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Nav - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/nav.html">
+    <meta property="og:title" content="Nav - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/nav.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="nav">
+            <h3 class="s-title">Nav<a class="anchor" href="#nav" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <ul class="nav">
+                  <li class="nav-item"><a href="#nav">Elements</a></li>
+                  <li class="nav-item active"><a href="#nav">Layout</a>
+                    <ul class="nav">
+                      <li class="nav-item"><a href="#nav">Flexbox grid</a></li>
+                      <li class="nav-item"><a href="#nav">Responsive</a></li>
+                      <li class="nav-item"><a href="#nav">Navbar</a></li>
+                      <li class="nav-item"><a href="#nav">Empty states</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item"><a href="#nav">Components</a></li>
+                  <li class="nav-item"><a href="#nav">Utilities</a></li>
+                </ul>
+              </div>
+            </div>
+            <p>Add a container element with the <code>nav</code> class.
+              And add child elements with the <code>nav-item</code> class.
+              The <code>nav-item</code> with the <code>active</code> class will be highlighted.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Elements<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Layout<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Flexbox grid<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Responsive<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Navbar<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Empty states<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Components<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Utilities<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/pagination.html b/public/css/spectre-0.5.8/docs/components/pagination.html
new file mode 100644
index 0000000..e839929
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/pagination.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Pagination - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/pagination.html">
+    <meta property="og:title" content="Pagination - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/pagination.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="pagination">
+            <h3 class="s-title">Pagination<a class="anchor" href="#pagination" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <div class="docs-demo columns">
+              <div class="column col-xs-12">
+                <ul class="pagination">
+                  <li class="page-item"><a href="#pagination">Prev</a></li>
+                  <li class="page-item"><a href="#pagination">1</a></li>
+                  <li class="page-item"><span>...</span></li>
+                  <li class="page-item"><a href="#pagination">4</a></li>
+                  <li class="page-item active"><a href="#pagination">5</a></li>
+                  <li class="page-item"><a href="#pagination">6</a></li>
+                  <li class="page-item"><span>...</span></li>
+                  <li class="page-item"><a href="#pagination">9</a></li>
+                  <li class="page-item"><a href="#pagination">Next</a></li>
+                </ul>
+              </div>
+              <div class="column col-xs-12">
+                <ul class="pagination">
+                  <li class="page-item disabled"><a href="#pagination" tabindex="-1">Prev</a></li>
+                  <li class="page-item active"><a href="#pagination">1</a></li>
+                  <li class="page-item"><a href="#pagination">2</a></li>
+                  <li class="page-item"><a href="#pagination">3</a></li>
+                  <li class="page-item"><span>...</span></li>
+                  <li class="page-item"><a href="#pagination">9</a></li>
+                  <li class="page-item"><a href="#pagination">Next</a></li>
+                </ul>
+              </div>
+            </div>
+            <p>Add a container element with the <code>pagination</code> class.
+              And add child elements with the <code>page-item</code> class.
+              The <code>page-item</code> with the <code>active</code> class will be highlighted.
+              You can add the <code>disabled</code> class to the <code>page-item</code> to have unclickable page links.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item disabled"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item active"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>12<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <ul class="pagination">
+                  <li class="page-item page-prev"><a href="#pagination">
+                      <div class="page-item-subtitle">Previous</div>
+                      <div class="page-item-title h5">Getting started</div></a></li>
+                  <li class="page-item page-next"><a href="#pagination">
+                      <div class="page-item-subtitle">Next</div>
+                      <div class="page-item-title h5">Layout</div></a></li>
+                </ul>
+              </div>
+            </div>
+            <p>You could use previous and next pagination to navigate. </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-prev"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>&gt;</span>Getting started<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-next"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>&gt;</span>Layout<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/panels.html b/public/css/spectre-0.5.8/docs/components/panels.html
new file mode 100644
index 0000000..83bceb8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/panels.html
@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Panels - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/panels.html">
+    <meta property="og:title" content="Panels - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/panels.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="panels">
+            <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Panels are flexible view container with auto-expand content section.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="panel">
+                  <div class="panel-header text-center">
+                    <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"></figure>
+                    <div class="panel-title h5 mt-10">Bruce Banner</div>
+                    <div class="panel-subtitle">THE HULK</div>
+                  </div>
+                  <nav class="panel-nav">
+                    <ul class="tab tab-block">
+                      <li class="tab-item active"><a href="#panels">Profile</a></li>
+                      <li class="tab-item"><a href="#panels">Files</a></li>
+                      <li class="tab-item"><a href="#panels">Tasks</a></li>
+                    </ul>
+                  </nav>
+                  <div class="panel-body">
+                    <div class="tile tile-centered">
+                      <div class="tile-content">
+                        <div class="tile-title text-bold">E-mail</div>
+                        <div class="tile-subtitle">bruce.banner@hulk.com</div>
+                      </div>
+                      <div class="tile-action">
+                        <button class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Edit E-mail"><i class="icon icon-edit"></i></button>
+                      </div>
+                    </div>
+                    <div class="tile tile-centered">
+                      <div class="tile-content">
+                        <div class="tile-title text-bold">Skype</div>
+                        <div class="tile-subtitle">bruce.banner</div>
+                      </div>
+                      <div class="tile-action">
+                        <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+                      </div>
+                    </div>
+                    <div class="tile tile-centered">
+                      <div class="tile-content">
+                        <div class="tile-title text-bold">Location</div>
+                        <div class="tile-subtitle">Dayton, Ohio</div>
+                      </div>
+                      <div class="tile-action">
+                        <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="panel-footer">
+                    <button class="btn btn-primary btn-block">Save</button>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="panel">
+                  <div class="panel-header">
+                    <div class="panel-title h6">Comments</div>
+                  </div>
+                  <div class="panel-body">
+                    <div class="tile">
+                      <div class="tile-icon">
+                        <figure class="avatar"><img src="../img/avatar-1.png" alt="Avatar"></figure>
+                      </div>
+                      <div class="tile-content">
+                        <p class="tile-title text-bold">Thor Odinson</p>
+                        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      </div>
+                    </div>
+                    <div class="tile">
+                      <div class="tile-icon">
+                        <figure class="avatar"><img src="../img/avatar-2.png" alt="Avatar"></figure>
+                      </div>
+                      <div class="tile-content">
+                        <p class="tile-title text-bold">Bruce Banner</p>
+                        <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                      </div>
+                    </div>
+                    <div class="tile">
+                      <div class="tile-icon">
+                        <figure class="avatar" data-initial="TS"></figure>
+                      </div>
+                      <div class="tile-content">
+                        <p class="tile-title text-bold">Tony Stark</p>
+                        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      </div>
+                    </div>
+                    <div class="tile">
+                      <div class="tile-icon">
+                        <figure class="avatar"><img src="../img/avatar-4.png" alt="Avatar"></figure>
+                      </div>
+                      <div class="tile-content">
+                        <p class="tile-title text-bold">Steve Rogers</p>
+                        <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                      </div>
+                    </div>
+                    <div class="tile">
+                      <div class="tile-icon">
+                        <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure>
+                      </div>
+                      <div class="tile-content">
+                        <p class="tile-title text-bold">Natasha Romanoff</p>
+                        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="panel-footer">
+                    <div class="input-group">
+                      <input class="form-input" type="text" placeholder="Hello">
+                      <button class="btn btn-primary input-group-btn">Send</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>panel</code> class.
+              And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> classes.
+              The <code>panel-body</code> can be auto expanded and vertically scrollable.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>&gt;</span>Comments<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-body"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- contents --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-footer"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- buttons or inputs --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/popovers.html b/public/css/spectre-0.5.8/docs/components/popovers.html
new file mode 100644
index 0000000..73af0f7
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/popovers.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Popovers - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/popovers.html">
+    <meta property="og:title" content="Popovers - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/popovers.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="popovers">
+            <h3 class="s-title">Popovers<a class="anchor" href="#popovers" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-sm-6">
+                <div class="popover"><a class="btn btn-primary" href="#popovers">top popover</a>
+                  <div class="popover-container">
+                    <div class="card">
+                      <div class="card-header">
+                        <div class="card-title h5">Apple</div>
+                        <div class="card-subtitle text-gray">Software and hardware</div>
+                      </div>
+                      <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+                      <div class="card-footer">
+                        <button class="btn btn-primary">Buy</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-3 col-sm-6">
+                <div class="popover popover-right"><a class="btn btn-primary" href="#popovers">right popover</a>
+                  <div class="popover-container">
+                    <div class="card">
+                      <div class="card-header">
+                        <div class="card-title h5">Apple</div>
+                        <div class="card-subtitle text-gray">Software and hardware</div>
+                      </div>
+                      <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+                      <div class="card-footer">
+                        <button class="btn btn-primary">Buy</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-3 col-sm-6">
+                <div class="popover popover-bottom"><a class="btn btn-primary" href="#popovers">bottom popover</a>
+                  <div class="popover-container">
+                    <div class="card">
+                      <div class="card-header">
+                        <div class="card-title h5">Apple</div>
+                        <div class="card-subtitle text-gray">Software and hardware</div>
+                      </div>
+                      <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+                      <div class="card-footer">
+                        <button class="btn btn-primary">Buy</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-3 col-sm-6">
+                <div class="popover popover-left"><a class="btn btn-primary" href="#popovers">left popover</a>
+                  <div class="popover-container">
+                    <div class="card">
+                      <div class="card-header">
+                        <div class="card-title h5">Apple</div>
+                        <div class="card-subtitle text-gray">Software and hardware</div>
+                      </div>
+                      <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+                      <div class="card-footer">
+                        <button class="btn btn-primary">Buy</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Wrap an element by a container with the <code>popover</code> class.
+              And add a container with the <code>popover-container</code> next to the element.
+              You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>.
+            </p>
+            <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position.
+              By default, the popovers appear above the element.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover popover-right"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>right popover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover-container"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>&gt;</span>
+        ...
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>&gt;</span>
+        ...
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>&gt;</span>
+        ...
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/steps.html b/public/css/spectre-0.5.8/docs/components/steps.html
new file mode 100644
index 0000000..7d6f443
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/steps.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Steps - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/steps.html">
+    <meta property="og:title" content="Steps - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/steps.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="steps">
+            <h3 class="s-title">Steps<a class="anchor" href="#steps" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Steps are progress indicators of a sequence of task steps.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <ul class="step">
+                  <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip"></a></li>
+                  <li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip"></a></li>
+                  <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip"></a></li>
+                  <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip"></a></li>
+                </ul>
+              </div>
+              <div class="column col-12">
+                <ul class="step">
+                  <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip">Step 1</a></li>
+                  <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip">Step 2</a></li>
+                  <li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip">Step 3</a></li>
+                  <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip">Step 4</a></li>
+                </ul>
+              </div>
+            </div>
+            <p>Add a container element with the <code>step</code> class.
+              And add child elements with the <code>step-item</code> class.
+              The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 1"</span>&gt;</span>Step 1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item active"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 2"</span>&gt;</span>Step 2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 3"</span>&gt;</span>Step 3<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 4"</span>&gt;</span>Step 4<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/tabs.html b/public/css/spectre-0.5.8/docs/components/tabs.html
new file mode 100644
index 0000000..7ca3590
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/tabs.html
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tabs - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/tabs.html">
+    <meta property="og:title" content="Tabs - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/tabs.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="tabs">
+            <h3 class="s-title">Tabs<a class="anchor" href="#tabs" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Tabs enable quick switch between different views.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-sm-12">
+                <ul class="tab">
+                  <li class="tab-item active"><a href="#tabs">Music</a></li>
+                  <li class="tab-item"><a href="#tabs">Playlists</a></li>
+                  <li class="tab-item"><a href="#tabs">Radio</a></li>
+                  <li class="tab-item"><a href="#tabs">Store</a></li>
+                </ul>
+              </div>
+              <div class="column col-6 col-sm-12">
+                <ul class="tab tab-block">
+                  <li class="tab-item active"><a href="#tabs">Music</a></li>
+                  <li class="tab-item"><a href="#tabs">Playlists</a></li>
+                  <li class="tab-item"><a href="#tabs">Radio</a></li>
+                </ul>
+              </div>
+            </div>
+            <p>Add a container element with the <code>tab</code> class. 
+              And add child elements with the <code>tab-item</code> class. 
+              You can add the <code>tab-block</code> class for a full-width tab.
+              The <code>tab-item</code> or its child &lt;a&gt; with the <code>active</code> class will be highlighted.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Music<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>&gt;</span>Playlists<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Radio<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Connect<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-sm-12">
+                <ul class="tab">
+                  <li class="tab-item active"><a class="badge" href="#tabs" data-badge="999">Music</a></li>
+                  <li class="tab-item"><a href="#tabs">Playlists</a></li>
+                  <li class="tab-item"><a href="#tabs">Radio</a></li>
+                </ul>
+              </div>
+              <div class="column col-sm-12">
+                <ul class="tab tab-block">
+                  <li class="tab-item active"><a class="badge" href="#tabs" data-badge="9">Music</a></li>
+                  <li class="tab-item"><a class="badge" href="#tabs" data-badge="99">Playlists</a></li>
+                  <li class="tab-item"><a href="#tabs">Radio</a></li>
+                </ul>
+              </div>
+            </div>
+            <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"9"</span>&gt;</span>
+      Music
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <ul class="tab">
+                  <li class="tab-item active"><a href="#tabs">Music<span class="btn btn-clear"></span></a></li>
+                  <li class="tab-item"><a href="#tabs">Playlists</a></li>
+                  <li class="tab-item"><a href="#tabs">Radio</a></li>
+                  <li class="tab-item"><a href="#tabs">Store</a></li>
+                  <li class="tab-item tab-action">
+                    <div class="input-group input-inline">
+                      <input class="form-input input-sm" type="text">
+                      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <p>
+              You could add a search box or buttons inside a tab.
+              Add the <code>tab-action</code> class to the <code>tab-item</code>.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+      Music
+    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item tab-action"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-sm"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm input-group-btn"</span>&gt;</span>Search<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/tiles.html b/public/css/spectre-0.5.8/docs/components/tiles.html
new file mode 100644
index 0000000..99bf7a9
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/tiles.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tiles - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/tiles.html">
+    <meta property="og:title" content="Tiles - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/tiles.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="tiles">
+            <h3 class="s-title">Tiles<a class="anchor" href="#tiles" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Tiles are repeatable or embeddable information blocks.</p>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <div class="tile">
+                  <div class="tile-icon">
+                    <figure class="avatar avatar-lg"><img src="../img/avatar-3.png" alt="Avatar"></figure>
+                  </div>
+                  <div class="tile-content">
+                    <p class="tile-title">The Avengers</p>
+                    <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                  </div>
+                  <div class="tile-action">
+                    <button class="btn btn-primary">Join</button>
+                    <button class="btn">Contact</button>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-9 col-sm-12">
+                <div class="tile">
+                  <div class="tile-icon">
+                    <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"></figure>
+                  </div>
+                  <div class="tile-content">
+                    <p class="tile-title">The S.H.I.E.L.D.</p>
+                    <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                    <p>
+                      <button class="btn btn-primary btn-sm">Join</button>
+                      <button class="btn btn-sm">Contact</button>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Add a container with the <code>tile</code> class.
+              And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes.
+              The <code>tile-icon</code> and <code>tile-action</code> are optional.
+            </p>
+            <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>&gt;</span>The Avengers<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle"</span>&gt;</span>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Join<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="tiles-compact">Compact tiles<a class="anchor" href="#tiles-compact" aria-hidden="true">#</a></h4>
+            <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
+            <p>Add the <code>tile-centered</code> class to the container <code>tile</code>.
+              The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-md-9 col-xs-12">
+                <div class="tile tile-centered">
+                  <div class="tile-icon">
+                    <div class="example-tile-icon"><i class="icon icon-mail centered"></i></div>
+                  </div>
+                  <div class="tile-content">
+                    <div class="tile-title">spectre-docs.pdf</div><small class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
+                  </div>
+                  <div class="tile-action">
+                    <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>&gt;</span>spectre-docs.pdf<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>&gt;</span>14MB · Public · 1 Jan, 2017<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-more-vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/toasts.html b/public/css/spectre-0.5.8/docs/components/toasts.html
new file mode 100644
index 0000000..1e177d8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/toasts.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Toasts - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/toasts.html">
+    <meta property="og:title" content="Toasts - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/toasts.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="toasts">
+            <h3 class="s-title">Toasts<a class="anchor" href="#toasts" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Toasts are used to show alert or information to users.</p>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <div class="toast">
+                  <button class="btn btn-clear float-right"></button>
+                  <h6>Toast Title</h6>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </div>
+              </div>
+              <div class="column col-9 col-sm-12">
+                <div class="toast toast-primary">
+                  <button class="btn btn-clear float-right"></button>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>toast</code> class.
+              You can add any text within the container, and even icons. 
+              You may also add a close button with the <code>btn-clear</code> class if you need.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast"</span>&gt;</span>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-sm-12">
+                <div class="toast toast-success">
+                  <button class="btn btn-clear float-right"></button>
+                  <p>Toast success</p>
+                </div>
+              </div>
+              <div class="column col-sm-12">
+                <div class="toast toast-warning">
+                  <button class="btn btn-clear float-right"></button>
+                  <p>Toast warning</p>
+                </div>
+              </div>
+              <div class="column col-sm-12">
+                <div class="toast toast-error">
+                  <button class="btn btn-clear float-right"></button>
+                  <p>Toast error</p>
+                </div>
+              </div>
+            </div>
+            <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast toast-primary"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/components/tooltips.html b/public/css/spectre-0.5.8/docs/components/tooltips.html
new file mode 100644
index 0000000..1a0612c
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/components/tooltips.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tooltips - Components - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/tooltips.html">
+    <meta property="og:title" content="Tooltips - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/components/tooltips.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="tooltips">
+            <h3 class="s-title">Tooltips<a class="anchor" href="#tooltips" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.</p>
+            <div class="docs-demo columns text-center">
+              <div class="column col-xs-12">
+                <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
+              </div>
+              <div class="column col-xs-12">
+                <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
+              </div>
+              <div class="column col-xs-12">
+                <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
+              </div>
+              <div class="column col-xs-12">
+                <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text
+Multiline">left tooltip</button>
+              </div>
+            </div>
+            <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements.</p>
+            <p>And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip.
+              By default, the tooltip appears above the element.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>&gt;</span>top tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip tooltip-right"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>&gt;</span>right tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="tooltips-multiline">Multiline tooltips<a class="anchor" href="#tooltips-multiline" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn btn-primary tooltip" data-tooltip="First Line Tooltip Text 
+ Second Line Tooltip Text 
+ Third Line Tooltip Text">multiline tooltip</button>
+              </div>
+            </div>
+            <p>Add the <code>\n</code> string between any text for multiline tooltips.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"First Line Tooltip Text \n Second Line Tooltip Text"</span>&gt;</span>multiline tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements.html b/public/css/spectre-0.5.8/docs/elements.html
new file mode 100644
index 0000000..8f41fde
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements.html">
+    <meta property="og:title" content="Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="elements">
+            <h3 class="s-title">Elements<a class="anchor" href="#elements" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p>
+               Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Typography</div>
+                  </div>
+                  <div class="card-body">Headings, paragraphs, semantic text, blockquote and lists elements</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/typography.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Tables</div>
+                  </div>
+                  <div class="card-body">Tables and data sets</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/tables.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Buttons</div>
+                  </div>
+                  <div class="card-body">Simple button styles for actions in different types and sizes</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/buttons.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Forms</div>
+                  </div>
+                  <div class="card-body">Input, textarea, select, checkbox, radio and switch</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/forms.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Icons</div>
+                  </div>
+                  <div class="card-body">Single-element, responsive and pure CSS icons</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/icons.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Labels</div>
+                  </div>
+                  <div class="card-body">Formatted text tags for highlighted, informative information</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/labels.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Code</div>
+                  </div>
+                  <div class="card-body">Inline and multiline code snippets</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/code.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Media</div>
+                  </div>
+                  <div class="card-body">Responsive images, figures and video</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="elements/media.html">View</a></div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/buttons.html b/public/css/spectre-0.5.8/docs/elements/buttons.html
new file mode 100644
index 0000000..35b259f
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/buttons.html
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Buttons - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Buttons include simple button styles for actions in different types and sizes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/buttons.html">
+    <meta property="og:title" content="Buttons - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Buttons include simple button styles for actions in different types and sizes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/buttons.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="buttons">
+            <h3 class="s-title">Buttons<a class="anchor" href="#buttons" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Buttons include simple button styles for actions in different types and sizes.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn">default button</button>
+                <button class="btn btn-primary">primary button</button>
+                <button class="btn btn-link">link button</button>
+              </div>
+            </div>
+            <p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. 
+              There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>default button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>primary button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>link button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="buttons-colors">Button colors<a class="anchor" href="#buttons-colors" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn btn-success">success button</button>
+                <button class="btn btn-error">error button</button>
+              </div>
+            </div>
+            <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color.
+              If you need more button colors, please use <a href="../getting-started/custom.html#variables-buttons">button mixins</a> to create your own button color variants.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-success"</span>&gt;</span>success button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>&gt;</span>error button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="buttons-sizes">Button sizes<a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button>
+                <button class="btn btn-primary btn-lg">large button</button>
+              </div>
+              <div class="column col-12">
+                <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button>
+                <button class="btn btn-primary">normal button</button>
+              </div>
+              <div class="column col-12">
+                <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button>
+                <button class="btn btn-primary btn-sm">small button</button>
+              </div>
+            </div>
+            <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. 
+              Also, you can add the <code>btn-block</code> class for a full-width button.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg"</span>&gt;</span>large button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm"</span>&gt;</span>small button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-block"</span>&gt;</span>block button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-lg"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> large<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> normal<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> small<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>s-circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p>
+            <div class="docs-demo columns">
+              <div class="column col-xs-12">
+                <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
+                <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
+                <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
+              </div>
+              <div class="column col-xs-12">
+                <button class="btn btn-action btn-primary btn-lg s-circle"><i class="icon icon-arrow-up"></i></button>
+                <button class="btn btn-action btn-primary s-circle"><i class="icon icon-arrow-up"></i></button>
+                <button class="btn btn-action btn-primary btn-sm s-circle"><i class="icon icon-arrow-up"></i></button>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action s-circle"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="buttons-states">Button states<a class="anchor" href="#buttons-states" aria-hidden="true">#</a></h4>
+            <p>Add the <code>active</code> class for active button state style.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn active">default active</button>
+                <button class="btn btn-primary active">primary active</button>
+                <button class="btn btn-link active">link active</button>
+              </div>
+            </div>
+            <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn disabled" tabindex="-1">default disabled</button>
+                <button class="btn btn-primary" disabled="" tabindex="-1">primary disabled</button>
+                <button class="btn btn-link" disabled="" tabindex="-1">link disabled</button>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- buttons with disabled state --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn disabled"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <p>A button with the <code>loading</code> class can show loading indicator.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn loading">default button</button>
+                <button class="btn btn-primary loading">primary button</button>
+                <button class="btn btn-link loading">link button</button>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- buttons with loading state --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn loading"</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>&gt;</span>primary button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="buttons-groups">Button groups<a class="anchor" href="#buttons-groups" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-md-12">
+                <div class="btn-group">
+                  <button class="btn">first button</button>
+                  <button class="btn">second button</button>
+                  <button class="btn">third button</button>
+                </div>
+              </div>
+              <div class="column col-6 col-md-12">
+                <div class="btn-group btn-group-block">
+                  <button class="btn btn-primary">first button</button>
+                  <button class="btn btn-primary">second button</button>
+                  <button class="btn btn-primary">third button</button>
+                </div>
+              </div>
+              <div class="column col-6 col-md-12">
+                <div class="btn-group">
+                  <button class="btn btn-sm active">first button</button>
+                  <button class="btn btn-sm">second button</button>
+                  <button class="btn btn-sm">third button</button>
+                </div>
+              </div>
+              <div class="column col-6 col-md-12">
+                <div class="btn-group btn-group-block">
+                  <button class="btn btn-primary btn-sm active">first button</button>
+                  <button class="btn btn-primary btn-sm">second button</button>
+                  <button class="btn btn-primary btn-sm">third button</button>
+                </div>
+              </div>
+            </div>
+            <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container.
+              You can add the <code>btn-group-block</code> class for a full-width button group.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group btn-group-block"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>first button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>second button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>third button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> 
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/code.html b/public/css/spectre-0.5.8/docs/elements/code.html
new file mode 100644
index 0000000..13727b1
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/code.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Code - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Code is used for styling inline and multiline code snippets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/code.html">
+    <meta property="og:title" content="Code - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Code is used for styling inline and multiline code snippets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/code.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="code">
+            <h3 class="s-title">Code<a class="anchor" href="#code" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Code is used for styling inline and multiline code snippets.</p>
+            <h4 class="s-subtitle" id="code-inline">Inline code<a class="anchor" href="#code-inline" aria-hidden="true">#</a></h4>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- inline code --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>code<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
+</code></pre>
+            <p>For inline code, you can use the &lt;code&gt; element. </p>
+            <h4 class="s-subtitle" id="code-snippet">Code snippet<a class="anchor" href="#code-snippet" aria-hidden="true">#</a></h4>
+            <p>For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it.
+              The <code>data-lang</code> attribute is rendered as the language name in the top right.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- code snippets --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>
+  Submit
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code"</span> <span class="hljs-attr">data-lang</span>=<span class="hljs-string">"HTML"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"com"</span>&gt;</span>&amp;lt;!-- code snippets --&amp;gt;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+&amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atn"</span>&gt;</span>class<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>=<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atv"</span>&gt;</span>&amp;quot;btn&amp;quot;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
+  Submit
+&amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>/button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
+<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/forms.html b/public/css/spectre-0.5.8/docs/elements/forms.html
new file mode 100644
index 0000000..5c89a51
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/forms.html
@@ -0,0 +1,989 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Forms - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/forms.html">
+    <meta property="og:title" content="Forms - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/forms.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="forms">
+            <h3 class="s-title">Forms<a class="anchor" href="#forms" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
+            <h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="form-group">
+                  <label class="form-label" for="input-example-1">Name</label>
+                  <input class="form-input" id="input-example-1" type="text" placeholder="Name">
+                </div>
+                <div class="form-group">
+                  <label class="form-label" for="input-example-2">Email</label>
+                  <input class="form-input" id="input-example-2" type="email" placeholder="Email">
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input control --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="form-group">
+                  <label class="form-label" for="input-example-3">Message</label>
+                  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form textarea control --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-3"</span>&gt;</span>Message<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="form-group">
+                  <select class="form-select">
+                    <option>Choose an option</option>
+                    <option>Slack</option>
+                    <option>Skype</option>
+                    <option>Hipchat</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <select class="form-select" multiple="">
+                    <option>Choose an option</option>
+                    <option>Slack</option>
+                    <option>Skype</option>
+                    <option>Hipchat</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form select control --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Choose an option<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Slack<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Skype<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Hipchat<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <form>
+                  <div class="form-group">
+                    <label class="form-label">Gender</label>
+                    <label class="form-radio">
+                      <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+                    </label>
+                    <label class="form-radio">
+                      <input type="radio" name="gender"><i class="form-icon"></i> Female
+                    </label>
+                  </div>
+                </form>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form radio control --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="form-group">
+                  <label class="form-switch">
+                    <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
+                  </label>
+                </div>
+                <div class="form-group">
+                  <label class="form-switch">
+                    <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
+                  </label>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form switch control --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Send me emails with news and tips
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="form-group">
+                  <label class="form-checkbox">
+                    <input type="checkbox"><i class="form-icon"></i> Remember me
+                  </label>
+                </div>
+                <div class="form-group">
+                  <label class="form-checkbox">
+                    <input type="checkbox" checked=""><i class="form-icon"></i> Remember me
+                  </label>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form checkbox control --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="form-group">
+                  <label class="form-checkbox">
+                    <input id="docs-demo-checkbox" type="checkbox"><i class="form-icon"></i> Select all
+                  </label>
+                </div>
+              </div>
+            </div>
+            <script>
+              document.getElementById("docs-demo-checkbox").indeterminate = true;
+              
+            </script>
+            <p>You can change checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code>.</p>
+            <h4 class="s-subtitle" id="forms-inline">Inline forms<a class="anchor" href="#forms-inline" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <form>
+                  <div class="form-group">
+                    <label class="form-radio form-inline">
+                      <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+                    </label>
+                    <label class="form-radio form-inline">
+                      <input type="radio" name="gender"><i class="form-icon"></i> Female
+                    </label>
+                  </div>
+                  <div class="form-group">
+                    <label class="form-checkbox form-inline">
+                      <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+                    </label>
+                    <label class="form-checkbox form-inline">
+                      <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+                    </label>
+                  </div>
+                </form>
+              </div>
+            </div>
+            <p>You can add the <code>form-inline</code> class to the form components to make them inline in one row.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Checkbox 1
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Checkbox 2
+  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4>
+            <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container.
+              And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <form class="form-horizontal" action="#forms">
+                  <div class="form-group">
+                    <div class="col-3 col-sm-12">
+                      <label class="form-label" for="input-example-4">Name</label>
+                    </div>
+                    <div class="col-9 col-sm-12">
+                      <input class="form-input" id="input-example-4" type="text" placeholder="Name">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3 col-sm-12">
+                      <label class="form-label" for="input-example-5">Email</label>
+                    </div>
+                    <div class="col-9 col-sm-12">
+                      <input class="form-input" id="input-example-5" type="email" placeholder="Email">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3 col-sm-12">
+                      <label class="form-label">Gender</label>
+                    </div>
+                    <div class="col-9 col-sm-12">
+                      <label class="form-radio">
+                        <input type="radio" name="gender"><i class="form-icon"></i> Male
+                      </label>
+                      <label class="form-radio">
+                        <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
+                      </label>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3 col-sm-12">
+                      <label class="form-label">Source</label>
+                    </div>
+                    <div class="col-9 col-sm-12">
+                      <select class="form-select" multiple="">
+                        <option>Slack</option>
+                        <option>Skype</option>
+                        <option>Hipchat</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-9 col-sm-12 col-ml-auto">
+                      <label class="form-switch">
+                        <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
+                      </label>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3 col-sm-12">
+                      <label class="form-label" for="input-example-6">Message</label>
+                    </div>
+                    <div class="col-9 col-sm-12">
+                      <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-9 col-sm-12 col-ml-auto">
+                      <label class="form-checkbox">
+                        <input type="checkbox"><i class="form-icon"></i> Remember me
+                      </label>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-9 col-sm-12"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- form structure --&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-sizes">Form sizes<a class="anchor" href="#forms-sizes" aria-hidden="true">#</a></h4>
+            <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
+            <div class="docs-demo columns">
+              <div class="column col-4 col-xs-12">
+                <label class="form-label label-sm">Label</label>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <input class="form-input input-sm" type="text" placeholder="Name">
+              </div>
+              <div class="column col-4 col-xs-12">
+                <select class="form-select select-sm">
+                  <option>Choose an option</option>
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <label class="form-label label-lg">Label</label>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <input class="form-input input-lg" type="text" placeholder="Name">
+              </div>
+              <div class="column col-4 col-xs-12">
+                <select class="form-select select-lg">
+                  <option>Choose an option</option>
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
+              </div>
+            </div>
+            <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p>
+            <h4 class="s-subtitle" id="forms-icons">Form icons<a class="anchor" href="#forms-icons" aria-hidden="true">#</a></h4>
+            <p>Spectre Forms components has <a href="icons.html">Spectre Icons</a> support.</p>
+            <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element.
+              And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-left">
+                  <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
+                  <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-left">
+                  <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-right">
+                  <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-right">
+                  <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-right">
+                  <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input with Spectre icon --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <p>You can use the <code>loading</code> class for loading or posting state.</p>
+            <div class="docs-demo columns">
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-right">
+                  <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-right">
+                  <input class="form-input" type="text" placeholder="Name"><i class="form-icon loading"></i>
+                </div>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <div class="has-icon-right">
+                  <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon loading"></i>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input with loading icon --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-input">Input types<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <form class="form-horizontal" action="#forms">
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-8">Email</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-8" type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-9">URL</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-9" type="url" placeholder="URL" value="https://github.com/picturepan2/spectre">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-10">Search</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-10" type="search" placeholder="Search">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-11">Tel</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-11" type="tel" placeholder="Tel" value="1-(888)-888-8888">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-12">Password</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-12" type="password" placeholder="Password" value="123456789">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-13">Number</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-13" type="number" placeholder="00" value="66">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-14">Date</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-14" type="date" value="2016-12-31">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-15">Color</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-15" type="color" value="#5755d9">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <div class="col-3">
+                      <label class="form-label" for="input-example-16">File</label>
+                    </div>
+                    <div class="col-9">
+                      <input class="form-input" id="input-example-16" type="file">
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="forms-input-groups">Input groups<a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="input-group">
+                  <input class="form-input input-sm" type="text" placeholder="username">
+                  <select class="form-select select-sm">
+                    <option>Slack</option>
+                    <option>Skype</option>
+                    <option>Hipchat</option>
+                  </select>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span>
+                  <input class="form-input input-sm" type="text" placeholder="site name">
+                  <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group">
+                  <input class="form-input" type="text" placeholder="username">
+                  <select class="form-select">
+                    <option>Slack</option>
+                    <option>Skype</option>
+                    <option>Hipchat</option>
+                  </select>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group"><span class="input-group-addon">slack.com/</span>
+                  <input class="form-input" type="text" placeholder="site name">
+                  <button class="btn btn-primary input-group-btn">Submit</button>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group">
+                  <label class="form-switch">
+                    <input type="checkbox"><i class="form-icon"></i>
+                  </label>
+                  <input class="form-input" type="text" placeholder="name">
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group">
+                  <label class="form-checkbox">
+                    <input type="checkbox"><i class="form-icon"></i>
+                  </label>
+                  <input class="form-input" type="text" placeholder="name">
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group">
+                  <input class="form-input input-lg" type="text" placeholder="username">
+                  <select class="form-select select-lg">
+                    <option>Slack</option>
+                    <option>Skype</option>
+                    <option>Hipchat</option>
+                  </select>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span>
+                  <input class="form-input input-lg" type="text" placeholder="site name">
+                  <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
+                </div>
+              </div>
+            </div>
+            <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container.
+              And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal input group --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- large input group --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon addon-lg"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-lg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- normal input group with button --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-validation">Form validation styles<a class="anchor" href="#forms-validation" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <fieldset>
+                  <legend>Input</legend>
+                  <div class="form-group">
+                    <label class="form-label" for="input-example-17">Name</label>
+                    <input class="form-input is-success" id="input-example-17" type="text" placeholder="Name">
+                    <p class="form-input-hint">The name is valid.</p>
+                  </div>
+                  <div class="form-group has-error">
+                    <label class="form-label" for="input-example-18">Password</label>
+                    <input class="form-input" id="input-example-18" type="password" placeholder="Password">
+                    <p class="form-input-hint">Passwords must have at least 8 characters.</p>
+                  </div>
+                </fieldset>
+                <fieldset>
+                  <legend>Select</legend>
+                  <div class="form-group">
+                    <select class="form-select is-error">
+                      <option>Choose an option</option>
+                      <option>Slack</option>
+                      <option>Skype</option>
+                      <option>Hipchat</option>
+                    </select>
+                    <p class="form-input-hint">The option is invalid.</p>
+                  </div>
+                  <div class="form-group has-success">
+                    <select class="form-select">
+                      <option>Choose an option</option>
+                      <option>Slack</option>
+                      <option>Skype</option>
+                      <option>Hipchat</option>
+                    </select>
+                    <p class="form-input-hint">The option is available.</p>
+                  </div>
+                </fieldset>
+                <fieldset>
+                  <legend>Checkbox, Radio and Switch (Error state only)</legend>
+                  <div class="form-group">
+                    <label class="form-checkbox is-error">
+                      <input type="checkbox" checked=""><i class="form-icon"></i> I'm not a robot.
+                    </label>
+                  </div>
+                  <div class="form-group has-error">
+                    <label class="form-radio">
+                      <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+                    </label>
+                    <label class="form-radio">
+                      <input type="radio" name="gender"><i class="form-icon"></i> Female
+                    </label>
+                  </div>
+                  <div class="form-group">
+                    <label class="form-switch is-error">
+                      <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
+                    </label>
+                  </div>
+                </fieldset>
+              </div>
+            </div>
+            <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements.
+              Use the <code>form-input-hint</code> class to provide form validation success and error messages.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- form validation class: has-success --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>&gt;</span>The name is invalid.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-comment">&lt;!-- form validation class: is-success --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input is-success"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>&gt;</span>The name is invalid.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-comment">&lt;!-- form validation example for checkbox, radio and switch --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox is-error"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
+    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <div class="form-group">
+                  <label class="form-label" for="input-example-21">Email</label>
+                  <input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,14}$">
+                </div>
+                <div class="form-group">
+                  <label class="form-label" for="input-example-22">Password</label>
+                  <input class="form-input" id="input-example-22" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
+                </div>
+              </div>
+            </div>
+            <p>You can use input <code>pattern</code> attribute to validate the value as well.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- pattern validation example for Email --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="forms-disabled">Form disabled styles<a class="anchor" href="#forms-disabled" aria-hidden="true">#</a></h4>
+            <p>
+               Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <form action="#forms">
+                  <fieldset disabled="">
+                    <div class="form-group">
+                      <label class="form-label" for="input-example-19">Name</label>
+                      <input class="form-input" id="input-example-19" type="text" placeholder="Name">
+                    </div>
+                    <div class="form-group">
+                      <label class="form-label">Gender</label>
+                      <label class="form-radio">
+                        <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Male
+                      </label>
+                      <label class="form-radio">
+                        <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Female
+                      </label>
+                    </div>
+                    <div class="form-group">
+                      <select class="form-select" disabled="">
+                        <option>Choose an option</option>
+                        <option>Slack</option>
+                        <option>Skype</option>
+                        <option>Hipchat</option>
+                      </select>
+                    </div>
+                    <div class="form-group">
+                      <label class="form-switch">
+                        <input type="checkbox" disabled=""><i class="form-icon"></i> Send me emails with news and tips
+                      </label>
+                    </div>
+                    <div class="form-group">
+                      <label class="form-label" for="input-example-20">Message</label>
+                      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled=""></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label class="form-checkbox">
+                        <input type="checkbox" disabled=""><i class="form-icon"></i> Remember me
+                      </label>
+                    </div>
+                  </fieldset>
+                </form>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#forms"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">disabled</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-19"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-19"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
+      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
+      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span> <span class="hljs-attr">disabled</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Choose an option<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Slack<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Skype<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Hipchat<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Send me emails with news and tips
+      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-20"</span>&gt;</span>Message<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-20"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
+      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/icons.html b/public/css/spectre-0.5.8/docs/elements/icons.html
new file mode 100644
index 0000000..d456221
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/icons.html
@@ -0,0 +1,441 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Icons - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/icons.html">
+    <meta property="og:title" content="Icons - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/icons.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="icons">
+            <h3 class="s-title">Icons.css<a class="anchor" href="#icons" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="toast toast-primary">Spectre.css Icons will be moved to a new <a href="https://github.com/picturepan2/icons.css" target="_blank">GitHub Repo</a> while Spectre will only include basic icons.</div>
+              </div>
+            </div>
+            <p>
+              Icons.css are single-element, responsive and pure CSS icons.
+              You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.
+            </p>
+            <h4 class="s-subtitle" id="icons-navigation">Navigation icons<a class="anchor" href="#icons-navigation" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-up"></i></button>
+                <p>icon-arrow-up</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-right"></i></button>
+                <p>icon-arrow-right</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-down"></i></button>
+                <p>icon-arrow-down</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-left"></i></button>
+                <p>icon-arrow-left</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upward"></i></button>
+                <p>icon-upward</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-forward"></i></button>
+                <p>icon-forward</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-downward"></i></button>
+                <p>icon-downward</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-back"></i></button>
+                <p>icon-back</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-caret"></i></button>
+                <p>icon-caret</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-menu"></i></button>
+                <p>icon-menu</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-apps"></i></button>
+                <p>icon-apps</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-more-horiz"></i></button>
+                <p>icon-more-horiz</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-more-vert"></i></button>
+                <p>icon-more-vert</p>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="icons-action">Action icons<a class="anchor" href="#icons-action" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-horiz"></i></button>
+                <p>icon-resize-horiz</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-vert"></i></button>
+                <p>icon-resize-vert</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-plus"></i></button>
+                <p>icon-plus</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-minus"></i></button>
+                <p>icon-minus</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-cross"></i></button>
+                <p>icon-cross</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-check"></i></button>
+                <p>icon-check</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-stop"></i></button>
+                <p>icon-stop</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-shutdown"></i></button>
+                <p>icon-shutdown</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-refresh"></i></button>
+                <p>icon-refresh</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-search"></i></button>
+                <p>icon-search</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-flag"></i></button>
+                <p>icon-flag</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-bookmark"></i></button>
+                <p>icon-bookmark</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-edit"></i></button>
+                <p>icon-edit</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-delete"></i></button>
+                <p>icon-delete</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-share"></i></button>
+                <p>icon-share</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-download"></i></button>
+                <p>icon-download</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upload"></i></button>
+                <p>icon-upload</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-copy"></i></button>
+                <p>icon-copy</p>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="icons-object">Object icons<a class="anchor" href="#icons-object" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-mail"></i></button>
+                <p>icon-mail</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-people"></i></button>
+                <p>icon-people</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-message"></i></button>
+                <p>icon-message</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-photo"></i></button>
+                <p>icon-photo</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-time"></i></button>
+                <p>icon-time</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-location"></i></button>
+                <p>icon-location</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-link"></i></button>
+                <p>icon-link</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-emoji"></i></button>
+                <p>icon-emoji</p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="icons-sizes">Icon sizes<a class="anchor" href="#icons-sizes" aria-hidden="true">#</a></h4>
+            <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes.
+              You can set <code>font-size</code> to have different icon sizes.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-md-6">
+                <p><i class="icon icon-2x icon-mail"></i></p>
+                <p>icon-2x (32px)</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <p><i class="icon icon-3x icon-mail"></i></p>
+                <p>icon-3x (48px)</p>
+              </div>
+              <div class="column col-3 col-md-6">
+                <p><i class="icon icon-4x icon-mail"></i></p>
+                <p>icon-4x (64px)</p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-2x icon-mail"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/labels.html b/public/css/spectre-0.5.8/docs/elements/labels.html
new file mode 100644
index 0000000..62425e9
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/labels.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Labels - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/labels.html">
+    <meta property="og:title" content="Labels - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/labels.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="labels">
+            <h3 class="s-title">Labels<a class="anchor" href="#labels" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Labels are formatted text tags for highlighted, informative information.</p>
+            <div class="docs-demo columns">
+              <div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div>
+            </div>
+            <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements.
+              You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal labels --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>default label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="labels-rounded">Rounded labels<a class="anchor" href="#labels-rounded" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div>
+            </div>
+            <p>Add the <code>label-rounded</code> class to have rounded labels.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded labels --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/media.html b/public/css/spectre-0.5.8/docs/elements/media.html
new file mode 100644
index 0000000..0f7259f
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/media.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Media - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Media includes responsive images, figures and video classes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/media.html">
+    <meta property="og:title" content="Media - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Media includes responsive images, figures and video classes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/media.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="media">
+            <h3 class="s-title">Media<a class="anchor" href="#media" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Media includes responsive images, figures and video classes.</p>
+            <h4 class="s-subtitle" id="media-images">Images<a class="anchor" href="#media-images" aria-hidden="true">#</a></h4>
+            <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12"><img class="img-responsive rounded" src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+</code></pre>
+            <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container).
+              This feature can replace the classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a>  with Build Number 16299+.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <figure class="figure"><img class="img-fit-contain rounded" src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
+                  <figcaption class="figure-caption text-center">img-fit-contain</figcaption>
+                </figure>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <figure class="figure"><img class="img-fit-cover rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
+                  <figcaption class="figure-caption text-center">img-fit-cover</figcaption>
+                </figure>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-contain ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-cover ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="media-figure">Figure<a class="anchor" href="#media-figure" aria-hidden="true">#</a></h4>
+            <p>You can use the element &lt;figure&gt; for an image with a caption.
+              Add the <code>figure</code> class to &lt;figure&gt; element.
+              The images with the <code>img-responsive</code> class will be responsive.
+              And the included class <code>figure-caption</code> will provide basic style for caption.
+              Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <figure class="figure"><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+                  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+                </figure>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure-caption text-center"</span>&gt;</span>macOS Yosemite wallpaper<span class="hljs-tag">&lt;/<span class="hljs-name">figcaption</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="media-video">Video<a class="anchor" href="#media-video" aria-hidden="true">#</a></h4>
+            <p>For responsive video, add a container with the <code>video-responsive</code> class. 
+              Insert any YouTube, Youku or other iframe/embed video inside the container. 
+              The ratio is 16:9 by default.
+              You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="video-responsive">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe>
+                </div>
+              </div>
+            </div>
+            <p>For responsive &lt;video&gt; elements, you can add the <code>video-responsive</code> class directly.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive video-responsive-4-3"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/tables.html b/public/css/spectre-0.5.8/docs/elements/tables.html
new file mode 100644
index 0000000..dc0c0eb
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/tables.html
@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tables - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/tables.html">
+    <meta property="og:title" content="Tables - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/tables.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="tables">
+            <h3 class="s-title">Tables<a class="anchor" href="#tables" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Tables include default styles for tables and data sets.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Genre</th>
+                      <th>Release date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>The Shawshank Redemption</td>
+                      <td>Crime, Drama</td>
+                      <td>14 October 1994</td>
+                    </tr>
+                    <tr>
+                      <td>The Godfather</td>
+                      <td>Crime, Drama</td>
+                      <td>24 March 1972</td>
+                    </tr>
+                    <tr>
+                      <td>Schindler's List</td>
+                      <td>Biography, Drama, History</td>
+                      <td>4 February 1994</td>
+                    </tr>
+                    <tr>
+                      <td>Se7en</td>
+                      <td>Crime, Drama, Mystery</td>
+                      <td>22 September 1995</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <p>Add the <code>table</code> class to any &lt;table&gt; element. 
+              The class will add padding, border and emphasized table header.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>genre<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>release date<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>The Shawshank Redemption<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Crime, Drama<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>14 October 1994<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="tables-striped">Striped tables<a class="anchor" href="#tables-striped" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <table class="table table-striped table-hover">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Genre</th>
+                      <th>Release date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>The Shawshank Redemption</td>
+                      <td>Crime, Drama</td>
+                      <td>14 October 1994</td>
+                    </tr>
+                    <tr>
+                      <td>The Godfather</td>
+                      <td>Crime, Drama</td>
+                      <td>24 March 1972</td>
+                    </tr>
+                    <tr>
+                      <td>Schindler's List</td>
+                      <td>Biography, Drama, History</td>
+                      <td>4 February 1994</td>
+                    </tr>
+                    <tr>
+                      <td>Se7en</td>
+                      <td>Crime, Drama, Mystery</td>
+                      <td>22 September 1995</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <p>Use the <code>table-striped</code> class to &lt;table&gt; to add zebra striped style.
+              For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style.
+            </p>
+            <p>Use the <code>active</code> class to make &lt;tr&gt; element highlighted.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-hover"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>genre<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>release date<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>The Shawshank Redemption<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Crime, Drama<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>14 October 1994<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="tables-scroll">Scrollable tables<a class="anchor" href="#tables-scroll" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <table class="table table-scroll">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Rating</th>
+                      <th>Duration</th>
+                      <th>Genre</th>
+                      <th>Release date</th>
+                      <th>Director</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>The Shawshank Redemption</td>
+                      <td>R</td>
+                      <td>2h 22min</td>
+                      <td>Crime, Drama</td>
+                      <td>14 October 1994</td>
+                      <td>Frank Darabont</td>
+                    </tr>
+                    <tr>
+                      <td>The Godfather</td>
+                      <td>R</td>
+                      <td>2h 55min</td>
+                      <td>Crime, Drama</td>
+                      <td>24 March 1972</td>
+                      <td>Francis Ford Coppola</td>
+                    </tr>
+                    <tr>
+                      <td>Schindler's List</td>
+                      <td>R</td>
+                      <td>3h 15min</td>
+                      <td>Biography, Drama, History</td>
+                      <td>4 February 1994</td>
+                      <td>Steven Spielberg</td>
+                    </tr>
+                    <tr>
+                      <td>Se7en</td>
+                      <td>R</td>
+                      <td>2h 7min</td>
+                      <td>Crime, Drama, Mystery</td>
+                      <td>22 September 1995</td>
+                      <td>David Fincher</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <p>Add the <code>table-scroll</code> class to &lt;table&gt; to have a horizontally scrollable table.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-scroll"</span>&gt;</span>
+  ...
+<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/elements/typography.html b/public/css/spectre-0.5.8/docs/elements/typography.html
new file mode 100644
index 0000000..4f71a35
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/elements/typography.html
@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Typography - Elements - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/typography.html">
+    <meta property="og:title" content="Typography - Elements - Spectre.css CSS Framework">
+    <meta property="og:description" content="Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/typography.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="typography">
+            <h3 class="s-title">Typography<a class="anchor" href="#typography" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
+            <h4 class="s-subtitle" id="typography-headings">Headings<a class="anchor" href="#typography-headings" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <h1>H1 Heading <small class="label">40px</small></h1>
+              </div>
+              <div class="column col-12">
+                <h2>H2 Heading <small class="label">32px</small></h2>
+              </div>
+              <div class="column col-12">
+                <h3>H3 Heading <small class="label">28px</small></h3>
+              </div>
+              <div class="column col-12">
+                <h4>H4 Heading <small class="label">24px</small></h4>
+              </div>
+              <div class="column col-12">
+                <h5>H5 Heading <small class="label">20px</small></h5>
+              </div>
+              <div class="column col-12">
+                <h6>H6 Heading <small class="label">16px</small></h6>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>H1 Heading<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>H1 Heading <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>40px<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h1"</span>&gt;</span>H1 Heading<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="typography-paragraphs">Paragraphs<a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a></h4>
+            <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit</a>.
+              Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            </p>
+            <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="typography-semantic-text">Semantic text elements<a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div>
+              <div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div>
+              <div class="column col-6 col-xs-12">
+                <cite>Citation</cite><code class="ml-2">cite</code>
+              </div>
+              <div class="column col-6 col-xs-12"><code>Hello World!</code><code class="ml-2">code</code></div>
+              <div class="column col-6 col-xs-12">
+                <del>Deleted</del><code class="ml-2">del</code>
+              </div>
+              <div class="column col-6 col-xs-12"><em>Emphasis</em><code class="ml-2">em</code></div>
+              <div class="column col-6 col-xs-12"><i>Italic</i><code class="ml-2">i</code></div>
+              <div class="column col-6 col-xs-12"><ins>Inserted</ins><code class="ml-2">ins</code></div>
+              <div class="column col-6 col-xs-12"><kbd>Ctrl + S</kbd><code class="ml-2">kbd</code></div>
+              <div class="column col-6 col-xs-12">
+                <mark>Highlighted</mark><code class="ml-2">mark</code>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <ruby>漢 
+                  <rt>kan</rt>字 
+                  <rt>ji</rt>
+                </ruby><code class="ml-2">ruby</code>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <s>Strikethrough</s><code class="ml-2">s</code>
+              </div>
+              <div class="column col-6 col-xs-12"><samp>Sample</samp><code class="ml-2">samp</code></div>
+              <div class="column col-6 col-xs-12">Text <sub>Subscripted</sub><code class="ml-2">sub</code></div>
+              <div class="column col-6 col-xs-12">Text <sup>Superscripted</sup><code class="ml-2">sup</code></div>
+              <div class="column col-6 col-xs-12">
+                <time>20:00</time><code class="ml-2">time</code>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <u>Underline</u><code class="ml-2">u</code>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <var>x</var> = 
+                <var>y</var> + 2<code class="ml-2">var</code>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="typography-east-asian">Optimized for East Asian fonts<a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column">
+                <p class="h5"><small class="lang-zh-hans">你好</small>, <small class="lang-ja">こんにちは</small>, <small class="lang-ko">안녕하세요</small></p>
+                <p class="h6">Chinese (Simplified)</p>
+                <p class="lang-zh-hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p>
+                <p class="h6">Chinese (Tranditional)</p>
+                <p class="lang-zh-hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p>
+                <p class="h6">Japanese</p>
+                <p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
+                <p class="h6">Korean</p>
+                <p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
+              </div>
+            </div>
+            <p>Add the <code>lang</code> attribute to the &lt;html&gt; element or use the class <code>lang-zh</code>, <code>lang-zh-hans</code>, <code>lang-zh-hant</code>, <code>lang-ja</code> or <code>lang-ko</code> to have better Asian CJK (Chinese, Japanese and Korean) font support.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-Hans"</span>&gt;</span>……<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-zh-hans"</span>&gt;</span>革命不是请客吃饭，不是做文章……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-ja"</span>&gt;</span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-ko"</span>&gt;</span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+</code></pre>
+            <p>And you can use the <code>lang-cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.</p>
+            <div class="docs-demo columns">
+              <div class="column">
+                <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p>
+                <p lang="ja">
+                  <del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
+                  
+                </p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-cjk"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>祇園<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>精舎<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>祇園<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>精舎<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="typography-fonts">Fonts<a class="anchor" href="#typography-fonts" aria-hidden="true">#</a></h4>
+            <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems.
+              There are also fonts targeted East Asian typography.
+            </p>
+            <pre class="code"><code><span class="hljs-comment">/* Western typography targeted */</span>
+<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
+<span class="hljs-comment">/* Monospace typography targeted */</span>
+<span class="hljs-attribute">font-family</span>: <span class="hljs-string">"SF Mono"</span>, <span class="hljs-string">"Segoe UI Mono"</span>, <span class="hljs-string">"Roboto Mono"</span>, Menlo, Courier, monospace;
+
+<span class="hljs-comment">/* Chinese (lang="zh" and lang="zh-Hans") targeted */</span>
+<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang SC"</span>, <span class="hljs-string">"Hiragino Sans GB"</span>, <span class="hljs-string">"Microsoft YaHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
+<span class="hljs-comment">/* Chinese (lang="zh-Hant") targeted */</span>
+<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang TC"</span>, <span class="hljs-string">"Hiragino Sans CNS"</span>, <span class="hljs-string">"Microsoft JhengHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
+<span class="hljs-comment">/* Japanese (lang="ja") targeted */</span>
+<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Hiragino Sans"</span>, <span class="hljs-string">"Hiragino Kaku Gothic Pro"</span>, <span class="hljs-string">"Yu Gothic"</span>, YuGothic, Meiryo, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
+<span class="hljs-comment">/* Korean (lang="ko") targeted */</span>
+<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Malgun Gothic"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
+</code></pre>
+            <h4 class="s-subtitle" id="typography-blockquote">Blockquote<a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a></h4>
+            <blockquote>
+              <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.</p>
+              <cite>- Bill Gates</cite>
+            </blockquote>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">cite</span>&gt;</span>- Bill Gates<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="typography-lists">Lists<a class="anchor" href="#typography-lists" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-4 col-xs-12">
+                <ul class="list">
+                  <li>list item 1</li>
+                  <li>list item 2
+                    <ul>
+                      <li>list item 2.1</li>
+                      <li>list item 2.2</li>
+                      <li>list item 2.3</li>
+                    </ul>
+                  </li>
+                  <li>list item 3</li>
+                </ul>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <ol class="list">
+                  <li>list item 1</li>
+                  <li>list item 2
+                    <ol>
+                      <li>list item 2.1</li>
+                      <li>list item 2.2</li>
+                      <li>list item 2.3</li>
+                    </ol>
+                  </li>
+                  <li>list item 3</li>
+                </ol>
+              </div>
+              <div class="column col-4 col-xs-12">
+                <dl class="list">
+                  <dt>description list term 1</dt>
+                  <dd>description list description 1</dd>
+                  <dt>description list term 2</dt>
+                  <dd>description list description 2</dd>
+                  <dt>description list term 3</dt>
+                  <dd>description list description 3</dd>
+                </dl>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- unordered list --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2
+    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2.1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2.2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2.3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- description list --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">dl</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>description list term<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>description list description<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/examples/starter.html b/public/css/spectre-0.5.8/docs/examples/starter.html
new file mode 100644
index 0000000..2b7c4ee
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/examples/starter.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Starter Page Example -  Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+  </head>
+  <body>
+    <div class="section bg-gray">
+      <H1>Starter Page Example</H1>
+    </div>
+    <div class="section section-ads bg-gray">
+      <div class="docs-ad docs-ad-sidebar text-center">
+        <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+      </div>
+    </div>
+    <footer class="section section-footer">
+      <div class="docs-footer container grid-lg" id="copyright">
+        <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+      </div>
+    </footer>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals.html b/public/css/spectre-0.5.8/docs/experimentals.html
new file mode 100644
index 0000000..e5913b1
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals.html">
+    <meta property="og:title" content="Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="experimentals">
+            <h3 class="s-title">Experimentals<a class="anchor" href="#experimentals" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>
+              The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
+              These elements and components are limited inside <code>spectre-exp.scss</code> before browsers fully support them.
+              Sometimes, there are some specific browsers targeted components.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">360-Degree Viewer</div>
+                  </div>
+                  <div class="card-body">Interactive 360-degree product photo viewer</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/autocomplete.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Autocomplete</div>
+                  </div>
+                  <div class="card-body">Form component provides suggestions while you type</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/autocomplete.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Calendars</div>
+                  </div>
+                  <div class="card-body">Date or date range picker and events display based on Flexbox</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/calendars.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Carousels</div>
+                  </div>
+                  <div class="card-body">Pure CSS slideshows for cycling images</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/carousels.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Comparison sliders</div>
+                  </div>
+                  <div class="card-body">Pure CSS sliders for comparing two images</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/comparison.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Filters</div>
+                  </div>
+                  <div class="card-body">CSS only content filters</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/filters.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Meters</div>
+                  </div>
+                  <div class="card-body">Representing the value within the known range</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/meters.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Off-canvas</div>
+                  </div>
+                  <div class="card-body">Navigation layout that sidebars can slide in and out of the viewport</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/off-canvas.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Parallax</div>
+                  </div>
+                  <div class="card-body">Pure CSS Apple TV/tvOS hover parallax effect</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/parallax.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Progress</div>
+                  </div>
+                  <div class="card-body">Indicating the progress completion of a task</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/progress.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Sliders</div>
+                  </div>
+                  <div class="card-body">Selecting values from ranges</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/sliders.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Timelines</div>
+                  </div>
+                  <div class="card-body">Ordered sequences of activities</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="experimentals/timelines.html">View</a></div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/autocomplete.html b/public/css/spectre-0.5.8/docs/experimentals/autocomplete.html
new file mode 100644
index 0000000..30bc7dc
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/autocomplete.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Autocomplete - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/autocomplete.html">
+    <meta property="og:title" content="Autocomplete - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/autocomplete.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="autocomplete">
+            <h3 class="s-title">Autocomplete<a class="anchor" href="#autocomplete" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-xs-12">
+                <div class="form-group">
+                  <div class="form-autocomplete">
+                    <div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span>
+                      <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Avatar">Thor Odinson</div>
+                      <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Avatar">Steve Rogers</div>
+                      <div class="chip">
+                        <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
+                      </div><span class="chip active">Natasha Romanoff</span>
+                      <input class="form-input" type="text" placeholder="">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-9 col-xs-12">
+                <div class="form-group">
+                  <div class="form-autocomplete">
+                    <div class="form-autocomplete-input form-input is-focused"><span class="chip">Bruce Banner<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Thor Odinson">Thor Odinson<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span>
+                      <div class="has-icon-left">
+                        <input class="form-input" type="text" placeholder="" value="S"><i class="form-icon loading"></i>
+                      </div>
+                    </div>
+                    <ul class="menu">
+                      <li class="menu-item"><a href="#autocomplete">
+                          <div class="tile tile-centered">
+                            <div class="tile-icon"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Steve Rogers"></div>
+                            <div class="tile-content">
+                              <mark>S</mark>teve Roger
+                              <mark>s</mark>
+                            </div>
+                          </div></a></li>
+                      <li class="menu-item"><a href="#autocomplete">
+                          <div class="tile tile-centered">
+                            <div class="tile-icon">
+                              <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
+                            </div>
+                            <div class="tile-content">Tony 
+                              <mark>S</mark>tark
+                            </div>
+                          </div></a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Add a container element with the <code>form-autocomplete</code> class.
+              There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component.
+              You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.
+            </p>
+            <p>
+              Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
+              The autocomplete HTML structure is exampled below.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-xs-12">
+                <div class="form-group">
+                  <div class="form-autocomplete autocomplete-oneline">
+                    <div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span>
+                      <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Avatar">Thor Odinson</div>
+                      <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Avatar">Steve Rogers</div>
+                      <div class="chip">
+                        <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
+                      </div><span class="chip active">Natasha Romanoff</span>
+                      <input class="form-input" type="text" placeholder="">
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-autocomplete"</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- autocomplete input container --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-autocomplete-input form-input"</span>&gt;</span>
+
+    <span class="hljs-comment">&lt;!-- autocomplete chips --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-sm"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Thor Odinson"</span>&gt;</span>
+      Thor Odinson
+      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+    <span class="hljs-comment">&lt;!-- autocomplete real input box --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"typing here"</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-comment">&lt;!-- autocomplete suggestion list --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- menu list items --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+            ...
+          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>&gt;</span>
+            ...
+          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/calendars.html b/public/css/spectre-0.5.8/docs/experimentals/calendars.html
new file mode 100644
index 0000000..19993a1
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/calendars.html
@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Calendars - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/calendars.html">
+    <meta property="og:title" content="Calendars - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/calendars.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="calendars">
+            <h3 class="s-title">Calendars<a class="anchor" href="#calendars" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
+            <div class="docs-demo columns">
+              <div class="column col-4 col-md-12">
+                <div class="calendar">
+                  <div class="calendar-nav navbar">
+                    <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button>
+                    <div class="navbar-primary">March 2017</div>
+                    <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button>
+                  </div>
+                  <div class="calendar-container">
+                    <div class="calendar-header">
+                      <div class="calendar-date">Sun</div>
+                      <div class="calendar-date">Mon</div>
+                      <div class="calendar-date">Tue</div>
+                      <div class="calendar-date">Wed</div>
+                      <div class="calendar-date">Thu</div>
+                      <div class="calendar-date">Fri</div>
+                      <div class="calendar-date">Sat</div>
+                    </div>
+                    <div class="calendar-body">
+                      <div class="calendar-date prev-month">
+                        <button class="date-item">26</button>
+                      </div>
+                      <div class="calendar-date prev-month">
+                        <button class="date-item">27</button>
+                      </div>
+                      <div class="calendar-date prev-month">
+                        <button class="date-item">28</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">1</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">2</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">3</button>
+                      </div>
+                      <div class="calendar-date tooltip" data-tooltip="Today">
+                        <button class="date-item date-today">4</button>
+                      </div>
+                      <div class="calendar-date tooltip" data-tooltip="Not available">
+                        <button class="date-item" disabled="">5</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">6</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">7</button>
+                      </div>
+                      <div class="calendar-date tooltip" data-tooltip="You have appointments">
+                        <button class="date-item badge">8</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">9</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">10</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">11</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">12</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">13</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">14</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">15</button>
+                      </div>
+                      <div class="calendar-date calendar-range range-start">
+                        <button class="date-item">16</button>
+                      </div>
+                      <div class="calendar-date calendar-range">
+                        <button class="date-item">17</button>
+                      </div>
+                      <div class="calendar-date calendar-range">
+                        <button class="date-item">18</button>
+                      </div>
+                      <div class="calendar-date calendar-range">
+                        <button class="date-item">19</button>
+                      </div>
+                      <div class="calendar-date calendar-range range-end">
+                        <button class="date-item">20</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">21</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">22</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">23</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">24</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">25</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">26</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">27</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">28</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">29</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">30</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">31</button>
+                      </div>
+                      <div class="calendar-date next-month">
+                        <button class="date-item">1</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar"</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- calendar navbar --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-nav navbar"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-primary"</span>&gt;</span>March 2017<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-header"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Sun<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Mon<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Tue<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Wed<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Thu<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Fri<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Sat<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- calendar previous month --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>26<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      ...
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>28<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+      <span class="hljs-comment">&lt;!-- calendar current month --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- calendar date: today --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item date-today"</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- calendar date: tooltip --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"You have appointments"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- calendar date: not available --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Not available"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">""</span>&gt;</span>6<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+      <span class="hljs-comment">&lt;!-- calendar range --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-start"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>7<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>8<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-end"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>9<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      ...
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>31<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+      <span class="hljs-comment">&lt;!-- calendar next month --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date next-month"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="calendars-sizes">Calendars sizes<a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="calendar calendar-lg">
+                  <div class="calendar-nav navbar">
+                    <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button>
+                    <div class="navbar-primary">March 2017</div>
+                    <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button>
+                  </div>
+                  <div class="calendar-container">
+                    <div class="calendar-header">
+                      <div class="calendar-date">Sun</div>
+                      <div class="calendar-date">Mon</div>
+                      <div class="calendar-date">Tue</div>
+                      <div class="calendar-date">Wed</div>
+                      <div class="calendar-date">Thu</div>
+                      <div class="calendar-date">Fri</div>
+                      <div class="calendar-date">Sat</div>
+                    </div>
+                    <div class="calendar-body">
+                      <div class="calendar-date prev-month">
+                        <button class="date-item">26</button>
+                      </div>
+                      <div class="calendar-date prev-month">
+                        <button class="date-item">27</button>
+                        <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a></div>
+                      </div>
+                      <div class="calendar-date prev-month">
+                        <button class="date-item">28</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">1</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">2</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">3</button>
+                      </div>
+                      <div class="calendar-date tooltip" data-tooltip="Today">
+                        <button class="date-item date-today">4</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item" disabled="">5</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">6</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">7</button>
+                      </div>
+                      <div class="calendar-date tooltip" data-tooltip="You have appointments">
+                        <button class="date-item badge">8</button>
+                        <div class="calendar-events"><a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a><a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a></div>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">9</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">10</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">11</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">12</button>
+                        <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a></div>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">13</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">14</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">15</button>
+                      </div>
+                      <div class="calendar-date calendar-range range-start">
+                        <button class="date-item">16</button>
+                      </div>
+                      <div class="calendar-date calendar-range">
+                        <button class="date-item">17</button>
+                      </div>
+                      <div class="calendar-date calendar-range">
+                        <button class="date-item">18</button>
+                      </div>
+                      <div class="calendar-date calendar-range">
+                        <button class="date-item">19</button>
+                      </div>
+                      <div class="calendar-date calendar-range range-end">
+                        <button class="date-item">20</button>
+                        <div class="calendar-events"><a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a></div>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">21</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">22</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">23</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">24</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">25</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">26</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">27</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">28</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">29</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">30</button>
+                      </div>
+                      <div class="calendar-date">
+                        <button class="date-item">31</button>
+                      </div>
+                      <div class="calendar-date next-month disabled">
+                        <button class="date-item">1</button>
+                        <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar calendar-lg"</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- calendar navbar structure --&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- calendar header structure --&gt;</span>
+
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- calendar date with events --&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item active"</span>&gt;</span>20<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-events"</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-event bg-success text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#calendars"</span>&gt;</span>Spring Equinox<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/carousels.html b/public/css/spectre-0.5.8/docs/experimentals/carousels.html
new file mode 100644
index 0000000..f8fe2f4
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/carousels.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Carousels - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/carousels.html">
+    <meta property="og:title" content="Carousels - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/carousels.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="carousels">
+            <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="carousel">
+                  <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
+                  <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
+                  <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
+                  <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
+                  <div class="carousel-container">
+                    <figure class="carousel-item">
+                      <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
+                      <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+                    </figure>
+                    <figure class="carousel-item">
+                      <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
+                      <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+                    </figure>
+                    <figure class="carousel-item">
+                      <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
+                      <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper">
+                    </figure>
+                    <figure class="carousel-item">
+                      <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
+                      <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-el-capitan-2.jpg" alt="macOS El Capitan Wallpaper">
+                    </figure>
+                  </div>
+                  <div class="carousel-nav">
+                    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+                    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+                    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+                    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>The default image number of Carousels is <code>8</code>. You can add more images by changing the variable <code>$carousel-number</code> in <code>_carousels.scss</code> and re-compiling the CSS.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel"</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- carousel locator --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>&gt;</span>
+  
+  <span class="hljs-comment">&lt;!-- carousel container --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-container"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- carousel item --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS El Capitan Wallpaper"</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS El Capitan Wallpaper"</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- carousel navigation --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-nav"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/comparison.html b/public/css/spectre-0.5.8/docs/experimentals/comparison.html
new file mode 100644
index 0000000..8c6b78f
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/comparison.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Comparison sliders - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/comparison.html">
+    <meta property="og:title" content="Comparison sliders - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/comparison.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="comparison">
+            <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="comparison-slider">
+                  <figure class="comparison-before"><img class="rounded" src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
+                    <div class="comparison-label">Before</div>
+                  </figure>
+                  <figure class="comparison-after"><img class="filter-grayscale rounded" src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
+                    <div class="comparison-label">After</div>
+                    <textarea class="comparison-resizer" readonly=""></textarea>
+                  </figure>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-slider"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-before"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- image (before) --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>&gt;</span>Before<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-after"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- image (after) --&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>&gt;</span>After<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-resizer"</span> <span class="hljs-attr">readonly</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/filters.html b/public/css/spectre-0.5.8/docs/experimentals/filters.html
new file mode 100644
index 0000000..3e609c2
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/filters.html
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Filters - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/filters.html">
+    <meta property="og:title" content="Filters - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/filters.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="filters">
+            <h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Filters are CSS only content filters.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="filter">
+                  <input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked="">
+                  <input class="filter-tag" id="tag-1" type="radio" name="filter-radio" hidden="">
+                  <input class="filter-tag" id="tag-2" type="radio" name="filter-radio" hidden="">
+                  <input class="filter-tag" id="tag-3" type="radio" name="filter-radio" hidden="">
+                  <input class="filter-tag" id="tag-4" type="radio" name="filter-radio" hidden="">
+                  <div class="filter-nav">
+                    <label class="chip" for="tag-0">All</label>
+                    <label class="chip" for="tag-1">Action</label>
+                    <label class="chip" for="tag-2">Roleplaying</label>
+                    <label class="chip" for="tag-3">Shooter</label>
+                    <label class="chip" for="tag-4">Sports</label>
+                  </div>
+                  <div class="filter-body columns">
+                    <div class="column col-4 filter-item" data-tag="tag-2">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Fallout 4</div>
+                          <div class="card-subtitle text-gray">Roleplaying</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-3">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Halo 5</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-1">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Quantum Break</div>
+                          <div class="card-subtitle text-gray">Action</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-4">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Forza Horizon 3</div>
+                          <div class="card-subtitle text-gray">Sports</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-2">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Final Fantasy XV</div>
+                          <div class="card-subtitle text-gray">Roleplaying</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-4">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">NBA 2K17</div>
+                          <div class="card-subtitle text-gray">Sports</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-3">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Battlefield 1</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-1">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">GTA V</div>
+                          <div class="card-subtitle text-gray">Action</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-4">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">FIFA 17</div>
+                          <div class="card-subtitle text-gray">Sports</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-3">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Overwatch</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-3">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Titanfall 2</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="column col-4 filter-item" data-tag="tag-3">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="card-title text-bold">Gears of Wars 4</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags.
+              <code>tag-0</code> is reserved for clearing filter (or showing all). 
+              You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span> <span class="hljs-attr">checked</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-nav"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-0"</span>&gt;</span>All<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-1"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-2"</span>&gt;</span>Roleplaying<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-body"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-item card"</span> <span class="hljs-attr">data-tag</span>=<span class="hljs-string">"tag-1"</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- Filter item content --&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-item card"</span> <span class="hljs-attr">data-tag</span>=<span class="hljs-string">"tag-2"</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- Filter item content --&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- Filter items --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/meters.html b/public/css/spectre-0.5.8/docs/experimentals/meters.html
new file mode 100644
index 0000000..3d65885
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/meters.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Meters - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/meters.html">
+    <meta property="og:title" content="Meters - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/meters.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="meters">
+            <h3 class="s-title">Meters<a class="anchor" href="#meters" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Meters represent the value within the known range.</p>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-xs-12">
+                <meter class="meter" value="20" min="0" max="100"></meter>
+              </div>
+              <div class="column col-3 col-xs-12">
+                <meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter>
+              </div>
+              <div class="column col-3 col-xs-12">
+                <meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter>
+              </div>
+              <div class="column col-3 col-xs-12">
+                <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Meter is green when low &lt; value &lt; high --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"60"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Meter is yellow when value &lt; low  or high &lt; value --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"85"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Meter is red when value &lt; low &lt; high &lt; optimum or optimum &lt; low &lt; high &lt; value --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"90"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/off-canvas.html b/public/css/spectre-0.5.8/docs/experimentals/off-canvas.html
new file mode 100644
index 0000000..d01b45d
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/off-canvas.html
@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Off-canvas - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/off-canvas.html">
+    <meta property="og:title" content="Off-canvas - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/off-canvas.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="off-canvas">
+            <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.</p>
+            <p>
+              By default, the off-canvas menu is collapsed whenever the window width is.
+              But you can add the <code>off-canvas-sidebar-show</code> class to the <code>off-canvas</code> to make the sidebar expanded when the window width is larger than or equal to <strong>960px</strong>.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a>
+                  <div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a>
+                  <div class="off-canvas-content">
+                    <div class="content">
+                      <h4>Lorem ipsum</h4>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+                      <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>You can open the sidebar by adding the class <code>active</code> to <code>off-canvas-sidebar</code>.
+              And remove the <code>active</code> to close it.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas"</span>&gt;</span>
+  <span class="hljs-comment">&lt;!-- off-screen toggle button --&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-toggle btn btn-primary btn-action"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#sidebar-id"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar-id"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-sidebar"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- off-screen sidebar --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-overlay"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- off-screen content --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/parallax.html b/public/css/spectre-0.5.8/docs/experimentals/parallax.html
new file mode 100644
index 0000000..a7e2ae4
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/parallax.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Parallax - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/parallax.html">
+    <meta property="og:title" content="Parallax - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/parallax.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="parallax">
+            <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
+            <div class="docs-demo columns">
+              <div class="column col-sm-12 col-8 col-mx-auto">
+                <div class="parallax">
+                  <div class="parallax-top-left" tabindex="1"></div>
+                  <div class="parallax-top-right" tabindex="2"></div>
+                  <div class="parallax-bottom-left" tabindex="3"></div>
+                  <div class="parallax-bottom-right" tabindex="4"></div>
+                  <div class="parallax-content">
+                    <div class="parallax-front">
+                      <h2>tvOS parallax demo</h2>
+                    </div>
+                    <div class="parallax-back"><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-top-left"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-top-right"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-bottom-left"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-bottom-right"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"4"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-content"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-front"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>tvOS parallax demo<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-back"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">...</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/progress.html b/public/css/spectre-0.5.8/docs/experimentals/progress.html
new file mode 100644
index 0000000..4649d5b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/progress.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Progress - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/progress.html">
+    <meta property="og:title" content="Progress - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/progress.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="progress">
+            <h3 class="s-title">Progress<a class="anchor" href="#progress" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Progress indicates the progress completion of a task.</p>
+            <div class="docs-demo columns">
+              <div class="column col-3 col-xs-12">
+                <progress class="progress" value="75" max="100"></progress>
+              </div>
+              <div class="column col-3 col-xs-12">
+                <progress class="progress" value="50" max="100"></progress>
+              </div>
+              <div class="column col-3 col-xs-12">
+                <progress class="progress" value="25" max="100"></progress>
+              </div>
+              <div class="column col-3 col-xs-12">
+                <progress class="progress" max="100"></progress>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/sliders.html b/public/css/spectre-0.5.8/docs/experimentals/sliders.html
new file mode 100644
index 0000000..cafcca8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/sliders.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sliders - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/sliders.html">
+    <meta property="og:title" content="Sliders - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/sliders.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="sliders">
+            <h3 class="s-title">Sliders<a class="anchor" href="#sliders" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Sliders are for selecting values from ranges.</p>
+            <p>You can add the class <code>tooltip</code> to have tooltip labels.
+              If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
+              </div>
+              <div class="column col-6 col-xs-12">
+                <input class="slider" type="range" min="0" max="100" value="50" disabled="">
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Sliders --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Sliders with tooltips --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider tooltip"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/timelines.html b/public/css/spectre-0.5.8/docs/experimentals/timelines.html
new file mode 100644
index 0000000..8418694
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/timelines.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Timelines - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/timelines.html">
+    <meta property="og:title" content="Timelines - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/timelines.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="timelines">
+            <h3 class="s-title">Timelines<a class="anchor" href="#timelines" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Timelines are ordered sequences of activities.</p>
+            <div class="docs-demo columns">
+              <div class="column col-9 col-sm-12">
+                <div class="timeline">
+                  <div class="timeline-item" id="timeline-example-1">
+                    <div class="timeline-left"><a class="timeline-icon tooltip" href="#timeline-example-1" data-tooltip="March 2016"></a></div>
+                    <div class="timeline-content">
+                      <div class="tile">
+                        <div class="tile-content">
+                          <p class="tile-subtitle">March 2016</p>
+                          <p class="tile-title">Initial commit</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="timeline-item" id="timeline-example-2">
+                    <div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="February 2017"><i class="icon icon-check"></i></a></div>
+                    <div class="timeline-content">
+                      <div class="tile">
+                        <div class="tile-content">
+                          <p class="tile-subtitle">February 2017</p>
+                          <p class="tile-title">New Documents experience</p>
+                          <p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p>
+                          <p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p>
+                          <p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p>
+                        </div>
+                        <div class="tile-action">
+                          <button class="btn">View</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="timeline-item" id="timeline-example-3">
+                    <div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-3" data-tooltip="March 2017"><i class="icon icon-check"></i></a></div>
+                    <div class="timeline-content">
+                      <div class="tile">
+                        <div class="tile-content">
+                          <p class="tile-subtitle">March 2017</p>
+                          <p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p>
+                          <p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p>
+                          <p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p>
+                          <p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p>
+                        </div>
+                        <div class="tile-action">
+                          <button class="btn">View</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-item"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"timeline-example-1"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#timeline-example-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-content"</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- tiles structure --&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-item"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"timeline-example-2"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-icon icon-lg"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#timeline-example-2"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-check"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-content"</span>&gt;</span>
+      <span class="hljs-comment">&lt;!-- tiles structure --&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  ...
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/experimentals/viewer-360.html b/public/css/spectre-0.5.8/docs/experimentals/viewer-360.html
new file mode 100644
index 0000000..065bd36
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/experimentals/viewer-360.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>360-Degree Viewer - Experimentals - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/experimentals/viewer-360.html">
+    <meta property="og:title" content="360-Degree Viewer - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/viewer-360.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="viewer-360">
+            <h3 class="s-title">360-Degree Viewer<a class="anchor" href="#viewer-360" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. </p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="viewer-360">
+                  <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
+                  <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;"></figure>
+                </div>
+              </div>
+            </div>
+            <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="viewer-360">
+                  <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
+                  <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;"></figure>
+                </div>
+              </div>
+            </div>
+            <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank">Microsoft Xbox One X</a></p>
+            <p>You will need to use your own product image sprite (all angle of photos in one image) and set the attribute <code>max</code> to the image numbers to use this component.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-360"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <p>The default image numbers in CSS are <code>36</code>. You can copy the mixin and add more numbers in <code>_viewer-360.scss</code> and re-compiling the CSS.</p>
+            <pre class="code" data-lang="SCSS"><code>@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">36</span>);
+@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">30</span>);
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/getting-started.html b/public/css/spectre-0.5.8/docs/getting-started.html
new file mode 100644
index 0000000..26a91a0
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/getting-started.html
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Getting started - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/getting-started.html">
+    <meta property="og:title" content="Getting started - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/getting-started.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="getting-started">
+            <h3 class="s-title">Getting started<a class="anchor" href="#getting-started" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p>
+               Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Installation</div>
+                  </div>
+                  <div class="card-body">How to install and use Spectre.css</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="getting-started/installation.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Custom version</div>
+                  </div>
+                  <div class="card-body">Customize your version of Spectre.css</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="getting-started/custom.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Browser support</div>
+                  </div>
+                  <div class="card-body">Browser compatibility and support</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="getting-started/browsers.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">What's new</div>
+                  </div>
+                  <div class="card-body">Changelog and release notes</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="getting-started/whatsnew.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Accessibility</div>
+                  </div>
+                  <div class="card-body text-gray">Coming soon</div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/getting-started/browsers.html b/public/css/spectre-0.5.8/docs/getting-started/browsers.html
new file mode 100644
index 0000000..326f587
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/getting-started/browsers.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Browsers - Getting started - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/getting-started/browsers.html">
+    <meta property="og:title" content="Browsers - Getting started - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/getting-started/browsers.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="browsers">
+            <h3 class="s-title">Browser support<a class="anchor" href="#browsers" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
+            <ul>
+              <li>Chrome <small class="label label-success">LAST 4</small></li>
+              <li>Microsoft Edge <small class="label label-success">LAST 4</small></li>
+              <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li>
+              <li>Safari <small class="label label-success">LAST 4</small></li>
+              <li>Opera <small class="label label-success">LAST 4</small></li>
+              <li>Internet Explorer 10+</li>
+            </ul>
+            <p>Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.</p>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/getting-started/custom.html b/public/css/spectre-0.5.8/docs/getting-started/custom.html
new file mode 100644
index 0000000..41b63bb
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/getting-started/custom.html
@@ -0,0 +1,432 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Custom - Getting started - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/getting-started/custom.html">
+    <meta property="og:title" content="Custom - Getting started - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/getting-started/custom.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="custom">
+            <h3 class="s-title">Custom version<a class="anchor" href="#custom" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>You can customize your version of Spectre.css by editing Sass files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
+            <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/" target="_blank">Sass Source Code</a></p>
+            <p>If you are looking for Less version of Spectre.css, please switch to <code>Less</code> branch.</p>
+            <p><a class="btn" href="https://github.com/picturepan2/spectre/tree/less" target="_blank">Less Branch</a></p>
+            <h4 class="s-subtitle" id="compiling">Compiling CSS<a class="anchor" href="#compiling" aria-hidden="true">#</a></h4>
+            <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p>
+            <p>Then, you can build the CSS file from the command line:</p>
+            <ol>
+              <li>Navigate to the root directory of Spectre.</li>
+              <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
+              <li>When completed, run <code>gulp build</code> task to compile Sass to CSS and minify files.</li>
+              <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
+            </ol>
+            <p>All available Gulp tasks:</p>
+            <ul>
+              <li><code>gulp build</code> - compile Sass to CSS and minify files (default)</li>
+              <li><code>gulp docs</code> - compile Docs related files</li>
+              <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li>
+            </ul>
+            <h4 class="s-subtitle" id="importing">Importing Sass<a class="anchor" href="#importing" aria-hidden="true">#</a></h4>
+            <p>It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.</p>
+            <ul>
+              <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li>
+              <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li>
+              <li>Compile the Sass file to CSS to get the custom version of Spectre.</li>
+            </ul>
+            <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span>
+<span class="hljs-comment">// Define variables to override default ones</span>
+<span class="hljs-variable">$primary-color</span>: <span class="hljs-number">#2e5bec</span>;
+<span class="hljs-variable">$dark-color</span>: <span class="hljs-number">#3e396b</span>;
+
+<span class="hljs-comment">// Import full Spectre source code</span>
+@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>;
+</code></pre>
+            <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>.</p>
+            <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span>
+@<span class="hljs-keyword">import</span> <span class="hljs-string">"variables"</span>;
+
+<span class="hljs-comment">// Import only the needed components</span>
+@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/buttons"</span>;
+@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>;
+</code></pre>
+            <h4 class="s-subtitle" id="folders">Folder structure<a class="anchor" href="#folders" aria-hidden="true">#</a></h4>
+            <pre class="code"><code>spectre/
+├── <span class="hljs-built_in">dist</span>/                           <span class="hljs-comment">// Build folder</span>
+│   ├── spectre-<span class="hljs-built_in">exp</span>.css
+│   ├── spectre-<span class="hljs-built_in">exp</span>.<span class="hljs-built_in">min</span>.css
+│   ├── spectre-icons.css
+│   ├── spectre-icons.<span class="hljs-built_in">min</span>.css
+│   ├── spectre.css
+│   └── spectre.<span class="hljs-built_in">min</span>.css
+│
+├── docs/
+│   ├── <span class="hljs-built_in">dist</span>/                       <span class="hljs-comment">// Pre-built CSS folder</span>
+│   │   ├── spectre-<span class="hljs-built_in">exp</span>.css
+│   │   ├── spectre-<span class="hljs-built_in">exp</span>.<span class="hljs-built_in">min</span>.css
+│   │   ├── spectre-icons.css
+│   │   ├── spectre-icons.<span class="hljs-built_in">min</span>.css
+│   │   ├── spectre.css
+│   │   └── spectre.<span class="hljs-built_in">min</span>.css
+|   ├── css/                        <span class="hljs-comment">// Docs CSS files</span>
+│   │   └── docs.css
+|   ├── src/
+│   │   ├── scss                    <span class="hljs-comment">// Docs Sass files</span>
+│   │   │   └── docs.scss
+│   │   ├── index.pug               <span class="hljs-comment">// Docs Pug files</span>
+│   │   └── ...
+│   ├── examples/                   <span class="hljs-comment">// Example tempalte</span>
+│   │   └── starter.html
+│   ├── ../
+│   ├── index.html
+│   └── ...
+│
+├── src/                            <span class="hljs-comment">// Source Sass files</span>
+│   ├── spectre.scss
+│   ├── spectre-icons.scss
+│   ├── spectre-<span class="hljs-built_in">exp</span>.scss
+│   ├── _mixins.scss
+│   ├── _variables.scss
+│   └── ...
+│
+├── gulpfile.js
+├── <span class="hljs-keyword">package</span>.json
+└── ...
+</code></pre>
+            <h4 class="s-subtitle" id="variables">Variables<a class="anchor" href="#variables" aria-hidden="true">#</a></h4>
+            <p>Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p>
+            <h4 class="s-subtitle" id="variables-colors">Variables - Colors<a class="anchor" href="#variables-colors" aria-hidden="true">#</a></h4>
+            <div class="columns">
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#5755d9;color:#fff;">
+                  <div class="color-title">#5755d9</div>
+                  <div class="color-subtitle">Primary</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#f1f1fc;color:#5755d9;">
+                  <div class="color-title">#f1f1fc</div>
+                  <div class="color-subtitle">Secondary</div>
+                </div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#32b643;color:#fff;">
+                  <div class="color-title">#32b643</div>
+                  <div class="color-subtitle">Success</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#ffb700;color:#fff;">
+                  <div class="color-title">#ffb700</div>
+                  <div class="color-subtitle">Warning</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#e85600;color:#fff;">
+                  <div class="color-title">#e85600</div>
+                  <div class="color-subtitle">Error</div>
+                </div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#303742;color:#fff;">
+                  <div class="color-title">#303742</div>
+                  <div class="color-subtitle">Dark</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#66758c;color:#fff;">
+                  <div class="color-title">#66758c</div>
+                  <div class="color-subtitle">Gray dark</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#bcc3ce;color:#fff;">
+                  <div class="color-title">#bcc3ce</div>
+                  <div class="color-subtitle">Gray</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#f7f8f9;color:#66758c;">
+                  <div class="color-title">#f7f8f9</div>
+                  <div class="color-subtitle">Gray light</div>
+                </div>
+              </div>
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#fff;color:#bcc3ce;">
+                  <div class="color-title">#fff</div>
+                  <div class="color-subtitle">Light</div>
+                </div>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="variables-buttons">Variables - Button mixins<a class="anchor" href="#variables-buttons" aria-hidden="true">#</a></h4>
+            <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants.</p>
+            <ul>
+              <li>@mixin button-variant(<code>$color</code>: $primary-color);</li>
+              <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li>
+            </ul>
+            <pre class="code" data-lang="Sass"><code>&lt;!-- filled <span class="hljs-selector-tag">button</span> with the success <span class="hljs-attribute">color</span> --&gt;
+<span class="hljs-selector-class">.btn-success</span> {
+  @<span class="hljs-keyword">include</span> button-variant(<span class="hljs-variable">$success-color</span>);
+}
+
+&lt;!-- outlined <span class="hljs-selector-tag">button</span> with the success <span class="hljs-attribute">color</span> --&gt;
+<span class="hljs-selector-class">.btn-outline-success</span> {
+  @<span class="hljs-keyword">include</span> button-outline-variant(<span class="hljs-variable">$success-color</span>);
+}
+</code></pre>
+            <h4 class="s-subtitle" id="variables-sizes">Variables - Sizes<a class="anchor" href="#variables-sizes" aria-hidden="true">#</a></h4>
+            <p>The default REM (root em) size in Spectre.css is <code>20px</code>.</p>
+            <p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate.</p>
+            <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size.</p>
+            <h4 class="s-subtitle" id="variables-custom-prefix">Variables - Custom prefix<a class="anchor" href="#variables-custom-prefix" aria-hidden="true">#</a></h4>
+            <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it.</p>
+            <pre class="code" data-lang="Bash"><code>npm install gulp-css-prefix
+</code></pre>
+            <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p>
+            <pre class="code"><code><span class="hljs-keyword">var</span> cssPrefix = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-css-prefix'</span>);
+
+gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  gulp.src(<span class="hljs-string">'./dist/*.css'</span>)
+      .pipe(cssPrefix(<span class="hljs-string">'spectre-'</span>))
+      .pipe(gulp.dest(<span class="hljs-string">'./dist'</span>))
+});
+</code></pre>
+            <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/getting-started/installation.html b/public/css/spectre-0.5.8/docs/getting-started/installation.html
new file mode 100644
index 0000000..da28d8c
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/getting-started/installation.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Installation - Getting started - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/getting-started/installation.html">
+    <meta property="og:title" content="Installation - Getting started - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/getting-started/installation.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="installation">
+            <h3 class="s-title">Installation<a class="anchor" href="#installation" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p>
+            <h4 class="s-subtitle" id="install-manually">Install manually<a class="anchor" href="#install-manually" aria-hidden="true">#</a></h4>
+            <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
+            <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Download Spectre.css</a></p>
+            <p>Include <code>spectre.css</code> located in <strong>/dist</strong> in your website or Web app <head>. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"spectre.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"spectre-exp.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"spectre-icons.min.css"</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="install-cdn">Install from CDN<a class="anchor" href="#install-cdn" aria-hidden="true">#</a></h4>
+            <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="install-npm">Install with NPM<a class="anchor" href="#install-npm" aria-hidden="true">#</a></h4>
+            <pre class="code c-select-all" data-lang="Bash"><code>npm install spectre.css --save
+</code></pre>
+            <h4 class="s-subtitle" id="install-yarn">Install with Yarn<a class="anchor" href="#install-yarn" aria-hidden="true">#</a></h4>
+            <pre class="code c-select-all" data-lang="Bash"><code>yarn add spectre.css
+</code></pre>
+            <h4 class="s-subtitle" id="install-bower">Install from Bower<a class="anchor" href="#install-bower" aria-hidden="true">#</a></h4>
+            <pre class="code c-select-all" data-lang="Bash"><code>bower install spectre.css --save
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/getting-started/whatsnew.html b/public/css/spectre-0.5.8/docs/getting-started/whatsnew.html
new file mode 100644
index 0000000..189f769
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/getting-started/whatsnew.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>What's New - Getting started - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/getting-started/whatsnew.html">
+    <meta property="og:title" content="What's New - Getting started - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/getting-started/whatsnew.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="whatsnew">
+            <h3 class="s-title">What's new<a class="anchor" href="#whatsnew" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div><h4>Spectre.css Changelog</h4>
+<h5>v0.5.8 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.8">#</a></h5>
+<ul>
+<li>IMPORTANT: Moving</li>
+<li>Add Auto width column #541</li>
+<li>Add more Menu badge support #545</li>
+<li>Improve 360-Degree Viewer</li>
+<li>Fix gulp issue #547</li>
+<li>Fix the errors in the Docs #538</li>
+</ul>
+<h5>v0.5.7 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.7">#</a></h5>
+<ul>
+<li>Add pure CSS 360-Degree Viewer</li>
+<li>Improve Docs SEO</li>
+<li>Change Carousels image number to variable #428</li>
+<li>Fix Form textarea height issue</li>
+</ul>
+<h5>v0.5.6 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.6">#</a></h5>
+<ul>
+<li>Add Docs Search #509 #291</li>
+<li>Add Copy icon</li>
+<li>Add Hero layout #380</li>
+<li>Add multiline Tooltips #500</li>
+<li>Replace transition: all; #526</li>
+<li>Fix #511 issue</li>
+<li>Fix sidebar background height for short docs pages</li>
+</ul>
+<h5>v0.5.5 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.5">#</a></h5>
+<ul>
+<li>IMPORTANT: New Docs</li>
+<li>Add Changelog to What's New section</li>
+<li>Fix chip vertical scrollbar #521</li>
+<li>Fix circle -&gt; s-circle #489</li>
+<li>Fix code font-family issue for asian languages #476</li>
+</ul>
+<h5>v0.5.4 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.4">#</a></h5>
+<ul>
+<li>IMPORTANT: Change naming of position utilities to avoid conflicts</li>
+<li>Update dark color variable</li>
+<li>Fix sidebar hash link bug #482</li>
+<li>Fix browser support typo #469</li>
+<li>Fix code typo #460</li>
+<li>Fix GitHub button z-index bug #458</li>
+<li>Fix Bar background color issue by adding !important to color utilities</li>
+<li>Fix chip bug when content is too long #506</li>
+<li>Fix multiple select height bug #508</li>
+</ul>
+<h5>v0.5.3 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.3">#</a></h5>
+<ul>
+<li>Add dark text color to utilities</li>
+<li>Add error state to the indeterminate checkbox</li>
+<li>Add inline forms</li>
+<li>Add more code examples</li>
+<li>Fix errors in the Docs</li>
+</ul>
+<h5>v0.5.2 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.2">#</a></h5>
+<ul>
+<li>IMPORTANT:  Move Docs to Pug templates</li>
+<li>Add more Docs examples</li>
+<li>Add visited link style</li>
+<li>Add 100% modal height class #391</li>
+<li>Fix off-canvas-overlay bug #392</li>
+<li>Fix margin and padding values #431</li>
+<li>Fix Accordion example #438</li>
+<li>Fix a bug of input addons width on mobile devices #449</li>
+<li>Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)</li>
+</ul>
+<h5>v0.5.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.1">#</a></h5>
+<p>IMPORTANT: Move Autocomplete to the Experimentals</p>
+<ul>
+<li>Add form checkbox, radio and switch support to Menus</li>
+<li>Add responsive horizontal form support #375</li>
+<li>Add Favicons in the docs #398</li>
+<li>Fix Off-canvas z-index problem #361</li>
+<li>Fix icons disappearing on group classes on focus</li>
+<li>Fix Deprecation Warning #396 #356</li>
+<li>Initial commit of RTL support (not finished)</li>
+</ul>
+<h5>v0.5.0 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.0">#</a></h5>
+<ul>
+<li>IMPORTANT: Restore /dist folder</li>
+<li>Add Grid nesting example #353</li>
+<li>Add Form control sizes support</li>
+<li>Update Off-canvas default behavior and new option available #347</li>
+<li>Split Mixins</li>
+<li>Fix Navbar last-child align right bug #346</li>
+<li>Fix modal doc typo</li>
+<li>Fix docs examples #348</li>
+</ul>
+<h5>v0.4.7 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.7">#</a></h5>
+<ul>
+<li>Add new button colors (success and error) #227 #241 #342</li>
+<li>Add overflow-scrolling: touch; CSS for better scrolling</li>
+<li>Add touch support to Parallax image hover effect</li>
+<li>Update the Modal example code</li>
+<li>Fix form horizontal layout spacing</li>
+</ul>
+<h5>v0.4.6 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.6">#</a></h5>
+<ul>
+<li>Add new Sliders example #328</li>
+<li>Add Table with horizontal scroll support #333</li>
+<li>Update Calendar event style which makes use of color utilities #326</li>
+<li>Define $parallax-fade-color as default variable #332</li>
+<li>Fix the Docs content mistake</li>
+<li>Fix breadcrumb-item extra spacing #337</li>
+<li>Fix comparison slider image responsive bug #338</li>
+</ul>
+<h5>v0.4.5 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.5">#</a></h5>
+<ul>
+<li>Rewrite Off-canvas component</li>
+<li>Add <code>active</code> support to the Off-canvas #308</li>
+<li>Update the Docs pages</li>
+</ul>
+<h5>v0.4.4 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.4">#</a></h5>
+<ul>
+<li>IMPORTANT: Increase default font sizes to 16px #271</li>
+<li>Add version number to CSS #288 #289</li>
+</ul>
+<h5>v0.4.3 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.3">#</a></h5>
+<ul>
+<li>Add Icon Sizes #284</li>
+<li>Add Large Modals #293</li>
+<li>Update primary color to #5755d9</li>
+<li>Change Tooltips <code>white-space</code> to <code>pre</code> #292</li>
+<li>Encode SVG Data URI (thanks to @mariodev) #297 #298</li>
+<li>Improve Buttons and Forms small and large variables</li>
+<li>Improve Filters code</li>
+<li>Improve gulpfile and package</li>
+<li>Add Importing Sass Docs</li>
+</ul>
+<h5>v0.4.2 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.2">#</a></h5>
+<ul>
+<li>Add Off-screen experimental</li>
+<li>Fix Docs rendering bug in Safari</li>
+</ul>
+<h5>v0.4.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.1">#</a></h5>
+<ul>
+<li>Add default modifier to all variables</li>
+<li>Add <code>address</code> reset which changes font-style to normal</li>
+<li>Add Details and Summary Accordions support</li>
+<li>Fix responsive video</li>
+<li>Update the Docs</li>
+</ul>
+<h5>v0.4.0 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.0">#</a></h5>
+<ul>
+<li>Switch from Less to Sass</li>
+<li>Add Cursor utilities</li>
+</ul>
+<h5>v0.3.2 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.2">#</a></h5>
+<ul>
+<li>Add label-rounded classes</li>
+<li>Add Avatars presence status code</li>
+<li>Add Typography Fonts Docs</li>
+<li>Add Button variant mixins</li>
+<li>Update Autocomplete style</li>
+<li>Update Autoprefixer rules</li>
+<li>Update label mixin and code mono font family</li>
+</ul>
+<h5>v0.3.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.1">#</a></h5>
+<p><em>IMPORTANT</em>: The default root font-size has been changed to <code>20px</code>, please update your <code>rem</code> numbers if you're using the custom sizes. <a href="https://picturepan2.github.io/spectre/getting-started/custom.html#variables-sizes">Learn more</a>.</p>
+<ul>
+<li>Fix margin and padding utilities bug</li>
+<li>Add grid offset</li>
+<li>Rename Display utilities class names</li>
+<li>Move Panels and Empty states to Components from Layout</li>
+<li>Fix Docs bugs and cleanup codes</li>
+</ul>
+<h5>v0.2.15 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.15">#</a></h5>
+<ul>
+<li>BIG Update to the Docs experience, completely rewritten and improved #240</li>
+<li>Add Text and Background colors utilities #205 #219</li>
+<li>Add Install from CDN option #191</li>
+<li>Add unit size (4px) and unit size variables</li>
+<li>Add Responsive container (max width container) #222</li>
+<li>Add error and success states to checkbox, radio and switch #246</li>
+<li>Fix Rem unit issue in East Asian Chrome #110</li>
+<li>Fix icon direction bug #218</li>
+<li>Fix Dropdown menu max items/height #226</li>
+</ul>
+<h5>v0.2.14 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.14">#</a></h5>
+<ul>
+<li>Add vertical divider</li>
+<li>Add Form icon support</li>
+<li>Add Accordions</li>
+<li>Add anchor links to Docs</li>
+<li>Add new container grid size</li>
+<li>Fix link error and typo</li>
+</ul>
+<h5>v0.2.13 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.13">#</a></h5>
+<ul>
+<li>Add Timelines code</li>
+<li>Add input readonly style</li>
+<li>Change Gulp building process and ignore /dist</li>
+<li>Change naming <code>danger</code> to <code>error</code></li>
+<li>Change label-variant mixin</li>
+<li>Fix dropdown-toggle border radius in button groups</li>
+<li>Fix Calendars date item width bug under Firefox</li>
+</ul>
+<h5>v0.2.12 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.12">#</a></h5>
+<ul>
+<li>Add pure CSS Comparison Sliders</li>
+<li>Add pure CSS content Filters</li>
+<li>Add Avatars badge support</li>
+<li>Add more icons</li>
+<li>Change :focus support</li>
+<li>Change Docs image sizes and add object-fit support</li>
+<li>Update Navbar code</li>
+<li>Fix typos, Modals bugs</li>
+</ul>
+<h5>v0.2.11 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.11">#</a></h5>
+<ul>
+<li>Add pure CSS Popovers</li>
+<li>Add pure CSS Icons</li>
+<li>Add Slider bars</li>
+<li>Add tvOS Parallax effect text layer</li>
+<li>Update shadow mixin</li>
+</ul>
+<h5>v0.2.10 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.10">#</a></h5>
+<ul>
+<li>Add Shadows and Z-index variables</li>
+<li>Add Divider text</li>
+<li>Improve color variables</li>
+<li>Cleanup components code</li>
+<li>Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)</li>
+</ul>
+<h5>v0.2.9 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.9">#</a></h5>
+<ul>
+<li>Add Panels layout: flexible view container layout with auto-expand content section</li>
+<li>Update Navbar layout</li>
+<li>Update docs and examples</li>
+</ul>
+<h5>v0.2.8 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.8">#</a></h5>
+<ul>
+<li>Add Carousels previous and next buttons</li>
+<li>Improve disabled state for forms</li>
+<li>Improve calendar events style</li>
+<li>Improve Sliders disabled style</li>
+<li>Improve Autocomplete menu position</li>
+<li>Merge Menus and Dropdowns</li>
+</ul>
+<h5>v0.2.7 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.7">#</a></h5>
+<ul>
+<li>Add Calendars experimental support</li>
+<li>Add tabindex note to the dropdowns docs</li>
+<li>Add shrink-to-fit=no to head meta</li>
+<li>Add Colors docs and update colors</li>
+<li>Fix wrong shadow colors with form-select</li>
+<li>Fix grid-480</li>
+</ul>
+<h5>v0.2.6 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.6">#</a></h5>
+<ul>
+<li>Add Carousels initial experimental version</li>
+<li>Add Spectre.css Twitter account (@spectrecss) link</li>
+<li>Improve Docs experience and navbar</li>
+<li>Fix the bug of form input focus colors</li>
+</ul>
+<h5>v0.2.5 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.5">#</a></h5>
+<ul>
+<li>Improve color variables completely</li>
+<li>Add Menu badges</li>
+<li>Add Responsive visibility (show-x)</li>
+<li>Add Parallax effect (pure CSS)</li>
+<li>Fix elements and components</li>
+<li>Update empty state layout code</li>
+</ul>
+<h5>v0.2.4 [#]    (https://github.com/picturepan2/spectre/releases/tag/v0.2.4)</h5>
+<ul>
+<li>ADD: Meters element experimental support</li>
+<li>ADD: Progress indeterminate animation</li>
+<li>ADD: Text-decoration-skip support</li>
+<li>CHG: Split Codes and improve docs codes</li>
+<li>FIX: Steps with tooltips z-index bug</li>
+</ul>
+<h5>v0.2.3 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.3">#</a></h5>
+<ul>
+<li>Bars component</li>
+<li>Badges for buttons</li>
+<li>Experimentals CSS and docs</li>
+<li>Sliders experimental component</li>
+<li>A number of fixes as usual</li>
+</ul>
+<h5>v0.2.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.1">#</a></h5>
+<p>I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:</p>
+<ul>
+<li>New Docs experience with better navigations and better mobile off-canvas menu</li>
+<li>New components: Tiles, Steps and Navs (part of Navigation)</li>
+<li>Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support</li>
+<li>Improvements: better focus style</li>
+<li>Fixes</li>
+</ul>
+<h5>v0.0.1 - March 2016</h5>
+<p>Initial commit</p>
+<p>Thank you. ♥</p>
+
+            <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Releases</a></p>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/img/avatar-1.png b/public/css/spectre-0.5.8/docs/img/avatar-1.png
new file mode 100644
index 0000000..e28ac6c
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/avatar-1.png differ
diff --git a/public/css/spectre-0.5.8/docs/img/avatar-2.png b/public/css/spectre-0.5.8/docs/img/avatar-2.png
new file mode 100644
index 0000000..3fcb9d9
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/avatar-2.png differ
diff --git a/public/css/spectre-0.5.8/docs/img/avatar-3.png b/public/css/spectre-0.5.8/docs/img/avatar-3.png
new file mode 100644
index 0000000..0383958
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/avatar-3.png differ
diff --git a/public/css/spectre-0.5.8/docs/img/avatar-4.png b/public/css/spectre-0.5.8/docs/img/avatar-4.png
new file mode 100644
index 0000000..3ecedcc
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/avatar-4.png differ
diff --git a/public/css/spectre-0.5.8/docs/img/avatar-5.png b/public/css/spectre-0.5.8/docs/img/avatar-5.png
new file mode 100644
index 0000000..8019817
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/avatar-5.png differ
diff --git a/public/css/spectre-0.5.8/docs/img/favicons/favicon.ico b/public/css/spectre-0.5.8/docs/img/favicons/favicon.ico
new file mode 100644
index 0000000..e0b368e
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/favicons/favicon.ico differ
diff --git a/public/css/spectre-0.5.8/docs/img/favicons/favicon.png b/public/css/spectre-0.5.8/docs/img/favicons/favicon.png
new file mode 100644
index 0000000..d7ff9db
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/favicons/favicon.png differ
diff --git a/public/css/spectre-0.5.8/docs/img/macos-sierra-2.jpg b/public/css/spectre-0.5.8/docs/img/macos-sierra-2.jpg
new file mode 100644
index 0000000..4fa56ad
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/macos-sierra-2.jpg differ
diff --git a/public/css/spectre-0.5.8/docs/img/macos-sierra.jpg b/public/css/spectre-0.5.8/docs/img/macos-sierra.jpg
new file mode 100644
index 0000000..32f3d9f
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/macos-sierra.jpg differ
diff --git a/public/css/spectre-0.5.8/docs/img/osx-el-capitan-2.jpg b/public/css/spectre-0.5.8/docs/img/osx-el-capitan-2.jpg
new file mode 100644
index 0000000..ff5c840
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/osx-el-capitan-2.jpg differ
diff --git a/public/css/spectre-0.5.8/docs/img/osx-el-capitan.jpg b/public/css/spectre-0.5.8/docs/img/osx-el-capitan.jpg
new file mode 100644
index 0000000..a0f8699
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/osx-el-capitan.jpg differ
diff --git a/public/css/spectre-0.5.8/docs/img/osx-yosemite-2.jpg b/public/css/spectre-0.5.8/docs/img/osx-yosemite-2.jpg
new file mode 100644
index 0000000..0b5befa
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/osx-yosemite-2.jpg differ
diff --git a/public/css/spectre-0.5.8/docs/img/osx-yosemite.jpg b/public/css/spectre-0.5.8/docs/img/osx-yosemite.jpg
new file mode 100644
index 0000000..80b1cb1
Binary files /dev/null and b/public/css/spectre-0.5.8/docs/img/osx-yosemite.jpg differ
diff --git a/public/css/spectre-0.5.8/docs/img/spectre-logo.svg b/public/css/spectre-0.5.8/docs/img/spectre-logo.svg
new file mode 100644
index 0000000..e57cd80
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/img/spectre-logo.svg
@@ -0,0 +1,19 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>
+    Spectre.css Logo
+  </title>
+  <defs>
+    <rect id="a" width="32" height="32" rx="16"/>
+    <path d="M20.897 20.91c-.02-.393-.092-.745-.217-1.056-.148-.37-.41-.71-.79-1.02-.376-.31-.885-.6-1.526-.87-.64-.27-1.452-.55-2.437-.835-1.032-.295-1.967-.63-2.803-1.006-.836-.376-1.55-.808-2.136-1.298-.588-.49-1.04-1.05-1.355-1.676-.316-.628-.473-1.346-.473-2.154v-.128h2.782v.085c0 .438.092.837.28 1.198.185.363.474.696.866 1 .392.304.896.585 1.513.84.617.258 1.356.505 2.216.743 1.185.333 2.208.7 3.068 1.106.86.403 1.57.862 2.13 1.375.56.514.974 1.09 1.247 1.726.25.585.386 1.24.407 1.97h-2.77zm-4.827 3.516v2.24c-.53-.016-1.06-.074-1.59-.172-.642-.12-1.256-.298-1.844-.535-.587-.24-1.132-.534-1.634-.886-.502-.35-.94-.76-1.312-1.226-.373-.466-.664-.99-.875-1.57-.21-.58-.315-1.216-.315-1.91h2.767c0 .713.14 1.323.423 1.832.282.51.66.93 1.133 1.263.473.332 1.018.577 1.634.734.516.13 1.054.208 1.613.23zm0-19.09c.062-.002.124-.003.187-.003 1.176 0 2.222.176 3.14.528.917.353 1.69.82 2.315 1.4.626.58 1.102 1.25 1.427 2.01.324.76.486 1.545.486 2.354H20.86c0-.58-.094-1.118-.28-1.612-.187-.495-.47-.923-.853-1.284-.383-.36-.86-.642-1.434-.84-.574-.2-1.252-.3-2.036-.3h-.187V5.336z" id="b"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g>
+      <use fill="#5755d9" xlink:href="#a"/>
+      <rect stroke-opacity=".1" stroke="#000" stroke-width=".5" x=".25" y=".25" width="31.5" height="31.5" rx="15.75"/>
+    </g>
+    <g>
+      <use fill="#f1f1fc" xlink:href="#b"/>
+      <path stroke="#fff" stroke-width=".5" d="M21.128 20.66h2.276c-.04-.596-.166-1.135-.373-1.62-.257-.604-.652-1.15-1.186-1.64-.54-.496-1.228-.94-2.066-1.335-.847-.398-1.857-.762-3.03-1.09-.868-.24-1.616-.492-2.243-.753-.636-.265-1.16-.556-1.57-.875-.42-.325-.733-.686-.937-1.08-.18-.352-.282-.736-.303-1.15H9.41c.016.72.165 1.36.446 1.92.3.597.73 1.13 1.292 1.597.57.474 1.262.895 2.078 1.262.825.37 1.748.7 2.77.993.994.287 1.815.568 2.466.844.66.28 1.19.58 1.588.907.41.335.697.71.862 1.12.11.274.18.574.216.9zm-5.308 4.003c-.49-.032-.966-.107-1.424-.224-.646-.165-1.218-.422-1.717-.773-.505-.355-.908-.804-1.208-1.346-.27-.485-.42-1.054-.45-1.703H8.756c.022.57.12 1.094.295 1.576.202.555.48 1.054.835 1.5.358.446.778.838 1.26 1.177.487.34 1.015.626 1.585.857.572.23 1.17.405 1.795.52.432.08.864.133 1.295.158v-1.742zm.5-19.08v1.754c.784.006 1.47.11 2.055.313.606.21 1.114.51 1.523.896.41.388.716.848.916 1.378.17.45.266.934.29 1.45h2.267c-.03-.687-.183-1.355-.46-2.006-.312-.728-.767-1.37-1.368-1.926-.6-.557-1.346-1.007-2.235-1.347-.87-.335-1.866-.505-2.987-.51z"/>
+    </g>
+  </g>
+</svg>
diff --git a/public/css/spectre-0.5.8/docs/index.html b/public/css/spectre-0.5.8/docs/index.html
new file mode 100644
index 0000000..01e15e7
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/">
+    <meta property="og:title" content="Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/">
+  </head>
+  <body>
+    <div class="section section-hero bg-gray">
+      <div class="grid-hero container grid-lg text-center" id="overview">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2></a></div>
+        <h1>SPECTRE.CSS</h1>
+        <h2>A 
+          <u>Lightweight</u>, 
+          <u>Responsive</u> and 
+          <u>Modern</u> CSS Framework
+        </h2>
+        <p><a class="btn btn-primary btn-lg mr-2" href="getting-started.html">Docs</a><a class="btn btn-primary btn-lg" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></p>
+        <p class="text-gray">Latest version: <span class="version"></span></p>
+        <div class="columns">
+          <div class="column col-4 col-xs-12">
+            <div class="card text-center">
+              <div class="card-header"><span class="card-title">Lightweight</span></div>
+              <div class="card-body">Lightweight  (~10KB gzipped) starting point for your projects</div>
+            </div>
+          </div>
+          <div class="column col-4 col-xs-12">
+            <div class="card text-center">
+              <div class="card-header"><span class="card-title">Responsive</span></div>
+              <div class="card-body">Flexbox-based, responsive and mobile-friendly layout</div>
+            </div>
+          </div>
+          <div class="column col-4 col-xs-12">
+            <div class="card text-center">
+              <div class="card-header"><span class="card-title">Modern</span></div>
+              <div class="card-body">Elegantly designed and developed elements and components</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-ads bg-gray">
+      <div class="docs-ad">
+        <div class="hide-md text-center">
+          <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+          <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+          <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+        </div>
+        <div class="show-md text-center">
+          <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+          <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+        </div>
+      </div>
+    </div>
+    <div class="section section-features bg-primary text-light text-center">
+      <div class="container grid-lg">
+        <h2>Introduction</h2>
+        <div class="columns">
+          <div class="column col-10 col-sm-12 col-mx-auto text-left">
+            <p class="text-secondary"><strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p class="text-secondary">Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+          </div>
+          <div class="column col-10 col-sm-12 col-mx-auto"><a class="btn btn-lg" href="getting-started/installation.html">Install Spectre.css</a></div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-updates bg-gray">
+      <div class="container grid-lg">
+        <div class="columns">
+          <div class="column col-4 col-xs-12">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title h6">Spectre Twitter</div>
+              </div>
+              <div class="card-body">For the latest announcements and updates, follow on Twitter: <a href="https://twitter.com/spectrecss" target="_blank">@spectrecss</a>.</div>
+              <div class="card-footer"><a class="btn btn-primary" href="https://twitter.com/spectrecss" target="_blank">Follow</a></div>
+            </div>
+          </div>
+          <div class="column col-4 col-xs-12">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title h6">PayPal Donate</div>
+              </div>
+              <div class="card-body">Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development.</div>
+              <div class="card-footer"><a class="btn btn-primary" href="https://www.paypal.me/picturepan2" target="_blank">Donate</a></div>
+            </div>
+          </div>
+          <div class="column col-4 col-xs-12">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title h6">Sponsor via Patreon</div>
+              </div>
+              <div class="card-body">Your name or company logo will be put on Spectre Docs homepage.</div>
+              <div class="card-footer"><a class="btn btn-primary" href="https://www.patreon.com/spectrecss" target="_blank">Sponsor</a></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section section-ads bg-gray">
+      <div class="docs-ad docs-ad-sidebar text-center">
+        <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+      </div>
+    </div>
+    <footer class="section section-footer">
+      <div class="docs-footer container grid-lg" id="copyright">
+        <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+        <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+      </div>
+    </footer>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/layout.html b/public/css/spectre-0.5.8/docs/layout.html
new file mode 100644
index 0000000..1ed7999
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/layout.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Layout - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/layout.html">
+    <meta property="og:title" content="Layout - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/layout.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="layout">
+            <h3 class="s-title">Layout<a class="anchor" href="#layout" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p>
+               Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Flexbox grid</div>
+                  </div>
+                  <div class="card-body">Flexbox based responsive grid system with 12 columns</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="layout/grid.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Responsive</div>
+                  </div>
+                  <div class="card-body">Responsive layout grid system and responsive visibility utilities</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="layout/responsive.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Hero</div>
+                  </div>
+                  <div class="card-body">Container for key featured content or information</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="layout/hero.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Navbar</div>
+                  </div>
+                  <div class="card-body">Layout container that appears in the header of apps and websites</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="layout/navbar.html">View</a></div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/layout/grid.html b/public/css/spectre-0.5.8/docs/layout/grid.html
new file mode 100644
index 0000000..f7088c3
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/layout/grid.html
@@ -0,0 +1,472 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Flexbox grid - Layout - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/layout/grid.html">
+    <meta property="og:title" content="Flexbox grid - Layout - Spectre.css CSS Framework">
+    <meta property="og:description" content="Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/layout/grid.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="grid">
+            <h3 class="s-title">Flexbox grid<a class="anchor" href="#grid" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Layout includes flexbox based responsive grid system with 12 columns.</p>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="bg-primary text-secondary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-secondary text-primary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-primary text-secondary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-secondary text-primar docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-primary text-secondary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-secondary text-primar docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-primary text-secondary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-secondary text-primar docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-primary text-secondary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-secondary text-primar docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-primary text-secondary docs-block"></div>
+              </div>
+              <div class="column">
+                <div class="bg-secondary text-primar docs-block"></div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-12">
+                <div class="bg-gray docs-block">col-12 (100%)</div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-9">
+                <div class="bg-gray docs-block">col-9 (75%)</div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-6">
+                <div class="bg-gray docs-block">col-6 (50%)</div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-3">
+                <div class="bg-gray docs-block">col-3 (25%)</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- flexbox grid example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-3"</span>&gt;</span>col-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-1"</span>&gt;</span>col-1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <p>Add the <code>columns</code> class to a container with the <code>container</code> class. 
+              And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally.
+              You can specific the width of each column by adding class <code>col-<1-12></code>.
+            </p>
+            <h4 class="s-subtitle" id="grid-gapless">Gapless grid<a class="anchor" href="#grid-gapless" aria-hidden="true">#</a></h4>
+            <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p>
+            <div class="docs-demo columns col-gapless">
+              <div class="column col-6">
+                <div class="bg-gray docs-block">col-6 (gapless)</div>
+              </div>
+              <div class="column col-6">
+                <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- gapless columns --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-gapless"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p>
+            <div class="docs-demo columns col-oneline">
+              <div class="column col-8">
+                <div class="bg-gray docs-block">col-8</div>
+              </div>
+              <div class="column col-8">
+                <div class="bg-gray docs-block">col-8</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- one line columns --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-oneline"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4>
+            <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6">
+                <div class="bg-gray docs-block">col-6</div>
+                <div class="columns">
+                  <div class="column col-6">
+                    <div class="bg-secondary text-primary docs-block">col-6</div>
+                  </div>
+                  <div class="column col-6">
+                    <div class="bg-secondary text-primary docs-block">col-6</div>
+                  </div>
+                </div>
+              </div>
+              <div class="column col-6">
+                <div class="bg-gray docs-block">col-6</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid nesting example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="grid-offset">Column offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4>
+            <p>
+              The Flexbox grid provides margin auto utilities to set offset. 
+              There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.
+            </p>
+            <div class="columns text-center">
+              <div class="column col-2">
+                <div class="bg-gray docs-block">col-2</div>
+              </div>
+              <div class="column col-4 col-mx-auto">
+                <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
+              </div>
+            </div>
+            <div class="columns text-center">
+              <div class="column col-2">
+                <div class="bg-gray docs-block">col-2</div>
+              </div>
+              <div class="column col-4 col-ml-auto">
+                <div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div>
+              </div>
+            </div>
+            <div class="columns text-center">
+              <div class="column col-4 col-ml-auto">
+                <div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div>
+              </div>
+              <div class="column col-2">
+                <div class="bg-gray docs-block">col-2</div>
+              </div>
+            </div>
+            <div class="columns text-center">
+              <div class="column col-4 col-mx-auto">
+                <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
+              </div>
+              <div class="column col-2">
+                <div class="bg-gray docs-block">col-2</div>
+              </div>
+            </div>
+            <div class="columns text-center">
+              <div class="column col-4 col-mr-auto">
+                <div class="bg-secondary text-primary docs-block">col-4 col-mr-auto</div>
+              </div>
+              <div class="column col-2">
+                <div class="bg-gray docs-block">col-2</div>
+              </div>
+            </div>
+            <div class="columns text-center">
+              <div class="column col-4 col-mx-auto">
+                <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid offset example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-4 col-mr-auto"</span>&gt;</span>col-4 col-mr-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="column-auto">Auto width column<a class="anchor" href="#column-auto" aria-hidden="true">#</a></h4>
+            <p>You can add the <code>col-auto</code> class to the <code>column</code> to have auto width columns.
+              There are <code>col-xl-auto</code>, <code>col-lg-auto</code>, <code>col-md-auto</code>, <code>col-sm-auto</code> and <code>col-xs-auto</code> to set auto width in different viewport sizes.
+            </p>
+            <div class="columns">
+              <div class="column col-auto">
+                <div class="bg-secondary text-primary docs-block">col-auto</div>
+              </div>
+              <div class="column">
+                <div class="bg-gray docs-block">col</div>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column col-lg-auto col-6">
+                <div class="bg-secondary text-primary docs-block">col-lg-auto</div>
+              </div>
+              <div class="column">
+                <div class="bg-gray docs-block">col</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- auto width column example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-auto"</span>&gt;</span>col-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-lg-auto col-6"</span>&gt;</span>col-lg-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/layout/hero.html b/public/css/spectre-0.5.8/docs/layout/hero.html
new file mode 100644
index 0000000..b749778
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/layout/hero.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hero - Layout - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/layout/hero.html">
+    <meta property="og:title" content="Hero - Layout - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/layout/hero.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="hero">
+            <h3 class="s-title">Hero<a class="anchor" href="#hero" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Hero container shows key featured content or information.</p>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="hero bg-gray">
+                  <div class="hero-body">
+                    <h1>Hero title</h1>
+                    <p>This is a hero example</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- hero example --&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="hero hero-sm bg-dark">
+                  <div class="hero-body">
+                    <h1>Hero title</h1>
+                    <p>This is a hero example</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="hero hero-lg bg-primary">
+                  <div class="hero-body">
+                    <h1>Hero title</h1>
+                    <p>This is a hero example</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/layout/navbar.html b/public/css/spectre-0.5.8/docs/layout/navbar.html
new file mode 100644
index 0000000..136ebf2
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/layout/navbar.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Navbar - Layout - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/layout/navbar.html">
+    <meta property="og:title" content="Navbar - Layout - Spectre.css CSS Framework">
+    <meta property="og:description" content="Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/layout/navbar.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="navbar">
+            <h3 class="s-title">Navbar<a class="anchor" href="#navbar" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Navbar is a layout container that appears in the header of apps and websites.</p>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="navbar">
+                  <div class="navbar-section"><a class="navbar-brand text-bold mr-2" href="#navbar">SPECTRE.CSS</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
+                  <div class="navbar-section">
+                    <div class="input-group input-inline">
+                      <input class="form-input" type="text" placeholder="search">
+                      <button class="btn btn-primary input-group-btn">Search</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p>
+              The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
+              Each section with the <code>navbar-section</code> class will be evenly distributed in the container.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-brand mr-2"</span>&gt;</span>Spectre.css<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Docs<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>GitHub<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"search"</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>&gt;</span>Search<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
+</code></pre>
+            <p>You can use <code>navbar-center</code> class to have a centered section.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="navbar">
+                  <div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div>
+                  <div class="navbar-center"><img src="../img/spectre-logo.svg" alt="Spectre.css"></div>
+                  <div class="navbar-section"><a class="btn btn-link" href="https://twitter.com/spectrecss">Twitter</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
+                </div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Docs<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Examples<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-center"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- centered logo or brand --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Twitter<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>GitHub<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/layout/responsive.html b/public/css/spectre-0.5.8/docs/layout/responsive.html
new file mode 100644
index 0000000..056f201
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/layout/responsive.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Responsive - Layout - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/layout/responsive.html">
+    <meta property="og:title" content="Responsive - Layout - Spectre.css CSS Framework">
+    <meta property="og:description" content="Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/layout/responsive.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="responsive">
+            <h3 class="s-title">Responsive<a class="anchor" href="#responsive" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
+            <div class="docs-demo columns">
+              <div class="column col-10 col-lg-8 col-md-6 col-sm-4">
+                <div class="bg-gray docs-block">
+                  <div class="text-primary">col-10</div>
+                  <div class="text-dark hide-lg">col-lg-8</div>
+                  <div class="text-primary show-lg">col-lg-8</div>
+                  <div class="text-dark hide-md">col-md-6</div>
+                  <div class="text-primary show-md">col-md-6</div>
+                  <div class="text-dark hide-sm">col-sm-4</div>
+                  <div class="text-primary show-sm">col-sm-4</div>
+                </div>
+              </div>
+              <div class="column col-2 col-lg-4 col-md-6 col-sm-8">
+                <div class="bg-gray docs-block">
+                  <div class="text-primary">col-2</div>
+                  <div class="text-dark hide-lg">col-lg-4</div>
+                  <div class="text-primary show-lg">col-lg-4</div>
+                  <div class="text-dark hide-md">col-md-6</div>
+                  <div class="text-primary show-md">col-md-6</div>
+                  <div class="text-dark hide-sm">col-sm-8</div>
+                  <div class="text-primary show-sm">col-sm-8</div>
+                </div>
+              </div>
+            </div>
+            <p>There are <code>col-xs-<1-12></code>, <code>col-sm-<1-12></code>, <code>col-md-<1-12></code>, <code>col-lg-<1-12></code> and <code>col-xl-<1-12></code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
+            <ul>
+              <li><code>col-xs-<1-12></code> apply to window width smaller than or equal to <strong>480px</strong>.</li>
+              <li><code>col-sm-<1-12></code> apply to window width smaller than or equal to <strong>600px</strong>.</li>
+              <li><code>col-md-<1-12></code> apply to window width smaller than or equal to <strong>840px</strong>.</li>
+              <li><code>col-lg-<1-12></code> apply to window width smaller than or equal to <strong>960px</strong>.</li>
+              <li><code>col-xl-<1-12></code> apply to window width smaller than or equal to <strong>1280px</strong>.</li>
+              <li><code>col-<1-12></code> apply to all window width, including the width wider than <strong>1280px</strong>.</li>
+            </ul>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-6"</span>&gt;</span>col-xs-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>&gt;</span>col-xs-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>&gt;</span>col-xs-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="responsive-container">Responsive container<a class="anchor" href="#responsive-container" aria-hidden="true">#</a></h4>
+            <p>
+              The responsive layout also provides fixed-width containers.
+              Use <code>grid-xs</code>(480px), <code>grid-sm</code>(600px), <code>grid-md</code>(840px), <code>grid-lg</code>(960px) or <code>grid-xl</code>(1280px) to the container for a fixed-width container with the specific max-width.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- 100% width container with max-width set to grid-lg (960px) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container grid-lg"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    ...
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="responsive-visibility">Responsive visibility<a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a></h4>
+            <p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <table class="docs-table table table-striped text-center">
+                  <thead>
+                    <tr>
+                      <th></th>
+                      <th>size-xs</th>
+                      <th>size-sm</th>
+                      <th>size-md</th>
+                      <th>size-lg</th>
+                      <th>size-xl</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="text-left">hide-xs</td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">hide-sm</td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">hide-md</td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">hide-lg</td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">hide-xl</td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p>
+            <ul>
+              <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>.</li>
+              <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>.</li>
+              <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>.</li>
+              <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>.</li>
+              <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>.</li>
+            </ul>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <table class="docs-table table table-striped text-center">
+                  <thead>
+                    <tr>
+                      <th></th>
+                      <th>size-xs</th>
+                      <th>size-sm</th>
+                      <th>size-md</th>
+                      <th>size-lg</th>
+                      <th>size-xl</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="text-left">show-xs</td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">show-sm</td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">show-md</td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">show-lg</td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-secondary docs-dot"></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-left">show-xl</td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                      <td>
+                        <div class="bg-primary docs-dot"></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p>
+            <ul>
+              <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>.</li>
+              <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>.</li>
+              <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>.</li>
+              <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>.</li>
+              <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>.</li>
+            </ul>
+            <h4 class="s-subtitle" id="responsive-resizer">Responsive Resizer<a class="anchor" href="#responsive-resizer" aria-hidden="true">#</a></h4>
+            <p>
+              Spectre also has a responsive web test tool Responsive Resizer. 
+              You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.
+            </p>
+            <p><a class="btn btn-primary" href="https://picturepan2.github.io/responsive-resizer/" target="_blank">Responsive Resizer</a></p>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/rtl.html b/public/css/spectre-0.5.8/docs/rtl.html
new file mode 100644
index 0000000..f5b768f
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/rtl.html
@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="robots" content="index, follow">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="author" content="https://github.com/picturepan2/">
+  <title>Spectre RTL (Right-to-left) - Spectre.css CSS Framework</title>
+  <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
+  <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
+  <link rel="stylesheet" href="dist/spectre-rtl.min.css">
+  <link rel="stylesheet" href="dist/docs.min.css">
+</head>
+<body>
+  <div class="docs-container off-canvas off-canvas-sidebar-show">
+    <div class="docs-navbar">
+      <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
+        <i class="icon icon-menu"></i>
+      </a>
+      <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+    </div>
+
+    <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
+      <div class="docs-brand">
+        <a href="index.html" class="docs-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+          <h2>SPECTRE</h2>
+        </a>
+      </div>
+      <div class="docs-nav">
+        <div class="accordion-container">
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked>
+            <label class="accordion-header c-hand" for="docs-accordion-1">
+              Getting started
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="getting-started.html">Introduction</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#installation">Installation</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#custom">Custom version</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#browsers">Browser support</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#whatsnew">What's new</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-2">
+              Elements
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="elements.html">Typography</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#tables">Tables</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#buttons">Buttons</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#forms">Forms</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#icons">Icons</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#labels">Labels</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#codes">Codes</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#media">Media</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-3">
+              Layout
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="layout.html">Flexbox grid</a>
+                </li>
+                <li class="menu-item">
+                  <a href="layout.html#responsive">Responsive</a>
+                </li>
+                <li class="menu-item">
+                  <a href="layout.html#navbar">Navbar</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-4">
+              Components
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="components.html">Accordions</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#avatars">Avatars</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#badges">Badges</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#bars">Bars</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#breadcrumbs">Breadcrumbs</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#cards">Cards</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#chips">Chips</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#empty">Empty states</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#menus">Menus</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#modals">Modals</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#navs">Navs</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#pagination">Pagination</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#panels">Panels</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#popovers">Popovers</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#steps">Steps</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#tabs">Tabs</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#tiles">Tiles</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#toasts">Toasts</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#tooltips">Tooltips</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-5">
+              Utilities
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="utilities.html">Colors</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#cursors">Cursors</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#display">Display</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#divider">Divider</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#loading">Loading</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#position">Position</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#shapes">Shapes</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#text">Text</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-6">
+              Experimentals
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="experimentals.html">Autocomplete</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#calendars">Calendars</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#carousels">Carousels</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#comparison">Comparison sliders</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#filters">Filters</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#meters">Meters</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#off-canvas">Off-canvas</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#parallax">Parallax</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#progress">Progress</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#sliders">Sliders</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#timelines">Timelines</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <a class="off-canvas-overlay" href="#close"></a>
+
+    <div id="content" class="docs-content off-canvas-content">
+      <div id="introduction" class="container">
+        <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
+        <div class="docs-note">
+          <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="docs-ad">
+          <div class="hide-md">
+            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+            <!-- GitHub-lg -->
+            <ins class="adsbygoogle"
+                  style="display:inline-block;width:728px;height:90px"
+                  data-ad-client="ca-pub-2225124559530218"
+                  data-ad-slot="9894180784"></ins>
+            <script>
+            (adsbygoogle = window.adsbygoogle || []).push({});
+            </script>
+          </div>
+          <div class="show-md">
+            <!-- GitHub-sm -->
+            <ins class="adsbygoogle"
+                  style="display:inline-block;width:300px;height:250px"
+                  data-ad-client="ca-pub-2225124559530218"
+                  data-ad-slot="9278881734"></ins>
+            <script>
+            (adsbygoogle = window.adsbygoogle || []).push({});
+            </script>
+          </div>
+        </div>
+      </div>
+
+      <div id="installation" class="container">
+        <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
+        <div class="docs-note">
+          <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p>
+        </div>
+        <div class="docs-note">
+          <p class="h5">Install manually</p>
+          <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
+          <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
+          <p>Include <code>spectre.css</code> located in <strong>/dist</strong> in your website or Web app &lt;head&gt;. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="docs-ad docs-ad-sidebar">
+          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
+        </div>
+      </div>
+
+      <footer class="docs-footer">
+        <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
+        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+      </footer>
+
+    </div>
+  </div>
+
+  <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+  </script>
+</body>
+</html>
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_ad-c.pug b/public/css/spectre-0.5.8/docs/src/_layout/_ad-c.pug
new file mode 100644
index 0000000..79b3e2c
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_ad-c.pug
@@ -0,0 +1,3 @@
+block ad-carbons
+  .docs-ad.docs-ad-sidebar.text-center
+    script#_carbonads_js(async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_ad-g.pug b/public/css/spectre-0.5.8/docs/src/_layout/_ad-g.pug
new file mode 100644
index 0000000..c227ea8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_ad-g.pug
@@ -0,0 +1,13 @@
+block ad-adsense
+  .docs-ad
+    .hide-md.text-center
+      script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
+      // GitHub-lg
+      ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784')
+      script.
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    .show-md.text-center
+      // GitHub-sm
+      ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734')
+      script.
+        (adsbygoogle = window.adsbygoogle || []).push({});
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_docs-layout.pug b/public/css/spectre-0.5.8/docs/src/_layout/_docs-layout.pug
new file mode 100644
index 0000000..dcec070
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_docs-layout.pug
@@ -0,0 +1,120 @@
+extends _layout.pug
+include _mixins.pug
+
+block content
+  .docs-container.off-canvas.off-canvas-sidebar-show
+    .docs-navbar
+      a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
+        i.icon.icon-menu
+      .btns.d-flex
+        input.docs-search.form-input(type="text" placeholder="Search Docs")
+        a.btn.ml-1(href='https://www.paypal.me/picturepan2' target='_blank') PayPal
+        a.btn.btn-primary.ml-1(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+
+    #sidebar.docs-sidebar.off-canvas-sidebar
+      .docs-brand
+        if slug != parent
+          a.docs-logo(href='../index.html')
+            img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+            h2 SPECTRE
+            small.label.label-secondary.text-bold DOCS
+        else
+          a.docs-logo(href='index.html')
+            img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+            h2 SPECTRE
+            small.label.label-secondary.text-bold DOCS
+      .docs-nav
+        .accordion-container
+          +docs-accordion(
+            'getting-started',
+            'Getting started',
+            {url: 'installation', name: 'Installation'},
+            {url: 'custom', name: 'Custom version'},
+            {url: 'browsers', name: 'Browser support'},
+            {url: 'whatsnew', name: 'What\'s new'}
+          )
+          +docs-accordion(
+            'elements',
+            'Elements',
+            {url: 'typography', name: 'Typography'},
+            {url: 'tables', name: 'Tables'},
+            {url: 'buttons', name: 'Buttons'},
+            {url: 'forms', name: 'Forms'},
+            {url: 'icons', name: 'Icons.css'},
+            {url: 'labels', name: 'Labels'},
+            {url: 'code', name: 'Code'},
+            {url: 'media', name: 'Media'}
+          )
+          +docs-accordion(
+            'layout',
+            'Layout',
+            {url: 'grid', name: 'Flexbox grid'},
+            {url: 'responsive', name: 'Responsive'},
+            {url: 'hero', name: 'Hero'},
+            {url: 'navbar', name: 'Navbar'}
+          )
+          +docs-accordion(
+            'components',
+            'Components',
+            {url: 'accordions', name: 'Accordions'},
+            {url: 'avatars', name: 'Avatars'},
+            {url: 'badges', name: 'Badges'},
+            {url: 'bars', name: 'Bars'},
+            {url: 'breadcrumbs', name: 'Breadcrumbs'},
+            {url: 'cards', name: 'Cards'},
+            {url: 'chips', name: 'Chips'},
+            {url: 'empty', name: 'Empty states'},
+            {url: 'menu', name: 'Menu'},
+            {url: 'modals', name: 'Modals'},
+            {url: 'nav', name: 'Nav'},
+            {url: 'pagination', name: 'Pagination'},
+            {url: 'panels', name: 'Panels'},
+            {url: 'popovers', name: 'Popovers'},
+            {url: 'steps', name: 'Steps'},
+            {url: 'tabs', name: 'Tabs'},
+            {url: 'tiles', name: 'Tiles'},
+            {url: 'toasts', name: 'Toasts'},
+            {url: 'tooltips', name: 'Tooltips'}
+          )
+          +docs-accordion(
+            'utilities',
+            'Utilities',
+            {url: 'colors', name: 'Colors'},
+            {url: 'cursors', name: 'Cursors'},
+            {url: 'display', name: 'Display'},
+            {url: 'divider', name: 'Divider'},
+            {url: 'loading', name: 'Loading'},
+            {url: 'position', name: 'Position'},
+            {url: 'shapes', name: 'Shapes'},
+            {url: 'text', name: 'Text'}
+          )
+          +docs-accordion(
+            'experimentals',
+            'Experimentals',
+            {url: 'viewer-360', name: '360-Degree Viewer'},
+            {url: 'autocomplete', name: 'Autocomplete'},
+            {url: 'calendars', name: 'Calendars'},
+            {url: 'carousels', name: 'Carousels'},
+            {url: 'comparison', name: 'Comparison sliders'},
+            {url: 'filters', name: 'Filters'},
+            {url: 'meters', name: 'Meters'},
+            {url: 'off-canvas', name: 'Off-canvas'},
+            {url: 'parallax', name: 'Parallax'},
+            {url: 'progress', name: 'Progress'},
+            {url: 'sliders', name: 'Sliders'},
+            {url: 'timelines', name: 'Timelines'}
+          )
+  
+    a.off-canvas-overlay(href='#close')
+    .off-canvas-content
+      #content.docs-content
+        block docs-content
+
+  script(type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js")
+  script.
+    docsearch({ 
+    apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+    indexName: 'picturepan2_spectre', 
+    inputSelector: '.docs-search', 
+    debug: true
+    }); 
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_example-layout.pug b/public/css/spectre-0.5.8/docs/src/_layout/_example-layout.pug
new file mode 100644
index 0000000..c3afafe
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_example-layout.pug
@@ -0,0 +1,35 @@
+block variables
+  - var slug = ''
+  - var parent = ''
+  - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='robots' content='index, follow')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
+    meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='description' content= description)
+    link(rel='shortcut icon' href='../img/favicons/favicon.ico')
+    link(rel='icon' href='../img/favicons/favicon.png')
+    link(rel='stylesheet' href='../dist/spectre.min.css')
+    link(rel='stylesheet' href='../dist/spectre-icons.min.css')
+    link(rel='stylesheet' href='../dist/spectre-exp.min.css')
+    link(rel='stylesheet' href='../dist/docs.min.css') 
+
+  body
+    block content
+
+    script.
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+
+  
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_footer.pug b/public/css/spectre-0.5.8/docs/src/_layout/_footer.pug
new file mode 100644
index 0000000..a8d7d93
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_footer.pug
@@ -0,0 +1,19 @@
+#copyright.docs-footer.container.grid-lg
+  p
+    a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+    |  · 
+    a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+    |  · 
+    a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+    |  · 
+    a(href='https://www.patreon.com/spectrecss' target='_blank') Patreon Sponsor
+    |  · Version 
+    span.version
+  p
+    | Designed and built with 
+    span.text-error &hearts;
+    |  by 
+    a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu
+    | . Licensed under the 
+    a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License
+    | .
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_layout.pug b/public/css/spectre-0.5.8/docs/src/_layout/_layout.pug
new file mode 100644
index 0000000..676bda5
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_layout.pug
@@ -0,0 +1,62 @@
+block global
+  - var domain = 'https://picturepan2.github.io/spectre/'
+  - var url = domain
+
+block variables
+  - var slug = ''
+  - var parent = ''
+  - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+if slug == parent
+  if slug == 'index'
+    - var url = domain 
+  else
+    - var url = domain + slug + '.html'
+else 
+  - var url = domain + parent + '/' + slug + '.html'
+
+doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='robots' content='index, follow')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
+    meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='description' content= description)
+    meta(name='author' content='Yan Zhu')
+    meta(property='og:url' content= url)
+    meta(property='og:title' content= title)
+    meta(property='og:description' content= description)
+    meta(name='twitter:card' content='summary')
+    meta(name='twitter:site' content='@spectrecss')
+    meta(name='twitter:creator' content='@picturepan2')
+    if slug != parent
+      link(rel='shortcut icon' href='../img/favicons/favicon.ico')
+      link(rel='icon' href='../img/favicons/favicon.png')
+      link(rel='stylesheet' href='../dist/spectre.min.css')
+      link(rel='stylesheet' href='../dist/spectre-icons.min.css')
+      link(rel='stylesheet' href='../dist/spectre-exp.min.css')
+      link(rel='stylesheet' href='../dist/docs.min.css') 
+    else 
+      link(rel='shortcut icon' href='img/favicons/favicon.ico')
+      link(rel='icon' href='img/favicons/favicon.png')
+      link(rel='stylesheet' href='dist/spectre.min.css')
+      link(rel='stylesheet' href='dist/spectre-icons.min.css')
+      link(rel='stylesheet' href='dist/spectre-exp.min.css')
+      link(rel='stylesheet' href='dist/docs.min.css')
+    link(rel='canonical' href= url)
+
+  body
+    block content
+
+    script.
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+  
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/_layout/_mixins.pug b/public/css/spectre-0.5.8/docs/src/_layout/_mixins.pug
new file mode 100644
index 0000000..4d75f85
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/_layout/_mixins.pug
@@ -0,0 +1,25 @@
+mixin docs-accordion(id, name, ...pages)
+  .accordion
+    input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(parent === id ? true : false))
+    label.accordion-header.c-hand(for='accordion-' + id)= name
+    .accordion-body
+      ul.menu.menu-nav
+        each page in pages
+          li.menu-item
+            if slug != parent
+              a(href='../' + id + '/' + page.url + '.html')= page.name
+            else
+              a(href=id + '/' + page.url + '.html')= page.name
+
+mixin docs-heading(id, name)
+  .container(id=id)
+    h3.s-title
+      | #{name}
+      a.anchor(href='#'+id aria-hidden='true') #
+    if block
+      block
+
+mixin docs-subheading(id, name)
+  h4.s-subtitle(id=id)
+    | #{name}
+    a.anchor(href='#'+id aria-hidden='true') #
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components.pug b/public/css/spectre-0.5.8/docs/src/components.pug
new file mode 100644
index 0000000..b3890d9
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components.pug
@@ -0,0 +1,193 @@
+extends _layout/_docs-layout.pug
+
+block variables
+  - var slug = 'components'
+  - var parent = 'components'
+  - var title = 'Components - Spectre.css CSS Framework'
+  - var description = 'Accordions, Avatars, Badges, Bars, Breadcrumbs, Cards, Chips, Empty states, Menu, Modals, Nav, Pagination, Panels, Popovers, teps, Tabs, TIles, Toasts, Tooltips'
+
+block docs-content
+  +docs-heading('components', 'Components')
+    include _layout/_ad-g.pug
+
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Accordions
+          .card-body
+            | Used to toggle sections of content
+          .card-footer
+            a.btn.btn-primary(href="components/accordions.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Avatars
+          .card-body
+            | User profile pictures
+          .card-footer
+            a.btn.btn-primary(href="components/avatars.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Badges
+          .card-body
+            | Used as unread number indicators
+          .card-footer
+            a.btn.btn-primary(href="components/badges.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Bars
+          .card-body
+            | Progress of a task or the value within the known range
+          .card-footer
+            a.btn.btn-primary(href="components/bars.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Breadcrumbs
+          .card-body
+            | Navigational hierarchies to indicate current location
+          .card-footer
+            a.btn.btn-primary(href="components/breadcrumbs.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Cards
+          .card-body
+            | Flexible content containers
+          .card-footer
+            a.btn.btn-primary(href="components/cards.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Chips
+          .card-body
+            | Complex entities in small blocks
+          .card-footer
+            a.btn.btn-primary(href="components/chips.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Empty states
+          .card-body
+            | Navigational hierarchies to indicate current location
+          .card-footer
+            a.btn.btn-primary(href="components/empty.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Menu
+          .card-body
+            | Vertical list of links or buttons for actions and navigation
+          .card-footer
+            a.btn.btn-primary(href="components/menu.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Modals
+          .card-body
+            | Flexible dialog prompts
+          .card-footer
+            a.btn.btn-primary(href="components/modals.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Nav
+          .card-body
+            | Vertical list of links
+          .card-footer
+            a.btn.btn-primary(href="components/nav.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Pagination
+          .card-body
+            | Vertical list of links or buttons for actions and navigation
+          .card-footer
+            a.btn.btn-primary(href="components/pagination.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Panels
+          .card-body
+            | Flexible view container with auto-expand content section
+          .card-footer
+            a.btn.btn-primary(href="components/panels.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Popovers
+          .card-body
+            | Small overlay content containers
+          .card-footer
+            a.btn.btn-primary(href="components/popovers.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Steps
+          .card-body
+            | Progress indicators of a sequence of task steps
+          .card-footer
+            a.btn.btn-primary(href="components/steps.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tabs
+          .card-body
+            | Switch between different views
+          .card-footer
+            a.btn.btn-primary(href="components/tabs.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tiles
+          .card-body
+            | Repeatable or embeddable information blocks
+          .card-footer
+            a.btn.btn-primary(href="components/tiles.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Toasts
+          .card-body
+            | Progress indicators of a sequence of task steps
+          .card-footer
+            a.btn.btn-primary(href="components/toasts.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tooltips
+          .card-body
+            | Context information labels that appear on hover and focus
+          .card-footer
+            a.btn.btn-primary(href="components/tooltips.html") View
+              
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/accordions.pug b/public/css/spectre-0.5.8/docs/src/components/accordions.pug
new file mode 100644
index 0000000..a03a179
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/accordions.pug
@@ -0,0 +1,129 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'accordions'
+  - var parent = 'components'
+  - var title = 'Accordions - Components - Spectre.css CSS Framework'
+  - var description = 'Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('accordions', 'Accordions')
+    include ../_layout/_ad-g.pug
+    
+    p Accordions are used to toggle sections of content.
+
+    .docs-demo.columns
+      .column.col-6.col-md-12
+        .accordion
+          input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
+          label.accordion-header.c-hand(for="accordion-1")
+            i.icon.icon-arrow-right.mr-1
+            | Elements
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Element 1
+              li.menu-item
+                a(href="#accordions") Element 2
+        .accordion
+          input#accordion-2(type="radio" name="accordion-radio" hidden="")
+          label.accordion-header.c-hand(for="accordion-2")
+            i.icon.icon-arrow-right.mr-1
+            | Layout
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Layout 1
+              li.menu-item
+                a(href="#accordions") Layout 2
+        .accordion
+          input#accordion-3(type="radio" name="accordion-radio" hidden="")
+          label.accordion-header.c-hand(for="accordion-3")
+            i.icon.icon-arrow-right.mr-1
+            | Components
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Component 1
+              li.menu-item
+                a(href="#accordions") Component 2
+      .column.col-6.col-md-12
+        .accordion
+          input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="")
+          label.accordion-header.c-hand(for="accordion-4")
+            | Elements
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Element 1
+              li.menu-item
+                a(href="#accordions") Element 2
+        .accordion
+          input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="")
+          label.accordion-header.c-hand(for="accordion-5")
+            | Layout
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Layout 1
+              li.menu-item
+                a(href="#accordions") Layout 2
+        .accordion
+          input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="")
+          label.accordion-header.c-hand(for="accordion-6")
+            | Components
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Component 1
+              li.menu-item
+                a(href="#accordions") Component 2
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- standard Accordions example -->
+          <div class="accordion">
+            <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+            <label class="accordion-header" for="accordion-1">
+              <i class="icon icon-arrow-right mr-1"></i>
+              Title
+            </label>
+            <div class="accordion-body">
+              <!-- Accordions content -->
+            </div>
+          </div>
+
+          <!-- mutually exclusive Accordions example (with same input names) -->
+          <div class="accordion">
+            <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+            <label class="accordion-header" for="accordion-1">
+              Title
+            </label>
+            <div class="accordion-body">
+              <!-- Accordions content -->
+            </div>
+          </div>
+
+    p
+      | Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick.
+      | Add the #[code open] attribute to #[code details] to expand it.
+      | Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- details and summary Accordions example -->
+          <details class="accordion" open>
+            <summary class="accordion-header">
+              <i class="icon icon-arrow-right mr-1"></i>
+              Title
+            </summary>
+            <div class="accordion-body">
+              <!-- Accordions content -->
+            </div>
+          </details>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/avatars.pug b/public/css/spectre-0.5.8/docs/src/components/avatars.pug
new file mode 100644
index 0000000..6714233
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/avatars.pug
@@ -0,0 +1,116 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'avatars'
+  - var parent = 'components'
+  - var title = 'Avatars - Components - Spectre.css CSS Framework'
+  - var description = 'Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('avatars', 'Avatars')
+    include ../_layout/_ad-g.pug
+    
+    p Avatars are user profile pictures. 
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl.mr-2
+          img(src="../img/avatar-1.png" alt="Avatar XL")
+        figure.avatar.avatar-lg.mr-2
+          img(src="../img/avatar-2.png" alt="Avatar LG")
+        figure.avatar.mr-2
+          img(src="../img/avatar-3.png" alt="Avatar")
+        figure.avatar.avatar-sm.mr-2
+          img(src="../img/avatar-4.png" alt="Avatar SM")
+        figure.avatar.avatar-xs.mr-2
+          img(src="../img/avatar-5.png" alt="Avatar XS")
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl.mr-2(data-initial="YZ")
+        figure.avatar.avatar-lg.mr-2(data-initial="YZ")
+        figure.avatar.mr-2(data-initial="YZ")
+        figure.avatar.avatar-sm.mr-2(data-initial="YZ")
+        figure.avatar.avatar-xs.mr-2(data-initial="YZ")
+
+    p
+      | Add the #[code avatar] class to #{'<img>'} element.
+      | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px).
+      | By default, the avatar size is 32px.
+    p
+      | For users who don't have profile pictures, you may use their initials for avatars.
+      | Add the #[code avatar] class and avatar size class to #{'<div>'}  element.
+      | The #[code data-initial] attribute is the name appear inside the avatar.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- Basic avatar examples -->
+          <figure class="avatar avatar-xl">
+            <img src="img/avatar-1.png" alt="...">
+          </figure>
+
+          <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+          <!-- Show initals when avatar image is unavailable or not fully loaded -->
+          <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+            <img src="img/avatar-1.png" alt="...">
+          </figure>
+
+    +docs-subheading('avatars-icons', 'Avatar icons')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl.mr-2
+          img(src="../img/avatar-1.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-2.png" alt="Avatar")
+        figure.avatar.avatar-lg.mr-2
+          img(src="../img/avatar-2.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-3.png" alt="Avatar")
+        figure.avatar.mr-2
+          img(src="../img/avatar-3.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-4.png" alt="Avatar")
+        figure.avatar.avatar-sm.mr-2
+          img(src="../img/avatar-4.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-5.png" alt="Avatar")
+        figure.avatar.avatar-xs
+          img(src="../img/avatar-5.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-1.png" alt="Avatar")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="avatar avatar-xl">
+            <img src="img/avatar-1.png" alt="...">
+            <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+          </figure>
+
+    +docs-subheading('avatars-presence', 'Avatar presence')
+            
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl.mr-2(data-initial="YZ")
+          i.avatar-presence.online
+        figure.avatar.avatar-lg.mr-2(data-initial="YZ")
+          i.avatar-presence.busy
+        figure.avatar.mr-2(data-initial="YZ")
+          i.avatar-presence.away
+        figure.avatar.avatar-sm.mr-2(data-initial="YZ")
+          i.avatar-presence.offline
+        figure.avatar.avatar-xs.mr-2(data-initial="YZ")
+          i.avatar-presence.online
+
+    p
+      | Avatars support presence indicators.
+      | You can add an #{'<i>'} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors.
+      | The default is gray which means offline.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="avatar avatar-xl">
+            <img src="img/avatar-1.png" alt="...">
+            <i class="avatar-presence online"></i>
+          </figure>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/badges.pug b/public/css/spectre-0.5.8/docs/src/components/badges.pug
new file mode 100644
index 0000000..c87a6a0
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/badges.pug
@@ -0,0 +1,75 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'badges'
+  - var parent = 'components'
+  - var title = 'Badges - Components - Spectre.css CSS Framework'
+  - var description = 'Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('badges', 'Badges')
+    include ../_layout/_ad-g.pug
+
+    p Badges are often used as unread number indicators.
+
+    .docs-demo.columns
+      .column.col-3.col-xs-6
+        span.badge(data-badge="")
+          | Notifications
+      .column.col-3.col-xs-6
+        span.badge(data-badge="8")
+          | Notifications
+      .column.col-3.col-xs-6
+        span.badge(data-badge="88")
+          | Notifications
+      .column.col-3.col-xs-6
+        span.badge(data-badge="888")
+          | Notifications
+
+    p
+      | Add the #[code badge] class to non self closing elements.
+      | And add the #[code data-badge] attribute to define the content of a badge.
+      | The badge will appear in the top-right direction of the element.
+    p
+      | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
+
+    .docs-demo.columns
+      .column.col-sm-12
+        button.btn.badge(data-badge="") Button
+        button.btn.badge(data-badge="8") Button
+      .column.col-sm-12
+        button.btn.btn-primary.badge(data-badge="") Button
+        button.btn.btn-primary.badge(data-badge="8") Button
+      .column.col-sm-12
+        figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
+          img(src="../img/avatar-1.png" alt="YZ")
+        figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
+          img(src="../img/avatar-2.png" alt="YZ")
+        figure.avatar.badge(data-badge="8" data-initial="YZ")
+          img(src="../img/avatar-3.png" alt="YZ")
+
+    p
+      | Badges support #[code button] and #[code avatars] elements as well.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <span class="badge">
+            Notifications
+          </span>
+
+          <span class="badge" data-badge="8">
+            Notifications
+          </span>
+
+          <button class="btn badge" data-badge="8">
+            Button
+          </button>
+
+          <figure class="avatar badge" data-badge="8" data-initial="YZ">
+            <img src="img/avatar-3.png" alt="YZ">
+          </figure>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/bars.pug b/public/css/spectre-0.5.8/docs/src/components/bars.pug
new file mode 100644
index 0000000..29bc2c8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/bars.pug
@@ -0,0 +1,98 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'bars'
+  - var parent = 'components'
+  - var title = 'Bars - Components - Spectre.css CSS Framework'
+  - var description = 'Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('bars', 'Bars')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Bars represent the progress of a task or the value within the known range.
+      | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements.
+
+    .docs-demo.columns
+      .column.col-8.col-xs-12
+        .bar.bar-sm
+          .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
+      .column.col-8.col-xs-12
+        .bar
+          .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
+      .column.col-8.col-xs-12
+        .bar
+          .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
+          .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
+          .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
+          .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
+
+    p
+      | Add a container element with the #[code bar] class.
+      | And add child elements with the #[code bar-item] class.
+      | The width percentage value is needed for every #[code bar-item].
+
+    p
+      | There is the #[code bar-sm] class for thinner Bars.
+      | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal bars -->
+          <div class="bar bar-sm">
+            <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+
+          <!-- multi-bars -->
+          <div class="bar">
+            <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+            <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+          </div>
+
+    +docs-subheading('bars-slider', 'Slider bars')
+
+    .docs-demo.columns
+      .column.col-8.col-xs-12
+        .bar.bar-slider
+          .bar-item(role="progressbar" style="width:50%;")
+            button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
+      .column.col-8.col-xs-12
+        .bar.bar-slider
+          .bar-item(role="progressbar" style="width:15%;")
+            button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
+          .bar-item(role="progressbar" style="width:65%;")
+            button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
+
+    p
+      | You can add the #[code bar-slider] class to the Bars container.
+      | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
+      | You need to set the #[code bar-item] width manually to have the slider point.
+
+    p
+      | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal slider -->
+          <div class="bar bar-slider">
+            <div class="bar-item" role="progressbar" style="width:25%;">
+              <button class="bar-slider-btn btn" role="slider"></button>
+            </div>
+          </div>
+
+          <!-- range slider -->
+          <div class="bar bar-slider">
+            <div class="bar-item" role="progressbar" style="width:15%;">
+              <button class="bar-slider-btn btn" role="slider"></button>
+            </div>
+            <div class="bar-item" role="progressbar" style="width:65%;">
+              <button class="bar-slider-btn btn" role="slider"></button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/breadcrumbs.pug b/public/css/spectre-0.5.8/docs/src/components/breadcrumbs.pug
new file mode 100644
index 0000000..d01c445
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/breadcrumbs.pug
@@ -0,0 +1,61 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'breadcrumbs'
+  - var parent = 'components'
+  - var title = 'Breadcrumbs - Components - Spectre.css CSS Framework'
+  - var description = 'Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('breadcrumbs', 'Breadcrumbs')
+    include ../_layout/_ad-g.pug
+
+    p Breadcrumbs are used as navigational hierarchies to indicate current location.
+
+    .docs-demo.columns
+      .column.col-12
+        ul.breadcrumb
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+      .column.col-12
+        ul.breadcrumb
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar
+      .column.col-12
+        ul.breadcrumb
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+          li.breadcrumb-item
+            | Search result: 
+            a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre
+
+    p
+      | Add a container element with the #[code breadcrumb] class.
+      | And add child elements with the #[code breadcrumb-item] class.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="breadcrumb">
+            <li class="breadcrumb-item">
+              <a href="#">Home</a>
+            </li>
+            <li class="breadcrumb-item">
+              <a href="#">Settings</a>
+            </li>
+            <li class="breadcrumb-item">
+              <a href="#">Change avatar</a>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/cards.pug b/public/css/spectre-0.5.8/docs/src/components/cards.pug
new file mode 100644
index 0000000..5917736
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/cards.pug
@@ -0,0 +1,110 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'cards'
+  - var parent = 'components'
+  - var title = 'Cards - Components - Spectre.css CSS Framework'
+  - var description = 'Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('cards', 'Cards')
+    include ../_layout/_ad-g.pug
+
+    p Cards are flexible content containers.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-image
+            img.img-responsive(src="../img/osx-el-capitan.jpg" alt="OS X El Capitan")
+          .card-header
+            .card-title.h5 Microsoft
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | Empower every person and every organization on the planet to achieve more.
+          .card-footer
+            a.btn.btn-primary(href="#cards") Do
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Hardware and software
+          .card-image
+            img.img-responsive(src="../img/osx-yosemite.jpg" alt="OS X Yosemite")
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-footer
+            .btn-group.btn-group-block
+              button.btn.btn-primary Buy
+              button.btn Buy
+              button.btn Buy
+      .column.col-6.col-xs-12
+        .card
+          .card-image
+            img.img-responsive(src="../img/macos-sierra-2.jpg" alt="macOS Sierra")
+          .card-header
+            button.btn.btn-primary.float-right
+              i.icon.icon-plus
+            .card-title.h5 Google I/O
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+      .column.col-6.col-xs-12
+        .card
+          .card-image
+            img.img-responsive(src="../img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
+          .card-footer
+            a.btn.btn-primary(href="#cards") Buy
+            a.btn.btn-link(href="#cards") Share
+          .card-body
+            strong Surface Studio
+            | . Turn your desk into a Studio. Surface Studio is designed for the creative process.
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Hardware and software
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-image
+            img.img-responsive(src="../img/macos-sierra.jpg" alt="macOS Sierra")
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Google
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | Organize the world’s information and make it universally accessible and useful.
+          .card-image
+            img.img-responsive(src="../img/osx-yosemite-2.jpg" alt="OS X Yosemite")
+          .card-footer
+            a.btn.btn-primary(href="#cards") Search
+            a.btn.btn-link(href="#cards") Share
+
+    p
+      | Add a container element with the #[code card] class.
+      | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
+      | The #[code card-image] can be placed in any position.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="card">
+            <div class="card-image">
+              <img src="img/osx-el-capitan.jpg" class="img-responsive">
+            </div>
+            <div class="card-header">
+              <div class="card-title h5">...</div>
+              <div class="card-subtitle text-gray">...</div>
+            </div>
+            <div class="card-body">
+              ...
+            </div>
+            <div class="card-footer">
+              <button class="btn btn-primary">...</button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/chips.pug b/public/css/spectre-0.5.8/docs/src/components/chips.pug
new file mode 100644
index 0000000..72c3ea7
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/chips.pug
@@ -0,0 +1,60 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'chips'
+  - var parent = 'components'
+  - var title = 'Chips - Components - Spectre.css CSS Framework'
+  - var description = 'Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('chips', 'Chips')
+    include ../_layout/_ad-g.pug
+
+    p Chips are complex entities in small blocks.
+
+    .docs-demo.columns
+      .column.col-12
+        span.chip
+          | Crime
+        span.chip
+          | Drama
+        span.chip
+          | Biography
+          a.btn.btn-clear(href="#" aria-label="Close" role="button")
+        span.chip
+          | Mystery
+          a.btn.btn-clear(href="#" aria-label="Close" role="button")
+      .column.col-12
+        .chip
+          figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+          | Tony Stark
+        .chip
+          img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
+          | Thor Odinson
+        .chip
+          img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
+          | Steve Rogers
+
+    p
+      | Add a container element with the #[code chip] class.
+      | And add child text element, buttons or avatars with the #[code avatar] class.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <span class="chip">Crime</span>
+      
+          <span class="chip">
+            Biography
+            <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+          </span>
+
+          <div class="chip">
+            <img src="img/avatar-1.png" class="avatar avatar-sm">
+            Yan Zhu
+            <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/empty.pug b/public/css/spectre-0.5.8/docs/src/components/empty.pug
new file mode 100644
index 0000000..51ebadc
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/empty.pug
@@ -0,0 +1,66 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'empty'
+  - var parent = 'components'
+  - var title = 'Empty states - Components - Spectre.css CSS Framework'
+  - var description = 'Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('empty', 'Empty states')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+
+    .docs-demo.columns
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-mail
+          p.empty-title.h5 You have no new messages
+          p.empty-subtitle Click the button to start a conversation
+          .empty-action
+            button.btn.btn-primary Send a message
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-mail
+          p.empty-title.h5 You've successfully signed up
+          p.empty-subtitle Click the button to invite your friends
+          .empty-action
+            button.btn.btn-primary Invite your friends
+          .empty-action
+            button.btn.btn-link Skip
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-people
+          p.empty-title.h5 You are not following anyone
+          p.empty-subtitle Start to meet new friends
+          .empty-action.input-group.input-inline
+            input.form-input(type="text" placeholder="")
+            button.btn.btn-primary.input-group-btn Search
+
+    p
+      | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+      | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements.
+      | HTML structure is exampled below.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="empty">
+            <div class="empty-icon">
+              <i class="icon icon-people"></i>
+            </div>
+            <p class="empty-title h5">You have no new messages</p>
+            <p class="empty-subtitle">Click the button to start a conversation.</p>
+            <div class="empty-action">
+              <button class="btn btn-primary">Send a message</button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/menu.pug b/public/css/spectre-0.5.8/docs/src/components/menu.pug
new file mode 100644
index 0000000..e5331c0
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/menu.pug
@@ -0,0 +1,215 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'menu'
+  - var parent = 'components'
+  - var title = 'Menu - Components - Spectre.css CSS Framework'
+  - var description = 'Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('menu', 'Menu')
+    include ../_layout/_ad-g.pug
+
+    p Menus are vertical list of links or buttons for actions and navigation.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        ul.menu
+          li.menu-item
+            .tile.tile-centered
+              .tile-icon
+                img.avatar(src="../img/avatar-4.png" alt="Avatar")
+              .tile-content
+                | Steve Rogers
+          li.divider
+          li.menu-item
+            a.active(href="#menus")
+              | My profile
+            .menu-badge
+              label.form-checkbox
+                input(type="checkbox")
+                i.form-icon
+                | Public
+          li.menu-item
+            a(href="#menus")
+              | Settings
+            .menu-badge
+              label.label.label-primary 2
+          li.menu-item
+            a(href="#menus")
+              | Logout
+      .column.col-4.col-xs-12
+        ul.menu
+          li.divider(data-content="LINKS")
+          li.menu-item
+            a(href="#menus") Slack
+          li.menu-item
+            a(href="#menus") Hipchat
+          li.menu-item
+            a(href="#menus") Skype
+      .column.col-4.col-xs-12
+        ul.menu
+          li.menu-item
+            label.form-checkbox
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  form-checkbox
+          li.menu-item
+            label.form-radio
+              input(type="radio" checked="")
+              i.form-icon
+              |  form-radio
+          li.menu-item
+            label.form-switch
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  form-switch
+
+    p
+      | Add a container element with the #[code menu] class.
+      | And add child elements with the #[code menu-item] class.
+      | You can separate menu items with a #[code divider].
+      | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+    p
+      | Menus also have #[a(href="../elements/forms.html" target="_blank") Form controls] (checkbox, radio and checkbox) support.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="menu">
+            <!-- menu header text -->
+            <li class="divider" data-content="LINKS">
+            </li>
+            <!-- menu item standard -->
+            <li class="menu-item">
+              <a href="#">
+                <i class="icon icon-link"></i> Slack
+              </a>
+            </li>
+            <!-- menu item with form control -->
+            <li class="menu-item">
+              <label class="form-checkbox">
+                <input type="checkbox">
+                <i class="form-icon"></i> form-checkbox
+              </label>
+            </li>
+            <!-- menu divider -->
+            <li class="divider"></li>
+            <!-- menu item with badge -->
+            <li class="menu-item">
+              <a href="#">
+                <i class="icon icon-link"></i> Settings
+              </a>
+              <div class="menu-badge">
+                <label class="label label-primary">2</label>
+              </div>
+            </li>
+
+            <li class="menu-item">
+              <a href="#">My profile</a>
+              <div class="menu-badge">
+                <label class="form-checkbox">
+                  <input type="checkbox">
+                  <i class="form-icon"></i> Public
+                </label>
+              </div>
+            </li>
+          </ul>
+            
+    +docs-subheading('menu-dropdown', 'Dropdown menu')
+
+    p The dropdown is a combination of buttons and menus.
+
+    .docs-demo.columns
+      .column.col-xs-12
+        .dropdown
+          .btn-group
+            a.btn.btn-primary dropdown button
+            a.btn.btn-primary.dropdown-toggle(tabindex="0")
+              i.icon.icon-caret
+            ul.menu
+              li.menu-item
+                a(href="#dropdowns")
+                  | Slack
+              li.menu-item
+                a(href="#dropdowns")
+                  | Hipchat
+              li.menu-item
+                a(href="#dropdowns")
+                  | Skype
+      .column.col-xs-12
+        .dropdown
+          a.btn.btn-link.dropdown-toggle(tabindex="0")
+            | dropdown button 
+            i.icon.icon-caret
+          ul.menu
+            li.menu-item
+              a(href="#dropdowns")
+                | Slack
+            li.menu-item
+              a(href="#dropdowns")
+                | Hipchat
+            li.menu-item
+              a(href="#dropdowns")
+                | Skype
+
+    p
+      | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
+    p
+      | Add a container element with the #[code dropdown] class.
+      | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
+      | You also need to add #[code tabindex] to make the buttons focusable.
+    p
+      | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
+
+    .docs-demo.columns
+      .column.col-xs-12.text-right
+        .dropdown.dropdown-right
+          a.btn.btn-primary.dropdown-toggle(tabindex="0")
+            | dropdown button 
+            i.icon.icon-caret
+          ul.menu.text-left
+            li.menu-item
+              a(href="#dropdowns") Slack
+            li.menu-item
+              a(href="#dropdowns") Hipchat
+            li.menu-item
+              a(href="#dropdowns") Skype
+
+    p
+      | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- basic dropdown button -->
+          <div class="dropdown">
+            <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+              dropdown menu <i class="icon icon-caret"></i>
+            </a>
+            <!-- menu component -->
+            <ul class="menu">
+              ...
+            </ul>
+          </div>
+
+          <!-- dropdown button group -->
+          <div class="dropdown">
+            <div class="btn-group">
+              <a href="#" class="btn">
+                dropdown button
+              </a>
+              <a href="#" class="btn dropdown-toggle" tabindex="0">
+                <i class="icon icon-caret"></i>
+              </a>
+
+              <!-- menu component -->
+              <ul class="menu">
+                ...
+              </ul>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/modals.pug b/public/css/spectre-0.5.8/docs/src/components/modals.pug
new file mode 100644
index 0000000..0d92b2b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/modals.pug
@@ -0,0 +1,157 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'modals'
+  - var parent = 'components'
+  - var title = 'Modals - Components - Spectre.css CSS Framework'
+  - var description = 'Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('modals', 'Modals')
+    include ../_layout/_ad-g.pug
+
+    p Modals are flexible dialog prompts.
+
+    .docs-demo.columns
+      .column
+        a.btn.btn-primary(href="#example-modal-1") Open Modal
+        #example-modal-1.modal
+          a.modal-overlay(href="#modals" aria-label="Close")
+          .modal-container(role="document")
+            .modal-header
+              a.btn.btn-clear.float-right(href="#modals" aria-label="Close")
+              .modal-title.h5 Modal title
+            .modal-body
+              .content
+                p This is the content inside the modal.
+                h4 Lorem ipsum
+                p
+                  | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+                p
+                  | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+                h4 Cupcake ipsum
+                p
+                  | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                p
+                  | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                h4 Candy ipsum
+                p
+                  | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                p
+                  | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+            .modal-footer
+              button.btn.btn-primary Share
+              a.btn.btn-link(href="#modals") Close
+
+    p
+      | Add a container element with the #[code modal] class.
+      | And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it.
+      | You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them.
+    p
+      | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+      | To make a modal appear, add the #[code active] class to the #[code modal] container.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="modal active" id="modal-id">
+            <a href="#close" class="modal-overlay" aria-label="Close"></a>
+            <div class="modal-container">
+              <div class="modal-header">
+                <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+                <div class="modal-title h5">Modal title</div>
+              </div>
+              <div class="modal-body">
+                <div class="content">
+                  <!-- content here -->
+                </div>
+              </div>
+              <div class="modal-footer">
+                ...
+              </div>
+            </div>
+          </div>
+          
+    +docs-subheading('modals-sizes', 'Modal sizes')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        a.btn.btn-primary(href="#example-modal-2") Open small size Modal
+        #example-modal-2.modal.modal-sm
+          a.modal-overlay(href="#modals-sizes" aria-label="Close")
+          .modal-container(role="document")
+            .modal-header
+              a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+              .modal-title.h5 Modal title
+            .modal-body
+              .content
+                form
+                  .form-group
+                    label.form-label(for="input-example-7") Name
+                    input#input-example-7.form-input(type="text" placeholder="Name")
+                  .form-group
+                    label.form-label Gender
+                    label.form-radio
+                      input(type="radio" name="gender")
+                      i.form-icon
+                      |  Male
+                    label.form-radio
+                      input(type="radio" name="gender" checked="")
+                      i.form-icon
+                      |  Female
+            .modal-footer
+              button.btn.btn-primary Submit
+              a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close
+
+    p
+      | Use the #[code modal-sm] class for a smaller modal dialog.
+      | The container max width is #[code 320px].
+
+    .docs-demo.columns
+      .column
+        a.btn.btn-primary(href="#example-modal-3") Open large size Modal
+        #example-modal-3.modal.modal-lg
+          a.modal-overlay(href="#modals-sizes" aria-label="Close")
+          .modal-container(role="document")
+            .modal-header
+              a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+              .modal-title.h5 Modal title
+            .modal-body
+              .content
+                p This is the content inside the modal.
+                h4 Lorem ipsum
+                p
+                  | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+                p
+                  | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+                h4 Cupcake ipsum
+                p
+                  | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                p
+                  | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                h4 Candy ipsum
+                p
+                  | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                p
+                  | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+            .modal-footer
+              button.btn.btn-primary Share
+              a.btn.btn-link(href="#modals-sizes") Close
+
+    p
+      | Use the #[code modal-lg] class for a full size modal.
+      | The container max width is #[code 960px].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="modal modal-sm">
+            <a href="#close" class="modal-overlay" aria-label="Close"></a>
+            <div class="modal-container">
+              <!-- modal structure here -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/nav.pug b/public/css/spectre-0.5.8/docs/src/components/nav.pug
new file mode 100644
index 0000000..aa09fed
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/nav.pug
@@ -0,0 +1,73 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'nav'
+  - var parent = 'components'
+  - var title = 'Nav - Components - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('nav', 'Nav')
+    include ../_layout/_ad-g.pug
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        ul.nav
+          li.nav-item
+            a(href="#nav") Elements
+          li.nav-item.active
+            a(href="#nav") Layout
+            ul.nav
+              li.nav-item
+                a(href="#nav") Flexbox grid
+              li.nav-item
+                a(href="#nav") Responsive
+              li.nav-item
+                a(href="#nav") Navbar
+              li.nav-item
+                a(href="#nav") Empty states
+          li.nav-item
+            a(href="#nav") Components
+          li.nav-item
+            a(href="#nav") Utilities
+
+    p
+      | Add a container element with the #[code nav] class.
+      | And add child elements with the #[code nav-item] class.
+      | The #[code nav-item] with the #[code active] class will be highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="nav">
+            <li class="nav-item">
+              <a href="#">Elements</a>
+            </li>
+            <li class="nav-item active">
+              <a href="#">Layout</a>
+              <ul class="nav">
+                <li class="nav-item">
+                  <a href="#">Flexbox grid</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#">Responsive</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#">Navbar</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#">Empty states</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a href="#">Components</a>
+            </li>
+            <li class="nav-item">
+              <a href="#">Utilities</a>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/pagination.pug b/public/css/spectre-0.5.8/docs/src/components/pagination.pug
new file mode 100644
index 0000000..dbb4896
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/pagination.pug
@@ -0,0 +1,118 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'pagination'
+  - var parent = 'components'
+  - var title = 'Pagination - Components - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('pagination', 'Pagination')
+    include ../_layout/_ad-g.pug
+
+    .docs-demo.columns
+      .column.col-xs-12
+        ul.pagination
+          li.page-item
+            a(href="#pagination") Prev
+          li.page-item
+            a(href="#pagination") 1
+          li.page-item
+            span ...
+          li.page-item
+            a(href="#pagination") 4
+          li.page-item.active
+            a(href="#pagination") 5
+          li.page-item
+            a(href="#pagination") 6
+          li.page-item
+            span ...
+          li.page-item
+            a(href="#pagination") 9
+          li.page-item
+            a(href="#pagination") Next
+      .column.col-xs-12
+        ul.pagination
+          li.page-item.disabled
+            a(href="#pagination" tabindex="-1") Prev
+          li.page-item.active
+            a(href="#pagination") 1
+          li.page-item
+            a(href="#pagination") 2
+          li.page-item
+            a(href="#pagination") 3
+          li.page-item
+            span ...
+          li.page-item
+            a(href="#pagination") 9
+          li.page-item
+            a(href="#pagination") Next
+
+    p
+      | Add a container element with the #[code pagination] class.
+      | And add child elements with the #[code page-item] class.
+      | The #[code page-item] with the #[code active] class will be highlighted.
+      | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="pagination">
+            <li class="page-item disabled">
+              <a href="#" tabindex="-1">Previous</a>
+            </li>
+            <li class="page-item active">
+              <a href="#">1</a>
+            </li>
+            <li class="page-item">
+              <a href="#">2</a>
+            </li>
+            <li class="page-item">
+              <a href="#">3</a>
+            </li>
+            <li class="page-item">
+              <span>...</span>
+            </li>
+            <li class="page-item">
+              <a href="#">12</a>
+            </li>
+            <li class="page-item">
+              <a href="#">Next</a>
+            </li>
+          </ul>
+
+    .docs-demo.columns
+      .column.col-12
+        ul.pagination
+          li.page-item.page-prev
+            a(href="#pagination")
+              .page-item-subtitle Previous
+              .page-item-title.h5 Getting started
+          li.page-item.page-next
+            a(href="#pagination")
+              .page-item-subtitle Next
+              .page-item-title.h5 Layout
+
+    p You could use previous and next pagination to navigate. 
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="pagination">
+            <li class="page-item page-prev">
+              <a href="#">
+                <div class="page-item-subtitle">Previous</div>
+                <div class="page-item-title h5">Getting started</div>
+              </a>
+            </li>
+            <li class="page-item page-next">
+              <a href="#">
+                <div class="page-item-subtitle">Next</div>
+                <div class="page-item-title h5">Layout</div>
+              </a>
+            </li>
+          </ul>
+          
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/panels.pug b/public/css/spectre-0.5.8/docs/src/components/panels.pug
new file mode 100644
index 0000000..048f3db
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/panels.pug
@@ -0,0 +1,130 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'panels'
+  - var parent = 'components'
+  - var title = 'Panels - Components - Spectre.css CSS Framework'
+  - var description = 'Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('panels', 'Panels')
+    include ../_layout/_ad-g.pug
+
+    p Panels are flexible view container with auto-expand content section.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .panel
+          .panel-header.text-center
+            figure.avatar.avatar-lg
+              img(src="../img/avatar-2.png" alt="Avatar")
+            .panel-title.h5.mt-10 Bruce Banner
+            .panel-subtitle THE HULK
+          nav.panel-nav
+            ul.tab.tab-block
+              li.tab-item.active
+                a(href="#panels")
+                  | Profile
+              li.tab-item
+                a(href="#panels")
+                  | Files
+              li.tab-item
+                a(href="#panels")
+                  | Tasks
+          .panel-body
+            .tile.tile-centered
+              .tile-content
+                .tile-title.text-bold E-mail
+                .tile-subtitle bruce.banner@hulk.com
+              .tile-action
+                button.btn.btn-link.btn-action.btn-lg.tooltip.tooltip-left(data-tooltip="Edit E-mail")
+                  i.icon.icon-edit
+            .tile.tile-centered
+              .tile-content
+                .tile-title.text-bold Skype
+                .tile-subtitle bruce.banner
+              .tile-action
+                button.btn.btn-link.btn-action.btn-lg
+                  i.icon.icon-edit
+            .tile.tile-centered
+              .tile-content
+                .tile-title.text-bold Location
+                .tile-subtitle Dayton, Ohio
+              .tile-action
+                button.btn.btn-link.btn-action.btn-lg
+                  i.icon.icon-edit
+          .panel-footer
+            button.btn.btn-primary.btn-block Save
+      .column.col-6.col-xs-12
+        .panel
+          .panel-header
+            .panel-title.h6 Comments
+          .panel-body
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-1.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Thor Odinson
+                p.tile-subtitle
+                  | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-2.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Bruce Banner
+                p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+            .tile
+              .tile-icon
+                figure.avatar(data-initial="TS")
+              .tile-content
+                p.tile-title.text-bold Tony Stark
+                p.tile-subtitle
+                  | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-4.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Steve Rogers
+                p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-3.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Natasha Romanoff
+                p.tile-subtitle
+                  | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+          .panel-footer
+            .input-group
+              input.form-input(type="text" placeholder="Hello")
+              button.btn.btn-primary.input-group-btn Send
+
+    p
+      | Add a container element with the #[code panel] class.
+      | And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes.
+      | The #[code panel-body] can be auto expanded and vertically scrollable.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="panel">
+            <div class="panel-header">
+              <div class="panel-title">Comments</div>
+            </div>
+            <div class="panel-nav">
+              <!-- navigation components: tabs, breadcrumbs or pagination -->
+            </div>
+            <div class="panel-body">
+              <!-- contents -->
+            </div>
+            <div class="panel-footer">
+              <!-- buttons or inputs -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/popovers.pug b/public/css/spectre-0.5.8/docs/src/components/popovers.pug
new file mode 100644
index 0000000..283b584
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/popovers.pug
@@ -0,0 +1,99 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'popovers'
+  - var parent = 'components'
+  - var title = 'Popovers - Components - Spectre.css CSS Framework'
+  - var description = 'Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('popovers', 'Popovers')
+    include ../_layout/_ad-g.pug
+
+    p Popovers are small overlay content containers. Popovers component is built entirely in CSS.
+
+    .docs-demo.columns
+      .column.col-3.col-sm-6
+        .popover
+          a.btn.btn-primary(href="#popovers")
+            | top popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+      .column.col-3.col-sm-6
+        .popover.popover-right
+          a.btn.btn-primary(href="#popovers")
+            | right popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+      .column.col-3.col-sm-6
+        .popover.popover-bottom
+          a.btn.btn-primary(href="#popovers")
+            | bottom popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+      .column.col-3.col-sm-6
+        .popover.popover-left
+          a.btn.btn-primary(href="#popovers")
+            | left popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+
+    p
+      | Wrap an element by a container with the #[code popover] class.
+      | And add a container with the #[code popover-container] next to the element.
+      | You can use #[a(href="#cards") Cards] component inside the #[code popover-container].
+    p
+      | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position.
+      | By default, the popovers appear above the element.
+      
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="popover popover-right">
+            <button class="btn btn-primary">right popover</button>
+            <div class="popover-container">
+              <div class="card">
+                <div class="card-header">
+                  ...
+                </div>
+                <div class="card-body">
+                  ...
+                </div>
+                <div class="card-footer">
+                  ...
+                </div>
+              </div>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/steps.pug b/public/css/spectre-0.5.8/docs/src/components/steps.pug
new file mode 100644
index 0000000..fcb258d
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/steps.pug
@@ -0,0 +1,62 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'steps'
+  - var parent = 'components'
+  - var title = 'Steps - Components - Spectre.css CSS Framework'
+  - var description = 'Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('steps', 'Steps')
+    include ../_layout/_ad-g.pug
+
+    p Steps are progress indicators of a sequence of task steps.
+
+    .docs-demo.columns
+      .column.col-12
+        ul.step
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip")
+          li.step-item.active
+            a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip")
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip")
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip")
+      .column.col-12
+        ul.step
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2
+          li.step-item.active
+            a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4
+
+    p
+      | Add a container element with the #[code step] class.
+      | And add child elements with the #[code step-item] class.
+      | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress.
+      
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="step">
+            <li class="step-item">
+              <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
+            </li>
+            <li class="step-item active">
+              <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
+            </li>
+            <li class="step-item">
+              <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
+            </li>
+            <li class="step-item">
+              <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/tabs.pug b/public/css/spectre-0.5.8/docs/src/components/tabs.pug
new file mode 100644
index 0000000..a9e46a2
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/tabs.pug
@@ -0,0 +1,148 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tabs'
+  - var parent = 'components'
+  - var title = 'Tabs - Components - Spectre.css CSS Framework'
+  - var description = 'Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('tabs', 'Tabs')
+    include ../_layout/_ad-g.pug
+
+    p Tabs enable quick switch between different views.
+          
+    .docs-demo.columns
+      .column.col-6.col-sm-12
+        ul.tab
+          li.tab-item.active
+            a(href="#tabs")
+              | Music
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+          li.tab-item
+            a(href="#tabs")
+              | Store
+      .column.col-6.col-sm-12
+        ul.tab.tab-block
+          li.tab-item.active
+            a(href="#tabs")
+              | Music
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+
+    p
+      | Add a container element with the #[code tab] class. 
+      | And add child elements with the #[code tab-item] class. 
+      | You can add the #[code tab-block] class for a full-width tab.
+      | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="tab tab-block">
+            <li class="tab-item active">
+              <a href="#">Music</a>
+            </li>
+            <li class="tab-item">
+              <a href="#" class="active">Playlists</a>
+            </li>
+            <li class="tab-item">
+              <a href="#">Radio</a>
+            </li>
+            <li class="tab-item">
+              <a href="#">Connect</a>
+            </li>
+          </ul>
+
+    .docs-demo.columns
+      .column.col-sm-12
+        ul.tab
+          li.tab-item.active
+            a.badge(href="#tabs" data-badge="999")
+              | Music
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+      .column.col-sm-12
+        ul.tab.tab-block
+          li.tab-item.active
+            a.badge(href="#tabs" data-badge="9")
+              | Music
+          li.tab-item
+            a.badge(href="#tabs" data-badge="99")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+
+    p
+      | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="tab tab-block">
+            <li class="tab-item active">
+              <a href="#" class="badge" data-badge="9">
+                Music
+              </a>
+            </li>
+          </ul>
+
+    .docs-demo.columns
+      .column.col-12
+        ul.tab
+          li.tab-item.active
+            a(href="#tabs")
+              | Music
+              span.btn.btn-clear
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+          li.tab-item
+            a(href="#tabs")
+              | Store
+          li.tab-item.tab-action
+            .input-group.input-inline
+              input.form-input.input-sm(type="text")
+              button.btn.btn-primary.btn-sm.input-group-btn Search
+
+    p
+      | You could add a search box or buttons inside a tab.
+      | Add the #[code tab-action] class to the #[code tab-item].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="tab">
+            <li class="tab-item active">
+              <a href="#">
+                Music
+              </a>
+            </li>
+            <li class="tab-item tab-action">
+              <div class="input-group input-inline">
+                <input class="form-input input-sm" type="text">
+                <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+              </div>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/tiles.pug b/public/css/spectre-0.5.8/docs/src/components/tiles.pug
new file mode 100644
index 0000000..7e86f97
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/tiles.pug
@@ -0,0 +1,108 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tiles'
+  - var parent = 'components'
+  - var title = 'Tiles - Components - Spectre.css CSS Framework'
+  - var description = 'Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('tiles', 'Tiles')
+    include ../_layout/_ad-g.pug
+
+    p Tiles are repeatable or embeddable information blocks.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .tile
+          .tile-icon
+            figure.avatar.avatar-lg
+              img(src="../img/avatar-3.png" alt="Avatar")
+          .tile-content
+            p.tile-title The Avengers
+            p.tile-subtitle
+              | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+          .tile-action
+            button.btn.btn-primary Join
+            button.btn Contact
+      .column.col-9.col-sm-12
+        .tile
+          .tile-icon
+            figure.avatar.avatar-lg
+              img(src="../img/avatar-2.png" alt="Avatar")
+          .tile-content
+            p.tile-title The S.H.I.E.L.D.
+            p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+            p
+              button.btn.btn-primary.btn-sm Join
+              button.btn.btn-sm Contact
+
+    p
+      | Add a container with the #[code tile] class.
+      | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes.
+      | The #[code tile-icon] and #[code tile-action] are optional.
+    p
+      | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="tile">
+            <div class="tile-icon">
+              <div class="example-tile-icon">
+                <i class="icon icon-file centered"></i>
+              </div>
+            </div>
+            <div class="tile-content">
+              <p class="tile-title">The Avengers</p>
+              <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+            </div>
+            <div class="tile-action">
+              <button class="btn btn-primary">Join</button>
+            </div>
+          </div>
+
+    +docs-subheading('tiles-compact', 'Compact tiles')
+
+    p
+      | There is compact version of Tiles component, which is often used as contact and file info blocks.
+    p
+      | Add the #[code tile-centered] class to the container #[code tile].
+      | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.
+
+    .docs-demo.columns
+      .column.col-6.col-md-9.col-xs-12
+        .tile.tile-centered
+          .tile-icon
+            .example-tile-icon
+              i.icon.icon-mail.centered
+          .tile-content
+            .tile-title spectre-docs.pdf
+            small.tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017
+          .tile-action
+            button.btn.btn-link.btn-action
+              i.icon.icon-more-vert
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="tile tile-centered">
+            <div class="tile-icon">
+              <div class="example-tile-icon">
+                <i class="icon icon-file centered"></i>
+              </div>
+            </div>
+            <div class="tile-content">
+              <div class="tile-title">spectre-docs.pdf</div>
+              <small class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
+            </div>
+            <div class="tile-action">
+              <button class="btn btn-link">
+                <i class="icon icon-more-vert"></i>
+              </button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/toasts.pug b/public/css/spectre-0.5.8/docs/src/components/toasts.pug
new file mode 100644
index 0000000..0ed6198
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/toasts.pug
@@ -0,0 +1,70 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'toasts'
+  - var parent = 'components'
+  - var title = 'Toasts - Components - Spectre.css CSS Framework'
+  - var description = 'Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('toasts', 'Toasts')
+    include ../_layout/_ad-g.pug
+
+    p Toasts are used to show alert or information to users.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .toast
+          button.btn.btn-clear.float-right
+          h6 Toast Title
+          p
+            | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      .column.col-9.col-sm-12
+        .toast.toast-primary
+          button.btn.btn-clear.float-right
+          p
+            | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+    p
+      | Add a container element with the #[code toast] class.
+      | You can add any text within the container, and even icons. 
+      | You may also add a close button with the #[code btn-clear] class if you need.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="toast">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </div>
+
+    .docs-demo.columns
+      .column.col-sm-12
+        .toast.toast-success
+          button.btn.btn-clear.float-right
+          p
+            | Toast success
+      .column.col-sm-12
+        .toast.toast-warning
+          button.btn.btn-clear.float-right
+          p
+            | Toast warning
+      .column.col-sm-12
+        .toast.toast-error
+          button.btn.btn-clear.float-right
+          p
+            | Toast error
+
+    p
+      | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="toast toast-primary">
+            <button class="btn btn-clear float-right"></button>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/components/tooltips.pug b/public/css/spectre-0.5.8/docs/src/components/tooltips.pug
new file mode 100644
index 0000000..0ab719e
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/components/tooltips.pug
@@ -0,0 +1,53 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tooltips'
+  - var parent = 'components'
+  - var title = 'Tooltips - Components - Spectre.css CSS Framework'
+  - var description = 'Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('tooltips', 'Tooltips')
+    include ../_layout/_ad-g.pug
+
+    p Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.
+
+    .docs-demo.columns.text-center
+      .column.col-xs-12
+        button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip
+      .column.col-xs-12
+        button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip
+      .column.col-xs-12
+        button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
+      .column.col-xs-12
+        button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") left tooltip
+
+    p
+      | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements.
+    p
+      | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip.
+      | By default, the tooltip appears above the element.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+          <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+    +docs-subheading('tooltips-multiline', 'Multiline tooltips')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-primary.tooltip(data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text \n Third Line Tooltip Text") multiline tooltip
+
+    p
+      | Add the #[code \n] string between any text for multiline tooltips.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>
+    
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements.pug b/public/css/spectre-0.5.8/docs/src/elements.pug
new file mode 100644
index 0000000..046246b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements.pug
@@ -0,0 +1,94 @@
+extends _layout/_docs-layout.pug
+
+block variables
+  - var slug = 'elements'
+  - var parent = 'elements'
+  - var title = 'Elements - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('elements', 'Elements')
+    include _layout/_ad-g.pug
+
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Typography
+          .card-body
+            | Headings, paragraphs, semantic text, blockquote and lists elements
+          .card-footer
+            a.btn.btn-primary(href="elements/typography.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tables
+          .card-body
+            | Tables and data sets
+          .card-footer
+            a.btn.btn-primary(href="elements/tables.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Buttons
+          .card-body
+            | Simple button styles for actions in different types and sizes
+          .card-footer
+            a.btn.btn-primary(href="elements/buttons.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Forms
+          .card-body
+            | Input, textarea, select, checkbox, radio and switch
+          .card-footer
+            a.btn.btn-primary(href="elements/forms.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Icons
+          .card-body
+            | Single-element, responsive and pure CSS icons
+          .card-footer
+            a.btn.btn-primary(href="elements/icons.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Labels
+          .card-body
+            | Formatted text tags for highlighted, informative information
+          .card-footer
+            a.btn.btn-primary(href="elements/labels.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Code
+          .card-body
+            | Inline and multiline code snippets
+          .card-footer
+            a.btn.btn-primary(href="elements/code.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Media
+          .card-body
+            | Responsive images, figures and video
+          .card-footer
+            a.btn.btn-primary(href="elements/media.html") View
+
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/buttons.pug b/public/css/spectre-0.5.8/docs/src/elements/buttons.pug
new file mode 100644
index 0000000..e5c9d1b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/buttons.pug
@@ -0,0 +1,194 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'buttons'
+  - var parent = 'elements'
+  - var title = 'Buttons - Elements - Spectre.css CSS Framework'
+  - var description = 'Buttons include simple button styles for actions in different types and sizes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('buttons', 'Buttons')
+    include ../_layout/_ad-g.pug
+
+    p Buttons include simple button styles for actions in different types and sizes.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn default button
+        button.btn.btn-primary primary button
+        button.btn.btn-link link button
+
+    p
+      | Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{'<button>'} elements for a default button. 
+      | There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn">default button</button>
+          <button class="btn btn-primary">primary button</button>
+          <button class="btn btn-link">link button</button>
+
+    +docs-subheading('buttons-colors', 'Button colors')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-success success button
+        button.btn.btn-error error button
+
+    p
+      | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
+      | If you need more button colors, please use 
+      a(href="../getting-started/custom.html#variables-buttons") button mixins
+      |  to create your own button color variants.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-success">success button</button>
+          <button class="btn btn-error">error button</button>
+
+    +docs-subheading('buttons-sizes', 'Button sizes')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-primary.btn-lg
+          | large 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary.btn-lg large button
+      .column.col-12
+        button.btn.btn-primary
+          | normal 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary normal button
+      .column.col-12
+        button.btn.btn-primary.btn-sm
+          | small 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary.btn-sm small button
+
+
+    p
+      | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
+      | Also, you can add the #[code btn-block] class for a full-width button.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-lg">large button</button>
+          <button class="btn btn-sm">small button</button>
+
+          <button class="btn btn-block">block button</button>
+
+          <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+          <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+          <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
+    p
+      | Please note that you could use the #[code btn-action] class for a square button, or add another #[code s-circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+    .docs-demo.columns
+      .column.col-xs-12
+        button.btn.btn-action.btn-primary.btn-lg
+          i.icon.icon-menu
+        button.btn.btn-action.btn-primary
+          i.icon.icon-menu
+        button.btn.btn-action.btn-primary.btn-sm
+          i.icon.icon-menu
+      .column.col-xs-12
+        button.btn.btn-action.btn-primary.btn-lg.s-circle
+          i.icon.icon-arrow-up
+        button.btn.btn-action.btn-primary.s-circle
+          i.icon.icon-arrow-up
+        button.btn.btn-action.btn-primary.btn-sm.s-circle
+          i.icon.icon-arrow-up
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+          <button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>
+
+    +docs-subheading('buttons-states', 'Button states')
+
+    p
+      | Add the #[code active] class for active button state style.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.active default active
+        button.btn.btn-primary.active primary active
+        button.btn.btn-link.active link active
+
+    p
+      | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.disabled(tabindex="-1") default disabled
+        button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
+        button.btn.btn-link(disabled="" tabindex="-1") link disabled
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- buttons with disabled state -->
+          <button class="btn disabled" tabindex="-1">disabled button</button>
+          <button class="btn" disabled tabindex="-1">disabled button</button>
+
+    p
+      | A button with the #[code loading] class can show loading indicator.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.loading default button
+        button.btn.btn-primary.loading primary button
+        button.btn.btn-link.loading link button
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- buttons with loading state -->
+          <button class="btn loading">button</button>
+          <button class="btn btn-primary loading">primary button</button>
+
+    +docs-subheading('buttons-groups', 'Button groups')
+
+    .docs-demo.columns
+      .column.col-6.col-md-12
+        .btn-group
+          button.btn first button
+          button.btn second button
+          button.btn third button
+      .column.col-6.col-md-12
+        .btn-group.btn-group-block
+          button.btn.btn-primary first button
+          button.btn.btn-primary second button
+          button.btn.btn-primary third button
+      .column.col-6.col-md-12
+        .btn-group
+          button.btn.btn-sm.active first button
+          button.btn.btn-sm second button
+          button.btn.btn-sm third button
+      .column.col-6.col-md-12
+        .btn-group.btn-group-block
+          button.btn.btn-primary.btn-sm.active first button
+          button.btn.btn-primary.btn-sm second button
+          button.btn.btn-primary.btn-sm third button
+        
+    p
+      | If you want to use buttons as a group, add the #[code btn-group] class to the container.
+      | You can add the #[code btn-group-block] class for a full-width button group.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="btn-group btn-group-block">
+            <button class="btn">first button</button>
+            <button class="btn">second button</button>
+            <button class="btn">third button</button>
+          </div> 
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/code.pug b/public/css/spectre-0.5.8/docs/src/elements/code.pug
new file mode 100644
index 0000000..dcff503
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/code.pug
@@ -0,0 +1,51 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'code'
+  - var parent = 'elements'
+  - var title = 'Code - Elements - Spectre.css CSS Framework'
+  - var description = 'Code is used for styling inline and multiline code snippets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('code', 'Code')
+    include ../_layout/_ad-g.pug
+
+    p Code is used for styling inline and multiline code snippets.
+
+    +docs-subheading('code-inline', 'Inline code')
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- inline code -->
+          <code>code</code>
+
+    p
+      | For inline code, you can use the #{'<code>'} element. 
+
+    +docs-subheading('code-snippet', 'Code snippet')
+
+    p
+      | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
+      | The #[code data-lang] attribute is rendered as the language name in the top right.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- code snippets -->
+          <button class="btn">
+            Submit
+          </button>
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+          &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+            Submit
+          &lt;<span class="tag">/button</span>&gt;
+          </code></pre>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/forms.pug b/public/css/spectre-0.5.8/docs/src/elements/forms.pug
new file mode 100644
index 0000000..274101b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/forms.pug
@@ -0,0 +1,725 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'forms'
+  - var parent = 'elements'
+  - var title = 'Forms - Elements - Spectre.css CSS Framework'
+  - var description = 'Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('forms', 'Forms')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+
+    +docs-subheading('forms-input', 'Form input')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-label(for="input-example-1") Name
+          input#input-example-1.form-input(type="text" placeholder="Name")
+        .form-group
+          label.form-label(for="input-example-2") Email
+          input#input-example-2.form-input(type="email" placeholder="Email")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form input control -->
+          <div class="form-group">
+            <label class="form-label" for="input-example-1">Name</label>
+            <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+          </div>
+
+    +docs-subheading('forms-textarea', 'Form textarea')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-label(for="input-example-3") Message
+          textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form textarea control -->
+          <div class="form-group">
+            <label class="form-label" for="input-example-3">Message</label>
+            <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+          </div>
+
+    +docs-subheading('forms-select', 'Form select')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          select.form-select
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+        .form-group
+          select.form-select(multiple="")
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form select control -->
+          <div class="form-group">
+            <select class="form-select">
+              <option>Choose an option</option>
+              <option>Slack</option>
+              <option>Skype</option>
+              <option>Hipchat</option>
+            </select>
+          </div>
+
+    +docs-subheading('forms-radio', 'Form radio')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        form
+          .form-group
+            label.form-label Gender
+            label.form-radio
+              input(type="radio" name="gender" checked="")
+              i.form-icon
+              |  Male
+            label.form-radio
+              input(type="radio" name="gender")
+              i.form-icon
+              |  Female
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form radio control -->
+          <div class="form-group">
+            <label class="form-label">Gender</label>
+            <label class="form-radio">
+              <input type="radio" name="gender" checked>
+              <i class="form-icon"></i> Male
+            </label>
+            <label class="form-radio">
+              <input type="radio" name="gender">
+              <i class="form-icon"></i> Female
+            </label>
+          </div>
+
+    +docs-subheading('forms-switch', 'Form switch')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+            |  Send me emails with news and tips
+        .form-group
+          label.form-switch
+            input(type="checkbox" checked="")
+            i.form-icon
+            |  Send me emails with news and tips
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form switch control -->
+          <div class="form-group">
+            <label class="form-switch">
+              <input type="checkbox">
+              <i class="form-icon"></i> Send me emails with news and tips
+            </label>
+          </div>
+
+    +docs-subheading('forms-checkbox', 'Form checkbox')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+            |  Remember me
+        .form-group
+          label.form-checkbox
+            input(type="checkbox" checked="")
+            i.form-icon
+            |  Remember me
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form checkbox control -->
+          <div class="form-group">
+            <label class="form-checkbox">
+              <input type="checkbox">
+              <i class="form-icon"></i> Remember me
+            </label>
+          </div>
+
+    .docs-demo.columns
+      .column
+        .form-group
+          label.form-checkbox
+            input#docs-demo-checkbox(type="checkbox")
+            i.form-icon
+            |  Select all
+
+    script.
+      document.getElementById("docs-demo-checkbox").indeterminate = true;
+
+    p
+      | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
+
+    +docs-subheading('forms-inline', 'Inline forms')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        form
+          .form-group
+            label.form-radio.form-inline
+              input(type="radio" name="gender" checked="")
+              i.form-icon
+              |  Male
+            label.form-radio.form-inline
+              input(type="radio" name="gender")
+              i.form-icon
+              |  Female
+          .form-group
+            label.form-checkbox.form-inline
+              input(type="checkbox")
+              i.form-icon
+              |  Checkbox 1
+            label.form-checkbox.form-inline
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  Checkbox 2
+
+    p
+      | You can add the #[code form-inline] class to the form components to make them inline in one row.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="form-group">
+            <label class="form-radio form-inline">
+              <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+            </label>
+            <label class="form-radio form-inline">
+              <input type="radio" name="gender"><i class="form-icon"></i> Female
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label class="form-checkbox form-inline">
+              <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+            </label>
+            <label class="form-checkbox form-inline">
+              <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+            </label>
+          </div>
+
+    +docs-subheading('forms-horizontal', 'Horizontal forms')
+
+    p
+      | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container.
+      | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        form.form-horizontal(action="#forms")
+          .form-group
+            .col-3.col-sm-12
+              label.form-label(for="input-example-4") Name
+            .col-9.col-sm-12
+              input#input-example-4.form-input(type="text" placeholder="Name")
+          .form-group
+            .col-3.col-sm-12
+              label.form-label(for="input-example-5") Email
+            .col-9.col-sm-12
+              input#input-example-5.form-input(type="email" placeholder="Email")
+          .form-group
+            .col-3.col-sm-12
+              label.form-label Gender
+            .col-9.col-sm-12
+              label.form-radio
+                input(type="radio" name="gender")
+                i.form-icon
+                |  Male
+              label.form-radio
+                input(type="radio" name="gender" checked="")
+                i.form-icon
+                |  Female
+          .form-group
+            .col-3.col-sm-12
+              label.form-label Source
+            .col-9.col-sm-12
+              select.form-select(multiple="")
+                option Slack
+                option Skype
+                option Hipchat
+          .form-group
+            .col-9.col-sm-12.col-ml-auto
+              label.form-switch
+                input(type="checkbox")
+                i.form-icon
+                |  Send me emails with news and tips
+          .form-group
+            .col-3.col-sm-12
+              label.form-label(for="input-example-6") Message
+            .col-9.col-sm-12
+              textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
+          .form-group
+            .col-9.col-sm-12.col-ml-auto
+              label.form-checkbox
+                input(type="checkbox")
+                i.form-icon
+                |  Remember me
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <form class="form-horizontal">
+            <div class="form-group">
+              <div class="col-3 col-sm-12">
+                <label class="form-label" for="input-example-1">Name</label>
+              </div>
+              <div class="col-9 col-sm-12">
+                <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+              </div>
+            </div>
+            <!-- form structure -->
+          </form>
+
+    +docs-subheading('forms-sizes', 'Form sizes')
+
+    p
+      | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        label.form-label.label-sm Label
+      .column.col-4.col-xs-12
+        input.form-input.input-sm(type="text" placeholder="Name")
+      .column.col-4.col-xs-12
+        select.form-select.select-sm
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+      .column.col-4.col-xs-12
+        label.form-label.label-lg Label
+      .column.col-4.col-xs-12
+        input.form-input.input-lg(type="text" placeholder="Name")
+      .column.col-4.col-xs-12
+        select.form-select.select-lg
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+
+    p
+      | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
+
+    +docs-subheading('forms-icons', 'Form icons')
+
+    p
+      | Spectre Forms components has 
+      a(href="icons.html") Spectre Icons
+      |  support.
+    p
+      | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
+      | And add the icon with #[code form-icon] class next to the #{'<input>'}.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        .has-icon-left
+          input.form-input.input-sm(type="text" placeholder="Name")
+          i.form-icon.icon.icon-arrow-right
+      .column.col-4.col-xs-12
+        .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
+          input.form-input(type="text" placeholder="Name")
+          i.form-icon.icon.icon-arrow-right
+      .column.col-4.col-xs-12
+        .has-icon-left
+          input.form-input.input-lg(type="text" placeholder="Name")
+          i.form-icon.icon.icon-arrow-right
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-sm(type="text" placeholder="Name")
+          i.form-icon.icon.icon-check
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input(type="text" placeholder="Name")
+          i.form-icon.icon.icon-check
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-lg(type="text" placeholder="Name")
+          i.form-icon.icon.icon-check
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form input with Spectre icon -->
+          <div class="has-icon-left">
+            <input type="text" class="form-input" placeholder="...">
+            <i class="form-icon icon icon-check"></i>
+          </div>
+
+    p
+      | You can use the #[code loading] class for loading or posting state.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-sm(type="text" placeholder="Name")
+          i.form-icon.loading
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input(type="text" placeholder="Name")
+          i.form-icon.loading
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-lg(type="text" placeholder="Name")
+          i.form-icon.loading
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form input with loading icon -->
+          <div class="has-icon-right">
+            <input type="text" class="form-input" placeholder="...">
+            <i class="form-icon loading"></i>
+          </div>
+
+    +docs-subheading('forms-input', 'Input types')
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        form.form-horizontal(action="#forms")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-8") Email
+            .col-9
+              input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-9") URL
+            .col-9
+              input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-10") Search
+            .col-9
+              input#input-example-10.form-input(type="search" placeholder="Search")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-11") Tel
+            .col-9
+              input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-12") Password
+            .col-9
+              input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-13") Number
+            .col-9
+              input#input-example-13.form-input(type="number" placeholder="00" value="66")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-14") Date
+            .col-9
+              input#input-example-14.form-input(type="date" value="2016-12-31")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-15") Color
+            .col-9
+              input#input-example-15.form-input(type="color" value="#5755d9")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-16") File
+            .col-9
+              input#input-example-16.form-input(type="file")
+
+    +docs-subheading('forms-input-groups', 'Input groups')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .input-group
+          input.form-input.input-sm(type="text" placeholder="username")
+          select.form-select.select-sm
+            option Slack
+            option Skype
+            option Hipchat
+      .column.col-6.col-xs-12
+        .input-group
+          span.input-group-addon.addon-sm slack.com/
+          input.form-input.input-sm(type="text" placeholder="site name")
+          button.btn.btn-primary.input-group-btn.btn-sm Submit
+      .column.col-6.col-xs-12
+        .input-group
+          input.form-input(type="text" placeholder="username")
+          select.form-select
+            option Slack
+            option Skype
+            option Hipchat
+      .column.col-6.col-xs-12
+        .input-group
+          span.input-group-addon slack.com/
+          input.form-input(type="text" placeholder="site name")
+          button.btn.btn-primary.input-group-btn Submit
+      .column.col-6.col-xs-12
+        .input-group
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+          input.form-input(type="text" placeholder="name")
+      .column.col-6.col-xs-12
+        .input-group
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+          input.form-input(type="text" placeholder="name")
+      .column.col-6.col-xs-12
+        .input-group
+          input.form-input.input-lg(type="text" placeholder="username")
+          select.form-select.select-lg
+            option Slack
+            option Skype
+            option Hipchat
+      .column.col-6.col-xs-12
+        .input-group
+          span.input-group-addon.addon-lg slack.com/
+          input.form-input.input-lg(type="text" placeholder="site name")
+          button.btn.btn-primary.input-group-btn.btn-lg Submit
+
+    p
+      | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
+      | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal input group -->
+          <div class="input-group">
+            <span class="input-group-addon">...</span>
+            <input type="text" class="form-input" placeholder="...">
+          </div>
+
+          <!-- large input group -->
+          <div class="input-group">
+            <span class="input-group-addon addon-lg">...</span>
+            <input type="text" class="form-input input-lg" placeholder="...">
+          </div>
+
+          <!-- normal input group with button -->
+          <div class="input-group">
+            <span class="input-group-addon">...</span>
+            <input type="text" class="form-input" placeholder="...">
+            <button class="btn btn-primary input-group-btn">Submit</button>
+          </div>
+
+    +docs-subheading('forms-validation', 'Form validation styles')
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        fieldset
+          legend Input
+          .form-group
+            label.form-label(for="input-example-17") Name
+            input#input-example-17.form-input.is-success(type="text" placeholder="Name")
+            p.form-input-hint The name is valid.
+          .form-group.has-error
+            label.form-label(for="input-example-18") Password
+            input#input-example-18.form-input(type="password" placeholder="Password")
+            p.form-input-hint Passwords must have at least 8 characters.
+        fieldset
+          legend Select
+          .form-group
+            select.form-select.is-error
+              option Choose an option
+              option Slack
+              option Skype
+              option Hipchat
+            p.form-input-hint The option is invalid.
+          .form-group.has-success
+            select.form-select
+              option Choose an option
+              option Slack
+              option Skype
+              option Hipchat
+            p.form-input-hint The option is available.
+        fieldset
+          legend Checkbox, Radio and Switch (Error state only)
+          .form-group
+            label.form-checkbox.is-error
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  I'm not a robot.
+          .form-group.has-error
+            label.form-radio
+              input(type="radio" name="gender" checked="")
+              i.form-icon
+              |  Male
+            label.form-radio
+              input(type="radio" name="gender")
+              i.form-icon
+              |  Female
+          .form-group
+            label.form-switch.is-error
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  Send me emails with news and tips
+
+    p
+      | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+      | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <form>
+            <!-- form validation class: has-success -->
+            <div class="form-group has-success">
+              <label class="form-label" for="input-example-1">Name</label>
+              <input class="form-input" type="text" id="input-example-1" placeholder="...">
+              <p class="form-input-hint">The name is invalid.</p>
+            </div>
+
+            <!-- form validation class: is-success -->
+            <div class="form-group">
+              <label class="form-label" for="input-example-1">Name</label>
+              <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+              <p class="form-input-hint">The name is invalid.</p>
+            </div>
+
+            <!-- form validation example for checkbox, radio and switch -->
+            <div class="form-group">
+              <label class="form-checkbox is-error">
+                <input type="checkbox">
+                <i class="form-icon"></i> Remember me
+              </label>
+            </div>
+          </form>
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .form-group
+          label.form-label(for="input-example-21") Email
+          input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$")
+        .form-group
+          label.form-label(for="input-example-22") Password
+          input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$")
+
+    p
+      | You can use input #[code pattern] attribute to validate the value as well.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- pattern validation example for Email -->
+          <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
+
+          <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
+          <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
+
+    +docs-subheading('forms-disabled', 'Form disabled styles')
+
+    p 
+      | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        form(action="#forms")
+          fieldset(disabled="")
+            .form-group
+              label.form-label(for="input-example-19") Name
+              input#input-example-19.form-input(type="text" placeholder="Name")
+            .form-group
+              label.form-label Gender
+              label.form-radio
+                input(type="radio" name="gender" disabled="")
+                i.form-icon
+                |  Male
+              label.form-radio
+                input(type="radio" name="gender" disabled="")
+                i.form-icon
+                |  Female
+            .form-group
+              select.form-select(disabled="")
+                option Choose an option
+                option Slack
+                option Skype
+                option Hipchat
+            .form-group
+              label.form-switch
+                input(type="checkbox" disabled="")
+                i.form-icon
+                |  Send me emails with news and tips
+            .form-group
+              label.form-label(for="input-example-20") Message
+              textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
+            .form-group
+              label.form-checkbox
+                input(type="checkbox" disabled="")
+                i.form-icon
+                |  Remember me
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <form action="#forms">
+            <fieldset disabled>
+              <div class="form-group">
+                <label class="form-label" for="input-example-19">Name</label>
+                <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+              </div>
+              <div class="form-group">
+                <label class="form-label">Gender</label>
+                <label class="form-radio">
+                  <input type="radio" name="gender" disabled>
+                  <i class="form-icon"></i> Male
+                </label>
+                <label class="form-radio">
+                  <input type="radio" name="gender" disabled>
+                  <i class="form-icon"></i> Female
+                </label>
+              </div>
+              <div class="form-group">
+                <select class="form-select" disabled>
+                  <option>Choose an option</option>
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label class="form-switch">
+                  <input type="checkbox" disabled>
+                  <i class="form-icon"></i> Send me emails with news and tips
+                </label>
+              </div>
+              <div class="form-group">
+                <label class="form-label" for="input-example-20">Message</label>
+                <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+              </div>
+              <div class="form-group">
+                <label class="form-checkbox">
+                  <input type="checkbox" disabled>
+                  <i class="form-icon"></i> Remember me
+                </label>
+              </div>
+            </fieldset>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/icons.pug b/public/css/spectre-0.5.8/docs/src/elements/icons.pug
new file mode 100644
index 0000000..77bc433
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/icons.pug
@@ -0,0 +1,226 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'icons'
+  - var parent = 'elements'
+  - var title = 'Icons - Elements - Spectre.css CSS Framework'
+  - var description = 'Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('icons', 'Icons.css')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    .docs-demo.columns
+      .column
+        .toast.toast-primary
+          | Spectre.css Icons will be moved to a new 
+          a(href="https://github.com/picturepan2/icons.css" target="_blank") GitHub Repo
+          |  while Spectre will only include basic icons.
+    p
+      | Icons.css are single-element, responsive and pure CSS icons.
+      | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.
+
+    +docs-subheading('icons-navigation', 'Navigation icons')
+
+    .docs-demo.columns
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-up
+        p icon-arrow-up
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-right
+        p icon-arrow-right
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-down
+        p icon-arrow-down
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-left
+        p icon-arrow-left
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-upward
+        p icon-upward
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-forward
+        p icon-forward
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-downward
+        p icon-downward
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-back
+        p icon-back
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-caret
+        p icon-caret
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-menu
+        p icon-menu
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-apps
+        p icon-apps
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-more-horiz
+        p icon-more-horiz
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-more-vert
+        p icon-more-vert
+
+    +docs-subheading('icons-action', 'Action icons')
+
+    .docs-demo.columns
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-resize-horiz
+        p icon-resize-horiz
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-resize-vert
+        p icon-resize-vert
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-plus
+        p icon-plus
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-minus
+        p icon-minus
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-cross
+        p icon-cross
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-check
+        p icon-check
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-stop
+        p icon-stop
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-shutdown
+        p icon-shutdown
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-refresh
+        p icon-refresh
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-search
+        p icon-search
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-flag
+        p icon-flag
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-bookmark
+        p icon-bookmark
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-edit
+        p icon-edit
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-delete
+        p icon-delete
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-share
+        p icon-share
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-download
+        p icon-download
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-upload
+        p icon-upload
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-copy
+        p icon-copy
+
+    +docs-subheading('icons-object', 'Object icons')
+
+    .docs-demo.columns
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-mail
+        p icon-mail
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-people
+        p icon-people
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-message
+        p icon-message
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-photo
+        p icon-photo
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-time
+        p icon-time
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-location
+        p icon-location
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-link
+        p icon-link
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-emoji
+        p icon-emoji
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <i class="icon icon-menu"></i>
+
+    +docs-subheading('icons-sizes', 'Icon sizes')
+
+    p
+      | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
+      | You can set #[code font-size] to have different icon sizes.
+
+    .docs-demo.columns
+      .column.col-3.col-md-6
+        p
+          i.icon.icon-2x.icon-mail
+        p icon-2x (32px)
+      .column.col-3.col-md-6
+        p
+          i.icon.icon-3x.icon-mail
+        p icon-3x (48px)
+      .column.col-3.col-md-6
+        p
+          i.icon.icon-4x.icon-mail
+        p icon-4x (64px)
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <i class="icon icon-2x icon-mail"></i>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/labels.pug b/public/css/spectre-0.5.8/docs/src/elements/labels.pug
new file mode 100644
index 0000000..74586c7
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/labels.pug
@@ -0,0 +1,53 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'labels'
+  - var parent = 'elements'
+  - var title = 'Labels - Elements - Spectre.css CSS Framework'
+  - var description = 'Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('labels', 'Labels')
+    include ../_layout/_ad-g.pug
+
+    p Labels are formatted text tags for highlighted, informative information.
+
+    .docs-demo.columns
+      .column
+        span.label.mr-1 default label
+        span.label.label-primary.mr-1 primary label
+        span.label.label-secondary.mr-1 secondary label
+        span.label.label-success.mr-1 success label
+        span.label.label-warning.mr-1 warning label
+        span.label.label-error error label
+      
+    p
+      | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
+      | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal labels -->
+          <span class="label">default label</span>
+          <span class="label label-primary">primary label</span>
+
+    +docs-subheading('labels-rounded', 'Rounded labels')
+    
+    .docs-demo.columns
+      .column
+        span.label.label-rounded.mr-1 default label
+        span.label.label-rounded.label-primary primary label
+
+    p
+      | Add the #[code label-rounded] class to have rounded labels.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- rounded labels -->
+          <span class="label label-rounded label-primary">primary label</span>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/media.pug b/public/css/spectre-0.5.8/docs/src/elements/media.pug
new file mode 100644
index 0000000..81c5c57
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/media.pug
@@ -0,0 +1,101 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'media'
+  - var parent = 'elements'
+  - var title = 'Media - Elements - Spectre.css CSS Framework'
+  - var description = 'Media includes responsive images, figures and video classes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('media', 'Media')
+    include ../_layout/_ad-g.pug
+
+    p Media includes responsive images, figures and video classes.
+
+    +docs-subheading('media-images', 'Images')
+
+    p
+      | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
+
+    .docs-demo.columns
+      .column.col-12
+        img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+
+    p
+      | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
+      | This feature can replace the classic background image trick. Microsoft Edge support 
+      a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped
+      |   with Build Number 16299+.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.figure
+          img.img-fit-contain.rounded(src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+          figcaption.figure-caption.text-center img-fit-contain
+      .column.col-6.col-xs-12
+        figure.figure
+          img.img-fit-cover.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+          figcaption.figure-caption.text-center img-fit-cover
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+          <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
+    +docs-subheading('media-figure', 'Figure')
+
+    p
+      | You can use the element #{'<figure>'} for an image with a caption.
+      | Add the #[code figure] class to #{'<figure>'} element.
+      | The images with the #[code img-responsive] class will be responsive.
+      | And the included class #[code figure-caption] will provide basic style for caption.
+      | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+    .docs-demo.columns
+      .column.col-12
+        figure.figure
+          img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+          figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="figure">
+            <img class="img-responsive ..." src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+            <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+          </figure>
+
+    +docs-subheading('media-video', 'Video')
+
+    p
+      | For responsive video, add a container with the #[code video-responsive] class. 
+      | Insert any YouTube, Youku or other iframe/embed video inside the container. 
+      | The ratio is 16:9 by default.
+      | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+    .docs-demo.columns
+      .column.col-12
+        .video-responsive
+          iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+    p
+      | For responsive #{'<video>'} elements, you can add the #[code video-responsive] class directly.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="video-responsive video-responsive-4-3">
+            <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+          </div>
+
+          <video class="video-responsive" src="...">...</video>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
diff --git a/public/css/spectre-0.5.8/docs/src/elements/tables.pug b/public/css/spectre-0.5.8/docs/src/elements/tables.pug
new file mode 100644
index 0000000..c85b475
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/tables.pug
@@ -0,0 +1,174 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tables'
+  - var parent = 'elements'
+  - var title = 'Tables - Elements - Spectre.css CSS Framework'
+  - var description = 'Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('tables', 'Tables')
+    include ../_layout/_ad-g.pug
+
+    p Tables include default styles for tables and data sets.
+
+    .docs-demo.columns
+      .column.col-12
+        table.table
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr
+              td The Godfather
+              td Crime, Drama
+              td 24 March 1972
+            tr
+              td Schindler's List
+              td Biography, Drama, History
+              td 4 February 1994
+            tr
+              td Se7en
+              td Crime, Drama, Mystery
+              td 22 September 1995
+
+    p
+      | Add the #[code table] class to any #{'<table>'} element. 
+      | The class will add padding, border and emphasized table header.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table">
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>genre</th>
+                <th>release date</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="active">
+                <td>The Shawshank Redemption</td>
+                <td>Crime, Drama</td>
+                <td>14 October 1994</td>
+              </tr>
+            </tbody>
+          </table>
+    
+    +docs-subheading('tables-striped', 'Striped tables')
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped.table-hover
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr
+              td The Godfather
+              td Crime, Drama
+              td 24 March 1972
+            tr
+              td Schindler's List
+              td Biography, Drama, History
+              td 4 February 1994
+            tr
+              td Se7en
+              td Crime, Drama, Mystery
+              td 22 September 1995
+
+    p
+      | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
+      | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
+    p
+      | Use the #[code active] class to make #{'<tr>'} element highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>genre</th>
+                <th>release date</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="active">
+                <td>The Shawshank Redemption</td>
+                <td>Crime, Drama</td>
+                <td>14 October 1994</td>
+              </tr>
+            </tbody>
+          </table>
+
+    +docs-subheading('tables-scroll', 'Scrollable tables')
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-scroll
+          thead
+            tr
+              th Name
+              th Rating
+              th Duration
+              th Genre
+              th Release date
+              th Director
+          tbody
+            tr
+              td The Shawshank Redemption
+              td R
+              td 2h 22min
+              td Crime, Drama
+              td 14 October 1994
+              td Frank Darabont
+            tr
+              td The Godfather
+              td R
+              td 2h 55min
+              td Crime, Drama
+              td 24 March 1972
+              td Francis Ford Coppola
+            tr
+              td Schindler's List
+              td R
+              td 3h 15min
+              td Biography, Drama, History
+              td 4 February 1994
+              td Steven Spielberg
+            tr
+              td Se7en
+              td R
+              td 2h 7min
+              td Crime, Drama, Mystery
+              td 22 September 1995
+              td David Fincher
+
+    p
+      | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table table-scroll">
+            ...
+          </table>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/elements/typography.pug b/public/css/spectre-0.5.8/docs/src/elements/typography.pug
new file mode 100644
index 0000000..fa28dbf
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/elements/typography.pug
@@ -0,0 +1,275 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'typography'
+  - var parent = 'elements'
+  - var title = 'Typography - Elements - Spectre.css CSS Framework'
+  - var description = 'Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('typography', 'Typography')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+
+    +docs-subheading('typography-headings', 'Headings')
+
+    .docs-demo.columns
+      .column.col-12
+        h1
+          | H1 Heading 
+          small.label 40px
+      .column.col-12
+        h2
+          | H2 Heading 
+          small.label 32px
+      .column.col-12
+        h3
+          | H3 Heading 
+          small.label 28px
+      .column.col-12
+        h4
+          | H4 Heading 
+          small.label 24px
+      .column.col-12
+        h5
+          | H5 Heading 
+          small.label 20px
+      .column.col-12
+        h6
+          | H6 Heading 
+          small.label 16px
+
+    //- headings
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <h1>H1 Heading</h1>
+          <h1>H1 Heading <small class="label">40px</small></h1>
+          <span class="h1">H1 Heading</span>
+
+    +docs-subheading('typography-paragraphs', 'Paragraphs')
+
+    p
+      | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit].
+      | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+    p
+      | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+    //- paragraphs
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <p>Lorem ipsum dolor sit amet, ...</p>
+          <p>...</p>
+
+    +docs-subheading('typography-semantic-text', 'Semantic text elements')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        abbr(title='Internationalization') I18N
+        code.ml-2 abbr
+      .column.col-6.col-xs-12
+        strong Bold
+        code.ml-2 strong
+        code.ml-2 b
+      .column.col-6.col-xs-12
+        cite Citation
+        code.ml-2 cite
+      .column.col-6.col-xs-12
+        code Hello World!
+        code.ml-2 code
+      .column.col-6.col-xs-12
+        del Deleted
+        code.ml-2 del
+      .column.col-6.col-xs-12
+        em Emphasis
+        code.ml-2 em
+      .column.col-6.col-xs-12
+        i Italic
+        code.ml-2 i
+      .column.col-6.col-xs-12
+        ins Inserted
+        code.ml-2 ins
+      .column.col-6.col-xs-12
+        kbd Ctrl + S
+        code.ml-2 kbd
+      .column.col-6.col-xs-12
+        mark Highlighted
+        code.ml-2 mark
+      .column.col-6.col-xs-12
+        ruby
+          | 漢 
+          rt kan
+          | 字 
+          rt ji
+        code.ml-2 ruby
+      .column.col-6.col-xs-12
+        s Strikethrough
+        code.ml-2 s
+      .column.col-6.col-xs-12
+        samp Sample
+        code.ml-2 samp
+      .column.col-6.col-xs-12
+        | Text 
+        sub Subscripted
+        code.ml-2 sub
+      .column.col-6.col-xs-12
+        | Text 
+        sup Superscripted
+        code.ml-2 sup
+      .column.col-6.col-xs-12
+        time 20:00
+        code.ml-2 time
+      .column.col-6.col-xs-12
+        u Underline
+        code.ml-2 u
+      .column.col-6.col-xs-12
+        var x
+        |  = 
+        var y
+        |  + 2
+        code.ml-2 var
+
+    +docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
+
+    .docs-demo.columns
+      .column
+        p.h5
+          | #[small.lang-zh-hans 你好], #[small.lang-ja こんにちは], #[small.lang-ko 안녕하세요]
+        p.h6 Chinese (Simplified)
+        p.lang-zh-hans 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+        p.h6 Chinese (Tranditional)
+        p.lang-zh-hant
+          | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+        p.h6 Japanese
+        p.lang-ja
+          | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
+        p.h6 Korean
+        p.lang-ko
+          | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+
+    p
+      | Add the #[code lang] attribute to the #{'<html>'} element or use the class #[code lang-zh], #[code lang-zh-hans], #[code lang-zh-hant], #[code lang-ja] or #[code lang-ko] to have better Asian CJK (Chinese, Japanese and Korean) font support.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <html lang="zh-Hans">……</html>
+
+          <p class="lang-zh-hans">革命不是请客吃饭，不是做文章……</p>
+          <p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+          <p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+
+    p
+      | And you can use the #[code lang-cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+
+    .docs-demo.columns
+      .column
+        p(lang='ja').
+          <u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。
+        p(lang='ja').
+          <del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <p class="lang-cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+          <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+
+    +docs-subheading('typography-fonts', 'Fonts')
+
+    p
+      | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
+      | There are also fonts targeted East Asian typography.
+
+    pre.code
+      code
+        :highlight(lang="scss")
+          /* Western typography targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+          /* Monospace typography targeted */
+          font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+          /* Chinese (lang="zh" and lang="zh-Hans") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+          /* Chinese (lang="zh-Hant") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
+          /* Japanese (lang="ja") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+          /* Korean (lang="ko") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
+    +docs-subheading('typography-blockquote', 'Blockquote')
+
+    blockquote
+      p
+        | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+      cite - Bill Gates
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <blockquote>
+            <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+            <cite>- Bill Gates</cite>
+          </blockquote>
+
+    +docs-subheading('typography-lists', 'Lists')
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        ul.list
+          li list item 1
+          li
+            | list item 2
+            ul
+              li list item 2.1
+              li list item 2.2
+              li list item 2.3
+          li list item 3
+      .column.col-4.col-xs-12
+        ol.list
+          li list item 1
+          li
+            | list item 2
+            ol
+              li list item 2.1
+              li list item 2.2
+              li list item 2.3
+          li list item 3
+      .column.col-4.col-xs-12
+        dl.list
+          dt description list term 1
+          dd description list description 1
+          dt description list term 2
+          dd description list description 2
+          dt description list term 3
+          dd description list description 3
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- unordered list -->
+          <ul>
+            <li>list item 1</li>
+            <li>list item 2
+              <ul>
+                <li>list item 2.1</li>
+                <li>list item 2.2</li>
+                <li>list item 2.3</li>
+              </ul>
+            </li>
+            <li>list item 3</li>
+          </ul>
+
+          <!-- description list -->
+          <dl>
+            <dt>description list term</dt>
+            <dd>description list description</dd>
+          </dl>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/examples/starter.pug b/public/css/spectre-0.5.8/docs/src/examples/starter.pug
new file mode 100644
index 0000000..463ab9a
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/examples/starter.pug
@@ -0,0 +1,26 @@
+extends ../_layout/_example-layout.pug
+
+block variables
+  - var slug = 'starter'
+  - var parent = 'examples'
+  - var title = 'Starter Page Example -  Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block content
+  .section.bg-gray
+    H1 Starter Page Example
+  .section.section-ads.bg-gray
+    include ../_layout/_ad-c.pug
+
+  footer.section.section-footer
+    #copyright.docs-footer.container.grid-lg
+      p
+        a(href='getting-started.html' target='_blank') Documents
+        |  · 
+        a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+        |  · 
+        a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+        |  · 
+        a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+        |  · Version 
+        span.version
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals.pug b/public/css/spectre-0.5.8/docs/src/experimentals.pug
new file mode 100644
index 0000000..8618be6
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals.pug
@@ -0,0 +1,128 @@
+extends _layout/_docs-layout.pug
+
+block variables
+  - var slug = 'experimentals'
+  - var parent = 'experimentals'
+  - var title = 'Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('experimentals', 'Experimentals')
+    include _layout/_ad-g.pug
+
+    p
+      | The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
+      | These elements and components are limited inside #[code spectre-exp.scss] before browsers fully support them.
+      | Sometimes, there are some specific browsers targeted components.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 360-Degree Viewer
+          .card-body
+            | Interactive 360-degree product photo viewer
+          .card-footer
+            a.btn.btn-primary(href="experimentals/autocomplete.html") View
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Autocomplete
+          .card-body
+            | Form component provides suggestions while you type
+          .card-footer
+            a.btn.btn-primary(href="experimentals/autocomplete.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Calendars
+          .card-body
+            | Date or date range picker and events display based on Flexbox
+          .card-footer
+            a.btn.btn-primary(href="experimentals/calendars.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Carousels
+          .card-body
+            | Pure CSS slideshows for cycling images
+          .card-footer
+            a.btn.btn-primary(href="experimentals/carousels.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Comparison sliders
+          .card-body
+            | Pure CSS sliders for comparing two images
+          .card-footer
+            a.btn.btn-primary(href="experimentals/comparison.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Filters
+          .card-body
+            | CSS only content filters
+          .card-footer
+            a.btn.btn-primary(href="experimentals/filters.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Meters
+          .card-body
+            | Representing the value within the known range
+          .card-footer
+            a.btn.btn-primary(href="experimentals/meters.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Off-canvas
+          .card-body
+            | Navigation layout that sidebars can slide in and out of the viewport
+          .card-footer
+            a.btn.btn-primary(href="experimentals/off-canvas.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Parallax
+          .card-body
+            | Pure CSS Apple TV/tvOS hover parallax effect
+          .card-footer
+            a.btn.btn-primary(href="experimentals/parallax.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Progress
+          .card-body
+            | Indicating the progress completion of a task
+          .card-footer
+            a.btn.btn-primary(href="experimentals/progress.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Sliders
+          .card-body
+            | Selecting values from ranges
+          .card-footer
+            a.btn.btn-primary(href="experimentals/sliders.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Timelines
+          .card-body
+            | Ordered sequences of activities
+          .card-footer
+            a.btn.btn-primary(href="experimentals/timelines.html") View
+
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/autocomplete.pug b/public/css/spectre-0.5.8/docs/src/experimentals/autocomplete.pug
new file mode 100644
index 0000000..da5feaa
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/autocomplete.pug
@@ -0,0 +1,135 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'autocomplete'
+  - var parent = 'experimentals'
+  - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('autocomplete', 'Autocomplete')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
+
+    .docs-demo.columns
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete
+            .form-autocomplete-input.form-input
+              span.chip
+                | Bruce Banner
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
+                | Thor Odinson
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
+                | Steve Rogers
+              .chip
+                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                | Tony Stark
+              span.chip.active
+                | Natasha Romanoff
+              input.form-input(type="text" placeholder="")
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete
+            .form-autocomplete-input.form-input.is-focused
+              span.chip
+                | Bruce Banner
+                a.btn.btn-clear(href="#" aria-label="Close" role="button")
+              span.chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
+                | Thor Odinson
+                a.btn.btn-clear(href="#" aria-label="Close" role="button")
+              .has-icon-left
+                input.form-input(type="text" placeholder="" value="S")
+                i.form-icon.loading
+            ul.menu
+              li.menu-item
+                a(href="#autocomplete")
+                  .tile.tile-centered
+                    .tile-icon
+                      img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
+                    .tile-content
+                      mark S
+                      | teve Roger
+                      mark s
+              li.menu-item
+                a(href="#autocomplete")
+                  .tile.tile-centered
+                    .tile-icon
+                      figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                    .tile-content
+                      | Tony 
+                      mark S
+                      | tark
+
+    p
+      | Add a container element with the #[code form-autocomplete] class.
+      | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
+      | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
+    p
+      | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
+      | The autocomplete HTML structure is exampled below.
+
+    .docs-demo.columns
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete.autocomplete-oneline
+            .form-autocomplete-input.form-input
+              span.chip
+                | Bruce Banner
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
+                | Thor Odinson
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
+                | Steve Rogers
+              .chip
+                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                | Tony Stark
+              span.chip.active
+                | Natasha Romanoff
+              input.form-input(type="text" placeholder="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="form-autocomplete">
+            <!-- autocomplete input container -->
+            <div class="form-autocomplete-input form-input">
+
+              <!-- autocomplete chips -->
+              <div class="chip">
+                <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
+                Thor Odinson
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </div>
+
+              <!-- autocomplete real input box -->
+              <input class="form-input" type="text" placeholder="typing here">
+            </div>
+
+            <!-- autocomplete suggestion list -->
+            <ul class="menu">
+              <!-- menu list items -->
+              <li class="menu-item">
+                <a href="#">
+                  <div class="tile tile-centered">
+                    <div class="tile-icon">
+                      ...
+                    </div>
+                    <div class="tile-content">
+                      ...
+                    </div>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/calendars.pug b/public/css/spectre-0.5.8/docs/src/experimentals/calendars.pug
new file mode 100644
index 0000000..3dd3528
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/calendars.pug
@@ -0,0 +1,314 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'calendars'
+  - var parent = 'experimentals'
+  - var title = 'Calendars - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('calendars', 'Calendars')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Calendars are designed for date or date range picker and events display. It is made with flex layout.
+
+    .docs-demo.columns
+      .column.col-4.col-md-12
+        .calendar
+          .calendar-nav.navbar
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-left
+            .navbar-primary March 2017
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-right
+          .calendar-container
+            .calendar-header
+              .calendar-date Sun
+              .calendar-date Mon
+              .calendar-date Tue
+              .calendar-date Wed
+              .calendar-date Thu
+              .calendar-date Fri
+              .calendar-date Sat
+            .calendar-body
+              .calendar-date.prev-month
+                button.date-item 26
+              .calendar-date.prev-month
+                button.date-item 27
+              .calendar-date.prev-month
+                button.date-item 28
+              .calendar-date
+                button.date-item 1
+              .calendar-date
+                button.date-item 2
+              .calendar-date
+                button.date-item 3
+              .calendar-date.tooltip(data-tooltip="Today")
+                button.date-item.date-today 4
+              .calendar-date.tooltip(data-tooltip="Not available")
+                button.date-item(disabled="") 5
+              .calendar-date
+                button.date-item 6
+              .calendar-date
+                button.date-item 7
+              .calendar-date.tooltip(data-tooltip="You have appointments")
+                button.date-item.badge 8
+              .calendar-date
+                button.date-item 9
+              .calendar-date
+                button.date-item 10
+              .calendar-date
+                button.date-item 11
+              .calendar-date
+                button.date-item 12
+              .calendar-date
+                button.date-item 13
+              .calendar-date
+                button.date-item 14
+              .calendar-date
+                button.date-item 15
+              .calendar-date.calendar-range.range-start
+                button.date-item 16
+              .calendar-date.calendar-range
+                button.date-item 17
+              .calendar-date.calendar-range
+                button.date-item 18
+              .calendar-date.calendar-range
+                button.date-item 19
+              .calendar-date.calendar-range.range-end
+                button.date-item 20
+              .calendar-date
+                button.date-item 21
+              .calendar-date
+                button.date-item 22
+              .calendar-date
+                button.date-item 23
+              .calendar-date
+                button.date-item 24
+              .calendar-date
+                button.date-item 25
+              .calendar-date
+                button.date-item 26
+              .calendar-date
+                button.date-item 27
+              .calendar-date
+                button.date-item 28
+              .calendar-date
+                button.date-item 29
+              .calendar-date
+                button.date-item 30
+              .calendar-date
+                button.date-item 31
+              .calendar-date.next-month
+                button.date-item 1
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="calendar">
+            <!-- calendar navbar -->
+            <div class="calendar-nav navbar">
+              <button class="btn btn-action btn-link btn-lg">
+                <i class="icon icon-arrow-left"></i>
+              </button>
+              <div class="navbar-primary">March 2017</div>
+              <button class="btn btn-action btn-link btn-lg">
+                <i class="icon icon-arrow-right"></i>
+              </button>
+            </div>
+
+            <div class="calendar-container">
+              <div class="calendar-header">
+                <div class="calendar-date">Sun</div>
+                <div class="calendar-date">Mon</div>
+                <div class="calendar-date">Tue</div>
+                <div class="calendar-date">Wed</div>
+                <div class="calendar-date">Thu</div>
+                <div class="calendar-date">Fri</div>
+                <div class="calendar-date">Sat</div>
+              </div>
+
+              <div class="calendar-body">
+                <!-- calendar previous month -->
+                <div class="calendar-date prev-month">
+                  <button class="date-item">26</button>
+                </div>
+                ...
+                <div class="calendar-date prev-month">
+                  <button class="date-item">28</button>
+                </div>
+
+                <!-- calendar current month -->
+                <div class="calendar-date">
+                  <button class="date-item">1</button>
+                </div>
+                <div class="calendar-date">
+                  <button class="date-item">2</button>
+                </div>
+                <div class="calendar-date">
+                  <button class="date-item">3</button>
+                </div>
+                <!-- calendar date: today -->
+                <div class="calendar-date">
+                  <button class="date-item date-today">4</button>
+                </div>
+                <!-- calendar date: tooltip -->
+                <div class="calendar-date tooltip" data-tooltip="You have appointments">
+                  <button class="date-item">5</button>
+                </div>
+                <!-- calendar date: not available -->
+                <div class="calendar-date tooltip" data-tooltip="Not available">
+                  <button class="date-item" disabled="">6</button>
+                </div>
+
+                <!-- calendar range -->
+                <div class="calendar-date calendar-range range-start">
+                  <button class="date-item">7</button>
+                </div>
+                <div class="calendar-date calendar-range">
+                  <button class="date-item">8</button>
+                </div>
+                <div class="calendar-date calendar-range range-end">
+                  <button class="date-item">9</button>
+                </div>
+                ...
+                <div class="calendar-date">
+                  <button class="date-item">31</button>
+                </div>
+
+                <!-- calendar next month -->
+                <div class="calendar-date next-month">
+                  <button class="date-item">1</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+    +docs-subheading('calendars-sizes', 'Calendars sizes')
+
+    .docs-demo.columns
+      .column.col-12
+        .calendar.calendar-lg
+          .calendar-nav.navbar
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-left
+            .navbar-primary March 2017
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-right
+          .calendar-container
+            .calendar-header
+              .calendar-date Sun
+              .calendar-date Mon
+              .calendar-date Tue
+              .calendar-date Wed
+              .calendar-date Thu
+              .calendar-date Fri
+              .calendar-date Sat
+            .calendar-body
+              .calendar-date.prev-month
+                button.date-item 26
+              .calendar-date.prev-month
+                button.date-item 27
+                .calendar-events
+                  a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
+              .calendar-date.prev-month
+                button.date-item 28
+              .calendar-date
+                button.date-item 1
+              .calendar-date
+                button.date-item 2
+              .calendar-date
+                button.date-item 3
+              .calendar-date.tooltip(data-tooltip="Today")
+                button.date-item.date-today 4
+              .calendar-date
+                button.date-item(disabled="") 5
+              .calendar-date
+                button.date-item 6
+              .calendar-date
+                button.date-item 7
+              .calendar-date.tooltip(data-tooltip="You have appointments")
+                button.date-item.badge 8
+                .calendar-events
+                  a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
+                  a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
+              .calendar-date
+                button.date-item 9
+              .calendar-date
+                button.date-item 10
+              .calendar-date
+                button.date-item 11
+              .calendar-date
+                button.date-item 12
+                .calendar-events
+                  a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
+              .calendar-date
+                button.date-item 13
+              .calendar-date
+                button.date-item 14
+              .calendar-date
+                button.date-item 15
+              .calendar-date.calendar-range.range-start
+                button.date-item 16
+              .calendar-date.calendar-range
+                button.date-item 17
+              .calendar-date.calendar-range
+                button.date-item 18
+              .calendar-date.calendar-range
+                button.date-item 19
+              .calendar-date.calendar-range.range-end
+                button.date-item 20
+                .calendar-events
+                  a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
+              .calendar-date
+                button.date-item 21
+              .calendar-date
+                button.date-item 22
+              .calendar-date
+                button.date-item 23
+              .calendar-date
+                button.date-item 24
+              .calendar-date
+                button.date-item 25
+              .calendar-date
+                button.date-item 26
+              .calendar-date
+                button.date-item 27
+              .calendar-date
+                button.date-item 28
+              .calendar-date
+                button.date-item 29
+              .calendar-date
+                button.date-item 30
+              .calendar-date
+                button.date-item 31
+              .calendar-date.next-month.disabled
+                button.date-item 1
+                .calendar-events
+                  a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="calendar calendar-lg">
+            <!-- calendar navbar structure -->
+
+            <div class="calendar-container">
+              <!-- calendar header structure -->
+
+              <div class="calendar-body">
+                <!-- calendar date with events -->
+                <div class="calendar-date">
+                  <button class="date-item active">20</button>
+                  <div class="calendar-events">
+                    <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+    
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/carousels.pug b/public/css/spectre-0.5.8/docs/src/experimentals/carousels.pug
new file mode 100644
index 0000000..5dfe359
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/carousels.pug
@@ -0,0 +1,104 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'carousels'
+  - var parent = 'experimentals'
+  - var title = 'Carousels - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('carousels', 'Carousels')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    p Carousels are slideshows for cycling images. It is built in pure CSS.
+
+    .docs-demo.columns
+      .column.col-12
+        .carousel
+          input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
+          input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="")
+          input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="")
+          input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="")
+          .carousel-container
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-4")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-2")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper")
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-1")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-3")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-2")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-4")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-3")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-1")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-el-capitan-2.jpg" alt="macOS El Capitan Wallpaper")
+          .carousel-nav
+            label.nav-item.text-hide.c-hand(for="slide-1") 1
+            label.nav-item.text-hide.c-hand(for="slide-2") 2
+            label.nav-item.text-hide.c-hand(for="slide-3") 3
+            label.nav-item.text-hide.c-hand(for="slide-4") 4
+    
+    p
+      | The default image number of Carousels is #[code 8]. You can add more images by changing the variable #[code $carousel-number] in #[code _carousels.scss] and re-compiling the CSS.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="carousel">
+            <!-- carousel locator -->
+            <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
+            <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
+            <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
+            <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
+            
+            <!-- carousel container -->
+            <div class="carousel-container">
+              <!-- carousel item -->
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+              </figure>
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+              </figure>
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper">
+              </figure>
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label>
+                <img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS El Capitan Wallpaper">
+              </figure>
+            </div>
+            <!-- carousel navigation -->
+            <div class="carousel-nav">
+              <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+              <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+              <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+              <label class="nav-item text-hide c-hand" for="slide-4">4</label>
+            </div>
+          </div>
+      
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/comparison.pug b/public/css/spectre-0.5.8/docs/src/experimentals/comparison.pug
new file mode 100644
index 0000000..3252dcb
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/comparison.pug
@@ -0,0 +1,48 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'comparison'
+  - var parent = 'experimentals'
+  - var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('comparison', 'Comparison sliders')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    p
+      | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
+
+    .docs-demo.columns
+      .column.col-12
+        .comparison-slider
+          figure.comparison-before
+            img.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+            .comparison-label Before
+          figure.comparison-after
+            img.filter-grayscale.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+            .comparison-label After
+            textarea.comparison-resizer(readonly="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="comparison-slider">
+            <figure class="comparison-before">
+              <!-- image (before) -->
+              <div class="comparison-label">Before</div>
+            </figure>
+
+            <figure class="comparison-after">
+              <!-- image (after) -->
+              <div class="comparison-label">After</div>
+              <textarea class="comparison-resizer" readonly></textarea>
+            </figure>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/filters.pug b/public/css/spectre-0.5.8/docs/src/experimentals/filters.pug
new file mode 100644
index 0000000..f49f213
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/filters.pug
@@ -0,0 +1,126 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'filters'
+  - var parent = 'experimentals'
+  - var title = 'Filters - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('filters', 'Filters')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    p Filters are CSS only content filters.
+
+    .docs-demo.columns
+      .column.col-12
+        .filter
+          input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
+          input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
+          input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
+          input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
+          input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
+          .filter-nav
+            label.chip(for="tag-0") All
+            label.chip(for="tag-1") Action
+            label.chip(for="tag-2") Roleplaying
+            label.chip(for="tag-3") Shooter
+            label.chip(for="tag-4") Sports
+          .filter-body.columns
+            .column.col-4.filter-item(data-tag="tag-2")
+              .card
+                .card-header
+                  .card-title.text-bold Fallout 4
+                  .card-subtitle.text-gray Roleplaying
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title.text-bold Halo 5
+                  .card-subtitle.text-gray Shooter
+            .column.col-4.filter-item(data-tag="tag-1")
+              .card
+                .card-header
+                  .card-title.text-bold Quantum Break
+                  .card-subtitle.text-gray Action
+            .column.col-4.filter-item(data-tag="tag-4")
+              .card
+                .card-header
+                  .card-title.text-bold Forza Horizon 3
+                  .card-subtitle.text-gray Sports
+            .column.col-4.filter-item(data-tag="tag-2")
+              .card
+                .card-header
+                  .card-title.text-bold Final Fantasy XV
+                  .card-subtitle.text-gray Roleplaying
+            .column.col-4.filter-item(data-tag="tag-4")
+              .card
+                .card-header
+                  .card-title.text-bold NBA 2K17
+                  .card-subtitle.text-gray Sports
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title.text-bold Battlefield 1
+                  .card-subtitle.text-gray Shooter
+            .column.col-4.filter-item(data-tag="tag-1")
+              .card
+                .card-header
+                  .card-title.text-bold GTA V
+                  .card-subtitle.text-gray Action
+            .column.col-4.filter-item(data-tag="tag-4")
+              .card
+                .card-header
+                  .card-title.text-bold FIFA 17
+                  .card-subtitle.text-gray Sports
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title.text-bold Overwatch
+                  .card-subtitle.text-gray Shooter
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title.text-bold Titanfall 2
+                  .card-subtitle.text-gray Shooter
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title.text-bold Gears of Wars 4
+                  .card-subtitle.text-gray Shooter
+
+    p
+      | Filters use #[code tag-1] to #[code tag-8] to flag different tags.
+      | #[code tag-0] is reserved for clearing filter (or showing all). 
+      | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="filter">
+            <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
+            <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
+            <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
+
+            <div class="filter-nav">
+              <label class="chip" for="tag-0">All</label>
+              <label class="chip" for="tag-1">Action</label>
+              <label class="chip" for="tag-2">Roleplaying</label>
+            </div>
+
+            <div class="filter-body">
+              <div class="filter-item card" data-tag="tag-1">
+                <!-- Filter item content -->
+              </div>
+              <div class="filter-item card" data-tag="tag-2">
+                <!-- Filter item content -->
+              </div>
+              <!-- Filter items -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/meters.pug b/public/css/spectre-0.5.8/docs/src/experimentals/meters.pug
new file mode 100644
index 0000000..b2d0c77
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/meters.pug
@@ -0,0 +1,38 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'meters'
+  - var parent = 'experimentals'
+  - var title = 'Meters - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('meters', 'Meters')
+    include ../_layout/_ad-g.pug
+
+    p Meters represent the value within the known range.
+
+    .docs-demo.columns
+      .column.col-3.col-xs-12
+        meter.meter(value="20" min="0" max="100")
+      .column.col-3.col-xs-12
+        meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
+      .column.col-3.col-xs-12
+        meter.meter(value="85" min="0" low="30" high="80" max="100")
+      .column.col-3.col-xs-12
+        meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- Meter is green when low < value < high -->
+          <meter class="meter" value="20" min="0" max="100"></meter>
+          <meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
+          <!-- Meter is yellow when value < low  or high < value -->
+          <meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
+          <!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
+          <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/off-canvas.pug b/public/css/spectre-0.5.8/docs/src/experimentals/off-canvas.pug
new file mode 100644
index 0000000..8d18e0b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/off-canvas.pug
@@ -0,0 +1,64 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'off-canvas'
+  - var parent = 'experimentals'
+  - var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework'
+  - var description = 'The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('off-canvas', 'Off-canvas')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
+    p
+      | By default, the off-canvas menu is collapsed whenever the window width is.
+      | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
+
+    .docs-demo.columns
+      .column
+        .off-canvas.off-canvas-sidebar-show
+          a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
+            i.icon.icon-menu
+          #sidebar-demo.off-canvas-sidebar.flex-centered
+            span Sidebar
+          a.off-canvas-overlay(href="#close")
+          .off-canvas-content
+            .content
+              h4 Lorem ipsum
+              p
+                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+              p
+                | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+    p
+      | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar].
+      | And remove the #[code active] to close it.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="off-canvas">
+            <!-- off-screen toggle button -->
+            <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+              <i class="icon icon-menu"></i>
+            </a>
+
+            <div id="sidebar-id" class="off-canvas-sidebar">
+              <!-- off-screen sidebar -->
+            </div>
+
+            <a class="off-canvas-overlay" href="#close"></a>
+
+            <div class="off-canvas-content">
+              <!-- off-screen content -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/parallax.pug b/public/css/spectre-0.5.8/docs/src/experimentals/parallax.pug
new file mode 100644
index 0000000..c52bb68
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/parallax.pug
@@ -0,0 +1,53 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'parallax'
+  - var parent = 'experimentals'
+  - var title = 'Parallax - Experimentals - Spectre.css CSS Framework'
+  - var description = 'The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('parallax', 'Parallax')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
+
+    .docs-demo.columns
+      .column.col-sm-12.col-8.col-mx-auto
+        .parallax
+          .parallax-top-left(tabindex="1")
+          .parallax-top-right(tabindex="2")
+          .parallax-bottom-left(tabindex="3")
+          .parallax-bottom-right(tabindex="4")
+          .parallax-content
+            .parallax-front
+              h2 tvOS parallax demo
+            .parallax-back
+              img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="parallax">
+            <div class="parallax-top-left" tabindex="1"></div>
+            <div class="parallax-top-right" tabindex="2"></div>
+            <div class="parallax-bottom-left" tabindex="3"></div>
+            <div class="parallax-bottom-right" tabindex="4"></div>
+            <div class="parallax-content">
+              <div class="parallax-front">
+                <h2>tvOS parallax demo</h2>
+              </div>
+              <div class="parallax-back">
+                <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
+              </div>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
+          
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/progress.pug b/public/css/spectre-0.5.8/docs/src/experimentals/progress.pug
new file mode 100644
index 0000000..7e83e00
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/progress.pug
@@ -0,0 +1,33 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'progress'
+  - var parent = 'experimentals'
+  - var title = 'Progress - Experimentals - Spectre.css CSS Framework'
+  - var description = 'The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('progress', 'Progress')
+    include ../_layout/_ad-g.pug
+
+    p The Progress indicates the progress completion of a task.
+
+    .docs-demo.columns
+      .column.col-3.col-xs-12
+        progress.progress(value="75" max="100")
+      .column.col-3.col-xs-12
+        progress.progress(value="50" max="100")
+      .column.col-3.col-xs-12
+        progress.progress(value="25" max="100")
+      .column.col-3.col-xs-12
+        progress.progress(max="100")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <progress class="progress" value="25" max="100"></progress>
+          <progress class="progress" max="100"></progress>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/sliders.pug b/public/css/spectre-0.5.8/docs/src/experimentals/sliders.pug
new file mode 100644
index 0000000..69e9be6
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/sliders.pug
@@ -0,0 +1,34 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'sliders'
+  - var parent = 'experimentals'
+  - var title = 'Sliders - Experimentals - Spectre.css CSS Framework'
+  - var description = 'The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('sliders', 'Sliders')
+    include ../_layout/_ad-g.pug
+
+    p The Sliders are for selecting values from ranges.
+    p
+      | You can add the class #[code tooltip] to have tooltip labels.
+      | If no #[code data-tooltip] is set, the #[code value] will be used instead.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
+      .column.col-6.col-xs-12
+        input.slider(type="range" min="0" max="100" value="50" disabled="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- Sliders -->
+          <input class="slider" type="range" min="0" max="100" value="50">
+          <!-- Sliders with tooltips -->
+          <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/timelines.pug b/public/css/spectre-0.5.8/docs/src/experimentals/timelines.pug
new file mode 100644
index 0000000..0ec9bbb
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/timelines.pug
@@ -0,0 +1,97 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'timelines'
+  - var parent = 'experimentals'
+  - var title = 'Timelines - Experimentals - Spectre.css CSS Framework'
+  - var description = 'The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('timelines', 'Timelines')
+    include ../_layout/_ad-g.pug
+
+    p The Timelines are ordered sequences of activities.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .timeline
+          #timeline-example-1.timeline-item
+            .timeline-left
+              a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016")
+            .timeline-content
+              .tile
+                .tile-content
+                  p.tile-subtitle March 2016
+                  p.tile-title Initial commit
+          #timeline-example-2.timeline-item
+            .timeline-left
+              a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017")
+                i.icon.icon-check
+            .timeline-content
+              .tile
+                .tile-content
+                  p.tile-subtitle February 2017
+                  p.tile-title New Documents experience
+                  p.tile-title
+                    a(href="components.html#bars") Bars
+                    | : represent the progress of a task
+                  p.tile-title
+                    a(href="components.html#steps") Steps
+                    | : progress indicators of a sequence of task steps
+                  p.tile-title
+                    a(href="components.html#tiles") Tiles
+                    | : repeatable or embeddable information blocks
+                .tile-action
+                  button.btn View
+          #timeline-example-3.timeline-item
+            .timeline-left
+              a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017")
+                i.icon.icon-check
+            .timeline-content
+              .tile
+                .tile-content
+                  p.tile-subtitle March 2017
+                  p.tile-title
+                    a(href="elements.html#icons") Icons
+                    | : single-element, responsive and pure CSS icons
+                  p.tile-title
+                    a(href="components.html#popovers") Popovers
+                    | : small overlay content containers
+                  p.tile-title
+                    a(href="experimentals.html#calendars") Calendars
+                    | : date or date range picker and events display
+                  p.tile-title
+                    a(href="experimentals.html#carousels") Carousels
+                    | : slideshows for cycling images
+                .tile-action
+                  button.btn View
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="timeline">
+            <div class="timeline-item" id="timeline-example-1">
+              <div class="timeline-left">
+                <a class="timeline-icon" href="#timeline-example-1"></a>
+              </div>
+              <div class="timeline-content">
+                <!-- tiles structure -->
+              </div>
+            </div>
+
+            <div class="timeline-item" id="timeline-example-2">
+              <div class="timeline-left">
+                <a class="timeline-icon icon-lg" href="#timeline-example-2">
+                  <i class="icon icon-check"></i>
+                </a>
+              </div>
+              <div class="timeline-content">
+                <!-- tiles structure -->
+              </div>
+            </div>
+            ...
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/experimentals/viewer-360.pug b/public/css/spectre-0.5.8/docs/src/experimentals/viewer-360.pug
new file mode 100644
index 0000000..5ab0384
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/experimentals/viewer-360.pug
@@ -0,0 +1,61 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'viewer-360'
+  - var parent = 'experimentals'
+  - var title = '360-Degree Viewer - Experimentals - Spectre.css CSS Framework'
+  - var description = '360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('viewer-360', '360-Degree Viewer')
+    p
+      small.label.label-secondary CSS ONLY
+
+    include ../_layout/_ad-g.pug
+
+    p
+      | 360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. 
+
+    .docs-demo.columns
+      .column.col-12
+        .viewer-360
+          input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
+          figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;")
+
+    p.text-center
+      | Photo credits: 
+      a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank") Microsoft Surface Pro 6
+
+    .docs-demo.columns
+      .column.col-12
+        .viewer-360
+          input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
+          figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;")
+
+    p.text-center
+      | Photo credits: 
+      a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank") Microsoft Xbox One X
+
+    p
+      | You will need to use your own product image sprite (all angle of photos in one image) and set the attribute #[code max] to the image numbers to use this component.
+    
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="viewer-360">
+            <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
+            <figure class="viewer-image" style="background-image:url('...');"></figure>
+          </div>
+
+    p
+      | The default image numbers in CSS are #[code 36]. You can copy the mixin and add more numbers in #[code _viewer-360.scss] and re-compiling the CSS.
+
+    pre.code(data-lang='SCSS')
+      code
+        :highlight(lang="scss")
+          @include viewer-slider-size(36);
+          @include viewer-slider-size(30);
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/getting-started.pug b/public/css/spectre-0.5.8/docs/src/getting-started.pug
new file mode 100644
index 0000000..c157ea7
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/getting-started.pug
@@ -0,0 +1,65 @@
+extends _layout/_docs-layout.pug
+
+block variables
+  - var slug = 'getting-started'
+  - var parent = 'getting-started'
+  - var title = 'Getting started - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('getting-started', 'Getting started')
+    include _layout/_ad-g.pug
+
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Installation
+          .card-body
+            | How to install and use Spectre.css
+          .card-footer
+            a.btn.btn-primary(href="getting-started/installation.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Custom version
+          .card-body
+            | Customize your version of Spectre.css
+          .card-footer
+            a.btn.btn-primary(href="getting-started/custom.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Browser support
+          .card-body
+            | Browser compatibility and support
+          .card-footer
+            a.btn.btn-primary(href="getting-started/browsers.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 What's new
+          .card-body
+            | Changelog and release notes
+          .card-footer
+            a.btn.btn-primary(href="getting-started/whatsnew.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Accessibility
+          .card-body.text-gray
+            | Coming soon
+
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
diff --git a/public/css/spectre-0.5.8/docs/src/getting-started/browsers.pug b/public/css/spectre-0.5.8/docs/src/getting-started/browsers.pug
new file mode 100644
index 0000000..d69d429
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/getting-started/browsers.pug
@@ -0,0 +1,41 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'browsers'
+  - var parent = 'getting-started'
+  - var title = 'Browsers - Getting started - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('browsers', 'Browser support')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | Spectre uses 
+      a(href='https://github.com/postcss/autoprefixer', target='_blank') Autoprefixer
+      |  to make most styles compatible with earlier browsers and 
+      a(href='https://necolas.github.io/normalize.css/', target='_blank') Normalize.css
+      |  for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
+    ul
+      li
+        | Chrome 
+        small.label.label-success LAST 4
+      li
+        | Microsoft Edge 
+        small.label.label-success LAST 4
+      li
+        | Firefox 
+        small.label.label-success.text-uppercase Extended Support Release
+      li
+        | Safari 
+        small.label.label-success LAST 4
+      li
+        | Opera 
+        small.label.label-success LAST 4
+      li Internet Explorer 10+
+    p
+      | Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
+    
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/getting-started/custom.pug b/public/css/spectre-0.5.8/docs/src/getting-started/custom.pug
new file mode 100644
index 0000000..36a1753
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/getting-started/custom.pug
@@ -0,0 +1,295 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'custom'
+  - var parent = 'getting-started'
+  - var title = 'Custom - Getting started - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('custom', 'Custom version')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | You can customize your version of Spectre.css by editing Sass files in 
+      code /src
+      |  directory or removing unneeded components from 
+      code .scss
+      |  source files.
+    p
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre/', target='_blank') Sass Source Code
+    p
+      | If you are looking for Less version of Spectre.css, please switch to 
+      code Less
+      |  branch.
+    p
+      a.btn(href='https://github.com/picturepan2/spectre/tree/less', target='_blank') Less Branch
+
+    +docs-subheading('compiling', 'Compiling CSS')
+
+    p
+      | Spectre uses 
+      a(href='http://gulpjs.com/', target='_blank') Gulp
+      |  for compiling CSS. Firstly you need to 
+      a(href='https://www.npmjs.com/get-npm', target='_blank') install NPM
+      | , which is used to manage Gulp and other dependencies.
+    p Then, you can build the CSS file from the command line:
+    ol
+      li Navigate to the root directory of Spectre.
+      li
+        | Run 
+        code npm install
+        | . NPM will install all dev dependencies as listed in package.json.
+      li
+        | When completed, run 
+        code gulp build
+        |  task to compile Sass to CSS and minify files.
+      li
+        | You can find compiled CSS files in 
+        code /dist
+        |  directory.
+    p All available Gulp tasks:
+    ul
+      li
+        code gulp build
+        |  - compile Sass to CSS and minify files (default)
+      li
+        code gulp docs
+        |  - compile Docs related files
+      li
+        code gulp watch
+        |  - watch file changes and re-compile CSS files
+
+    +docs-subheading('importing', 'Importing Sass')
+    p
+      | It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.
+    ul
+      li
+        | First, create your own project and install Spectre via 
+        a(href='#installation') NPM or other package managers
+        | .
+      li
+        | Then create your 
+        code project-name.scss
+        |  file in the root folder. You can use 
+        code project-name.scss
+        |  to define your variables.
+      li Compile the Sass file to CSS to get the custom version of Spectre.
+
+    //- importing
+    pre.code(data-lang='Sass')
+      code
+        :highlight(lang="scss")
+          // Example of project-name.scss
+          // Define variables to override default ones
+          $primary-color: #2e5bec;
+          $dark-color: #3e396b;
+
+          // Import full Spectre source code
+          @import "node_modules/spectre.css/src/spectre";
+
+    p
+      | Alternatively, you can create custom 
+      code _variables.scss
+      |  and import it to 
+      code project-name.scss
+      | .
+
+    //- custom variables
+    pre.code(data-lang='Sass')
+      code
+        :highlight(lang="scss")
+          // Example of project-name.scss
+          @import "variables";
+
+          // Import only the needed components
+          @import "node_modules/spectre.css/src/buttons";
+          @import "node_modules/spectre.css/src/forms";
+
+    +docs-subheading('folders', 'Folder structure')
+
+    //- folder structure
+    pre.code
+      code
+        :highlight
+          spectre/
+          ├── dist/                           // Build folder
+          │   ├── spectre-exp.css
+          │   ├── spectre-exp.min.css
+          │   ├── spectre-icons.css
+          │   ├── spectre-icons.min.css
+          │   ├── spectre.css
+          │   └── spectre.min.css
+          │
+          ├── docs/
+          │   ├── dist/                       // Pre-built CSS folder
+          │   │   ├── spectre-exp.css
+          │   │   ├── spectre-exp.min.css
+          │   │   ├── spectre-icons.css
+          │   │   ├── spectre-icons.min.css
+          │   │   ├── spectre.css
+          │   │   └── spectre.min.css
+          |   ├── css/                        // Docs CSS files
+          │   │   └── docs.css
+          |   ├── src/
+          │   │   ├── scss                    // Docs Sass files
+          │   │   │   └── docs.scss
+          │   │   ├── index.pug               // Docs Pug files
+          │   │   └── ...
+          │   ├── examples/                   // Example tempalte
+          │   │   └── starter.html
+          │   ├── ../
+          │   ├── index.html
+          │   └── ...
+          │
+          ├── src/                            // Source Sass files
+          │   ├── spectre.scss
+          │   ├── spectre-icons.scss
+          │   ├── spectre-exp.scss
+          │   ├── _mixins.scss
+          │   ├── _variables.scss
+          │   └── ...
+          │
+          ├── gulpfile.js
+          ├── package.json
+          └── ...
+
+    +docs-subheading('variables', 'Variables')
+
+    p
+      | Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in 
+      code _variables.scss
+      |  include 
+      code !default
+      |  flag. You can redefine the variables to override the values.
+
+    +docs-subheading('variables-colors', 'Variables - Colors')
+
+    .columns
+      .column.col-2.col-md-6
+        .docs-color(style='background:#5755d9;color:#fff;')
+          .color-title #5755d9
+          .color-subtitle Primary
+      .column.col-2.col-md-6
+        .docs-color(style='background:#f1f1fc;color:#5755d9;')
+          .color-title #f1f1fc
+          .color-subtitle Secondary
+    .columns
+      .column.col-2.col-md-6
+        .docs-color(style='background:#32b643;color:#fff;')
+          .color-title #32b643
+          .color-subtitle Success
+      .column.col-2.col-md-6
+        .docs-color(style='background:#ffb700;color:#fff;')
+          .color-title #ffb700
+          .color-subtitle Warning
+      .column.col-2.col-md-6
+        .docs-color(style='background:#e85600;color:#fff;')
+          .color-title #e85600
+          .color-subtitle Error
+    .columns
+      .column.col-2.col-md-6
+        .docs-color(style='background:#303742;color:#fff;')
+          .color-title #303742
+          .color-subtitle Dark
+      .column.col-2.col-md-6
+        .docs-color(style='background:#66758c;color:#fff;')
+          .color-title #66758c
+          .color-subtitle Gray dark
+      .column.col-2.col-md-6
+        .docs-color(style='background:#bcc3ce;color:#fff;')
+          .color-title #bcc3ce
+          .color-subtitle Gray
+      .column.col-2.col-md-6
+        .docs-color(style='background:#f7f8f9;color:#66758c;')
+          .color-title #f7f8f9
+          .color-subtitle Gray light
+      .column.col-2.col-md-6
+        .docs-color(style='background:#fff;color:#bcc3ce;')
+          .color-title #fff
+          .color-subtitle Light
+
+    +docs-subheading('variables-buttons', 'Variables - Button mixins')
+
+    p
+      | There are 2 button variant mixins in 
+      code _mixins.scss
+      |  to generate different color variants.
+    ul
+      li
+        | @mixin button-variant(
+        code $color
+        | : $primary-color);
+      li
+        | @mixin button-outline-variant(
+        code $color
+        | : $primary-color);
+
+    //- button mixins
+    pre.code(data-lang='Sass')
+      code
+        :highlight(lang="scss")
+          <!-- filled button with the success color -->
+          .btn-success {
+            @include button-variant($success-color);
+          }
+
+          <!-- outlined button with the success color -->
+          .btn-outline-success {
+            @include button-outline-variant($success-color);
+          }
+
+    +docs-subheading('variables-sizes', 'Variables - Sizes')
+
+    p
+      | The default REM (root em) size in Spectre.css is 
+      code 20px
+      | .
+    p
+      | Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 
+      code 20px
+      | , which is relatively easy to calculate.
+    p
+      | Spectre uses 
+      code 4px
+      |  as the unit size. Sizes of components are based on the unit size.
+
+    +docs-subheading('variables-custom-prefix', 'Variables - Custom prefix')
+    p
+      | There is also a way to add custom prefix to all CSS classes. You can use 
+      a(href='https://www.npmjs.com/package/gulp-css-prefix', target='_blank') gulp-css-prefix
+      |  plugin and add a new Gulp task to enable it.
+
+    //- custom prefix
+    pre.code(data-lang='Bash')
+      code
+        :highlight(lang="Bash")
+          npm install gulp-css-prefix
+
+    p
+      | To add 
+      code spectre-
+      |  to all classes, you can add the Gulp task to 
+      code gulpfile.js
+      |  file.
+
+    //- custom prefix
+    pre.code
+      code
+        :highlight(lang="JavaScript")
+          var cssPrefix = require('gulp-css-prefix');
+      
+          gulp.task('prefix', function() {
+            gulp.src('./dist/*.css')
+                .pipe(cssPrefix('spectre-'))
+                .pipe(gulp.dest('./dist'))
+          });
+
+    p
+      | After you compile your version of Spectre in the /dist, run 
+      code gulp prefix
+      |  in the directory of Spectre.
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/getting-started/installation.pug b/public/css/spectre-0.5.8/docs/src/getting-started/installation.pug
new file mode 100644
index 0000000..13a9d4d
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/getting-started/installation.pug
@@ -0,0 +1,84 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'installation'
+  - var parent = 'getting-started'
+  - var title = 'Installation - Getting started - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('installation', 'Installation')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
+
+    +docs-subheading('install-manually', 'Install manually')
+    p
+      | Download the compiled and minified 
+      a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
+      |  (core ~10KB min+gzip):
+    p
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
+    p
+      | Include 
+      code spectre.css
+      |  located in 
+      strong /dist
+      |  in your website or Web app <head>. Also, you can add 
+      code spectre-icons.css
+      |  and 
+      code spectre-exp.css
+      |  accordingly.
+
+    //- install manually
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <link rel="stylesheet" href="spectre.min.css">
+          <link rel="stylesheet" href="spectre-exp.min.css">
+          <link rel="stylesheet" href="spectre-icons.min.css">
+      
+    +docs-subheading('install-cdn', 'Install from CDN')
+    p
+      | Alternatively, you can use the 
+      a(href='https://unpkg.com/', target='_blank') unpkg
+      |  or 
+      a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
+      |  CDN to load compiled Spectre.css.
+
+    //- install from CDN
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+          <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
+          <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+
+    +docs-subheading('install-npm', 'Install with NPM')
+
+    //- install with npm
+    pre.code.c-select-all(data-lang='Bash')
+      code
+        :highlight(lang="Bash")
+          npm install spectre.css --save
+
+    +docs-subheading('install-yarn', 'Install with Yarn')
+
+    //- install with yarn
+    pre.code.c-select-all(data-lang='Bash')
+      code
+        :highlight(lang="bash")
+          yarn add spectre.css
+
+    +docs-subheading('install-bower', 'Install from Bower')
+
+    //- install with bower
+    pre.code.c-select-all(data-lang='Bash')
+      code
+        :highlight(lang="bash")
+          bower install spectre.css --save
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/getting-started/whatsnew.pug b/public/css/spectre-0.5.8/docs/src/getting-started/whatsnew.pug
new file mode 100644
index 0000000..cd4c573
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/getting-started/whatsnew.pug
@@ -0,0 +1,20 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'whatsnew'
+  - var parent = 'getting-started'
+  - var title = 'What\'s New - Getting started - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('whatsnew', 'What\'s new')
+    include ../_layout/_ad-g.pug
+    
+    include:markdown-it ../../../changelog.md
+
+    p
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Releases
+    
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/index.pug b/public/css/spectre-0.5.8/docs/src/index.pug
new file mode 100644
index 0000000..25a9359
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/index.pug
@@ -0,0 +1,94 @@
+extends _layout/_layout.pug
+
+block variables
+  - var slug = 'index'
+  - var parent = 'index'
+  - var title = 'Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block content
+  .section.section-hero.bg-gray
+    #overview.grid-hero.container.grid-lg.text-center
+      .docs-brand
+        a.docs-logo(href='index.html')
+          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+          h2 SPECTRE
+      h1 SPECTRE.CSS
+      h2
+        | A #[u Lightweight], #[u Responsive] and #[u Modern] CSS Framework
+      p
+        a.btn.btn-primary.btn-lg.mr-2(href='getting-started.html') Docs
+        a.btn.btn-primary.btn-lg(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+      p.text-gray
+        | Latest version: 
+        span.version
+      .columns
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Lightweight
+            .card-body
+              | Lightweight  (~10KB gzipped) starting point for your projects
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Responsive
+            .card-body
+              | Flexbox-based, responsive and mobile-friendly layout
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Modern
+            .card-body
+              | Elegantly designed and developed elements and components
+  
+  .section.section-ads.bg-gray
+    include _layout/_ad-g.pug
+
+  .section.section-features.bg-primary.text-light.text-center
+    .container.grid-lg
+      h2 Introduction
+      .columns
+        .column.col-10.col-sm-12.col-mx-auto.text-left
+          p.text-secondary
+            strong Spectre.css 
+            | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+          p.text-secondary
+            | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+        .column.col-10.col-sm-12.col-mx-auto
+          a.btn.btn-lg(href='getting-started/installation.html') Install Spectre.css
+
+  .section.section-updates.bg-gray
+    .container.grid-lg
+      .columns
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 Spectre Twitter
+            .card-body
+              | For the latest announcements and updates, follow on Twitter: 
+              a(href='https://twitter.com/spectrecss' target='_blank') @spectrecss
+              | .
+            .card-footer
+              a.btn.btn-primary(href='https://twitter.com/spectrecss' target='_blank') Follow
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 PayPal Donate
+            .card-body
+              | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development.
+            .card-footer
+              a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 Sponsor via Patreon
+            .card-body
+              | Your name or company logo will be put on Spectre Docs homepage.
+            .card-footer
+              a.btn.btn-primary(href='https://www.patreon.com/spectrecss' target='_blank') Sponsor
+  .section.section-ads.bg-gray
+    include _layout/_ad-c.pug
+
+  footer.section.section-footer
+    include _layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/layout.pug b/public/css/spectre-0.5.8/docs/src/layout.pug
new file mode 100644
index 0000000..7afa396
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/layout.pug
@@ -0,0 +1,58 @@
+extends _layout/_docs-layout.pug
+
+block variables
+  - var slug = 'layout'
+  - var parent = 'layout'
+  - var title = 'Layout - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('layout', 'Layout')
+    include _layout/_ad-g.pug
+
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Flexbox grid
+          .card-body
+            | Flexbox based responsive grid system with 12 columns
+          .card-footer
+            a.btn.btn-primary(href="layout/grid.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Responsive
+          .card-body
+            | Responsive layout grid system and responsive visibility utilities
+          .card-footer
+            a.btn.btn-primary(href="layout/responsive.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Hero
+          .card-body
+            | Container for key featured content or information
+          .card-footer
+            a.btn.btn-primary(href="layout/hero.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Navbar
+          .card-body
+            | Layout container that appears in the header of apps and websites
+          .card-footer
+            a.btn.btn-primary(href="layout/navbar.html") View
+              
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/layout/grid.pug b/public/css/spectre-0.5.8/docs/src/layout/grid.pug
new file mode 100644
index 0000000..5c054a8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/layout/grid.pug
@@ -0,0 +1,225 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'grid'
+  - var parent = 'layout'
+  - var title = 'Flexbox grid - Layout - Spectre.css CSS Framework'
+  - var description = 'Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('grid', 'Flexbox grid')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Layout includes flexbox based responsive grid system with 12 columns.
+
+    .docs-demo.columns
+      .column
+        .bg-primary.text-secondary.docs-block
+      .column
+        .bg-secondary.text-primary.docs-block
+      .column
+        .bg-primary.text-secondary.docs-block
+      .column
+        .bg-secondary.text-primar.docs-block
+      .column
+        .bg-primary.text-secondary.docs-block
+      .column
+        .bg-secondary.text-primar.docs-block
+      .column
+        .bg-primary.text-secondary.docs-block
+      .column
+        .bg-secondary.text-primar.docs-block
+      .column
+        .bg-primary.text-secondary.docs-block
+      .column
+        .bg-secondary.text-primar.docs-block
+      .column
+        .bg-primary.text-secondary.docs-block
+      .column
+        .bg-secondary.text-primar.docs-block
+    .columns
+      .column.col-12
+        .bg-gray.docs-block col-12 (100%)
+    .columns
+      .column.col-9
+        .bg-gray.docs-block col-9 (75%)
+    .columns
+      .column.col-6
+        .bg-gray.docs-block col-6 (50%)
+    .columns
+      .column.col-3
+        .bg-gray.docs-block col-3 (25%)
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- flexbox grid example -->
+          <div class="container">
+            <div class="columns">
+              <div class="column col-6">col-6</div>
+              <div class="column col-3">col-3</div>
+              <div class="column col-2">col-2</div>
+              <div class="column col-1">col-1</div>
+            </div>
+          </div>
+
+    p
+      | Add the #[code columns] class to a container with the #[code container] class. 
+      | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally.
+      | You can specific the width of each column by adding class #[code col-<1-12>].
+    
+    +docs-subheading('grid-gapless', 'Gapless grid')
+
+    p
+      | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
+
+    .docs-demo.columns.col-gapless
+      .column.col-6
+        .bg-gray.docs-block col-6 (gapless)
+      .column.col-6
+        .bg-secondary.text-primary.docs-block col-6 (gapless)
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- gapless columns -->
+          <div class="columns col-gapless">
+            <div class="column col-6">col-6</div>
+            <div class="column col-6">col-6</div>
+          </div>
+
+    p
+      | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row.
+
+    .docs-demo.columns.col-oneline
+      .column.col-8
+        .bg-gray.docs-block col-8
+      .column.col-8
+        .bg-gray.docs-block col-8
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- one line columns -->
+          <div class="columns col-oneline">
+            <div class="column col-8">col-8</div>
+            <div class="column col-8">col-8</div>
+          </div>
+
+    +docs-subheading('grid-nesting', 'Grid nesting')
+
+    p
+      | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
+
+    .docs-demo.columns
+      .column.col-6
+        .bg-gray.docs-block col-6
+        .columns
+          .column.col-6
+            .bg-secondary.text-primary.docs-block col-6
+          .column.col-6
+            .bg-secondary.text-primary.docs-block col-6
+      .column.col-6
+        .bg-gray.docs-block col-6
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- grid nesting example -->
+          <div class="container">
+            <div class="columns">
+              <div class="column col-6">col-6
+                <div class="columns">
+                  <div class="column col-6">col-6</div>
+                  <div class="column col-6">col-6</div>
+                </div>
+              </div>
+              <div class="column col-6">col-6</div>
+            </div>
+          </div>
+
+    +docs-subheading('grid-offset', 'Column offset')
+
+    p
+      | The Flexbox grid provides margin auto utilities to set offset. 
+      | There are #[code col-mx-auto], #[code col-ml-auto] and #[code col-mr-auto] to set margins between columns without using empty columns.
+
+    .columns.text-center
+      .column.col-2
+        .bg-gray.docs-block col-2
+      .column.col-4.col-mx-auto
+        .bg-secondary.text-primary.docs-block col-4 col-mx-auto
+    .columns.text-center
+      .column.col-2
+        .bg-gray.docs-block col-2
+      .column.col-4.col-ml-auto
+        .bg-secondary.text-primary.docs-block col-4 col-ml-auto
+    .columns.text-center
+      .column.col-4.col-ml-auto
+        .bg-secondary.text-primary.docs-block col-4 col-ml-auto
+      .column.col-2
+        .bg-gray.docs-block col-2
+    .columns.text-center
+      .column.col-4.col-mx-auto
+        .bg-secondary.text-primary.docs-block col-4 col-mx-auto
+      .column.col-2
+        .bg-gray.docs-block col-2
+    .columns.text-center
+      .column.col-4.col-mr-auto
+        .bg-secondary.text-primary.docs-block col-4 col-mr-auto
+      .column.col-2
+        .bg-gray.docs-block col-2
+    .columns.text-center
+      .column.col-4.col-mx-auto
+        .bg-secondary.text-primary.docs-block col-4 col-mx-auto
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- grid offset example -->
+          <div class="container">
+            <div class="columns">
+              <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+              <div class="column col-2">col-2</div>
+            </div>
+          </div>
+
+    +docs-subheading('column-auto', 'Auto width column')
+
+    p
+      | You can add the #[code col-auto] class to the #[code column] to have auto width columns.
+      | There are #[code col-xl-auto], #[code col-lg-auto], #[code col-md-auto], #[code col-sm-auto] and #[code col-xs-auto] to set auto width in different viewport sizes.
+
+    .columns
+      .column.col-auto
+        .bg-secondary.text-primary.docs-block col-auto
+      .column
+        .bg-gray.docs-block col
+    .columns
+      .column.col-lg-auto.col-6
+        .bg-secondary.text-primary.docs-block col-lg-auto
+      .column
+        .bg-gray.docs-block col
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- auto width column example -->
+          <div class="container">
+            <div class="columns">
+              <div class="column col-auto">col-auto</div>
+              <div class="column">col</div>
+            </div>
+          </div>
+
+          <div class="container">
+            <div class="columns">
+              <div class="column col-lg-auto col-6">col-lg-auto</div>
+              <div class="column">col</div>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/layout/hero.pug b/public/css/spectre-0.5.8/docs/src/layout/hero.pug
new file mode 100644
index 0000000..2e977be
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/layout/hero.pug
@@ -0,0 +1,45 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'hero'
+  - var parent = 'layout'
+  - var title = 'Hero - Layout - Spectre.css CSS Framework'
+  - var description = 'The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('hero', 'Hero')
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Hero container shows key featured content or information.
+
+    .docs-demo.columns
+      .column
+        .hero.bg-gray
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- hero example -->
+
+    .docs-demo.columns
+      .column
+        .hero.hero-sm.bg-dark
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+            
+    .docs-demo.columns
+      .column
+        .hero.hero-lg.bg-primary
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/layout/navbar.pug b/public/css/spectre-0.5.8/docs/src/layout/navbar.pug
new file mode 100644
index 0000000..f3d7268
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/layout/navbar.pug
@@ -0,0 +1,82 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'navbar'
+  - var parent = 'layout'
+  - var title = 'Navbar - Layout - Spectre.css CSS Framework'
+  - var description = 'Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('navbar', 'Navbar')
+    include ../_layout/_ad-g.pug
+
+    p Navbar is a layout container that appears in the header of apps and websites.
+
+    .docs-demo.columns
+      .column
+        .navbar
+          .navbar-section
+            a.navbar-brand.text-bold.mr-2(href="#navbar") SPECTRE.CSS
+            a.btn.btn-link(href="#navbar") Docs
+            a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
+          .navbar-section
+            .input-group.input-inline
+              input.form-input(type="text" placeholder="search")
+              button.btn.btn-primary.input-group-btn Search
+
+    p
+      | The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
+      | Each section with the #[code navbar-section] class will be evenly distributed in the container.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <header class="navbar">
+            <section class="navbar-section">
+              <a href="..." class="navbar-brand mr-2">Spectre.css</a>
+              <a href="..." class="btn btn-link">Docs</a>
+              <a href="..." class="btn btn-link">GitHub</a>
+            </section>
+            <section class="navbar-section">
+              <div class="input-group input-inline">
+                <input class="form-input" type="text" placeholder="search">
+                <button class="btn btn-primary input-group-btn">Search</button>
+              </div>
+            </section>
+          </header>
+
+    p
+      | You can use #[code navbar-center] class to have a centered section.
+
+    .docs-demo.columns
+      .column.col-12
+        .navbar
+          .navbar-section
+            a.btn.btn-link(href="#navbar") Docs
+            a.btn.btn-link(href="#navbar") Examples
+          .navbar-center
+            img(src="../img/spectre-logo.svg" alt="Spectre.css")
+          .navbar-section
+            a.btn.btn-link(href="https://twitter.com/spectrecss") Twitter
+            a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <header class="navbar">
+            <section class="navbar-section">
+              <a href="#" class="btn btn-link">Docs</a>
+              <a href="#" class="btn btn-link">Examples</a>
+            </section>
+            <section class="navbar-center">
+              <!-- centered logo or brand -->
+            </section>
+            <section class="navbar-section">
+              <a href="#" class="btn btn-link">Twitter</a>
+              <a href="#" class="btn btn-link">GitHub</a>
+            </section>
+          </header>
+        
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/layout/responsive.pug b/public/css/spectre-0.5.8/docs/src/layout/responsive.pug
new file mode 100644
index 0000000..74d284d
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/layout/responsive.pug
@@ -0,0 +1,271 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'responsive'
+  - var parent = 'layout'
+  - var title = 'Responsive - Layout - Spectre.css CSS Framework'
+  - var description = 'Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('responsive', 'Responsive')
+    include ../_layout/_ad-g.pug
+
+    p Spectre provides a neat responsive layout grid system and responsive visibility utilities.
+
+    .docs-demo.columns
+      .column.col-10.col-lg-8.col-md-6.col-sm-4
+        .bg-gray.docs-block
+          .text-primary col-10
+          .text-dark.hide-lg col-lg-8
+          .text-primary.show-lg col-lg-8
+          .text-dark.hide-md col-md-6
+          .text-primary.show-md col-md-6
+          .text-dark.hide-sm col-sm-4
+          .text-primary.show-sm col-sm-4
+      .column.col-2.col-lg-4.col-md-6.col-sm-8
+        .bg-gray.docs-block
+          .text-primary col-2
+          .text-dark.hide-lg col-lg-4
+          .text-primary.show-lg col-lg-4
+          .text-dark.hide-md col-md-6
+          .text-primary.show-md col-md-6
+          .text-dark.hide-sm col-sm-8
+          .text-primary.show-sm col-sm-8
+
+    p
+      | There are #[code col-xs-<1-12>], #[code col-sm-<1-12>], #[code col-md-<1-12>], #[code col-lg-<1-12>] and #[code col-xl-<1-12>] available for flexible grid across mobile, tablet and desktop viewport usage.
+
+    ul
+      li
+        | #[code col-xs-<1-12>] apply to window width smaller than or equal to #[strong 480px].
+      li
+        | #[code col-sm-<1-12>] apply to window width smaller than or equal to #[strong 600px].
+      li
+        | #[code col-md-<1-12>] apply to window width smaller than or equal to #[strong 840px].
+      li
+        | #[code col-lg-<1-12>] apply to window width smaller than or equal to #[strong 960px].
+      li
+        | #[code col-xl-<1-12>] apply to window width smaller than or equal to #[strong 1280px].
+      li
+        | #[code col-<1-12>] apply to all window width, including the width wider than #[strong 1280px].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="container">
+            <div class="columns">
+              <div class="column col-xs-6">col-xs-6</div>
+              <div class="column col-xs-3">col-xs-3</div>
+              <div class="column col-xs-3">col-xs-3</div>
+            </div>
+          </div>
+
+    +docs-subheading('responsive-container', 'Responsive container')
+
+    p
+      | The responsive layout also provides fixed-width containers.
+      | Use #[code grid-xs](480px), #[code grid-sm](600px), #[code grid-md](840px), #[code grid-lg](960px) or #[code grid-xl](1280px) to the container for a fixed-width container with the specific max-width.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- 100% width container with max-width set to grid-lg (960px) -->
+          <div class="container grid-lg">
+            <div class="columns">
+              ...
+            </div>
+          </div>
+
+    +docs-subheading('responsive-visibility', 'Responsive visibility')
+
+    p The responsive visibility utilities help show and hide elements on specific viewport sizes.
+
+    .docs-demo.columns
+      .column.col-12
+        table.docs-table.table.table-striped.text-center
+          thead
+            tr
+              th
+              th size-xs
+              th size-sm
+              th size-md
+              th size-lg
+              th size-xl
+          tbody
+            tr
+              td.text-left hide-xs
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+            tr
+              td.text-left hide-sm
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+            tr
+              td.text-left hide-md
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+            tr
+              td.text-left hide-lg
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-primary.docs-dot
+            tr
+              td.text-left hide-xl
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+
+    p
+      | For hiding elements on specific viewport sizes, there are classes #[code hide-xs], #[code hide-sm], #[code hide-md], #[code hide-lg] and #[code hide-xl] available.
+
+    ul
+      li
+        | #[code hide-xs] hides elements when the window width is smaller than or equal to #[strong 480px].
+      li
+        | #[code hide-sm] hides elements when the window width is smaller than or equal to #[strong 600px].
+      li
+        | #[code hide-md] hides elements when the window width is smaller than or equal to #[strong 840px].
+      li
+        | #[code hide-lg] hides elements when the window width is smaller than or equal to #[strong 960px].
+      li
+        | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px].
+
+    .docs-demo.columns
+      .column.col-12
+        table.docs-table.table.table-striped.text-center
+          thead
+            tr
+              th
+              th size-xs
+              th size-sm
+              th size-md
+              th size-lg
+              th size-xl
+          tbody
+            tr
+              td.text-left show-xs
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+            tr
+              td.text-left show-sm
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+            tr
+              td.text-left show-md
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-secondary.docs-dot
+              td
+                .bg-secondary.docs-dot
+            tr
+              td.text-left show-lg
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-secondary.docs-dot
+            tr
+              td.text-left show-xl
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+              td
+                .bg-primary.docs-dot
+
+    p
+      | For showing elements on specific viewport sizes, there are classes #[code show-xs], #[code show-sm], #[code show-md], #[code show-lg] and #[code show-xl] available.
+
+    ul
+      li
+        | #[code show-xs] shows elements when the window width is smaller than or equal to #[strong 480px].
+      li
+        | #[code show-sm] shows elements when the window width is smaller than or equal to #[strong 600px].
+      li
+        | #[code show-md] shows elements when the window width is smaller than or equal to #[strong 840px].
+      li
+        | #[code show-lg] shows elements when the window width is smaller than or equal to #[strong 960px].
+      li
+        | #[code show-xl] shows elements when the window width is smaller than or equal to #[strong 1280px].
+
+    +docs-subheading('responsive-resizer', 'Responsive Resizer')
+
+    p
+      | Spectre also has a responsive web test tool Responsive Resizer. 
+      | You can clone the 
+      a(href="https://github.com/picturepan2/responsive-resizer" target="_blank") GitHub Repo
+      |  to use it locally or use it online.
+    p
+      a.btn.btn-primary(href="https://picturepan2.github.io/responsive-resizer/" target="_blank") Responsive Resizer
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/scss/docs.scss b/public/css/spectre-0.5.8/docs/src/scss/docs.scss
new file mode 100644
index 0000000..656bfa3
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/scss/docs.scss
@@ -0,0 +1,1089 @@
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
+// Core variables and mixins
+@import "../../../src/variables";
+@import "../../../src/mixins";
+
+.version::after {
+  content: "#{$version}";
+}
+
+.off-canvas {
+  .off-canvas-toggle {
+    font-size: 1rem;
+    left: 1.5rem;
+    position: fixed;
+    top: 1rem;
+  }
+
+  .off-canvas-sidebar {
+    width: 12rem;
+  }
+
+  .off-canvas-content {
+    padding: 0;
+  }
+}
+
+.docs-container {
+  min-height: 100vh;
+}
+
+.docs-navbar {
+  height: 3.8rem;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $zindex-1;
+
+  .btns {
+    position: absolute;
+    right: 1.5rem;
+    top: 1rem;
+    width: 14rem;
+  }
+
+  .algolia-autocomplete {
+    flex: 1 1 auto;
+  }
+}
+
+.docs-sidebar {
+  .docs-nav {
+    bottom: 1.5rem;
+    overflow-y: auto;
+    padding: .5rem 1.5rem;
+    position: fixed;
+    top: 3.5rem;
+    width: 12rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .accordion {
+    margin-bottom: .75rem;
+
+    input {
+      & ~ .accordion-header {
+        color: lighten($dark-color, 10%);
+        font-size: .65rem;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+      
+      &:checked {
+        & ~ .accordion-header {
+          color: lighten($dark-color, 15%);
+        }
+      }
+    }
+
+    .menu {
+      .menu-item {
+        font-size: .7rem;
+        padding-left: 1rem;
+        
+        & > a {
+          background: transparent;
+          color: $gray-color-dark;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
+
+.docs-content {
+  flex: 1 1 auto;
+  padding: 0 4rem;
+  width: calc(100vw - 12rem);
+
+  & > .container {
+    margin-left: 0;
+    max-width: 800px;
+    padding-bottom: 1.5rem;
+  }
+
+  .anchor {
+    color: $primary-color-light;
+    display: none;
+    margin-left: .2rem;
+    padding: 0 .2rem;
+    &:focus,
+    &:hover {
+      display: inline;
+      text-decoration: none;
+    }
+  }
+  
+  .s-title,
+  .s-subtitle {
+    line-height: 1.8rem;
+    margin-bottom: 0;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    position: static;
+
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: $zindex-1 - 1;
+
+      &::before {
+        background: $light-color;
+        bottom: 0;
+        content: "";
+        display: block;
+        left: -10px;
+        position: absolute;
+        right: -10px;
+        top: -5px;
+        z-index: -$zindex-0;
+      }
+    }
+
+    &:hover {
+      .anchor {
+        display: inline;
+      }
+    }
+
+    & + .docs-note {
+      margin-top: .4rem;
+    }
+  }
+
+  .docs-demo {
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+
+    .card {
+      box-shadow: 0 .25rem 1rem rgba($dark-color, .15);
+      border: 0;
+      height: 100%;
+    }
+  }
+
+  .column {
+    padding: $layout-spacing;
+  }
+
+  .docs-block {
+    border-radius: $border-radius;
+    padding: $unit-2;
+
+    &.bg-gray {
+      background: $bg-color-dark;
+    }
+  }
+
+  .docs-shape {
+    height: 4.8rem;
+    line-height: 1.2rem;
+    padding: 1.8rem 0;
+    width: 4.8rem;
+  }
+
+  .docs-dot {
+    border-radius: 50%;
+    display: inline-block;
+    height: .5rem;
+    padding: 0;
+    width: .5rem;
+  }
+
+  .docs-table {
+    th,
+    td {
+      padding: .75rem .25rem;
+    }
+  }
+
+  .docs-color {
+    border-radius: $border-radius;
+    margin: .25rem 0;
+    padding: 5rem .5rem .5rem;
+
+    .color-subtitle {
+      font-size: $font-size-sm;
+      opacity: .75;
+    }
+  }
+
+  .code {
+    .hljs-tag {
+      color: lighten($body-font-color, 10%);
+    }
+
+    .hljs-comment {
+      color: $gray-color;
+    }
+
+    .hljs-title,
+    .hljs-class,
+    .hljs-string,
+    .hljs-number {
+      color: $primary-color;
+    }
+
+    .hljs-name,
+    .hljs-attribute,
+    .hljs-variable,
+    .hljs-keyword,
+    .hljs-built_in {
+      color: $code-color;
+    }
+
+    .hljs-value,
+    .hljs-hexcolor {
+      color: lighten($body-font-color, 10%);
+    }
+  }
+
+  .c-select-all {
+    user-select: all;
+  }
+
+  .panel {
+    height: 75vh;
+
+    .tile {
+      margin: .75rem 0;
+    }
+  }
+
+  .parallax {
+    margin: 2rem auto;
+  }
+
+  .form-autocomplete .menu {
+    position: static;
+  }
+
+  .example-tile-icon {
+    align-content: space-around;
+    align-items: center;
+    background: $primary-color;
+    border-radius: $border-radius;
+    color: $light-color;
+    display: flex;
+    font-size: 1.2rem;
+    height: 2rem;
+    width: 2rem;
+
+    .icon {
+      margin: auto;
+    }
+  }
+
+  .comparison-slider {
+    height: auto;
+    padding-bottom: 56.2222%;
+
+    .filter-grayscale {
+      filter: grayscale(75%);
+    }
+  }
+
+  .off-canvas {
+    position: relative;
+
+    .off-canvas-toggle {
+      left: $layout-spacing;
+      position: absolute;
+      top: $layout-spacing;
+      z-index: $zindex-0;
+    }
+  }
+}
+
+.docs-brand {
+  color: $primary-color;
+  height: 2rem;
+  left: 1.5rem;
+  position: fixed;
+  top: .85rem;
+
+  .docs-logo {
+    align-items: center;
+    border-radius: $border-radius;
+    display: inline-flex;
+    font-size: .7rem;
+    height: 2rem;
+    padding: .2rem;
+    width: auto;
+    
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+  
+    img {
+      display: inline-block;
+      height: auto;
+      width: 1.6rem;
+    }
+  
+    h2 {
+      display: inline-block;
+      font-size: .8rem;
+      font-weight: 700;
+      line-height: 1.5rem;
+      margin-bottom: 0;
+      margin-left: .5rem;
+      margin-right: .3rem;
+    }
+  }
+}
+
+.docs-footer {
+  color: $gray-color;
+  padding: .5rem;
+
+  a {
+    color: $gray-color-dark;
+  }
+}
+
+.docs-ad {
+  background: $bg-color;
+  border-radius: $border-radius;
+  display: block;
+  margin: 2rem 0;
+  padding: $layout-spacing;
+  position: relative;
+
+  ins {
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .carbon-wrap {
+    .carbon-img {
+      display: block;
+    }
+  
+    .carbon-text {
+      color: $gray-color-dark;
+      display: block;
+      font-size: $font-size-sm;
+    }
+  }
+  
+  .carbon-poweredby {
+    color: $gray-color;
+    font-size: $font-size-sm;
+  }
+}
+
+/* Spectre Homepage style */
+.section-hero {
+  padding: 1rem .5rem;
+
+  .docs-brand {
+    position: absolute;
+    top: .85rem;
+
+    h2 {
+      color: $primary-color;
+    }
+  }
+
+  .column {
+    padding: $layout-spacing;
+  }
+}
+
+.section-ads {
+  padding: 1rem .5rem;
+}
+
+.section-updates {
+  padding: 4.5rem .5rem 2.5rem .5rem;
+
+  .card {
+    border: 0;
+    margin-bottom: 1rem;
+  }
+}
+
+.section-features {
+  padding: 4.5rem .5rem;
+
+  .column {
+    padding: $layout-spacing;
+  }
+}
+
+.section-footer {
+  color: $gray-color;
+  padding: 1.8rem .75rem 1rem;
+  position: relative;
+  z-index: 200;
+
+  a {
+    color: $gray-color-dark;
+  }
+}
+
+.grid-hero {
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+
+  h1 {
+    color: $body-font-color;
+    font-size: 1.6rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+  }
+
+  h2 {
+    color: lighten($body-font-color, 5%);
+    font-size: .9rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+    margin-bottom: 1.5rem;
+
+    u {
+      border-bottom: $border-width-lg solid currentColor;
+      padding-bottom: $unit-o;
+      text-decoration: none;
+    }
+  }
+
+  .card {
+    background: none;
+    border: 0;
+    color: lighten($body-font-color, 15%);
+    padding: .5rem;
+
+    .card-title {
+      color: $primary-color;
+      font-size: 1rem;
+      font-weight: 700;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .off-canvas {
+    .off-canvas-toggle {
+      z-index: $zindex-3;
+    }
+
+    .off-canvas-content {
+      width: 100%;
+    }
+  }
+
+  .docs-sidebar {
+    .docs-brand {
+      margin: .85rem 1.5rem;
+      padding: 0;
+      position: static;
+    }
+
+    .docs-nav {
+      margin-top: 1rem;
+      position: static;
+    }
+
+    .menu .menu-item > a {
+      padding: .3rem .4rem;
+    }
+  }
+
+  .docs-navbar {
+    backdrop-filter: blur(5px);
+    background: rgba($bg-color, .65);
+    left: 0;
+  }
+
+  .docs-content {
+    min-width: auto;
+    padding: 0 1.5rem;
+    width: 100%;
+
+    .s-title,
+    .s-subtitle {
+      padding-top: 5rem;
+      position: static;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+
+  .section-hero {
+    .s-brand {
+      height: 5rem;
+      padding: 1.5rem .5rem;
+      text-align: center;
+      width: 100%;
+
+      .s-logo {
+        height: auto;
+      }
+
+      img {
+        height: 3.2rem;
+        width: 3.2rem;
+      }
+
+      h2 {
+        display: none;
+      }
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .grid-hero {
+    h2 {
+      font-size: .9rem;
+    }
+    .card {
+      padding: 0;
+    }
+  }
+  
+  .off-canvas {
+    .off-canvas-toggle {
+      left: .5rem;
+    }
+  }
+
+  .docs-navbar {
+    .btns {
+      right: .9rem;
+    }
+  }
+
+  .grid-hero {
+    .docs-brand {
+      left: .9rem;
+    }
+  }
+
+  .docs-sidebar {
+    .docs-brand {
+      margin: .85rem 1rem;
+    }
+  
+    .docs-nav {
+      padding: .5rem 1rem;
+    }
+  }
+
+  .docs-content {
+    padding: 0 .5rem;
+
+    .docs-block {
+      padding: $unit-2 $unit-h;
+    }
+  }
+}
+
+@media (min-width: 1366px) {
+  .docs-ad {
+    &.docs-ad-sidebar {
+      bottom: 1rem;
+      margin: 0;
+      position: fixed;
+      right: 1rem;
+      width: 7.3rem;
+    }
+  }
+}
+
+// Docs search
+.searchbox {
+  display: inline-block;
+  position: relative;
+  width: 200px;
+  height: 32px!important;
+  white-space: nowrap;
+  box-sizing: border-box;
+  visibility: visible!important;
+
+  .algolia-autocomplete {
+    display:block;
+    width:100%;
+    height:100%;
+  }
+}
+
+.searchbox__wrapper {
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  position: relative;
+}
+.searchbox__input {
+  display: inline-block;
+  box-sizing: border-box;
+  transition: box-shadow .4s ease, background .4s ease;
+  border: 0;
+  border-radius: 16px;
+  box-shadow: inset 0 0 0 1px #ccc;
+  background: #fff !important;
+  padding: 0 26px 0 32px;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  white-space: normal;
+  font-size: 12px;
+  appearance: none;
+
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px #b3b3b3;
+  }
+
+  &:active,
+  &:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 1px #aaa;
+    background: #fff;
+  }
+
+  &::placeholder {
+    color: #aaa;
+  }
+}
+
+.searchbox__submit {
+  position: absolute;
+  top: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 16px 0 0 16px;
+  background-color: rgba(69,142,225,0);
+  padding: 0;
+  width: 32px;
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
+  font-size: inherit;
+  user-select: none;
+  right: inherit;
+  left: 0;
+
+  &:before {
+    display: inline-block;
+    margin-right: -4px;
+    height: 100%;
+    vertical-align: middle;
+    content: "";
+  }
+
+  &:active,
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+    fill: #6d7e96;
+  }
+}
+
+.searchbox__reset {
+  display: block;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  margin: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  user-select: none;
+  fill: rgba(0,0,0,.5);
+
+  &.hide {
+    display: none;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  svg {
+    display: block;
+    margin: 4px;
+    width: 8px;
+    height: 8px;
+  }
+}
+
+
+.searchbox__input:valid ~ .searchbox__reset {
+  display: block;
+  animation-name: sbx-reset-in;
+  animation-duration: .15s;
+}
+
+@keyframes sbx-reset-in {
+  0%{
+      transform: translate3d(-20%, 0, 0);
+      opacity: 0;
+  }
+  to{
+      transform: none;
+      opacity: 1;
+  }
+}
+
+.algolia-autocomplete {
+  &.algolia-autocomplete-right .ds-dropdown-menu {
+    right: 0 !important;
+    left: inherit !important;
+    &:before {
+      right: 48px;
+    }
+  }
+
+  &.algolia-autocomplete-left .ds-dropdown-menu {
+    left: 0 !important;
+    right: inherit !important;
+    &:before {
+      left: 48px;
+    }
+  }
+
+  .ds-dropdown-menu {
+    top: -6px;
+    border-radius: 4px;
+    margin: 6px 0 0;
+    padding: 0;
+    text-align: left;
+    height: auto;
+    position: relative;
+    background: transparent;
+    border: none;
+    z-index: 999;
+    max-width: 600px;
+    min-width: 500px;
+    @include shadow-variant(.05rem);
+
+    .ds-suggestions {
+      position: relative;
+      z-index: 1000;
+      margin-top: 8px;
+      a:hover {
+        text-decoration: none;
+      }
+    }
+
+    .ds-suggestion {
+      cursor: pointer;
+      &.ds-cursor .algolia-docsearch-suggestion {
+        &.suggestion-layout-simple, &:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
+          background-color: rgba($primary-color, .05);
+        }
+      }
+    }
+
+    [class^=ds-dataset-] {
+      position: relative;
+      background: #fff;
+      border-radius: 4px;
+      overflow: auto;
+      padding: 0 8px 8px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    display: block;
+    position: relative;
+    padding: 0 8px;
+    background: #fff;
+    color: $dark-color;
+    overflow: hidden;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: $primary-color;
+    background: rgba($primary-color, .1);
+    padding: 0.1em 0.05em;
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight {
+      padding: 0 0 1px;
+      background: inherit;
+      box-shadow: inset 0 -2px 0 0 rgba($primary-color, .8);
+      color: inherit;
+    }
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    padding: 0 0 1px;
+    background: inherit;
+    box-shadow: inset 0 -2px 0 0 rgba($primary-color, .8);
+    color: inherit;
+  }
+
+  .algolia-docsearch-suggestion--content {
+    display: block;
+    float: right;
+    width: 70%;
+    position: relative;
+    padding: 5.33333px 0 5.33333px 10.66667px;
+    cursor: pointer;
+    &:before {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      background: $gray-color-light;
+      left: -1px;
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    position: relative;
+    border-bottom: 1px solid $gray-color-light;
+    display: none;
+    margin-top: 8px;
+    padding: 4px 0;
+    font-size: 1em;
+    color: $dark-color;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    width: 100%;
+    float: left;
+    padding: 8px 0 0;
+  }
+
+  .algolia-docsearch-suggestion--subcategory-column {
+    float: left;
+    width: 30%;
+    text-align: right;
+    position: relative;
+    padding: 5.33333px 10.66667px;
+    color: $gray-color;
+    font-size: .9em;
+    word-wrap: break-word;
+    &:before {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      background: $gray-color-light;
+      right: 0;
+    }
+  }
+
+  .algolia-docsearch-suggestion--subcategory-inline {
+    display: none;
+  }
+
+  .algolia-docsearch-suggestion--title {
+    color: $dark-color;
+    font-size: .9em;
+    font-weight: 700;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    display: block;
+    line-height: 1.2em;
+    font-size: .85em;
+    color: $gray-color-dark;
+  }
+
+  .algolia-docsearch-suggestion--no-results {
+    width: 100%;
+    padding: 8px 0;
+    text-align: center;
+    font-size: 1.2em;
+    &:before {
+      display: none;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    code {
+      padding: 1px 5px;
+      font-size: 90%;
+      border: none;
+      color: #222;
+      background-color: #ebebeb;
+      border-radius: 3px;
+      font-family: Menlo, Monaco, Consolas, Courier New, monospace;
+      .algolia-docsearch-suggestion--highlight {
+        background: none;
+      }
+    }
+
+    &.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header, &.algolia-docsearch-suggestion__secondary {
+      display: block;
+    }
+  }
+
+  .suggestion-layout-simple {
+    &.algolia-docsearch-suggestion {
+      border-bottom: 1px solid #eee;
+      padding: 8px;
+      margin: 0;
+    }
+
+    .algolia-docsearch-suggestion--content {
+      width: 100%;
+      padding: 0;
+      &:before {
+        display: none;
+      }
+    }
+
+    .algolia-docsearch-suggestion--category-header {
+      margin: 0;
+      padding: 0;
+      display: block;
+      width: 100%;
+      border: none;
+    }
+
+    .algolia-docsearch-suggestion--category-header-lvl0 {
+      opacity: .6;
+      font-size: 0.85em;
+    }
+
+    .algolia-docsearch-suggestion--category-header-lvl1 {
+      opacity: .6;
+      font-size: 0.85em;
+      &:before {
+        background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>');
+        content: "";
+        width: 10px;
+        height: 10px;
+        display: inline-block;
+      }
+    }
+
+    .algolia-docsearch-suggestion--wrapper {
+      width: 100%;
+      float: left;
+      margin: 0;
+      padding: 0;
+    }
+
+    .algolia-docsearch-suggestion--duplicate-content, .algolia-docsearch-suggestion--subcategory-inline {
+      display: none !important;
+    }
+
+    .algolia-docsearch-suggestion--title {
+      margin: 0;
+      color: #458ee1;
+      font-size: .9em;
+      font-weight: 400;
+      &:before {
+        content: "#";
+        font-weight: 700;
+        color: #458ee1;
+        display: inline-block;
+      }
+    }
+
+    .algolia-docsearch-suggestion--text {
+      margin: 4px 0 0;
+      display: block;
+      line-height: 1.4em;
+      padding: 5.33333px 8px;
+      background: #f8f8f8;
+      font-size: .85em;
+      opacity: 0.8;
+
+      .algolia-docsearch-suggestion--highlight {
+        color: #3f4145;
+        font-weight: 700;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .algolia-docsearch-footer {
+    width: 134px;
+    height: 20px;
+    z-index: 2000;
+    margin-top: 10.66667px;
+    float: right;
+    font-size: 0;
+    line-height: 0;
+  }
+
+  .algolia-docsearch-footer--logo {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100%;
+    overflow: hidden;
+    text-indent: -9000px;
+    padding: 0 !important;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+    display: block;
+  }
+}
+
+@media (max-width: 768px) {
+  .algolia-autocomplete .algolia-docsearch-suggestion {
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: inline-block;
+      width: auto;
+      float: left;
+      padding: 0;
+      color: #02060c;
+      font-size: .9em;
+      font-weight: 700;
+      text-align: left;
+      opacity: 0.5;
+      &:before {
+        display: none;
+      }
+      &:after {
+        content: "|";
+      }
+    }
+
+    .algolia-docsearch-suggestion--content {
+      display: inline-block;
+      width: auto;
+      text-align: left;
+      float: left;
+      padding: 0;
+      &:before {
+        display: none;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/scss/spectre-rtl.scss b/public/css/spectre-0.5.8/docs/src/scss/spectre-rtl.scss
new file mode 100644
index 0000000..cda0b96
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/scss/spectre-rtl.scss
@@ -0,0 +1,6 @@
+/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
+$rtl: true;
+
+// Import Spectre
+@import "../../../src/spectre";
+@import "../../../src/spectre-exp";
diff --git a/public/css/spectre-0.5.8/docs/src/utilities.pug b/public/css/spectre-0.5.8/docs/src/utilities.pug
new file mode 100644
index 0000000..069c54b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities.pug
@@ -0,0 +1,94 @@
+extends _layout/_docs-layout.pug
+
+block variables
+  - var slug = 'utilities'
+  - var parent = 'utilities'
+  - var title = 'Utilities - Spectre.css CSS Framework'
+  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('utilities', 'Utilities')
+    include _layout/_ad-g.pug
+
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Color utilities
+          .card-body
+            | Colors for text, link and background
+          .card-footer
+            a.btn.btn-primary(href="utilities/colors.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Cursor utilities
+          .card-body
+            | Mouse cursor to display when mouseover
+          .card-footer
+            a.btn.btn-primary(href="utilities/cursors.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Display utilities
+          .card-body
+            | Display and hidden things
+          .card-footer
+            a.btn.btn-primary(href="utilities/display.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Divider
+          .card-body
+            | Separating elements
+          .card-footer
+            a.btn.btn-primary(href="utilities/divider.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Loading
+          .card-body
+            | Indicating loading or updating state
+          .card-footer
+            a.btn.btn-primary(href="utilities/loading.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Position utilities
+          .card-body
+            | Useful layout and position things
+          .card-footer
+            a.btn.btn-primary(href="utilities/position.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Shape utilities
+          .card-body
+            | Changing element shapes
+          .card-footer
+            a.btn.btn-primary(href="utilities/shapes.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Text utilities
+          .card-body
+            | Text alignment, styles and overflow things
+          .card-footer
+            a.btn.btn-primary(href="utilities/text.html") View
+              
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/colors.pug b/public/css/spectre-0.5.8/docs/src/utilities/colors.pug
new file mode 100644
index 0000000..2b0a9d4
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/colors.pug
@@ -0,0 +1,111 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'colors'
+  - var parent = 'utilities'
+  - var title = 'Color utilities - Utilities - Spectre.css CSS Framework'
+  - var description = 'Color utilities are used for changing colors for text, link and background. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('colors', 'Color utilities')
+    include ../_layout/_ad-g.pug
+
+    p Color utilities are used for changing colors for text, link and background.
+
+    +docs-subheading('colors-text', 'Text colors')
+
+    .docs-demo.columns
+      .column.col-12
+        p
+          span.text-primary primary color
+        p
+          span.text-secondary secondary color
+        p
+          span.text-dark dark color
+        p
+          span.text-gray gray color
+        p
+          span.text-light.bg-dark.p-1.rounded light color
+        p
+          span.text-success success color
+        p
+          span.text-warning warning color
+        p
+          span.text-error error color
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <span class="text-primary">primary color</span>
+          <span class="text-secondary">secondary color</span>
+          <span class="text-dark">dark color</span>
+          <span class="text-gray">gray color</span>
+          <span class="text-light">light color</span>
+          <span class="text-success">success color</span>
+          <span class="text-warning">warning color</span>
+          <span class="text-error">error color</span>
+
+    .docs-demo.columns
+      .column.col-12
+        p
+          a.text-primary.p-1(href="#colors") primary link
+        p
+          a.text-secondary.p-1(href="#colors") secondary link
+        p
+          a.text-dark.p-1(href="#colors") dark link
+        p
+          a.text-gray.p-1(href="#colors") gray link
+        p
+          a.text-light.bg-dark.p-1.rounded(href="#colors") light link
+        p
+          a.text-success.p-1(href="#colors") success link
+        p
+          a.text-warning.p-1(href="#colors") warning link
+        p
+          a.text-error.p-1(href="#colors") error link
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <a class="text-primary" href="#">primary color</a>
+          <a class="text-secondary" href="#">secondary color</a>
+          <a class="text-dark" href="#">dark color</a>
+          <a class="text-gray" href="#">gray color</a>
+          <a class="text-light" href="#">light color</a>
+          <a class="text-success" href="#">success color</a>
+          <a class="text-warning" href="#">warning color</a>
+          <a class="text-error" href="#">error color</a>
+
+    +docs-subheading('colors-background', 'Background colors')
+
+    .docs-demo.columns
+      .column.col-12
+        p
+          span.bg-primary.p-1.rounded primary bg
+        p
+          span.bg-secondary.text-primary.p-1.rounded secondary bg
+        p
+          span.bg-dark.p-1.rounded dark bg
+        p
+          span.bg-gray.p-1.rounded gray bg
+        p
+          span.bg-success.p-1.rounded success bg
+        p
+          span.bg-warning.p-1.rounded warning bg
+        p
+          span.bg-error.p-1.rounded error bg
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="bg-primary">primary bg</div>
+          <div class="bg-secondary">secondary bg</div>
+          <div class="bg-dark">dark bg</div>
+          <div class="bg-gray">gray bg</div>
+          <div class="bg-success">success bg</div>
+          <div class="bg-warning">warning bg</div>
+          <div class="bg-error">error bg</div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/cursors.pug b/public/css/spectre-0.5.8/docs/src/utilities/cursors.pug
new file mode 100644
index 0000000..4d8889b
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/cursors.pug
@@ -0,0 +1,47 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'cursors'
+  - var parent = 'utilities'
+  - var title = 'Cursor utilities - Utilities - Spectre.css CSS Framework'
+  - var description = 'Cursor utilities specify which mouse cursor to display when mouseover. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('cursors', 'Cursor utilities')
+    include ../_layout/_ad-g.pug
+
+    p Cursor utilities specify which mouse cursor to display when mouseover.
+
+    .docs-demo.columns
+      .column.col-4
+        .bg-gray.docs-block.c-hand c-hand
+      .column.col-4
+        .bg-gray.docs-block.c-move c-move
+      .column.col-4
+        .bg-gray.docs-block.c-zoom-in c-zoom-in
+      .column.col-4
+        .bg-gray.docs-block.c-zoom-out c-zoom-out
+      .column.col-4
+        .bg-gray.docs-block.c-not-allowed c-not-allowed
+      .column.col-4
+        .bg-gray.docs-block.c-auto c-auto
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- cursor: hand; -->
+          <div class="c-hand"></div>
+          <!-- cursor: move; -->
+          <div class="c-move"></div>
+          <!-- cursor: zoom-in; -->
+          <div class="c-zoom-in"></div>
+          <!-- cursor: zoom-out; -->
+          <div class="c-zoom-out"></div>
+          <!-- cursor: not-allowed; -->
+          <div class="c-not-allowed"></div>
+          <!-- cursor: auto; -->
+          <div class="c-auto"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/display.pug b/public/css/spectre-0.5.8/docs/src/utilities/display.pug
new file mode 100644
index 0000000..d881727
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/display.pug
@@ -0,0 +1,42 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'display'
+  - var parent = 'utilities'
+  - var title = 'Display utilities - Utilities - Spectre.css CSS Framework'
+  - var description = 'Display utilities are used for display and hidden things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('display', 'Display utilities')
+    include ../_layout/_ad-g.pug
+
+    p Display utilities are used for display and hidden things.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- display: block; -->
+          <div class="d-block"></div>
+          <!-- display: inline; -->
+          <div class="d-inline"></div>
+          <!-- display: inline-block; -->
+          <div class="d-inline-block"></div>
+          <!-- display: flex; -->
+          <div class="d-flex"></div>
+          <!-- display: inline-flex; -->
+          <div class="d-inline-flex"></div>
+          <!-- display: none; -->
+          <div class="d-none"></div>
+          <div class="d-hide"></div>
+          <!-- visibility: visible; -->
+          <div class="d-visible"></div>
+          <!-- visibility: hidden; -->
+          <div class="d-invisible"></div>
+          <!-- hide text contents -->
+          <div class="text-hide"></div>
+          <!-- assistive text for screen reader -->
+          <div class="text-assistive"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/divider.pug b/public/css/spectre-0.5.8/docs/src/utilities/divider.pug
new file mode 100644
index 0000000..1ed0e3a
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/divider.pug
@@ -0,0 +1,72 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'divider'
+  - var parent = 'utilities'
+  - var title = 'Divider - Utilities - Spectre.css CSS Framework'
+  - var description = 'The Divider is used for separating elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('divider', 'Divider')
+    include ../_layout/_ad-g.pug
+
+    p The Divider is used for separating elements.
+
+    .docs-demo.columns
+      .column
+        .divider
+
+    .docs-demo.columns
+      .column
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+        .divider.text-center(data-content="OR")
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+
+    .docs-demo.columns
+      .column
+        form
+          .form-group
+            label.form-label(for="input-example-1") Email
+            input#input-example-1.form-input(type="text" placeholder="Email")
+          .form-group
+            label.form-label(for="input-example-2") Password
+            input#input-example-2.form-input(type="password" placeholder="Password")
+          .form-group
+            label.form-checkbox
+              input(type="checkbox")
+              i.form-icon
+              |  Remember me
+          .form-group
+            button.btn.btn-primary Sign in
+      .divider-vert(data-content="OR")
+      .column
+        form
+          .form-group
+            label.form-label(for="input-example-3") Email
+            input#input-example-3.form-input(type="text" placeholder="Email")
+          .form-group
+            button.btn.btn-primary.btn-block Sign up
+            button.btn.btn-link.btn-block Learn more
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- divider element -->
+          <div class="divider"></div>
+          <!-- divider element with text -->
+          <div class="divider text-center" data-content="OR"></div>
+
+          <!-- vertical divider element with text -->
+          <div class="columns">
+            <div class="column">
+              <!-- column content -->
+            </div>
+            <div class="divider-vert" data-content="OR"></div>
+            <div class="column">
+              <!-- column content -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/loading.pug b/public/css/spectre-0.5.8/docs/src/utilities/loading.pug
new file mode 100644
index 0000000..f3263c7
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/loading.pug
@@ -0,0 +1,37 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'loading'
+  - var parent = 'utilities'
+  - var title = 'Loading - Utilities - Spectre.css CSS Framework'
+  - var description = 'Loading indicator is used for loading or updating. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('loading', 'Loading')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Loading indicator is used for loading or updating.
+      | You can add the #[code loading] class to a container for loading status.
+
+    .docs-demo.columns
+      .column.col-12.text-center
+        .loading
+
+    p
+      | Add the #[code loading-lg] class for large size.
+
+    .docs-demo.columns
+      .column.col-12.text-center
+        .loading.loading-lg
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- loading element -->
+          <div class="loading"></div>
+          <div class="loading loading-lg"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/position.pug b/public/css/spectre-0.5.8/docs/src/utilities/position.pug
new file mode 100644
index 0000000..9166e50
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/position.pug
@@ -0,0 +1,57 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'position'
+  - var parent = 'utilities'
+  - var title = 'Position utilities - Utilities - Spectre.css CSS Framework'
+  - var description = 'Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('position', 'Position utilities')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- clear float -->
+          <div class="clearfix"></div>
+          <!-- float: left and right -->
+          <div class="float-left"></div>
+          <div class="float-right"></div>
+          <!-- position: relative, absolute, fixed and sticky -->
+          <div class="p-relative"></div>
+          <div class="p-absolute"></div>
+          <div class="p-fixed"></div>
+          <div class="p-sticky"></div>
+          <!-- centered block -->
+          <div class="p-centered"></div>
+
+          <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
+          <div class="m-1"></div>
+          <div class="m-2"></div>
+          <!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
+          <div class="mt-1"></div>
+          <div class="mt-2"></div>
+          <!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
+          <div class="mx-1"></div>
+          <div class="mx-2"></div>
+          <div class="my-1"></div>
+          <div class="my-2"></div>
+          <!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
+          <div class="p-1"></div>
+          <div class="p-2"></div>
+          <!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
+          <div class="pt-1"></div>
+          <div class="pt-2"></div>
+          <!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
+          <div class="px-1"></div>
+          <div class="px-2"></div>
+          <div class="py-1"></div>
+          <div class="py-2"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/shapes.pug b/public/css/spectre-0.5.8/docs/src/utilities/shapes.pug
new file mode 100644
index 0000000..962a7bf
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/shapes.pug
@@ -0,0 +1,33 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'shapes'
+  - var parent = 'utilities'
+  - var title = 'Shape utilities - Utilities - Spectre.css CSS Framework'
+  - var description = 'Shape utilities are used for changing element shapes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('shapes', 'Shape utilities')
+    include ../_layout/_ad-g.pug
+
+    p Shape utilities are used for changing element shapes.
+
+    .docs-demo.columns
+      .column.col-6.text-center
+        .bg-primary.text-light.docs-shape.s-rounded.centered
+          | s-rounded
+      .column.col-6.text-center
+        .bg-primary.text-light.docs-shape.s-circle.centered
+          | s-circle
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- rounded element -->
+          <div class="s-rounded"></div>
+          <!-- circle element -->
+          <div class="s-circle"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/src/utilities/text.pug b/public/css/spectre-0.5.8/docs/src/utilities/text.pug
new file mode 100644
index 0000000..cbb9700
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/src/utilities/text.pug
@@ -0,0 +1,52 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'text'
+  - var parent = 'utilities'
+  - var title = 'Text utilities - Utilities - Spectre.css CSS Framework'
+  - var description = 'Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
+
+block docs-content
+  +docs-heading('text', 'Text utilities')
+    include ../_layout/_ad-g.pug
+
+    p Text utilities are used for text alignment, styles and overflow things.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- left-aligned text -->
+          <div class="text-left"></div>
+          <!-- center-aligned text -->
+          <div class="text-center"></div>
+          <!-- right-aligned text -->
+          <div class="text-right"></div>
+          <!-- justified text -->
+          <div class="text-justify"></div>
+
+          <!-- Lowercased text -->
+          <div class="text-lowercase"></div>
+          <!-- Uppercased text -->
+          <div class="text-uppercase"></div>
+          <!-- Capitalized text -->
+          <div class="text-capitalize"></div>
+
+          <!-- Normal weight text -->
+          <div class="text-normal"></div>
+          <!-- Bold text -->
+          <div class="text-bold"></div>
+          <!-- Italicized text -->
+          <div class="text-italic"></div>
+          <!-- Larger text (120%) -->
+          <div class="text-large"></div>
+
+          <!-- Overflow behavior: display an ellipsis to represent clipped text -->
+          <div class="text-ellipsis"></div>
+          <!-- Overflow behavior: truncate the text -->
+          <div class="text-clip"></div>
+          <!-- Text may be broken at arbitrary points -->
+          <div class="text-break"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities.html b/public/css/spectre-0.5.8/docs/utilities.html
new file mode 100644
index 0000000..9611cd5
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities.html">
+    <meta property="og:title" content="Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="utilities">
+            <h3 class="s-title">Utilities<a class="anchor" href="#utilities" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p>
+               Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Color utilities</div>
+                  </div>
+                  <div class="card-body">Colors for text, link and background</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/colors.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Cursor utilities</div>
+                  </div>
+                  <div class="card-body">Mouse cursor to display when mouseover</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/cursors.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Display utilities</div>
+                  </div>
+                  <div class="card-body">Display and hidden things</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/display.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Divider</div>
+                  </div>
+                  <div class="card-body">Separating elements</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/divider.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Loading</div>
+                  </div>
+                  <div class="card-body">Indicating loading or updating state</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/loading.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Position utilities</div>
+                  </div>
+                  <div class="card-body">Useful layout and position things</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/position.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Shape utilities</div>
+                  </div>
+                  <div class="card-body">Changing element shapes</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/shapes.html">View</a></div>
+                </div>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <div class="card">
+                  <div class="card-header">
+                    <div class="card-title h5">Text utilities</div>
+                  </div>
+                  <div class="card-body">Text alignment, styles and overflow things</div>
+                  <div class="card-footer"><a class="btn btn-primary" href="utilities/text.html">View</a></div>
+                </div>
+              </div>
+            </div>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/colors.html b/public/css/spectre-0.5.8/docs/utilities/colors.html
new file mode 100644
index 0000000..a8ebdb2
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/colors.html
@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Color utilities - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Color utilities are used for changing colors for text, link and background. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/colors.html">
+    <meta property="og:title" content="Color utilities - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Color utilities are used for changing colors for text, link and background. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/colors.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="colors">
+            <h3 class="s-title">Color utilities<a class="anchor" href="#colors" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Color utilities are used for changing colors for text, link and background.</p>
+            <h4 class="s-subtitle" id="colors-text">Text colors<a class="anchor" href="#colors-text" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <p><span class="text-primary">primary color</span></p>
+                <p><span class="text-secondary">secondary color</span></p>
+                <p><span class="text-dark">dark color</span></p>
+                <p><span class="text-gray">gray color</span></p>
+                <p><span class="text-light bg-dark p-1 rounded">light color</span></p>
+                <p><span class="text-success">success color</span></p>
+                <p><span class="text-warning">warning color</span></p>
+                <p><span class="text-error">error color</span></p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span>&gt;</span>dark color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <p><a class="text-primary p-1" href="#colors">primary link</a></p>
+                <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
+                <p><a class="text-dark p-1" href="#colors">dark link</a></p>
+                <p><a class="text-gray p-1" href="#colors">gray link</a></p>
+                <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p>
+                <p><a class="text-success p-1" href="#colors">success link</a></p>
+                <p><a class="text-warning p-1" href="#colors">warning link</a></p>
+                <p><a class="text-error p-1" href="#colors">error link</a></p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>dark color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="colors-background">Background colors<a class="anchor" href="#colors-background" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <p><span class="bg-primary p-1 rounded">primary bg</span></p>
+                <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
+                <p><span class="bg-dark p-1 rounded">dark bg</span></p>
+                <p><span class="bg-gray p-1 rounded">gray bg</span></p>
+                <p><span class="bg-success p-1 rounded">success bg</span></p>
+                <p><span class="bg-warning p-1 rounded">warning bg</span></p>
+                <p><span class="bg-error p-1 rounded">error bg</span></p>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>&gt;</span>primary bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>&gt;</span>secondary bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-dark"</span>&gt;</span>dark bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-gray"</span>&gt;</span>gray bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>&gt;</span>success bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>&gt;</span>warning bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-error"</span>&gt;</span>error bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/cursors.html b/public/css/spectre-0.5.8/docs/utilities/cursors.html
new file mode 100644
index 0000000..df73848
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/cursors.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Cursor utilities - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Cursor utilities specify which mouse cursor to display when mouseover. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/cursors.html">
+    <meta property="og:title" content="Cursor utilities - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Cursor utilities specify which mouse cursor to display when mouseover. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/cursors.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="cursors">
+            <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursors" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
+            <div class="docs-demo columns">
+              <div class="column col-4">
+                <div class="bg-gray docs-block c-hand">c-hand</div>
+              </div>
+              <div class="column col-4">
+                <div class="bg-gray docs-block c-move">c-move</div>
+              </div>
+              <div class="column col-4">
+                <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div>
+              </div>
+              <div class="column col-4">
+                <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div>
+              </div>
+              <div class="column col-4">
+                <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div>
+              </div>
+              <div class="column col-4">
+                <div class="bg-gray docs-block c-auto">c-auto</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- cursor: hand; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-hand"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: move; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-move"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: zoom-in; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-in"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: zoom-out; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-out"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: not-allowed; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-not-allowed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: auto; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-auto"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/display.html b/public/css/spectre-0.5.8/docs/utilities/display.html
new file mode 100644
index 0000000..32b9cdf
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/display.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Display utilities - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Display utilities are used for display and hidden things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/display.html">
+    <meta property="og:title" content="Display utilities - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Display utilities are used for display and hidden things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/display.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="display">
+            <h3 class="s-title">Display utilities<a class="anchor" href="#display" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Display utilities are used for display and hidden things.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- display: block; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline-block; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: flex; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline-flex; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: none; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-hide"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- visibility: visible; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-visible"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- visibility: hidden; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-invisible"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- hide text contents --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-hide"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- assistive text for screen reader --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-assistive"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/divider.html b/public/css/spectre-0.5.8/docs/utilities/divider.html
new file mode 100644
index 0000000..dba31fc
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/divider.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Divider - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="The Divider is used for separating elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/divider.html">
+    <meta property="og:title" content="Divider - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Divider is used for separating elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/divider.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="divider">
+            <h3 class="s-title">Divider<a class="anchor" href="#divider" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>The Divider is used for separating elements.</p>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="divider"></div>
+              </div>
+            </div>
+            <div class="docs-demo columns">
+              <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+                <div class="divider text-center" data-content="OR"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+              </div>
+            </div>
+            <div class="docs-demo columns">
+              <div class="column">
+                <form>
+                  <div class="form-group">
+                    <label class="form-label" for="input-example-1">Email</label>
+                    <input class="form-input" id="input-example-1" type="text" placeholder="Email">
+                  </div>
+                  <div class="form-group">
+                    <label class="form-label" for="input-example-2">Password</label>
+                    <input class="form-input" id="input-example-2" type="password" placeholder="Password">
+                  </div>
+                  <div class="form-group">
+                    <label class="form-checkbox">
+                      <input type="checkbox"><i class="form-icon"></i> Remember me
+                    </label>
+                  </div>
+                  <div class="form-group">
+                    <button class="btn btn-primary">Sign in</button>
+                  </div>
+                </form>
+              </div>
+              <div class="divider-vert" data-content="OR"></div>
+              <div class="column">
+                <form>
+                  <div class="form-group">
+                    <label class="form-label" for="input-example-3">Email</label>
+                    <input class="form-input" id="input-example-3" type="text" placeholder="Email">
+                  </div>
+                  <div class="form-group">
+                    <button class="btn btn-primary btn-block">Sign up</button>
+                    <button class="btn btn-link btn-block">Learn more</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- divider element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- divider element with text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider text-center"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"OR"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- vertical divider element with text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- column content --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider-vert"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"OR"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>
+    <span class="hljs-comment">&lt;!-- column content --&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/loading.html b/public/css/spectre-0.5.8/docs/utilities/loading.html
new file mode 100644
index 0000000..ff0d550
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/loading.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Loading - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Loading indicator is used for loading or updating. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/loading.html">
+    <meta property="og:title" content="Loading - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Loading indicator is used for loading or updating. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/loading.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="loading">
+            <h3 class="s-title">Loading<a class="anchor" href="#loading" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>
+              Loading indicator is used for loading or updating.
+              You can add the <code>loading</code> class to a container for loading status.
+            </p>
+            <div class="docs-demo columns">
+              <div class="column col-12 text-center">
+                <div class="loading"></div>
+              </div>
+            </div>
+            <p>Add the <code>loading-lg</code> class for large size.</p>
+            <div class="docs-demo columns">
+              <div class="column col-12 text-center">
+                <div class="loading loading-lg"></div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- loading element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading loading-lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/position.html b/public/css/spectre-0.5.8/docs/utilities/position.html
new file mode 100644
index 0000000..66196a8
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/position.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Position utilities - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/position.html">
+    <meta property="og:title" content="Position utilities - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/position.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="position">
+            <h3 class="s-title">Position utilities<a class="anchor" href="#position" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- clear float --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- float: left and right --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- position: relative, absolute, fixed and sticky --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-relative"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-absolute"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-fixed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-sticky"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- centered block --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- mx-1 {margin-left: 4px; margin-right: 4px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- px-1 {padding-left: 4px; padding-right: 4px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/shapes.html b/public/css/spectre-0.5.8/docs/utilities/shapes.html
new file mode 100644
index 0000000..ca3feb3
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/shapes.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Shape utilities - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Shape utilities are used for changing element shapes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/shapes.html">
+    <meta property="og:title" content="Shape utilities - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Shape utilities are used for changing element shapes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/shapes.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="shapes">
+            <h3 class="s-title">Shape utilities<a class="anchor" href="#shapes" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Shape utilities are used for changing element shapes.</p>
+            <div class="docs-demo columns">
+              <div class="column col-6 text-center">
+                <div class="bg-primary text-light docs-shape s-rounded centered">s-rounded</div>
+              </div>
+              <div class="column col-6 text-center">
+                <div class="bg-primary text-light docs-shape s-circle centered">s-circle</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- circle element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/docs/utilities/text.html b/public/css/spectre-0.5.8/docs/utilities/text.html
new file mode 100644
index 0000000..b970954
--- /dev/null
+++ b/public/css/spectre-0.5.8/docs/utilities/text.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Text utilities - Utilities - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/utilities/text.html">
+    <meta property="og:title" content="Text utilities - Utilities - Spectre.css CSS Framework">
+    <meta property="og:description" content="Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
+    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+    <link rel="icon" href="../img/favicons/favicon.png">
+    <link rel="stylesheet" href="../dist/spectre.min.css">
+    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="../dist/docs.min.css">
+    <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/text.html">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
+      </div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
+        </div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+                  </li>
+                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/code.html">Code</a>
+                  </li>
+                  <li class="menu-item"><a href="../elements/media.html">Media</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
+                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+                  </li>
+                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+                  </li>
+                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+                  </li>
+                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container" id="text">
+            <h3 class="s-title">Text utilities<a class="anchor" href="#text" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
+            <p>Text utilities are used for text alignment, styles and overflow things.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- left-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- center-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- right-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- justified text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-justify"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Lowercased text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-lowercase"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Uppercased text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-uppercase"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Capitalized text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-capitalize"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Normal weight text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-normal"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Bold text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Italicized text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Larger text (120%) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-clip"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-break"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <div class="docs-ad docs-ad-sidebar text-center">
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+            </div>
+          </div>
+          <div class="docs-footer container grid-lg" id="copyright">
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
+            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/gulpfile.js b/public/css/spectre-0.5.8/gulpfile.js
new file mode 100644
index 0000000..bd1d37f
--- /dev/null
+++ b/public/css/spectre-0.5.8/gulpfile.js
@@ -0,0 +1,67 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var cleancss = require('gulp-clean-css');
+var csscomb = require('gulp-csscomb');
+var rename = require('gulp-rename');
+var autoprefixer = require('gulp-autoprefixer');
+var pug = require('gulp-pug');
+
+var paths = {
+  source: './src/*.scss',
+  doc: './docs/src/scss/*.scss'
+};
+
+gulp.task('watch', function() {
+  gulp.watch('./**/*.scss', ['build']);
+  gulp.watch('./**/*.scss', ['docs']);
+  gulp.watch('./**/*.pug', ['docs']);
+});
+
+gulp.task('build', function() {
+  gulp.src(paths.source)
+    .pipe(sass({outputStyle: 'compact', precision: 10})
+      .on('error', sass.logError)
+    )
+    .pipe(autoprefixer())
+    .pipe(csscomb())
+    .pipe(gulp.dest('./dist'))
+    .pipe(cleancss())
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(gulp.dest('./dist'));
+});
+
+gulp.task('docs', function() {
+  gulp.src(paths.doc)
+    .pipe(sass({outputStyle: 'compact', precision: 10})
+      .on('error', sass.logError)
+    )
+    .pipe(autoprefixer())
+    .pipe(csscomb())
+    .pipe(gulp.dest('./docs/dist'))
+    .pipe(cleancss())
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(gulp.dest('./docs/dist'));
+  gulp.src(paths.source)
+    .pipe(sass({outputStyle: 'compact', precision: 10})
+      .on('error', sass.logError)
+    )
+    .pipe(autoprefixer())
+    .pipe(csscomb())
+    .pipe(gulp.dest('./docs/dist'))
+    .pipe(cleancss())
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(gulp.dest('./docs/dist'));
+  gulp.src('docs/src/**/!(_)*.pug')
+    .pipe(pug({
+      pretty: true
+    }))
+    .pipe(gulp.dest('./docs/'));
+});
+
+gulp.task('default', ['build']);
diff --git a/public/css/spectre-0.5.8/package-lock.json b/public/css/spectre-0.5.8/package-lock.json
new file mode 100644
index 0000000..0e86c93
--- /dev/null
+++ b/public/css/spectre-0.5.8/package-lock.json
@@ -0,0 +1,4702 @@
+{
+  "name": "spectre.css",
+  "version": "0.5.8",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/babel-types": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.4.tgz",
+      "integrity": "sha512-WiZhq3SVJHFRgRYLXvpf65XnV6ipVHhnNaNvE8yCimejrGglkg38kEj0JcizqwSHxmPSjcTlig/6JouxLGEhGw==",
+      "dev": true
+    },
+    "@types/babylon": {
+      "version": "6.16.3",
+      "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.3.tgz",
+      "integrity": "sha512-lyJ8sW1PbY3uwuvpOBZ9zMYKshMnQpXmeDHh8dj9j2nJm/xrW0FgB5gLSYOArj5X0IfaXnmhFoJnhS4KbqIMug==",
+      "dev": true,
+      "requires": {
+        "@types/babel-types": "*"
+      }
+    },
+    "@types/pug": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz",
+      "integrity": "sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=",
+      "dev": true
+    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
+    "acorn": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+      "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+      "dev": true
+    },
+    "acorn-globals": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
+      "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
+      "dev": true,
+      "requires": {
+        "acorn": "^4.0.4"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
+          "dev": true
+        }
+      }
+    },
+    "ajv": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+      "dev": true,
+      "requires": {
+        "co": "^4.6.0",
+        "fast-deep-equal": "^1.0.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.3.0"
+      }
+    },
+    "align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
+    "ansi-colors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+      "dev": true,
+      "requires": {
+        "ansi-wrap": "^0.1.0"
+      }
+    },
+    "ansi-gray": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
+      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
+      "dev": true,
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true
+    },
+    "ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
+      "dev": true
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
+    },
+    "archy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
+      "dev": true
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "dev": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+      "dev": true
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "dev": true
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
+      "dev": true
+    },
+    "array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
+      "dev": true
+    },
+    "array-each": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
+      "dev": true
+    },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
+      "dev": true
+    },
+    "array-slice": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+      "dev": true
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+      "dev": true
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "dev": true
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
+      "dev": true
+    },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.1.5.tgz",
+      "integrity": "sha512-kk4Zb6RUc58ld7gdosERHMF3DzIYJc2fp5sX46qEsGXQQy5bXsu8qyLjoxuY1NuQ/cJuCYnx99BfjwnRggrYIw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.1.0",
+        "caniuse-lite": "^1.0.30000884",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.2",
+        "postcss-value-parser": "^3.2.3"
+      }
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "dev": true
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "babel-types": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "esutils": "^2.0.2",
+        "lodash": "^4.17.4",
+        "to-fast-properties": "^1.0.3"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
+          "dev": true
+        }
+      }
+    },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "dev": true,
+      "requires": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "beeper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
+      "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=",
+      "dev": true
+    },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "dev": true,
+      "requires": {
+        "arr-flatten": "^1.1.0",
+        "array-unique": "^0.3.2",
+        "extend-shallow": "^2.0.1",
+        "fill-range": "^4.0.0",
+        "isobject": "^3.0.1",
+        "repeat-element": "^1.1.2",
+        "snapdragon": "^0.8.1",
+        "snapdragon-node": "^2.0.1",
+        "split-string": "^3.0.2",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "browserslist": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.1.1.tgz",
+      "integrity": "sha512-VBorw+tgpOtZ1BYhrVSVTzTt/3+vSE3eFUh0N2GCFK1HffceOaf32YS/bs6WiFhjDAblAFrx85jMy3BG9fBK2Q==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30000884",
+        "electron-to-chromium": "^1.3.62",
+        "node-releases": "^1.0.0-alpha.11"
+      }
+    },
+    "builtin-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+      "dev": true
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "dev": true,
+      "requires": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      }
+    },
+    "camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
+      "dev": true
+    },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "dev": true,
+      "requires": {
+        "camelcase": "^2.0.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+          "dev": true
+        }
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30000885",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000885.tgz",
+      "integrity": "sha512-cXKbYwpxBLd7qHyej16JazPoUacqoVuDhvR61U7Fr5vSxMUiodzcYa1rQYRYfZ5GexV03vGZHd722vNPLjPJGQ==",
+      "dev": true
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+      "dev": true,
+      "requires": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      }
+    },
+    "chalk": {
+      "version": "1.1.3",
+      "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      }
+    },
+    "character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+      "dev": true,
+      "requires": {
+        "is-regex": "^1.0.3"
+      }
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "clean-css": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+      "dev": true,
+      "requires": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+      "dev": true
+    },
+    "clone-stats": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
+      "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=",
+      "dev": true
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "dev": true
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "dev": true,
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+      "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.0.0.tgz",
+      "integrity": "sha1-0bhvkB+LZL2UG96tr5JFMDk76Sg=",
+      "dev": true
+    },
+    "component-emitter": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+      "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
+    "constantinople": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
+      "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==",
+      "dev": true,
+      "requires": {
+        "@types/babel-types": "^7.0.0",
+        "@types/babylon": "^6.16.2",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0"
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+      "dev": true
+    },
+    "core-js": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+      "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^4.0.1",
+        "which": "^1.2.9"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
+          "integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        }
+      }
+    },
+    "csscomb": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/csscomb/-/csscomb-3.1.8.tgz",
+      "integrity": "sha1-qKc4iE9Am6817JRhr8UuHHW9I6I=",
+      "dev": true,
+      "requires": {
+        "commander": "2.0.0",
+        "csscomb-core": "3.0.0-3.1",
+        "gonzales-pe": "3.0.0-28",
+        "vow": "0.4.4"
+      }
+    },
+    "csscomb-core": {
+      "version": "3.0.0-3.1",
+      "resolved": "https://registry.npmjs.org/csscomb-core/-/csscomb-core-3.0.0-3.1.tgz",
+      "integrity": "sha1-tBHI18/g3z8v4d+E0b1kpvAEbGg=",
+      "dev": true,
+      "requires": {
+        "gonzales-pe": "3.0.0-28",
+        "minimatch": "0.2.12",
+        "vow": "0.4.4",
+        "vow-fs": "0.3.2"
+      },
+      "dependencies": {
+        "minimatch": {
+          "version": "0.2.12",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz",
+          "integrity": "sha1-6oKgEqxmLH3fqhRPHBR+aUb12vs=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "2",
+            "sigmund": "~1.0.0"
+          }
+        }
+      }
+    },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "dev": true,
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "dateformat": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz",
+      "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=",
+      "dev": true
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "dev": true
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dev": true,
+      "requires": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
+    "deprecated": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
+      "integrity": "sha1-+cmvVGSvoeepcUWKi97yqpTVuxk=",
+      "dev": true
+    },
+    "detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+      "dev": true
+    },
+    "doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
+      "dev": true
+    },
+    "duplexer2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
+      "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "~1.1.9"
+      }
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.3.63",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.63.tgz",
+      "integrity": "sha512-Ec35NNY040HKuSxMAzBMgz/uUI78amSWpBUD9x2gN7R7gkb/wgAcClngWklcLP0/lm/g0UUYHnC/tUIlZj8UvQ==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
+      "integrity": "sha1-jhdyBsPICDfYVjLouTWd/osvbq8=",
+      "dev": true,
+      "requires": {
+        "once": "~1.3.0"
+      }
+    },
+    "entities": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
+      "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
+      "dev": true
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "dev": true,
+      "requires": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dev": true,
+      "requires": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "dev": true,
+      "requires": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true
+    },
+    "fancy-log": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.2.tgz",
+      "integrity": "sha1-9BEl49hPLn2JpD0G2VjI94vha+E=",
+      "dev": true,
+      "requires": {
+        "ansi-gray": "^0.1.1",
+        "color-support": "^1.1.3",
+        "time-stamp": "^1.0.0"
+      }
+    },
+    "fast-deep-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
+      "dev": true
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "find-index": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
+      "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=",
+      "dev": true
+    },
+    "find-up": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+      "dev": true,
+      "requires": {
+        "path-exists": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "findup-sync": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
+      "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
+      "dev": true,
+      "requires": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^3.1.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      }
+    },
+    "fined": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fined/-/fined-1.1.0.tgz",
+      "integrity": "sha1-s33IRLdqL15wgeiE98CuNE8VNHY=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "is-plain-object": "^2.0.3",
+        "object.defaults": "^1.1.0",
+        "object.pick": "^1.2.0",
+        "parse-filepath": "^1.0.1"
+      }
+    },
+    "first-chunk-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
+      "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
+      "dev": true
+    },
+    "flagged-respawn": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.0.tgz",
+      "integrity": "sha1-Tnmumy6zi/hrO7Vr8+ClaqX8q9c=",
+      "dev": true
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "dev": true
+    },
+    "for-own": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+      "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.1"
+      }
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
+      "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "dev": true,
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fstream": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        }
+      }
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true
+        }
+      }
+    },
+    "gaze": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz",
+      "integrity": "sha1-QLcJU30k0dRXZ9takIaJ3+aaxE8=",
+      "dev": true,
+      "requires": {
+        "globule": "~0.1.0"
+      }
+    },
+    "get-caller-file": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+      "dev": true
+    },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
+      "dev": true
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
+      "dev": true
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "glob": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
+      "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=",
+      "dev": true,
+      "requires": {
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^2.0.1",
+        "once": "^1.3.0"
+      }
+    },
+    "glob-stream": {
+      "version": "3.1.18",
+      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
+      "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=",
+      "dev": true,
+      "requires": {
+        "glob": "^4.3.1",
+        "glob2base": "^0.0.12",
+        "minimatch": "^2.0.1",
+        "ordered-read-streams": "^0.1.0",
+        "through2": "^0.6.1",
+        "unique-stream": "^1.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+          "dev": true,
+          "requires": {
+            "readable-stream": ">=1.0.33-1 <1.1.0-0",
+            "xtend": ">=4.0.0 <4.1.0-0"
+          }
+        }
+      }
+    },
+    "glob-watcher": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
+      "integrity": "sha1-uVtKjfdLOcgymLDAXJeLTZo7cQs=",
+      "dev": true,
+      "requires": {
+        "gaze": "^0.5.1"
+      }
+    },
+    "glob2base": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
+      "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=",
+      "dev": true,
+      "requires": {
+        "find-index": "^0.1.1"
+      }
+    },
+    "global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      }
+    },
+    "globule": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
+      "integrity": "sha1-2cjt3h2nnRJaFRt5UzuXhnY0auU=",
+      "dev": true,
+      "requires": {
+        "glob": "~3.1.21",
+        "lodash": "~1.0.1",
+        "minimatch": "~0.2.11"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "3.1.21",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
+          "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "~1.2.0",
+            "inherits": "1",
+            "minimatch": "~0.2.11"
+          }
+        },
+        "graceful-fs": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
+          "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
+          "dev": true
+        },
+        "inherits": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
+          "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "0.2.14",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
+          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "2",
+            "sigmund": "~1.0.0"
+          }
+        }
+      }
+    },
+    "glogg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.1.tgz",
+      "integrity": "sha512-ynYqXLoluBKf9XGR1gA59yEJisIL7YHEH4xr3ZziHB5/yl4qWfaK8Js9jGe6gBGCSCKVqiyO30WnRZADvemUNw==",
+      "dev": true,
+      "requires": {
+        "sparkles": "^1.0.0"
+      }
+    },
+    "gonzales-pe": {
+      "version": "3.0.0-28",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.0.0-28.tgz",
+      "integrity": "sha1-3VC0HdFbaCooxA5fD/IAeQGsYr0=",
+      "dev": true
+    },
+    "graceful-fs": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
+      "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=",
+      "dev": true,
+      "requires": {
+        "natives": "^1.1.0"
+      }
+    },
+    "gulp": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
+      "integrity": "sha1-VxzkWSjdQK9lFPxAEYZgFsE4RbQ=",
+      "dev": true,
+      "requires": {
+        "archy": "^1.0.0",
+        "chalk": "^1.0.0",
+        "deprecated": "^0.0.1",
+        "gulp-util": "^3.0.0",
+        "interpret": "^1.0.0",
+        "liftoff": "^2.1.0",
+        "minimist": "^1.1.0",
+        "orchestrator": "^0.3.0",
+        "pretty-hrtime": "^1.0.0",
+        "semver": "^4.1.0",
+        "tildify": "^1.0.0",
+        "v8flags": "^2.0.2",
+        "vinyl-fs": "^0.3.0"
+      }
+    },
+    "gulp-autoprefixer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-6.0.0.tgz",
+      "integrity": "sha512-MyLymXKVGTVBx/okQSBqmdhwhyqi3igBmZBwgpZp0GRbY1LY8VctOTLzwkQ18bZKJkSDnOKR5u32TMY9wSYdqQ==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^9.1.3",
+        "fancy-log": "^1.3.2",
+        "plugin-error": "^1.0.1",
+        "postcss": "^7.0.2",
+        "through2": "^2.0.0",
+        "vinyl-sourcemaps-apply": "^0.2.0"
+      }
+    },
+    "gulp-clean-css": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.10.0.tgz",
+      "integrity": "sha512-7Isf9Y690o/Q5MVjEylH1H7L8WeZ89woW7DnhD5unTintOdZb67KdOayRgp9trUFo+f9UyJtuatV42e/+kghPg==",
+      "dev": true,
+      "requires": {
+        "clean-css": "4.2.1",
+        "plugin-error": "1.0.1",
+        "through2": "2.0.3",
+        "vinyl-sourcemaps-apply": "0.2.1"
+      }
+    },
+    "gulp-csscomb": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/gulp-csscomb/-/gulp-csscomb-3.0.8.tgz",
+      "integrity": "sha1-3zSCSlgKTH0zUcHo67ateh1aibc=",
+      "dev": true,
+      "requires": {
+        "csscomb": "^3.1.7",
+        "gulp-util": "^3.0.7",
+        "through2": "^2.0.1"
+      }
+    },
+    "gulp-pug": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/gulp-pug/-/gulp-pug-4.0.1.tgz",
+      "integrity": "sha512-RsayLPwJtKKMub9bbO4VYlMPVnImUPdK8+BjvkiulkorrjWnahTbI3a3Li/7YkD0xs7ap7ePciNiPwweoVEPMQ==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.4",
+        "fancy-log": "^1.3.2",
+        "plugin-error": "^1.0.1",
+        "pug": "^2.0.3",
+        "replace-ext": "^1.0.0",
+        "through2": "^2.0.3"
+      },
+      "dependencies": {
+        "replace-ext": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+          "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
+          "dev": true
+        }
+      }
+    },
+    "gulp-rename": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
+      "integrity": "sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg==",
+      "dev": true
+    },
+    "gulp-sass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.1.tgz",
+      "integrity": "sha512-OMQEgWNggpog8Tc5v1MuI6eo+5iiPkVeLL76iBhDoEEScLUPfZlpvzmgTnLkpcqdrNodZxpz5qcv6mS2rulk3g==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.0",
+        "lodash.clonedeep": "^4.3.2",
+        "node-sass": "^4.8.3",
+        "plugin-error": "^1.0.1",
+        "replace-ext": "^1.0.0",
+        "strip-ansi": "^4.0.0",
+        "through2": "^2.0.0",
+        "vinyl-sourcemaps-apply": "^0.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "replace-ext": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+          "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "gulp-util": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
+      "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=",
+      "dev": true,
+      "requires": {
+        "array-differ": "^1.0.0",
+        "array-uniq": "^1.0.2",
+        "beeper": "^1.0.0",
+        "chalk": "^1.0.0",
+        "dateformat": "^2.0.0",
+        "fancy-log": "^1.1.0",
+        "gulplog": "^1.0.0",
+        "has-gulplog": "^0.1.0",
+        "lodash._reescape": "^3.0.0",
+        "lodash._reevaluate": "^3.0.0",
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.template": "^3.0.0",
+        "minimist": "^1.1.0",
+        "multipipe": "^0.1.2",
+        "object-assign": "^3.0.0",
+        "replace-ext": "0.0.1",
+        "through2": "^2.0.0",
+        "vinyl": "^0.5.0"
+      }
+    },
+    "gulplog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
+      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
+      "dev": true,
+      "requires": {
+        "glogg": "^1.0.0"
+      }
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
+      "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
+      "dev": true,
+      "requires": {
+        "ajv": "^5.1.0",
+        "har-schema": "^2.0.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "has-gulplog": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
+      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
+      "dev": true,
+      "requires": {
+        "sparkles": "^1.0.0"
+      }
+    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "dev": true,
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "dev": true,
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "highlight.js": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
+      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=",
+      "dev": true
+    },
+    "homedir-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
+      "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=",
+      "dev": true,
+      "requires": {
+        "parse-passwd": "^1.0.0"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
+      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
+      "dev": true
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "dev": true
+    },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "dev": true,
+      "requires": {
+        "repeating": "^2.0.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "ini": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "dev": true
+    },
+    "interpret": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
+      "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=",
+      "dev": true
+    },
+    "invert-kv": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
+      "dev": true
+    },
+    "is-absolute": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+      "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+      "dev": true,
+      "requires": {
+        "is-relative": "^1.0.0",
+        "is-windows": "^1.0.1"
+      }
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
+    "is-builtin-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
+      "dev": true,
+      "requires": {
+        "builtin-modules": "^1.0.0"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "dev": true,
+      "requires": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "dev": true
+        }
+      }
+    },
+    "is-expression": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
+      "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=",
+      "dev": true,
+      "requires": {
+        "acorn": "~4.0.2",
+        "object-assign": "^4.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
+          "dev": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true
+        }
+      }
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-finite": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-glob": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.0"
+      }
+    },
+    "is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "dev": true
+    },
+    "is-regex": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
+      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.1"
+      }
+    },
+    "is-relative": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+      "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+      "dev": true,
+      "requires": {
+        "is-unc-path": "^1.0.0"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "is-unc-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+      "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+      "dev": true,
+      "requires": {
+        "unc-path-regex": "^0.1.2"
+      }
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
+      "dev": true
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true
+    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "js-base64": {
+      "version": "2.4.9",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
+      "integrity": "sha512-xcinL3AuDJk7VSzsHgb9DvvIXayBbadtMZ4HFPx8rUszbW1MuNMlwYVC4zzCZ6e1sqZpnNS5ZFYOhXqA39T7LQ==",
+      "dev": true
+    },
+    "js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
+      "dev": true
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true,
+      "optional": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
+      "dev": true
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
+      "dev": true,
+      "requires": {
+        "is-promise": "^2.0.0",
+        "promise": "^7.0.1"
+      }
+    },
+    "jstransformer-highlight": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer-highlight/-/jstransformer-highlight-2.0.0.tgz",
+      "integrity": "sha512-iZVUynh39rrU8wR6X6g8ndpgZJ3EOZwOeASEnwSwXGLJ88PnJ2JTe7FtV2odn7vY0UffEe8aMmhJiHw14PaMfg==",
+      "dev": true,
+      "requires": {
+        "escape-html": "^1.0.1",
+        "highlight.js": "^9.0.0"
+      }
+    },
+    "jstransformer-markdown-it": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/jstransformer-markdown-it/-/jstransformer-markdown-it-2.1.0.tgz",
+      "integrity": "sha1-aewwzkUYvtWZezjwJ2SOjChekvc=",
+      "dev": true,
+      "requires": {
+        "markdown-it": "^8.0.0"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+      "dev": true
+    },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
+      "dev": true
+    },
+    "lcid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "dev": true,
+      "requires": {
+        "invert-kv": "^1.0.0"
+      }
+    },
+    "liftoff": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.5.0.tgz",
+      "integrity": "sha1-IAkpG7Mc6oYbvxCnwVooyvdcMew=",
+      "dev": true,
+      "requires": {
+        "extend": "^3.0.0",
+        "findup-sync": "^2.0.0",
+        "fined": "^1.0.1",
+        "flagged-respawn": "^1.0.0",
+        "is-plain-object": "^2.0.4",
+        "object.map": "^1.0.0",
+        "rechoir": "^0.6.2",
+        "resolve": "^1.1.7"
+      }
+    },
+    "linkify-it": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.0.3.tgz",
+      "integrity": "sha1-2UpGSPmxwXnWT6lykSaL22zpQ08=",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "load-json-file": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^2.2.0",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0",
+        "strip-bom": "^2.0.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "dev": true,
+          "requires": {
+            "is-utf8": "^0.2.0"
+          }
+        }
+      }
+    },
+    "lodash": {
+      "version": "1.0.2",
+      "resolved": "http://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
+      "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
+      "dev": true
+    },
+    "lodash._basecopy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
+      "dev": true
+    },
+    "lodash._basetostring": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
+      "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U=",
+      "dev": true
+    },
+    "lodash._basevalues": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
+      "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=",
+      "dev": true
+    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+      "dev": true
+    },
+    "lodash._isiterateecall": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
+      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
+      "dev": true
+    },
+    "lodash._reescape": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
+      "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo=",
+      "dev": true
+    },
+    "lodash._reevaluate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
+      "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0=",
+      "dev": true
+    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
+      "dev": true
+    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
+    "lodash.escape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
+      "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=",
+      "dev": true,
+      "requires": {
+        "lodash._root": "^3.0.0"
+      }
+    },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+      "dev": true
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "dev": true
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "dev": true,
+      "requires": {
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
+      }
+    },
+    "lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
+      "dev": true
+    },
+    "lodash.restparam": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
+      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
+      "dev": true
+    },
+    "lodash.template": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
+      "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=",
+      "dev": true,
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash._basetostring": "^3.0.0",
+        "lodash._basevalues": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0",
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.escape": "^3.0.0",
+        "lodash.keys": "^3.0.0",
+        "lodash.restparam": "^3.0.0",
+        "lodash.templatesettings": "^3.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz",
+      "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.escape": "^3.0.0"
+      }
+    },
+    "longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
+      "dev": true
+    },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "dev": true,
+      "requires": {
+        "currently-unhandled": "^0.4.1",
+        "signal-exit": "^3.0.0"
+      }
+    },
+    "lru-cache": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
+      "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=",
+      "dev": true
+    },
+    "make-iterator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
+      "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "dev": true
+    },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+      "dev": true
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "dev": true,
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "dev": true
+    },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "dev": true,
+      "requires": {
+        "camelcase-keys": "^2.0.0",
+        "decamelize": "^1.1.2",
+        "loud-rejection": "^1.0.0",
+        "map-obj": "^1.0.1",
+        "minimist": "^1.1.3",
+        "normalize-package-data": "^2.3.4",
+        "object-assign": "^4.0.1",
+        "read-pkg-up": "^1.0.1",
+        "redent": "^1.0.0",
+        "trim-newlines": "^1.0.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true
+        }
+      }
+    },
+    "micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      }
+    },
+    "mime-db": {
+      "version": "1.36.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.36.0.tgz",
+      "integrity": "sha512-L+xvyD9MkoYMXb1jAmzI/lWYAxAMCPvIBSWur0PZ5nOf5euahRLVqH//FKW9mWp2lkqUgYiXPgkzfMUFi4zVDw==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.20",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.20.tgz",
+      "integrity": "sha512-HrkrPaP9vGuWbLK1B1FfgAkbqNjIuy4eHlIYnFi7kamZyLLrGlo2mpcx0bBmNpKqBtYtAfGbodDddIgddSJC2A==",
+      "dev": true,
+      "requires": {
+        "mime-db": "~1.36.0"
+      }
+    },
+    "minimatch": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
+      "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.0.0"
+      }
+    },
+    "minimist": {
+      "version": "1.2.0",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "dev": true
+    },
+    "mixin-deep": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
+      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        }
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "multipipe": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
+      "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=",
+      "dev": true,
+      "requires": {
+        "duplexer2": "0.0.2"
+      }
+    },
+    "nan": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.0.tgz",
+      "integrity": "sha512-F4miItu2rGnV2ySkXOQoA8FKz/SR2Q2sWP0sbTxNxz/tuokeC8WxOhPMcwi0qIyGtVn/rrSeLbvVkznqCdwYnw==",
+      "dev": true
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "fragment-cache": "^0.2.1",
+        "is-windows": "^1.0.2",
+        "kind-of": "^6.0.2",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      }
+    },
+    "natives": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.4.tgz",
+      "integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg==",
+      "dev": true
+    },
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "dev": true,
+      "requires": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "^2.87.0",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "dev": true
+        }
+      }
+    },
+    "node-releases": {
+      "version": "1.0.0-alpha.11",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.11.tgz",
+      "integrity": "sha512-CaViu+2FqTNYOYNihXa5uPS/zry92I3vPU4nCB6JB3OeZ2UGtOpF5gRwuN4+m3hbEcL47bOXyun1jX2iC+3uEQ==",
+      "dev": true,
+      "requires": {
+        "semver": "^5.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.5.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.1.tgz",
+          "integrity": "sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==",
+          "dev": true
+        }
+      }
+    },
+    "node-sass": {
+      "version": "4.9.3",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.3.tgz",
+      "integrity": "sha512-XzXyGjO+84wxyH7fV6IwBOTrEBe2f0a6SBze9QWWYR/cL74AcQUks2AsqcCZenl/Fp/JVbuEaLpgrLtocwBUww==",
+      "dev": true,
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash.assign": "^4.2.0",
+        "lodash.clonedeep": "^4.3.2",
+        "lodash.mergewith": "^4.6.0",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.10.0",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "2.87.0",
+        "sass-graph": "^2.2.4",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "dependencies": {
+        "gaze": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+          "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+          "dev": true,
+          "requires": {
+            "globule": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "globule": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+          "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+          "dev": true,
+          "requires": {
+            "glob": "~7.1.1",
+            "lodash": "~4.17.10",
+            "minimatch": "~3.0.2"
+          }
+        },
+        "lodash": {
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
+    "node-uuid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz",
+      "integrity": "sha1-B/myM3Vy/2J1x3Xh1IUT86RdemU=",
+      "dev": true
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "is-builtin-module": "^1.0.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+      "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
+      "dev": true
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "dev": true,
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.defaults": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+      "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
+      "dev": true,
+      "requires": {
+        "array-each": "^1.0.1",
+        "array-slice": "^1.0.0",
+        "for-own": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+      "integrity": "sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=",
+      "dev": true,
+      "requires": {
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "once": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+      "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "orchestrator": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.8.tgz",
+      "integrity": "sha1-FOfp4nZPcxX7rBhOUGx6pt+UrX4=",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "~0.1.5",
+        "sequencify": "~0.0.7",
+        "stream-consume": "~0.1.0"
+      }
+    },
+    "ordered-read-streams": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
+      "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=",
+      "dev": true
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
+    },
+    "os-locale": {
+      "version": "1.4.0",
+      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+      "dev": true,
+      "requires": {
+        "lcid": "^1.0.0"
+      }
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
+    "parse-filepath": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+      "integrity": "sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=",
+      "dev": true,
+      "requires": {
+        "is-absolute": "^1.0.0",
+        "map-cache": "^0.2.0",
+        "path-root": "^0.1.1"
+      }
+    },
+    "parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.2.0"
+      }
+    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "dev": true
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+      "dev": true,
+      "requires": {
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "path-root": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+      "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
+      "dev": true,
+      "requires": {
+        "path-root-regex": "^0.1.0"
+      }
+    },
+    "path-root-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
+      "dev": true
+    },
+    "path-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        }
+      }
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "plugin-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+      "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^1.0.1",
+        "arr-diff": "^4.0.0",
+        "arr-union": "^3.1.0",
+        "extend-shallow": "^3.0.2"
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
+      "dev": true
+    },
+    "postcss": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.2.tgz",
+      "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+      "dev": true
+    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+      "dev": true
+    },
+    "pug": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.3.tgz",
+      "integrity": "sha1-ccuoJTfJWl6rftBGluQiH1Oqh44=",
+      "dev": true,
+      "requires": {
+        "pug-code-gen": "^2.0.1",
+        "pug-filters": "^3.1.0",
+        "pug-lexer": "^4.0.0",
+        "pug-linker": "^3.0.5",
+        "pug-load": "^2.0.11",
+        "pug-parser": "^5.0.0",
+        "pug-runtime": "^2.0.4",
+        "pug-strip-comments": "^1.0.3"
+      }
+    },
+    "pug-attrs": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.3.tgz",
+      "integrity": "sha1-owlflw5kFR972tlX7vVftdeQXRU=",
+      "dev": true,
+      "requires": {
+        "constantinople": "^3.0.1",
+        "js-stringify": "^1.0.1",
+        "pug-runtime": "^2.0.4"
+      }
+    },
+    "pug-code-gen": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.1.tgz",
+      "integrity": "sha1-CVHsgyJddNjPxHan+Zolm199BQw=",
+      "dev": true,
+      "requires": {
+        "constantinople": "^3.0.1",
+        "doctypes": "^1.1.0",
+        "js-stringify": "^1.0.1",
+        "pug-attrs": "^2.0.3",
+        "pug-error": "^1.3.2",
+        "pug-runtime": "^2.0.4",
+        "void-elements": "^2.0.1",
+        "with": "^5.0.0"
+      }
+    },
+    "pug-error": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.2.tgz",
+      "integrity": "sha1-U659nSm7A89WRJOgJhCfVMR/XyY=",
+      "dev": true
+    },
+    "pug-filters": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.0.tgz",
+      "integrity": "sha1-JxZVVbwEwjbkqisDZiRt+gIbYm4=",
+      "dev": true,
+      "requires": {
+        "clean-css": "^4.1.11",
+        "constantinople": "^3.0.1",
+        "jstransformer": "1.0.0",
+        "pug-error": "^1.3.2",
+        "pug-walk": "^1.1.7",
+        "resolve": "^1.1.6",
+        "uglify-js": "^2.6.1"
+      }
+    },
+    "pug-lexer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.0.0.tgz",
+      "integrity": "sha1-IQwYRX7y4XYCQnQMXmR715TOwng=",
+      "dev": true,
+      "requires": {
+        "character-parser": "^2.1.1",
+        "is-expression": "^3.0.0",
+        "pug-error": "^1.3.2"
+      }
+    },
+    "pug-linker": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.5.tgz",
+      "integrity": "sha1-npp65ABWgtAn3uuWsAD4juuDoC8=",
+      "dev": true,
+      "requires": {
+        "pug-error": "^1.3.2",
+        "pug-walk": "^1.1.7"
+      }
+    },
+    "pug-load": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.11.tgz",
+      "integrity": "sha1-5kjlftET/iwfRdV4WOorrWvAFSc=",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.0",
+        "pug-walk": "^1.1.7"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true
+        }
+      }
+    },
+    "pug-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.0.tgz",
+      "integrity": "sha1-45Stmz/KkxI5QK/4hcBuRKt+aOQ=",
+      "dev": true,
+      "requires": {
+        "pug-error": "^1.3.2",
+        "token-stream": "0.0.1"
+      }
+    },
+    "pug-runtime": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.4.tgz",
+      "integrity": "sha1-4XjhvaaKsujArPybztLFT9iM61g=",
+      "dev": true
+    },
+    "pug-strip-comments": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.3.tgz",
+      "integrity": "sha1-8VWVkiBu3G+FMQ2s9K+0igJa9Z8=",
+      "dev": true,
+      "requires": {
+        "pug-error": "^1.3.2"
+      }
+    },
+    "pug-walk": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.7.tgz",
+      "integrity": "sha1-wA1cUSi6xYBr7BXSt+fNq+QlMfM=",
+      "dev": true
+    },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "dev": true
+    },
+    "read-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "dev": true,
+      "requires": {
+        "load-json-file": "^1.0.0",
+        "normalize-package-data": "^2.3.2",
+        "path-type": "^1.0.0"
+      }
+    },
+    "read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "dev": true,
+      "requires": {
+        "find-up": "^1.0.0",
+        "read-pkg": "^1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "dev": true,
+      "requires": {
+        "indent-string": "^2.1.0",
+        "strip-indent": "^1.0.1"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "dev": true
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "repeat-element": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
+      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==",
+      "dev": true
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "dev": true
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "dev": true,
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
+    "replace-ext": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
+      "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=",
+      "dev": true
+    },
+    "request": {
+      "version": "2.87.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
+      "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.6.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.5",
+        "extend": "~3.0.1",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.1",
+        "har-validator": "~5.0.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.17",
+        "oauth-sign": "~0.8.2",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.1",
+        "safe-buffer": "^5.1.1",
+        "tough-cookie": "~2.3.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.1.0"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
+      "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==",
+      "dev": true,
+      "requires": {
+        "path-parse": "^1.0.5"
+      }
+    },
+    "resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      }
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
+      "dev": true
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "dev": true
+    },
+    "right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+      "dev": true,
+      "requires": {
+        "align-text": "^0.1.1"
+      }
+    },
+    "rimraf": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+      "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.5"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "dev": true,
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^7.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "dev": true,
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "lodash": {
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^3.0.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^1.4.0",
+            "read-pkg-up": "^1.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^1.0.2",
+            "which-module": "^1.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^5.0.0"
+          }
+        }
+      }
+    },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "semver": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
+      "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
+      "dev": true
+    },
+    "sequencify": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz",
+      "integrity": "sha1-kM/xnQLgcCf9dn9erT57ldHnOAw=",
+      "dev": true
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "set-value": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
+      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
+      "dev": true
+    },
+    "signal-exit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "dev": true
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "dev": true,
+      "requires": {
+        "base": "^0.11.1",
+        "debug": "^2.2.0",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "map-cache": "^0.2.2",
+        "source-map": "^0.5.6",
+        "source-map-resolve": "^0.5.0",
+        "use": "^3.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.2.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
+    },
+    "source-map-resolve": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
+      "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.1",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
+      "dev": true
+    },
+    "sparkles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
+      "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==",
+      "dev": true
+    },
+    "spdx-correct": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
+      "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
+      "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
+      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
+      "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==",
+      "dev": true
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
+      "dev": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "dev": true,
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "stream-consume": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.1.tgz",
+      "integrity": "sha512-tNa3hzgkjEP7XbCkbRXe1jpg+ievoa0O4SCFlMOYEscGSS4JJsckGL8swUyAa/ApGU3Ae4t6Honor4HhL+tRyg==",
+      "dev": true
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dev": true,
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+      "dev": true
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-bom": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
+      "integrity": "sha1-hbiGLzhEtabV7IRnqTWYFzo295Q=",
+      "dev": true,
+      "requires": {
+        "first-chunk-stream": "^1.0.0",
+        "is-utf8": "^0.2.0"
+      }
+    },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "dev": true,
+      "requires": {
+        "get-stdin": "^4.0.1"
+      }
+    },
+    "supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true
+    },
+    "tar": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "dev": true,
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.2",
+        "inherits": "2"
+      }
+    },
+    "through2": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
+      "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.1.5",
+        "xtend": "~4.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "tildify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.2.0.tgz",
+      "integrity": "sha1-3OwD9V3Km3qj5bBPIYF+tW5jWIo=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0"
+      }
+    },
+    "time-stamp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
+      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
+      "dev": true
+    },
+    "to-fast-properties": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
+      "dev": true
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dev": true,
+      "requires": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      }
+    },
+    "token-stream": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
+      "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=",
+      "dev": true
+    },
+    "tough-cookie": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
+      "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
+      "dev": true,
+      "requires": {
+        "punycode": "^1.4.1"
+      }
+    },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+      "dev": true
+    },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true,
+      "optional": true
+    },
+    "uc.micro": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+      "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==",
+      "dev": true
+    },
+    "uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.5.1",
+        "uglify-to-browserify": "~1.0.0",
+        "yargs": "~3.10.0"
+      }
+    },
+    "uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+      "dev": true,
+      "optional": true
+    },
+    "unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+      "dev": true
+    },
+    "union-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
+      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^0.4.3"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "set-value": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
+          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-extendable": "^0.1.1",
+            "is-plain-object": "^2.0.1",
+            "to-object-path": "^0.3.0"
+          }
+        }
+      }
+    },
+    "unique-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
+      "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=",
+      "dev": true
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "dev": true,
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "dev": true,
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "dev": true,
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+          "dev": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        }
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
+      "dev": true
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "dev": true
+    },
+    "user-home": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
+      "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=",
+      "dev": true
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "dev": true
+    },
+    "v8flags": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
+      "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=",
+      "dev": true,
+      "requires": {
+        "user-home": "^1.1.1"
+      }
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "vinyl": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
+      "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.0",
+        "clone-stats": "^0.0.1",
+        "replace-ext": "0.0.1"
+      }
+    },
+    "vinyl-fs": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.14.tgz",
+      "integrity": "sha1-mmhRzhysHBzqX+hsCTHWIMLPqeY=",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.0",
+        "glob-stream": "^3.1.5",
+        "glob-watcher": "^0.0.6",
+        "graceful-fs": "^3.0.0",
+        "mkdirp": "^0.5.0",
+        "strip-bom": "^1.0.0",
+        "through2": "^0.6.1",
+        "vinyl": "^0.4.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz",
+          "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+          "dev": true,
+          "requires": {
+            "readable-stream": ">=1.0.33-1 <1.1.0-0",
+            "xtend": ">=4.0.0 <4.1.0-0"
+          }
+        },
+        "vinyl": {
+          "version": "0.4.6",
+          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
+          "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=",
+          "dev": true,
+          "requires": {
+            "clone": "^0.2.0",
+            "clone-stats": "^0.0.1"
+          }
+        }
+      }
+    },
+    "vinyl-sourcemaps-apply": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.5.1"
+      }
+    },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+      "dev": true
+    },
+    "vow": {
+      "version": "0.4.4",
+      "resolved": "http://registry.npmjs.org/vow/-/vow-0.4.4.tgz",
+      "integrity": "sha1-yf5GCRKdf1qmIVCOvmS1HJW8e5g=",
+      "dev": true
+    },
+    "vow-fs": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vow-fs/-/vow-fs-0.3.2.tgz",
+      "integrity": "sha1-6isDTYXh24wnfrLpqG0cFfXTjno=",
+      "dev": true,
+      "requires": {
+        "glob": "3.2.8",
+        "node-uuid": "1.4.0",
+        "vow": "0.4.4",
+        "vow-queue": "0.3.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "3.2.8",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.8.tgz",
+          "integrity": "sha1-VQb0MRchvMYYx9jboUQYh1AwcHM=",
+          "dev": true,
+          "requires": {
+            "inherits": "2",
+            "minimatch": "~0.2.11"
+          }
+        },
+        "minimatch": {
+          "version": "0.2.14",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
+          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "2",
+            "sigmund": "~1.0.0"
+          }
+        }
+      }
+    },
+    "vow-queue": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.3.1.tgz",
+      "integrity": "sha1-WYxRoVsKgabV/AX0dhzrRi3h6Gg=",
+      "dev": true,
+      "requires": {
+        "vow": "~0.4.0"
+      }
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+      "dev": true
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
+      "dev": true
+    },
+    "with": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
+      "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=",
+      "dev": true,
+      "requires": {
+        "acorn": "^3.1.0",
+        "acorn-globals": "^3.0.0"
+      }
+    },
+    "wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "2.1.0",
+      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+      "dev": true
+    },
+    "y18n": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "dev": true
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+      "dev": true
+    },
+    "yargs": {
+      "version": "3.10.0",
+      "resolved": "http://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+      "dev": true,
+      "requires": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    },
+    "yargs-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "dev": true,
+      "requires": {
+        "camelcase": "^3.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        }
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/package.json b/public/css/spectre-0.5.8/package.json
new file mode 100644
index 0000000..25727cd
--- /dev/null
+++ b/public/css/spectre-0.5.8/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "spectre.css",
+  "version": "0.5.8",
+  "homepage": "http://picturepan2.github.io/spectre",
+  "author": "Yan Zhu <picturepan2@hotmail.com>",
+  "description": "Spectre.css: A lightweight, responsive and modern CSS framework",
+  "main": "dist/spectre.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/picturepan2/spectre.git"
+  },
+  "license": "MIT",
+  "keywords": [
+    "css",
+    "framework",
+    "flexbox",
+    "responsive",
+    "mobile-friendly",
+    "front-end",
+    "sass",
+    "modern"
+  ],
+  "bugs": {
+    "url": "https://github.com/picturepan2/spectre/issues"
+  },
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "latest",
+    "gulp-clean-css": "latest",
+    "gulp-csscomb": "latest",
+    "gulp-rename": "latest",
+    "gulp-sass": "latest",
+    "gulp-pug": "latest",
+    "jstransformer-highlight": "latest",
+    "jstransformer-markdown-it": "latest"
+  },
+  "browserslist": [
+    "last 4 Chrome versions",
+    "Edge >= 12",
+    "Firefox ESR",
+    "last 4 Safari versions",
+    "last 4 Opera versions",
+    "Explorer >= 10"
+  ]
+}
diff --git a/public/css/spectre-0.5.8/src/_accordions.scss b/public/css/spectre-0.5.8/src/_accordions.scss
new file mode 100644
index 0000000..fd21585
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_accordions.scss
@@ -0,0 +1,38 @@
+// Accordions
+.accordion {
+  input:checked ~,
+  &[open] {
+    & .accordion-header {
+      .icon {
+        transform: rotate(90deg);
+      }
+    }
+
+    & .accordion-body {
+      max-height: 50rem;
+    }
+  }
+
+  .accordion-header {
+    display: block;
+    padding: $unit-1 $unit-2;
+
+    .icon {
+      transition: transform .25s;
+    }
+  }
+
+  .accordion-body {
+    margin-bottom: $layout-spacing;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .25s;
+  }
+}
+
+// Remove default details marker in Webkit
+summary.accordion-header {
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_animations.scss b/public/css/spectre-0.5.8/src/_animations.scss
new file mode 100644
index 0000000..e7fde1a
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_animations.scss
@@ -0,0 +1,20 @@
+// Animations
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-$unit-8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_asian.scss b/public/css/spectre-0.5.8/src/_asian.scss
new file mode 100644
index 0000000..e426f39
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_asian.scss
@@ -0,0 +1,43 @@
+// Optimized for East Asian CJK
+html:lang(zh),
+html:lang(zh-Hans),
+.lang-zh,
+.lang-zh-hans {
+  font-family: $cjk-zh-hans-font-family;
+}
+
+html:lang(zh-Hant),
+.lang-zh-hant {
+  font-family: $cjk-zh-hant-font-family;
+}
+
+html:lang(ja),
+.lang-ja {
+  font-family: $cjk-jp-font-family;
+}
+
+html:lang(ko),
+.lang-ko {
+  font-family: $cjk-ko-font-family;
+}
+
+:lang(zh),
+:lang(ja),
+.lang-cjk {
+  ins,
+  u {
+    border-bottom: $border-width solid;
+    text-decoration: none;
+  }
+
+  del + del,
+  del + s,
+  ins + ins,
+  ins + u,
+  s + del,
+  s + s,
+  u + ins,
+  u + u {
+    margin-left: .125em;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_autocomplete.scss b/public/css/spectre-0.5.8/src/_autocomplete.scss
new file mode 100644
index 0000000..279fa03
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_autocomplete.scss
@@ -0,0 +1,47 @@
+// Autocomplete
+.form-autocomplete {
+  position: relative;
+
+  .form-autocomplete-input {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: $unit-8;
+    padding: $unit-h;
+
+    &.is-focused {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+
+    .form-input {
+      border-color: transparent;
+      box-shadow: none;
+      display: inline-block;
+      flex: 1 0 auto;
+      height: $unit-6;
+      line-height: $unit-4;
+      margin: $unit-h;
+      width: auto;
+    }
+  }
+
+  .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+
+  &.autocomplete-oneline {
+    .form-autocomplete-input {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+
+    .chip {
+      flex: 1 0 auto;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_avatars.scss b/public/css/spectre-0.5.8/src/_avatars.scss
new file mode 100644
index 0000000..b203aa2
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_avatars.scss
@@ -0,0 +1,77 @@
+// Avatars
+.avatar {
+  @include avatar-base();
+  background: $primary-color;
+  border-radius: 50%;
+  color: rgba($light-color, .85);
+  display: inline-block;
+  font-weight: 300;
+  line-height: 1.25;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+
+  &.avatar-xs {
+    @include avatar-base($unit-4);
+  }
+  &.avatar-sm {
+    @include avatar-base($unit-6);
+  }
+  &.avatar-lg {
+    @include avatar-base($unit-12);
+  }
+  &.avatar-xl {
+    @include avatar-base($unit-16);
+  }
+
+  img {
+    border-radius: 50%;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .avatar-icon,
+  .avatar-presence {
+    background: $bg-color-light;
+    bottom: 14.64%;
+    height: 50%;
+    padding: $border-width-lg;
+    position: absolute;
+    right: 14.64%;
+    transform: translate(50%, 50%);
+    width: 50%;
+    z-index: $zindex-0 + 1;
+  }
+
+  .avatar-presence {
+    background: $gray-color;
+    box-shadow: 0 0 0 $border-width-lg $light-color;
+    border-radius: 50%;
+    height: .5em;
+    width: .5em;
+
+    &.online {
+      background: $success-color;
+    }
+
+    &.busy {
+      background: $error-color;
+    }
+
+    &.away {
+      background: $warning-color;
+    }
+  }
+
+  &[data-initial]::before {
+    color: currentColor;
+    content: attr(data-initial);
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: $zindex-0;
+  }
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/_badges.scss b/public/css/spectre-0.5.8/src/_badges.scss
new file mode 100644
index 0000000..d67f6d1
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_badges.scss
@@ -0,0 +1,60 @@
+// Badges
+.badge {
+  position: relative;
+  white-space: nowrap;
+
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      background: $primary-color;
+      background-clip: padding-box;
+      border-radius: .5rem;
+      box-shadow: 0 0 0 .1rem $bg-color-light;
+      color: $light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-.05rem, -.5rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: $font-size-sm;
+      height: .9rem;
+      line-height: 1;
+      min-width: .9rem;
+      padding: .1rem .2rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=""] {
+    &::after {
+      height: 6px;
+      min-width: 6px;
+      padding: 0;
+      width: 6px;
+    }
+  }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  // Badges for Avatars
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: $zindex-1;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_bars.scss b/public/css/spectre-0.5.8/src/_bars.scss
new file mode 100644
index 0000000..47e21c9
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_bars.scss
@@ -0,0 +1,71 @@
+// Bars
+.bar {
+  background: $bg-color-dark;
+  border-radius: $border-radius;
+  display: flex;
+  flex-wrap: nowrap;
+  height: $unit-4;
+  width: 100%;
+
+  &.bar-sm {
+    height: $unit-1;
+  }
+
+  // TODO: attr() support
+  .bar-item {
+    background: $primary-color;
+    color: $light-color;
+    display: block;
+    font-size: $font-size-sm;
+    flex-shrink: 0;
+    line-height: $unit-4;
+    height: 100%;
+    position: relative;
+    text-align: center;
+    width: 0;
+
+    &:first-child {
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
+    &:last-child {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+      flex-shrink: 1;
+    }
+  }
+}
+
+// Slider bar
+.bar-slider {
+  height: $border-width-lg;
+  margin: $layout-spacing 0;
+  position: relative;
+
+  .bar-item {
+    left: 0;
+    padding: 0;
+    position: absolute;
+    &:not(:last-child):first-child {
+      background: $bg-color-dark;
+      z-index: $zindex-0;
+    }
+  }
+
+  .bar-slider-btn {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: $unit-3;
+
+    &:active {
+      box-shadow: 0 0 0 .1rem $primary-color;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_base.scss b/public/css/spectre-0.5.8/src/_base.scss
new file mode 100644
index 0000000..4e01b20
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_base.scss
@@ -0,0 +1,44 @@
+// Base
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: $html-font-size;
+  line-height: $html-line-height;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  font-family: $body-font-family;
+  font-size: $font-size;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: $link-color;
+  outline: none;
+  text-decoration: none;
+
+  &:focus {
+    @include control-shadow();
+  }
+
+  &:focus,
+  &:hover,
+  &:active,
+  &.active {
+    color: $link-color-dark;
+    text-decoration: underline;
+  }
+
+  &:visited {
+    color: $link-color-light;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_breadcrumbs.scss b/public/css/spectre-0.5.8/src/_breadcrumbs.scss
new file mode 100644
index 0000000..6a5af31
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_breadcrumbs.scss
@@ -0,0 +1,29 @@
+// Breadcrumbs
+.breadcrumb {
+  list-style: none;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
+
+  .breadcrumb-item {
+    color: $gray-color-dark;
+    display: inline-block;
+    margin: 0;
+    padding: $unit-1 0;
+
+    &:not(:last-child) {
+      margin-right: $unit-1;
+
+      a {
+        color: $gray-color-dark;
+      }
+    }
+
+    &:not(:first-child) {
+      &::before {
+        color: $gray-color-dark;
+        content: "/";
+        padding-right: $unit-2;
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_buttons.scss b/public/css/spectre-0.5.8/src/_buttons.scss
new file mode 100644
index 0000000..9158f0f
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_buttons.scss
@@ -0,0 +1,193 @@
+// Buttons
+.btn {
+  appearance: none;
+  background: $bg-color-light;
+  border: $border-width solid $primary-color;
+  border-radius: $border-radius;
+  color: $primary-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  text-align: center;
+  text-decoration: none;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  &:focus {
+    @include control-shadow();
+  }
+  &:focus,
+  &:hover {
+    background: $secondary-color;
+    border-color: $primary-color-dark;
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    background: $primary-color-dark;
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+    text-decoration: none;
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: .5;
+    pointer-events: none;
+  }
+
+  // Button Primary
+  &.btn-primary {
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
+    &:focus,
+    &:hover {
+      background: darken($primary-color-dark, 2%);
+      border-color: darken($primary-color-dark, 5%);
+      color: $light-color;
+    }
+    &:active,
+    &.active {
+      background: darken($primary-color-dark, 4%);
+      border-color: darken($primary-color-dark, 7%);
+      color: $light-color;
+    }
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+
+  // Button Colors
+  &.btn-success {
+    @include button-variant($success-color);
+  }
+
+  &.btn-error {
+    @include button-variant($error-color);
+  }
+
+  // Button Link
+  &.btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: $link-color;
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: $link-color-dark;
+    }
+  }
+
+  // Button Sizes
+  &.btn-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.btn-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  // Button Block
+  &.btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  // Button Action
+  &.btn-action {
+    width: $control-size;
+    padding-left: 0;
+    padding-right: 0;
+
+    &.btn-sm {
+      width: $control-size-sm;
+    }
+
+    &.btn-lg {
+      width: $control-size-lg;
+    }
+  }
+
+  // Button Clear
+  &.btn-clear {
+    background: transparent;
+    border: 0;
+    color: currentColor;
+    height: $unit-5;
+    line-height: $unit-4;
+    margin-left: $unit-1;
+    margin-right: -2px;
+    opacity: 1;
+    padding: $unit-h;
+    text-decoration: none;
+    width: $unit-5;
+
+    &:focus,
+    &:hover {
+      background: rgba($bg-color, .5);
+      opacity: .95;
+    }
+
+    &::before {
+      content: "\2715";
+    }
+  }
+}
+
+// Button groups
+.btn-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .btn {
+    flex: 1 0 auto;
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      z-index: $zindex-0;
+    }
+  }
+
+  &.btn-group-block {
+    display: flex;
+
+    .btn {
+      flex: 1 0 0;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_calendars.scss b/public/css/spectre-0.5.8/src/_calendars.scss
new file mode 100644
index 0000000..1e9fd15
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_calendars.scss
@@ -0,0 +1,222 @@
+// Calendars
+.calendar {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+  min-width: 280px;
+
+  .calendar-nav {
+    align-items: center;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    display: flex;
+    font-size: $font-size-lg;
+    padding: $layout-spacing;
+  }
+
+  .calendar-header,
+  .calendar-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: $layout-spacing 0;
+
+    .calendar-date {
+      flex: 0 0 14.28%; // 7 calendar-items each row
+      max-width: 14.28%;
+    }
+  }
+
+  .calendar-header {
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
+    text-align: center;
+  }
+
+  .calendar-body {
+    color: $gray-color-dark;
+  }
+
+  .calendar-date {
+    border: 0;
+    padding: $unit-1;
+
+    .date-item {
+      appearance: none;
+      background: transparent;
+      border: $border-width solid transparent;
+      border-radius: 50%;
+      color: $gray-color-dark;
+      cursor: pointer;
+      font-size: $font-size-sm;
+      height: $unit-7;
+      line-height: $unit-5;
+      outline: none;
+      padding: $unit-h;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s;
+      vertical-align: middle;
+      white-space: nowrap;
+      width: $unit-7;
+
+      &.date-today {
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+      }
+
+      &:focus {
+        @include control-shadow();
+      }
+
+      &:focus,
+      &:hover {
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+        text-decoration: none;
+      }
+      &:active,
+      &.active {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+
+      // Calendar badge support
+      &.badge {
+        &::after {
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+
+    .date-item,
+    .calendar-event {
+      &:disabled,
+      &.disabled {
+        cursor: default;
+        opacity: .25;
+        pointer-events: none;
+      }
+    }
+
+    &.prev-month,
+    &.next-month {
+      .date-item,
+      .calendar-event {
+        opacity: .25;
+      }
+    }
+  }
+
+  .calendar-range {
+    position: relative;
+
+    &::before {
+      background: $secondary-color;
+      content: "";
+      height: $unit-7;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
+      &::before {
+        left: 50%;
+      }
+    }
+    &.range-end {
+      &::before {
+        right: 50%;
+      }
+    }
+
+    &.range-start,
+    &.range-end {
+      .date-item {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+    }
+
+    .date-item {
+      color: $primary-color;
+    }
+  }
+
+  // Calendars size
+  &.calendar-lg {
+    .calendar-body {
+      padding: 0;
+
+      .calendar-date {
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
+        display: flex;
+        flex-direction: column;
+        height: 5.5rem;
+        padding: 0;
+
+        &:nth-child(7n) {
+          border-right: 0;
+        }
+        &:nth-last-child(-n+7) {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .date-item {
+      align-self: flex-end;
+      height: $unit-7;
+      margin-right: $layout-spacing-sm;
+      margin-top: $layout-spacing-sm;
+    }
+
+    .calendar-range {
+      &::before {
+        top: 19px;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 19px;
+        }
+      }
+      &.range-end {
+        &::before {
+          right: 19px;
+        }
+      }
+    }
+
+    .calendar-events {
+      flex-grow: 1;
+      line-height: 1;
+      overflow-y: auto;
+      padding: $layout-spacing-sm;
+    }
+
+    .calendar-event {
+      border-radius: $border-radius;
+      font-size: $font-size-sm;
+      display: block;
+      margin: $unit-h auto;
+      overflow: hidden;
+      padding: 3px 4px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_cards.scss b/public/css/spectre-0.5.8/src/_cards.scss
new file mode 100644
index 0000000..6b712e1
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_cards.scss
@@ -0,0 +1,43 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-spacing-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-spacing-lg;
+    }
+  }
+
+  .card-body {
+    flex: 1 1 auto;
+  }
+
+  .card-image {
+    padding-top: $layout-spacing-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_carousels.scss b/public/css/spectre-0.5.8/src/_carousels.scss
new file mode 100644
index 0000000..66dc51b
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_carousels.scss
@@ -0,0 +1,136 @@
+// Carousels
+// The number of carousel images
+$carousel-number: 8;
+
+%carousel-image-checked { 
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: $zindex-1;
+}
+
+%carousel-nav-checked { 
+  color: $gray-color-light;
+}
+
+.carousel {
+  background: $bg-color;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+  z-index: $zindex-0;
+
+  .carousel-container {
+    height: 100%;
+    left: 0;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
+
+    .carousel-item {
+      animation: carousel-slideout 1s ease-in-out 1;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
+      color: $gray-color-light;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all .4s;
+      transform: translateY(-50%);
+      z-index: $zindex-1;
+    }
+    .item-prev {
+      left: 1rem;
+    }
+    .item-next {
+      right: 1rem;
+    }
+  }
+
+  .carousel-locator {
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
+        @extend %carousel-image-checked;
+      }
+    }
+
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
+        @extend %carousel-nav-checked;
+      }
+    }
+  }
+
+  .carousel-nav {
+    bottom: $layout-spacing;
+    display: flex;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 10rem;
+    z-index: $zindex-1;
+
+    .nav-item {
+      color: rgba($gray-color-light, .5);
+      display: block;
+      flex: 1 0 auto;
+      height: $unit-8;
+      margin: $unit-1;
+      max-width: 2.5rem;
+      position: relative;
+
+      &::before {
+        background: currentColor;
+        content: "";
+        display: block;
+        height: $unit-h;
+        position: absolute;
+        top: .5rem;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@keyframes carousel-slidein {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_chips.scss b/public/css/spectre-0.5.8/src/_chips.scss
new file mode 100644
index 0000000..6729c56
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_chips.scss
@@ -0,0 +1,33 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: 5rem;
+  display: inline-flex;
+  font-size: 90%;
+  height: $unit-6;
+  line-height: $unit-4;
+  margin: $unit-h;
+  max-width: $control-width-sm;
+  overflow: hidden;
+  padding: $unit-1 $unit-2;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -$unit-2;
+    margin-right: $unit-1;
+  }
+
+  .btn-clear {
+    border-radius: 50%;
+    transform: scale(.75);
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_codes.scss b/public/css/spectre-0.5.8/src/_codes.scss
new file mode 100644
index 0000000..817452b
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_codes.scss
@@ -0,0 +1,31 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, lighten($code-color, 42.5%));
+  font-size: 85%;
+}
+
+.code {
+  border-radius: $border-radius;
+  color: $body-font-color;
+  position: relative;
+
+  &::before {
+    color: $gray-color;
+    content: attr(data-lang);
+    font-size: $font-size-sm;
+    position: absolute;
+    right: $layout-spacing;
+    top: $unit-h;
+  }
+
+  code {
+    background: $bg-color;
+    color: inherit;
+    display: block;
+    line-height: 1.5;
+    overflow-x: auto;
+    padding: 1rem;
+    width: 100%;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_comparison-sliders.scss b/public/css/spectre-0.5.8/src/_comparison-sliders.scss
new file mode 100644
index 0000000..72bb25f
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_comparison-sliders.scss
@@ -0,0 +1,115 @@
+// Image comparison slider
+// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      object-position: left center;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+    z-index: 1;
+
+    .comparison-label {
+      right: $unit-4;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: 2;
+
+    &::before {
+      background: transparent;
+      content: "";
+      cursor: default;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: $unit-4;
+      top: 0;
+      z-index: $zindex-0;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -5px, 0 5px;
+      color: $light-color;
+      content: "";
+      height: 3px;
+      position: absolute;
+      right: $unit-2;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: 3px;
+    }
+
+    .comparison-label {
+      left: $unit-4;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: $unit-4;
+    left: 0;
+    max-width: 100%;
+    min-width: $unit-4;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+
+  .comparison-label {
+    background: rgba($dark-color, .5);
+    bottom: $unit-4;
+    color: $light-color;
+    padding: $unit-1 $unit-2;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: $unit-12;
+  }
+  50% {
+    width: $unit-4;
+  }
+  75% {
+    width: $unit-6;
+  }
+  100% {
+    width: 0;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_dropdowns.scss b/public/css/spectre-0.5.8/src/_dropdowns.scss
new file mode 100644
index 0000000..324440b
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_dropdowns.scss
@@ -0,0 +1,36 @@
+// Dropdown
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .menu {
+    animation: slide-down .15s ease 1;
+    display: none;
+    left: 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+  }
+
+  &.dropdown-right {
+    .menu {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+
+  // Fix dropdown-toggle border radius in button groups
+  .btn-group {
+    .dropdown-toggle:nth-last-child(2) {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_empty.scss b/public/css/spectre-0.5.8/src/_empty.scss
new file mode 100644
index 0000000..accba9c
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_empty.scss
@@ -0,0 +1,21 @@
+// Empty states (or Blank slates)
+.empty {
+  background: $bg-color;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  text-align: center;
+  padding: $unit-16 $unit-8;
+
+  .empty-icon {
+    margin-bottom: $layout-spacing-lg;
+  }
+
+  .empty-title,
+  .empty-subtitle {
+    margin: $layout-spacing auto;
+  }
+
+  .empty-action {
+    margin-top: $layout-spacing-lg;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_filters.scss b/public/css/spectre-0.5.8/src/_filters.scss
new file mode 100644
index 0000000..37ccc89
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_filters.scss
@@ -0,0 +1,37 @@
+// Filters 
+// The number of filter options 
+$filter-number: 8 !default;
+
+%filter-checked-nav { 
+  background: $primary-color;
+  color: $light-color;
+}
+
+%filter-checked-body { 
+  display: none;
+}
+
+.filter {
+  .filter-nav {
+    margin: $layout-spacing 0;
+  }
+
+  .filter-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .filter-tag {
+    @for $i from 0 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
+        @extend %filter-checked-nav;
+      }
+    }
+
+    @for $i from 1 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
+        @extend %filter-checked-body;
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_forms.scss b/public/css/spectre-0.5.8/src/_forms.scss
new file mode 100644
index 0000000..20a6b4f
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_forms.scss
@@ -0,0 +1,555 @@
+// Forms
+.form-group {
+  &:not(:last-child) {
+    margin-bottom: $layout-spacing;
+  }
+}
+
+fieldset {
+  margin-bottom: $layout-spacing-lg;
+}
+
+legend {
+  font-size: $font-size-lg;
+  font-weight: 500;
+  margin-bottom: $layout-spacing-lg;
+}
+
+// Form element: Label
+.form-label {
+  display: block;
+  line-height: $line-height;
+  padding: $control-padding-y + $border-width 0;
+
+  &.label-sm {
+    font-size: $font-size-sm;
+    padding: $control-padding-y-sm + $border-width 0;
+  }
+
+  &.label-lg {
+    font-size: $font-size-lg;
+    padding: $control-padding-y-lg + $border-width 0;
+  }
+}
+
+// Form element: Input
+.form-input {
+  appearance: none;
+  background: $bg-color-light;
+  background-image: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: $body-font-color;
+  display: block;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  max-width: 100%;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  width: 100%;
+  &:focus {
+    @include control-shadow();
+    border-color: $primary-color;
+  }
+  &::placeholder {
+    color: $gray-color;
+  }
+
+  // Input sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  // Input types
+  &[type="file"] {
+    height: auto;
+  }
+}
+
+// Form element: Textarea
+textarea.form-input {
+  &,
+  &.input-lg,
+  &.input-sm {
+    height: auto;
+  }
+}
+
+// Form element: Input hint
+.form-input-hint {
+  color: $gray-color;
+  font-size: $font-size-sm;
+  margin-top: $unit-1;
+
+  .has-success &,
+  .is-success + & {
+    color: $success-color;
+  }
+
+  .has-error &,
+  .is-error + & {
+    color: $error-color;
+  }
+}
+
+// Form element: Select
+.form-select {
+  appearance: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: inherit;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  vertical-align: middle;
+  width: 100%;
+  background: $bg-color-light; 
+  &:focus {
+    @include control-shadow();
+    border-color: $primary-color;
+  }
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Select sizes
+  &.select-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.select-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  // Multiple select
+  &[size],
+  &[multiple] {
+    height: auto;
+    padding: $control-padding-y $control-padding-x;
+
+    option {
+      padding: $unit-h $unit-1;
+    }
+  }
+  &:not([multiple]):not([size]) {
+    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-x;
+  }
+}
+
+// Form Icons
+.has-icon-left,
+.has-icon-right {
+  position: relative;
+
+  .form-icon {
+    height: $control-icon-size;
+    margin: 0 $control-padding-y;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $control-icon-size;
+    z-index: $zindex-0 + 1;
+  }
+}
+
+.has-icon-left {
+  .form-icon {
+    left: $border-width;
+  }
+
+  .form-input {
+    padding-left: $control-icon-size + $control-padding-y * 2;
+  }
+}
+
+.has-icon-right {
+  .form-icon {
+    right: $border-width;
+  }
+
+  .form-input {
+    padding-right: $control-icon-size + $control-padding-y * 2;
+  }
+}
+
+// Form element: Checkbox and Radio
+.form-checkbox,
+.form-radio,
+.form-switch {
+  display: block;
+  line-height: $line-height;
+  margin: ($control-size - $control-size-sm) / 2 0;
+  min-height: $control-size-sm;
+  padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
+  position: relative;
+
+  input {
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    &:focus + .form-icon {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+    &:checked + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .form-icon {
+    border: $border-width solid $border-color-dark;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  }
+
+  // Input checkbox, radio and switch sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    margin: ($control-size-lg - $control-size-sm) / 2 0;
+  }
+}
+
+.form-checkbox,
+.form-radio {
+  .form-icon {
+    background: $bg-color-light;
+    height: $control-icon-size;
+    left: 0;
+    top: ($control-size-sm - $control-icon-size) / 2;
+    width: $control-icon-size;
+  }
+
+  input {
+    &:active + .form-icon {
+      background: $bg-color-dark;
+    }
+  }
+}
+.form-checkbox {
+  .form-icon {
+    border-radius: $border-radius;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background-clip: padding-box;
+        border: $border-width-lg solid $light-color;
+        border-left-width: 0;
+        border-top-width: 0;
+        content: "";
+        height: 9px;
+        left: 50%;
+        margin-left: -3px;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg);
+        width: 6px;
+      }
+    }
+    &:indeterminate + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+      &::before {
+        background: $bg-color-light;
+        content: "";
+        height: 2px;
+        left: 50%;
+        margin-left: -5px;
+        margin-top: -1px;
+        position: absolute;
+        top: 50%;
+        width: 10px;
+      }
+    }
+  }
+}
+.form-radio {
+  .form-icon {
+    border-radius: 50%;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background: $bg-color-light;
+        border-radius: 50%;
+        content: "";
+        height: 6px;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 6px;
+      }
+    }
+  }
+}
+
+// Form element: Switch
+.form-switch {
+  padding-left: ($unit-8 + $control-padding-x);
+
+  .form-icon {
+    background: $gray-color;
+    background-clip: padding-box;
+    border-radius: $unit-2 + $border-width;
+    height: $unit-4 + $border-width * 2;
+    left: 0;
+    top: ($control-size-sm - $unit-4) / 2 - $border-width;
+    width: $unit-8;
+    &::before {
+      background: $bg-color-light;
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: $unit-4;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
+      width: $unit-4;
+    }
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        left: 14px;
+      }
+    }
+    &:active + .form-icon {
+      &::before {
+        background: $bg-color;
+      }
+    }
+  }
+}
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    background: $bg-color;
+    border: $border-width solid $border-color-dark;
+    border-radius: $border-radius;
+    line-height: $line-height;
+    padding: $control-padding-y $control-padding-x;
+    white-space: nowrap;
+
+    &.addon-sm {
+      font-size: $font-size-sm;
+      padding: $control-padding-y-sm $control-padding-x-sm;
+    }
+
+    &.addon-lg {
+      font-size: $font-size-lg;
+      padding: $control-padding-y-lg $control-padding-x-lg;
+    }
+  }
+
+  .form-input,
+  .form-select {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  .input-group-btn {
+    z-index: $zindex-0;
+  }
+
+  .form-input,
+  .form-select,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:focus {
+      z-index: $zindex-0 + 1;
+    }
+  }
+
+  .form-select {
+    width: auto;
+  }
+
+  &.input-inline {
+    display: inline-flex;
+  }
+}
+
+// Form validation states
+.form-input,
+.form-select {
+  .has-success &,
+  &.is-success {
+    background: lighten($success-color, 53%);
+    border-color: $success-color;
+    &:focus {
+      @include control-shadow($success-color);
+    }
+  }
+
+  .has-error &,
+  &.is-error {
+    background: lighten($error-color, 53%);
+    border-color: $error-color;
+    &:focus {
+      @include control-shadow($error-color);
+    }
+  }
+}
+
+.form-checkbox,
+.form-radio,
+.form-switch {
+  .has-error &,
+  &.is-error {
+    .form-icon {
+      border-color: $error-color;
+    }
+
+    input {
+      &:checked + .form-icon {
+        background: $error-color;
+        border-color: $error-color;
+      }
+
+      &:focus + .form-icon {
+        @include control-shadow($error-color);
+        border-color: $error-color;
+      }
+    }
+  }
+}
+
+.form-checkbox {
+  .has-error &,
+  &.is-error {
+    input {
+      &:indeterminate + .form-icon {
+        background: $error-color;
+        border-color: $error-color;
+      }
+    }
+  }
+}
+
+// validation based on :placeholder-shown (Edge doesn't support it yet)
+.form-input {
+  &:not(:placeholder-shown) {
+    &:invalid {
+      border-color: $error-color;
+      &:focus {
+        @include control-shadow($error-color);
+        background: lighten($error-color, 53%);
+      }
+
+      & + .form-input-hint {
+        color: $error-color;
+      }
+    }
+  }
+}
+
+// Form disabled and readonly
+.form-input,
+.form-select {
+  &:disabled,
+  &.disabled {
+    background-color: $bg-color-dark;
+    cursor: not-allowed;
+    opacity: .5;
+  }
+}
+
+.form-input {
+  &[readonly] {
+    background-color: $bg-color;
+  }
+}
+
+input {
+  &:disabled,
+  &.disabled {
+    & + .form-icon {
+      background: $bg-color-dark;
+      cursor: not-allowed;
+      opacity: .5;
+    }
+  }
+}
+
+.form-switch {
+  input {
+    &:disabled,
+    &.disabled {
+      & + .form-icon::before {
+        background: $bg-color-light;
+      }
+    }
+  }
+}
+
+// Form horizontal
+.form-horizontal {
+  padding: $layout-spacing 0;
+
+  .form-group {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+// Form inline
+.form-inline {
+  display: inline-block;
+}
diff --git a/public/css/spectre-0.5.8/src/_hero.scss b/public/css/spectre-0.5.8/src/_hero.scss
new file mode 100644
index 0000000..0044461
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_hero.scss
@@ -0,0 +1,22 @@
+// Hero
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+
+  &.hero-sm {
+    padding-bottom: 2rem;
+    padding-top: 2rem;
+  }
+
+  &.hero-lg {
+    padding-bottom: 8rem;
+    padding-top: 8rem;
+  }
+
+  .hero-body {
+    padding: $layout-spacing;
+  }
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/_icons.scss b/public/css/spectre-0.5.8/src/_icons.scss
new file mode 100644
index 0000000..4f3c5ce
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_icons.scss
@@ -0,0 +1,5 @@
+// CSS Icons
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/_labels.scss b/public/css/spectre-0.5.8/src/_labels.scss
new file mode 100644
index 0000000..ca693cd
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_labels.scss
@@ -0,0 +1,34 @@
+// Labels
+.label {
+  @include label-base();
+  @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
+  display: inline-block;
+
+  // Label rounded
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: .4rem;
+    padding-right: .4rem; 
+  }
+
+  // Label colors
+  &.label-primary {
+    @include label-variant($light-color, $primary-color);
+  }
+
+  &.label-secondary {
+    @include label-variant($primary-color, $secondary-color);
+  }
+
+  &.label-success {
+    @include label-variant($light-color, $success-color);
+  }
+
+  &.label-warning {
+    @include label-variant($light-color, $warning-color);
+  }
+
+  &.label-error {
+    @include label-variant($light-color, $error-color);
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_layout.scss b/public/css/spectre-0.5.8/src/_layout.scss
new file mode 100644
index 0000000..1f6b77c
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_layout.scss
@@ -0,0 +1,444 @@
+// Layout
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
+  width: 100%;
+
+  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
+
+  &.grid-xl {
+    max-width: $grid-spacing * 2 + $size-xl;
+  }
+
+  &.grid-lg {
+    max-width: $grid-spacing * 2 + $size-lg;
+  }
+
+  &.grid-md {
+    max-width: $grid-spacing * 2 + $size-md;
+  }
+
+  &.grid-sm {
+    max-width: $grid-spacing * 2 + $size-sm;
+  }
+
+  &.grid-xs {
+    max-width: $grid-spacing * 2 + $size-xs;
+  }
+}
+
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+
+// Responsive grid system
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$layout-spacing;
+  margin-right: -$layout-spacing;
+
+  &.col-gapless {
+    margin-left: 0;
+    margin-right: 0;
+
+    & > .column {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  &.col-oneline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+}
+.column {
+  flex: 1;
+  max-width: 100%;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1,
+  &.col-auto {
+    flex: none;
+  }
+}
+.col-12 {
+  width: 100%;
+}
+.col-11 {
+  width: 91.66666667%;
+}
+.col-10 {
+  width: 83.33333333%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-8 {
+  width: 66.66666667%;
+}
+.col-7 {
+  width: 58.33333333%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-5 {
+  width: 41.66666667%;
+}
+.col-4 {
+  width: 33.33333333%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-2 {
+  width: 16.66666667%;
+}
+.col-1 {
+  width: 8.33333333%;
+}
+.col-auto {
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+.col-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.col-ml-auto {
+  margin-left: auto;
+}
+.col-mr-auto {
+  margin-right: auto;
+}
+@media (max-width: $size-xl) {
+  .col-xl-12,
+  .col-xl-11,
+  .col-xl-10,
+  .col-xl-9,
+  .col-xl-8,
+  .col-xl-7,
+  .col-xl-6,
+  .col-xl-5,
+  .col-xl-4,
+  .col-xl-3,
+  .col-xl-2,
+  .col-xl-1,
+  .col-xl-auto {
+    flex: none;
+  }
+  .col-xl-12 {
+    width: 100%;
+  }
+  .col-xl-11 {
+    width: 91.66666667%;
+  }
+  .col-xl-10 {
+    width: 83.33333333%;
+  }
+  .col-xl-9 {
+    width: 75%;
+  }
+  .col-xl-8 {
+    width: 66.66666667%;
+  }
+  .col-xl-7 {
+    width: 58.33333333%;
+  }
+  .col-xl-6 {
+    width: 50%;
+  }
+  .col-xl-5 {
+    width: 41.66666667%;
+  }
+  .col-xl-4 {
+    width: 33.33333333%;
+  }
+  .col-xl-3 {
+    width: 25%;
+  }
+  .col-xl-2 {
+    width: 16.66666667%;
+  }
+  .col-xl-1 {
+    width: 8.33333333%;
+  }
+  .col-xl-auto {
+    width: auto;
+  }
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
+}
+@media (max-width: $size-lg) {
+  .col-lg-12,
+  .col-lg-11,
+  .col-lg-10,
+  .col-lg-9,
+  .col-lg-8,
+  .col-lg-7,
+  .col-lg-6,
+  .col-lg-5,
+  .col-lg-4,
+  .col-lg-3,
+  .col-lg-2,
+  .col-lg-1,
+  .col-lg-auto {
+    flex: none;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+  .col-lg-auto {
+    width: auto;
+  }
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
+}
+@media (max-width: $size-md) {
+  .col-md-12,
+  .col-md-11,
+  .col-md-10,
+  .col-md-9,
+  .col-md-8,
+  .col-md-7,
+  .col-md-6,
+  .col-md-5,
+  .col-md-4,
+  .col-md-3,
+  .col-md-2,
+  .col-md-1,
+  .col-md-auto {
+    flex: none;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+  .col-md-auto {
+    width: auto;
+  }
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
+}
+@media (max-width: $size-sm) {
+  .col-sm-12,
+  .col-sm-11,
+  .col-sm-10,
+  .col-sm-9,
+  .col-sm-8,
+  .col-sm-7,
+  .col-sm-6,
+  .col-sm-5,
+  .col-sm-4,
+  .col-sm-3,
+  .col-sm-2,
+  .col-sm-1,
+  .col-sm-auto {
+    flex: none;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+  .col-sm-auto {
+    width: auto;
+  }
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
+}
+@media (max-width: $size-xs) {
+  .col-xs-12,
+  .col-xs-11,
+  .col-xs-10,
+  .col-xs-9,
+  .col-xs-8,
+  .col-xs-7,
+  .col-xs-6,
+  .col-xs-5,
+  .col-xs-4,
+  .col-xs-3,
+  .col-xs-2,
+  .col-xs-1,
+  .col-xs-auto {
+    flex: none;
+  }
+  .col-xs-12 {
+    width: 100%;
+  }
+  .col-xs-11 {
+    width: 91.66666667%;
+  }
+  .col-xs-10 {
+    width: 83.33333333%;
+  }
+  .col-xs-9 {
+    width: 75%;
+  }
+  .col-xs-8 {
+    width: 66.66666667%;
+  }
+  .col-xs-7 {
+    width: 58.33333333%;
+  }
+  .col-xs-6 {
+    width: 50%;
+  }
+  .col-xs-5 {
+    width: 41.66666667%;
+  }
+  .col-xs-4 {
+    width: 33.33333333%;
+  }
+  .col-xs-3 {
+    width: 25%;
+  }
+  .col-xs-2 {
+    width: 16.66666667%;
+  }
+  .col-xs-1 {
+    width: 8.33333333%;
+  }
+  .col-xs-auto {
+    width: auto;
+  }
+  .hide-xs {
+    display: none !important;
+  }
+  .show-xs {
+    display: block !important;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_media.scss b/public/css/spectre-0.5.8/src/_media.scss
new file mode 100644
index 0000000..4029e4c
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_media.scss
@@ -0,0 +1,75 @@
+// Media
+// Image responsive
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+// object-fit support is coming to Microsoft Edge
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
+.img-fit-cover {
+  object-fit: cover;
+}
+
+.img-fit-contain {
+  object-fit: contain;
+}
+
+// Video responsive
+.video-responsive {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
+  }
+
+  iframe,
+  object,
+  embed {
+    border: 0;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+}
+
+video.video-responsive {
+  height: auto;
+  max-width: 100%;
+
+  &::before {
+    content: none;
+  }
+}
+
+.video-responsive-4-3 {
+  &::before {
+    padding-bottom: 75%; // Ratio 4:3
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; // Ratio 1:1
+  }
+}
+
+// Figure
+.figure {
+  margin: 0 0 $layout-spacing 0;
+
+  .figure-caption {
+    color: $gray-color-dark;
+    margin-top: $layout-spacing;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_menus.scss b/public/css/spectre-0.5.8/src/_menus.scss
new file mode 100644
index 0000000..411cada
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_menus.scss
@@ -0,0 +1,66 @@
+// Menus
+.menu {
+  @include shadow-variant(.05rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+  min-width: $control-width-xs;
+  padding: $unit-2;
+  transform: translateY($layout-spacing-sm);
+  z-index: $zindex-3;
+
+  &.menu-nav {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 $unit-2;
+    position: relative;
+    text-decoration: none;
+
+    & > a {
+      border-radius: $border-radius;
+      color: inherit;
+      display: block;
+      margin: 0 (-$unit-2);
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+      &:active,
+      &.active {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+    }
+
+    .form-checkbox,
+    .form-radio,
+    .form-switch {
+      margin: $unit-h 0;
+    }
+
+    & + .menu-item {
+      margin-top: $unit-1;
+    }
+  }
+
+  .menu-badge {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    .label {
+      margin-right: $unit-2;
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/_meters.scss b/public/css/spectre-0.5.8/src/_meters.scss
new file mode 100644
index 0000000..9fd98b0
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_meters.scss
@@ -0,0 +1,57 @@
+// Meters
+// Credit: https://css-tricks.com/html5-meter-element/
+.meter {
+  appearance: none;
+  background: $bg-color;
+  border: 0;
+  border-radius: $border-radius;
+  display: block;
+  width: 100%;
+  height: $unit-4;
+
+  &::-webkit-meter-inner-element {
+    display: block;
+  }
+
+  &::-webkit-meter-bar,
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-meter-bar {
+    background: $bg-color;
+  }
+
+  &::-webkit-meter-optimum-value {
+    background: $success-color;
+  }
+
+  &::-webkit-meter-suboptimum-value {
+    background: $warning-color;
+  }
+
+  &::-webkit-meter-even-less-good-value {
+    background: $error-color;
+  }
+
+  &::-moz-meter-bar,
+  &:-moz-meter-optimum,
+  &:-moz-meter-sub-optimum,
+  &:-moz-meter-sub-sub-optimum {
+    border-radius: $border-radius;
+  }
+
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: $success-color;
+  }
+
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: $warning-color;
+  }
+
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: $error-color;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_mixins.scss b/public/css/spectre-0.5.8/src/_mixins.scss
new file mode 100644
index 0000000..d3a28d5
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_mixins.scss
@@ -0,0 +1,10 @@
+// Mixins
+@import "mixins/avatar";
+@import "mixins/button";
+@import "mixins/clearfix";
+@import "mixins/color";
+@import "mixins/label";
+@import "mixins/position";
+@import "mixins/shadow";
+@import "mixins/text";
+@import "mixins/toast";
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/_modals.scss b/public/css/spectre-0.5.8/src/_modals.scss
new file mode 100644
index 0000000..a7b3f10
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_modals.scss
@@ -0,0 +1,87 @@
+// Modals
+.modal {
+  align-items: center;
+  bottom: 0;
+  display: none;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: $layout-spacing;
+  position: fixed;
+  right: 0;
+  top: 0;
+
+  &:target,
+  &.active {
+    display: flex;
+    opacity: 1;
+    z-index: $zindex-4;
+
+    .modal-overlay {
+      background: rgba($bg-color, .75);
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .modal-container {
+      animation: slide-down .2s ease 1;
+      z-index: $zindex-0;
+    }
+  }
+
+  &.modal-sm {
+    .modal-container {
+      max-width: $control-width-sm;
+      padding: 0 $unit-2;
+    }
+  }
+
+  &.modal-lg {
+    .modal-overlay {
+      background: $bg-color-light;
+    }
+
+    .modal-container {
+      box-shadow: none;
+      max-width: $control-width-lg;
+    }
+  }
+}
+
+.modal-container {
+  @include shadow-variant(.2rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  max-height: 75vh;
+  max-width: $control-width-md;
+  padding: 0 $unit-4;
+  width: 100%;
+
+  &.modal-fullheight {
+    max-height: 100vh;
+  }
+
+  .modal-header {
+    color: $dark-color;
+    padding: $unit-4;
+  }
+
+  .modal-body {
+    overflow-y: auto;
+    padding: $unit-4;
+    position: relative;
+  }
+
+  .modal-footer {
+    padding: $unit-4;
+    text-align: right;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_navbar.scss b/public/css/spectre-0.5.8/src/_navbar.scss
new file mode 100755
index 0000000..1164296
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_navbar.scss
@@ -0,0 +1,28 @@
+// Navbar
+.navbar {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .navbar-section {
+    align-items: center;
+    display: flex;
+    flex: 1 0 0;
+
+    &:not(:first-child):last-child {
+      justify-content: flex-end;
+    }
+  }
+
+  .navbar-center {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  .navbar-brand {
+    font-size: $font-size-lg;
+    text-decoration: none;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_navs.scss b/public/css/spectre-0.5.8/src/_navs.scss
new file mode 100644
index 0000000..4bedc27
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_navs.scss
@@ -0,0 +1,34 @@
+// Navs
+.nav {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: $unit-1 0;
+
+  .nav-item {
+    a {
+      color: $gray-color-dark;
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+    }
+    &.active {
+      & > a {
+        color: darken($gray-color-dark, 10%);
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  & .nav {
+    margin-bottom: $unit-2;
+    margin-left: $unit-4;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_normalize.scss b/public/css/spectre-0.5.8/src/_normalize.scss
new file mode 100644
index 0000000..a098a84
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_normalize.scss
@@ -0,0 +1,446 @@
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8 (removed).
+ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * Modify default styling of address.
+ */
+
+address {
+  font-style: normal;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
+ */
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $mono-font-family; /* 1 (changed) */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-. (Removed)
+ */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+  font-weight: 400; /* (added) */
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule (removed).
+ */
+
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+  outline: none;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/public/css/spectre-0.5.8/src/_off-canvas.scss b/public/css/spectre-0.5.8/src/_off-canvas.scss
new file mode 100644
index 0000000..f3b8b9f
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_off-canvas.scss
@@ -0,0 +1,95 @@
+// Off canvas menus
+$off-canvas-breakpoint: $size-lg !default;
+
+.off-canvas {
+  display: flex;
+  flex-flow: nowrap;
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  .off-canvas-toggle {
+    display: block;
+    position: absolute;
+    top: $layout-spacing;
+    transition: none;
+    z-index: $zindex-0;
+    @if $rtl == true {
+      right: $layout-spacing;
+    } @else {
+      left: $layout-spacing;
+    }
+  }
+
+  .off-canvas-sidebar {
+    background: $bg-color;
+    bottom: 0;
+    min-width: 10rem;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    transition: transform .25s;
+    z-index: $zindex-2;
+    @if $rtl == true {
+      right: 0;
+      transform: translateX(100%);
+    } @else {
+      left: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  .off-canvas-content {
+    flex: 1 1 auto;
+    height: 100%;
+    padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
+  }
+
+  .off-canvas-overlay {
+    background: rgba($dark-color, .1);
+    border-color: transparent;
+    border-radius: 0;
+    bottom: 0;
+    display: none;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .off-canvas-sidebar {
+    &:target,
+    &.active {
+      transform: translateX(0);
+    }
+
+    &:target ~ .off-canvas-overlay,
+    &.active ~ .off-canvas-overlay {
+      display: block;
+      z-index: $zindex-1;
+    }
+  }
+}
+
+// Responsive layout
+@media (min-width: $off-canvas-breakpoint) {
+  .off-canvas {
+    &.off-canvas-sidebar-show {
+      .off-canvas-toggle {
+        display: none;
+      }
+  
+      .off-canvas-sidebar {
+        flex: 0 0 auto;
+        position: relative;
+        transform: none;
+      }
+
+      .off-canvas-overlay {
+        display: none !important;
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_pagination.scss b/public/css/spectre-0.5.8/src/_pagination.scss
new file mode 100644
index 0000000..4c0e011
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_pagination.scss
@@ -0,0 +1,60 @@
+// Pagination
+.pagination {
+  display: flex;
+  list-style: none;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
+
+  .page-item {
+    margin: $unit-1 $unit-o;
+
+    span {
+      display: inline-block;
+      padding: $unit-1 $unit-1;
+    }
+
+    a {
+      border-radius: $border-radius;
+      display: inline-block;
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+    }
+
+    &.disabled {
+      a {
+        cursor: default;
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      a {
+        background: $primary-color;
+        color: $light-color;
+      }
+    }
+
+    &.page-prev,
+    &.page-next {
+      flex: 1 0 50%;
+    }
+
+    &.page-next {
+      text-align: right;
+    }
+
+    .page-item-title {
+      margin: 0;
+    }
+
+    .page-item-subtitle {
+      margin: 0;
+      opacity: .5;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_panels.scss b/public/css/spectre-0.5.8/src/_panels.scss
new file mode 100644
index 0000000..386f96e
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_panels.scss
@@ -0,0 +1,23 @@
+// Panels
+.panel {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .panel-header,
+  .panel-footer {
+    flex: 0 0 auto;
+    padding: $layout-spacing-lg;
+  }
+
+  .panel-nav {
+    flex: 0 0 auto;
+  }
+
+  .panel-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0 $layout-spacing-lg;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_parallax.scss b/public/css/spectre-0.5.8/src/_parallax.scss
new file mode 100644
index 0000000..ea244e5
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_parallax.scss
@@ -0,0 +1,135 @@
+// Parallax
+$parallax-deg: 3deg !default;
+$parallax-offset: 4.5px !default;
+$parallax-offset-z: 50px !default;
+$parallax-perspective: 1000px !default;
+$parallax-scale: .95 !default;
+$parallax-fade-color: rgba(255, 255, 255, .35) !default;
+
+// Mixin: Parallax direction
+@mixin parallax-dir() {
+  height: 50%;
+  outline: none;
+  position: absolute;
+  width: 50%;
+  z-index: $zindex-1;
+}
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    @include shadow-variant(1rem);
+    height: auto;
+    transform: perspective($parallax-perspective);
+    transform-style: preserve-3d;
+    transition: all .4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-front {
+    align-items: center;
+    color: $light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 20px rgba($dark-color, .75);
+    top: 0;
+    transform: translateZ($parallax-offset-z) scale($parallax-scale);
+    transition: transform .4s;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .parallax-top-left {
+    @include parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    @include parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    @include parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    @include parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_popovers.scss b/public/css/spectre-0.5.8/src/_popovers.scss
new file mode 100644
index 0000000..35b6bcd
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_popovers.scss
@@ -0,0 +1,65 @@
+// Popovers
+.popover {
+  display: inline-block;
+  position: relative;
+
+  .popover-container {
+    left: 50%;
+    opacity: 0;
+    padding: $layout-spacing;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform .2s;
+    width: $control-width-sm;
+    z-index: $zindex-3;
+  }
+
+  *:focus + .popover-container,
+  &:hover .popover-container {
+    display: block;
+    opacity: 1;
+    transform: translate(-50%, -100%) scale(1);
+  }
+
+  &.popover-right {
+    .popover-container {
+      left: 100%;
+      top: 50%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(0, -50%) scale(1);
+    }
+  }
+
+  &.popover-bottom {
+    .popover-container {
+      left: 50%;
+      top: 100%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(-50%, 0) scale(1);
+    }
+  }
+
+  &.popover-left {
+    .popover-container {
+      left: 0;
+      top: 50%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(-100%, -50%) scale(1);
+    }
+  }
+
+  .card {
+    @include shadow-variant(.2rem);
+    border: 0;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_progress.scss b/public/css/spectre-0.5.8/src/_progress.scss
new file mode 100644
index 0000000..f173772
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_progress.scss
@@ -0,0 +1,45 @@
+// Progress
+// Credit: https://css-tricks.com/html5-progress-element/
+.progress {
+  appearance: none;
+  background: $bg-color-dark;
+  border: 0;
+  border-radius: $border-radius;
+  color: $primary-color;
+  height: $unit-1;
+  position: relative;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-progress-value {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &::-moz-progress-bar {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &:indeterminate {
+    animation: progress-indeterminate 1.5s linear infinite;
+    background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_sliders.scss b/public/css/spectre-0.5.8/src/_sliders.scss
new file mode 100644
index 0000000..3ff38e8
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_sliders.scss
@@ -0,0 +1,99 @@
+// Sliders
+// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+.slider {
+  appearance: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  height: $unit-6;
+
+  &:focus {
+    @include control-shadow();
+    outline: none;
+  }
+
+  &.tooltip:not([data-tooltip]) {
+    &::after {
+      content: attr(value);
+    }
+  }
+
+  // Slider Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    margin-top: -($unit-3 - $unit-h) / 2;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+  &::-moz-range-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+  &::-ms-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    &::-webkit-slider-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-moz-range-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-ms-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+  }
+
+  // Slider Track
+  &::-webkit-slider-runnable-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-moz-range-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-ms-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: $primary-color;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_steps.scss b/public/css/spectre-0.5.8/src/_steps.scss
new file mode 100644
index 0000000..f642ff8
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_steps.scss
@@ -0,0 +1,71 @@
+// Steps
+.step {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: $unit-1 0;
+  width: 100%;
+
+  .step-item {
+    flex: 1 1 0;
+    margin-top: 0;
+    min-height: 1rem;
+    text-align: center;
+    position: relative;
+
+    &:not(:first-child)::before {
+      background: $primary-color;
+      content: "";
+      height: 2px;
+      left: -50%;
+      position: absolute;
+      top: 9px;
+      width: 100%;
+    }
+
+    a {
+      color: $primary-color;
+      display: inline-block;
+      padding: 20px 10px 0;
+      text-decoration: none;
+
+      &::before {
+        background: $primary-color;
+        border: $border-width-lg solid $light-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: $unit-3;
+        left: 50%;
+        position: absolute;
+        top: $unit-1;
+        transform: translateX(-50%);
+        width: $unit-3;
+        z-index: $zindex-0;
+      }
+    }
+
+    &.active {
+      a {
+        &::before {
+          background: $light-color;
+          border: $border-width-lg solid $primary-color;
+        }
+      }
+
+      & ~ .step-item {
+        &::before {
+          background: $border-color;
+        }
+
+        a {
+          color: $gray-color;
+
+          &::before {
+            background: $border-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_tables.scss b/public/css/spectre-0.5.8/src/_tables.scss
new file mode 100644
index 0000000..656c03e
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_tables.scss
@@ -0,0 +1,57 @@
+// Tables
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  @if $rtl == true {
+    text-align: right;
+  } @else {
+    text-align: left;
+  }
+
+  &.table-striped {
+    tbody {
+      tr:nth-of-type(odd) {
+        background: $bg-color;
+      }
+    }
+  }
+
+  &,
+  &.table-striped {
+    tbody {
+      tr {
+        &.active {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  &.table-hover {
+    tbody {
+      tr {
+        &:hover {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  // Scollable tables
+  &.table-scroll {
+    display: block;
+    overflow-x: auto;
+    padding-bottom: .75rem;
+    white-space: nowrap;
+  }
+
+  td,
+  th {
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
+  }
+  th {
+    border-bottom-width: $border-width-lg;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_tabs.scss b/public/css/spectre-0.5.8/src/_tabs.scss
new file mode 100644
index 0000000..0dcbaf3
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_tabs.scss
@@ -0,0 +1,66 @@
+// Tabs
+.tab {
+  align-items: center;
+  border-bottom: $border-width solid $border-color;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: $unit-1 0 ($unit-1 - $border-width) 0;
+
+  .tab-item {
+    margin-top: 0;
+
+    a {
+      border-bottom: $border-width-lg solid transparent;
+      color: inherit;
+      display: block;
+      margin: 0 $unit-2 0 0;
+      padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $link-color;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: $primary-color;
+      color: $link-color;
+    }
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    .btn-clear {
+      margin-top: -$unit-1;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 0;
+      text-align: center;
+
+      a {
+        margin: 0;
+      }
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: $unit-h;
+          top: $unit-h;
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+
+  &:not(.tab-block) {
+    .badge {
+      padding-right: 0;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_tiles.scss b/public/css/spectre-0.5.8/src/_tiles.scss
new file mode 100644
index 0000000..742bbae
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_tiles.scss
@@ -0,0 +1,38 @@
+// Tiles
+.tile {
+  align-content: space-between;
+  align-items: flex-start;
+  display: flex;
+
+  .tile-icon,
+  .tile-action {
+    flex: 0 0 auto;
+  }
+  .tile-content {
+    flex: 1 1 auto;
+    &:not(:first-child) {
+      padding-left: $unit-2;
+    }
+    &:not(:last-child) {
+      padding-right: $unit-2;
+    }
+  }
+  .tile-title,
+  .tile-subtitle {
+    line-height: $line-height;
+  }
+
+  &.tile-centered {
+    align-items: center;
+
+    .tile-content {
+      overflow: hidden;
+    }
+
+    .tile-title,
+    .tile-subtitle {
+      @include text-ellipsis();
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_timelines.scss b/public/css/spectre-0.5.8/src/_timelines.scss
new file mode 100644
index 0000000..c56746d
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_timelines.scss
@@ -0,0 +1,56 @@
+// Timelines
+.timeline {
+  .timeline-item {
+    display: flex;
+    margin-bottom: $unit-6;
+    position: relative;
+    &::before {
+      background: $border-color;
+      content: "";
+      height: 100%;
+      left: 11px;
+      position: absolute;
+      top: $unit-6;
+      width: 2px;
+    }
+
+    .timeline-left {
+      flex: 0 0 auto;
+    }
+
+    .timeline-content {
+      flex: 1 1 auto;
+      padding: 2px 0 2px $layout-spacing-lg;
+    }
+
+    .timeline-icon {
+      align-items: center;
+      border-radius: 50%;
+      color: $light-color;
+      display: flex;
+      height: $unit-6;
+      justify-content: center;
+      text-align: center;
+      width: $unit-6;
+      &::before {
+        border: $border-width-lg solid $primary-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: $unit-2;
+        left: $unit-2;
+        position: absolute;
+        top: $unit-2;
+        width: $unit-2;
+      }
+
+      &.icon-lg {
+        background: $primary-color;
+        line-height: $line-height;
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_toasts.scss b/public/css/spectre-0.5.8/src/_toasts.scss
new file mode 100644
index 0000000..fef15f8
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_toasts.scss
@@ -0,0 +1,48 @@
+// Toasts
+.toast {
+  @include toast-variant($dark-color);
+  border: $border-width solid $dark-color;
+  border-radius: $border-radius;
+  color: $light-color;
+  display: block;
+  padding: $layout-spacing;
+  width: 100%;
+
+  &.toast-primary {
+    @include toast-variant($primary-color);
+  }
+
+  &.toast-success {
+    @include toast-variant($success-color);
+  }
+
+  &.toast-warning {
+    @include toast-variant($warning-color);
+  }
+
+  &.toast-error {
+    @include toast-variant($error-color);
+  }
+
+  a {
+    color: $light-color;
+    text-decoration: underline;
+    
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      opacity: .75;
+    }
+  }
+
+  .btn-clear {
+    margin: $unit-h;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_tooltips.scss b/public/css/spectre-0.5.8/src/_tooltips.scss
new file mode 100644
index 0000000..8693b67
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_tooltips.scss
@@ -0,0 +1,79 @@
+// Tooltips
+.tooltip {
+  position: relative;
+  &::after {
+    background: rgba($dark-color, .95);
+    border-radius: $border-radius;
+    bottom: 100%;
+    color: $light-color;
+    content: attr(data-tooltip);
+    display: block;
+    font-size: $font-size-sm;
+    left: 50%;
+    max-width: $control-width-sm;
+    opacity: 0;
+    overflow: hidden;
+    padding: $unit-1 $unit-2;
+    pointer-events: none;
+    position: absolute;
+    text-overflow: ellipsis;
+    transform: translate(-50%, $unit-2);
+    transition: opacity .2s, transform .2s;
+    white-space: pre;
+    z-index: $zindex-3;
+  }
+  &:focus,
+  &:hover {
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -$unit-1);
+    }
+  }
+  &[disabled],
+  &.disabled {
+    pointer-events: auto;
+  }
+
+  &.tooltip-right {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(-$unit-1, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate($unit-1, 50%);
+      }
+    }
+  }
+
+  &.tooltip-bottom {
+    &::after {
+      bottom: auto;
+      top: 100%;
+      transform: translate(-50%, -$unit-2);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-50%, $unit-1);
+      }
+    }
+  }
+  
+  &.tooltip-left {
+    &::after {
+      bottom: 50%;
+      left: auto;
+      right: 100%;
+      transform: translate($unit-2, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-$unit-1, 50%);
+      }
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_typography.scss b/public/css/spectre-0.5.8/src/_typography.scss
new file mode 100644
index 0000000..bbeb876
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_typography.scss
@@ -0,0 +1,129 @@
+// Typography
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: .5em;
+  margin-top: 0;
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 500;
+}
+h1,
+.h1 {
+  font-size: 2rem;
+}
+h2,
+.h2 {
+  font-size: 1.6rem;
+}
+h3,
+.h3 {
+  font-size: 1.4rem;
+}
+h4,
+.h4 {
+  font-size: 1.2rem;
+}
+h5,
+.h5 {
+  font-size: 1rem;
+}
+h6,
+.h6 {
+  font-size: .8rem;
+}
+
+// Paragraphs
+p {
+  margin: 0 0 $line-height;
+}
+
+// Semantic text elements
+a,
+ins,
+u {
+  text-decoration-skip: ink edges;
+}
+
+abbr[title] {
+  border-bottom: $border-width dotted;
+  cursor: help;
+  text-decoration: none;
+}
+
+kbd {
+  @include label-base();
+  @include label-variant($light-color, $dark-color);
+  font-size: $font-size-sm;
+}
+
+mark {
+  @include label-variant($body-font-color, $highlight-color);
+  border-bottom: $unit-o solid darken($highlight-color, 15%);
+  border-radius: $border-radius;
+  padding: $unit-o $unit-h 0;
+}
+
+// Blockquote
+blockquote {
+  border-left: $border-width-lg solid $border-color;
+  margin-left: 0;
+  padding: $unit-2 $unit-4;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin: $unit-4 0 $unit-4 $unit-4;
+  padding: 0;
+
+  ul,
+  ol {
+    margin: $unit-4 0 $unit-4 $unit-4;
+  }
+
+  li {
+    margin-top: $unit-2;
+  }
+}
+
+ul {
+  list-style: disc inside;
+
+  ul {
+    list-style-type: circle;
+  }
+}
+
+ol {
+  list-style: decimal inside;
+
+  ol {
+    list-style-type: lower-alpha;
+  }
+}
+
+dl {
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin: $unit-2 0 $unit-4 0;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/_utilities.scss b/public/css/spectre-0.5.8/src/_utilities.scss
new file mode 100644
index 0000000..80f1e0b
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_utilities.scss
@@ -0,0 +1,8 @@
+@import "utilities/colors";
+@import "utilities/cursors";
+@import "utilities/display";
+@import "utilities/divider";
+@import "utilities/loading";
+@import "utilities/position";
+@import "utilities/shapes";
+@import "utilities/text";
diff --git a/public/css/spectre-0.5.8/src/_variables.scss b/public/css/spectre-0.5.8/src/_variables.scss
new file mode 100644
index 0000000..7bf1a13
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_variables.scss
@@ -0,0 +1,117 @@
+// Core variables
+$version: "0.5.8";
+
+// Core features
+$rtl: false !default;
+
+// Core colors
+$primary-color: #5755d9 !default;
+$primary-color-dark: darken($primary-color, 3%) !default;
+$primary-color-light: lighten($primary-color, 3%) !default;
+$secondary-color: lighten($primary-color, 37.5%) !default;
+$secondary-color-dark: darken($secondary-color, 3%) !default;
+$secondary-color-light: lighten($secondary-color, 3%) !default;
+
+// Gray colors
+$dark-color: #303742 !default;
+$light-color: #fff !default;
+$gray-color: lighten($dark-color, 55%) !default;
+$gray-color-dark: darken($gray-color, 30%) !default;
+$gray-color-light: lighten($gray-color, 20%) !default;
+
+$border-color: lighten($dark-color, 65%) !default;
+$border-color-dark: darken($border-color, 10%) !default;
+$border-color-light: lighten($border-color, 8%) !default;
+$bg-color: lighten($dark-color, 75%) !default;
+$bg-color-dark: darken($bg-color, 3%) !default;
+$bg-color-light: $light-color !default;
+
+// Control colors
+$success-color: #32b643 !default;
+$warning-color: #ffb700 !default;
+$error-color: #e85600 !default;
+
+// Other colors
+$code-color: #d73e48 !default;
+$highlight-color: #ffe9b3 !default;
+$body-bg: $bg-color-light !default;
+$body-font-color: lighten($dark-color, 5%) !default;
+$link-color: $primary-color !default;
+$link-color-dark: darken($link-color, 10%) !default;
+$link-color-light: lighten($link-color, 10%) !default;
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
+$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
+$fallback-font-family: "Helvetica Neue", sans-serif !default;
+$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
+$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
+$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
+$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
+$body-font-family: $base-font-family, $fallback-font-family !default;
+
+// Unit sizes
+$unit-o: .05rem !default;
+$unit-h: .1rem !default;
+$unit-1: .2rem !default;
+$unit-2: .4rem !default;
+$unit-3: .6rem !default;
+$unit-4: .8rem !default;
+$unit-5: 1rem !default;
+$unit-6: 1.2rem !default;
+$unit-7: 1.4rem !default;
+$unit-8: 1.6rem !default;
+$unit-9: 1.8rem !default;
+$unit-10: 2rem !default;
+$unit-12: 2.4rem !default;
+$unit-16: 3.2rem !default;
+
+// Font sizes
+$html-font-size: 20px !default;
+$html-line-height: 1.5 !default;
+$font-size: .8rem !default;
+$font-size-sm: .7rem !default;
+$font-size-lg: .9rem !default;
+$line-height: 1.2rem !default;
+
+// Sizes
+$layout-spacing: $unit-2 !default;
+$layout-spacing-sm: $unit-1 !default;
+$layout-spacing-lg: $unit-4 !default;
+$border-radius: $unit-h !default;
+$border-width: $unit-o !default;
+$border-width-lg: $unit-h !default;
+$control-size: $unit-9 !default;
+$control-size-sm: $unit-7 !default;
+$control-size-lg: $unit-10 !default;
+$control-padding-x: $unit-2 !default;
+$control-padding-x-sm: $unit-2 * .75 !default;
+$control-padding-x-lg: $unit-2 * 1.5 !default;
+$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
+$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
+$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
+$control-icon-size: .8rem !default;
+
+$control-width-xs: 180px !default;
+$control-width-sm: 320px !default;
+$control-width-md: 640px !default;
+$control-width-lg: 960px !default;
+$control-width-xl: 1280px !default;
+
+// Responsive breakpoints
+$size-xs: 480px !default;
+$size-sm: 600px !default;
+$size-md: 840px !default;
+$size-lg: 960px !default;
+$size-xl: 1280px !default;
+$size-2x: 1440px !default;
+
+$responsive-breakpoint: $size-xs !default;
+
+// Z-index
+$zindex-0: 1 !default;
+$zindex-1: 100 !default;
+$zindex-2: 200 !default;
+$zindex-3: 300 !default;
+$zindex-4: 400 !default;
diff --git a/public/css/spectre-0.5.8/src/_viewer-360.scss b/public/css/spectre-0.5.8/src/_viewer-360.scss
new file mode 100644
index 0000000..c1b8928
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/_viewer-360.scss
@@ -0,0 +1,34 @@
+// 360 Degree Viewer
+
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
+  @for $s from 1 through ($image-number) {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
+      background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
+    }
+  }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
+
+  .viewer-slider {
+    cursor: ew-resize;
+    margin: 1rem;
+    order: 2;
+    width: 60%;
+  }
+
+  .viewer-image {
+    background-position-y: 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    max-width: 100%;
+    order: 1;
+  }
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/icons/_icons-action.scss b/public/css/spectre-0.5.8/src/icons/_icons-action.scss
new file mode 100644
index 0000000..1b952ea
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/icons/_icons-action.scss
@@ -0,0 +1,315 @@
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .45em;
+    width: .45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -.4em 0, .4em 0;
+    border-radius: 50%;
+    height: 3px;
+    width: 3px;
+  }
+}
+
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -.4em, 0 .4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    height: 100%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-cross {
+  &::before {
+    width: 100%;
+  }
+  &::after {
+    height: 100%;
+  }
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    height: .5em;
+    width: .9em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
+}
+
+// Icon stop
+.icon-stop {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    height: $icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .5em;
+    top: .1em;
+    width: $icon-border-width;
+  }
+}
+
+// Icon refresh
+.icon-refresh {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    height: 1em;
+    width: 1em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    height: 0;
+    left: 80%;
+    top: 20%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    height: $icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: .4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    height: .4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: .85em;
+  }
+  &::after {
+    border: .15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    height: 0;
+    left: 5%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon delete
+.icon-delete {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    height: .75em;
+    top: 60%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
+    height: $icon-border-width;
+    top: $icon-border-width/2;
+    width: .5em;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-top: 0;
+    height: .4em;
+    left: 100%;
+    top: .25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: .4em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    border-radius: 75% 0;
+    height: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    height: 1em;
+    left: 15%;
+    width: $icon-border-width;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top-right-radius: $border-radius;
+    height: .65em;
+    top: 35%;
+    left: 60%;
+    width: .8em;
+  }
+}
+
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    height: .9em;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: $border-radius;
+    height: .5em;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: .5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  border-bottom: $icon-border-width solid currentColor;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .5em;
+    width: .5em;
+    transform: translate(-50%, -60%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    height: .6em;
+    top: 40%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
+}
+
+// Icon copy
+.icon-copy {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    border-right: 0;
+    border-bottom: 0;
+    height: .8em;
+    left: 40%;
+    top: 35%;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    left: 60%;
+    top: 60%;
+    width: .8em;
+  }
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/icons/_icons-core.scss b/public/css/spectre-0.5.8/src/icons/_icons-core.scss
new file mode 100644
index 0000000..9a67ae4
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/icons/_icons-core.scss
@@ -0,0 +1,54 @@
+// Icon variables
+$icon-border-width: $border-width-lg;
+$icon-prefix: "icon";
+
+// Icon base style
+.#{$icon-prefix} {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: inherit;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  text-indent: -9999px;
+  vertical-align: middle;
+  width: 1em;
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  // Icon sizes
+  &.icon-2x {
+    font-size: 1.6rem;
+  }
+
+  &.icon-3x {
+    font-size: 2.4rem;
+  }
+
+  &.icon-4x {
+    font-size: 3.2rem;
+  }
+}
+
+// Component icon support
+.accordion,
+.btn,
+.toast,
+.menu {
+  .#{$icon-prefix} {
+    vertical-align: -10%;
+  }
+}
+
+.btn-lg {
+  .#{$icon-prefix} {
+    vertical-align: -15%;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/icons/_icons-navigation.scss b/public/css/spectre-0.5.8/src/icons/_icons-navigation.scss
new file mode 100644
index 0000000..92ab231
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/icons/_icons-navigation.scss
@@ -0,0 +1,127 @@
+// Icon arrows
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .65em;
+    width: .65em;
+  }
+}
+
+.icon-arrow-down {
+  &::before {
+    transform: translate(-50%, -75%) rotate(225deg);
+  }
+}
+
+.icon-arrow-left {
+  &::before {
+    transform: translate(-25%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-arrow-right {
+  &::before {
+    transform: translate(-75%, -50%) rotate(135deg);
+  }
+}
+
+.icon-arrow-up {
+  &::before {
+    transform: translate(-50%, -25%) rotate(45deg);
+  }
+}
+
+.icon-back,
+.icon-forward {
+  &::after {
+    background: currentColor;
+    height: $icon-border-width;
+    width: .8em;
+  }
+}
+
+.icon-downward,
+.icon-upward {
+  &::after {
+    background: currentColor;
+    height: .8em;
+    width: $icon-border-width;
+  }
+}
+
+.icon-back {
+  &::after {
+    left: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-downward {
+  &::after {
+    top: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+}
+
+.icon-forward {
+  &::after {
+    left: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+}
+
+.icon-upward {
+  &::after {
+    top: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon caret
+.icon-caret {
+  &::before {
+    border-top: .3em solid currentColor;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+    height: 0;
+    transform: translate(-50%, -25%);
+    width: 0;
+  }
+}
+
+// Icon menu
+.icon-menu {
+  &::before {
+    background: currentColor;
+    box-shadow: 0 -.35em, 0 .35em;
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+    height: 3px;
+    width: 3px;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/icons/_icons-object.scss b/public/css/spectre-0.5.8/src/icons/_icons-object.scss
new file mode 100644
index 0000000..00597d8
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/icons/_icons-object.scss
@@ -0,0 +1,161 @@
+// Icon time
+.icon-time {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    height: .4em;
+    transform: translate(-50%, -75%);
+    width: $icon-border-width;
+  }
+  &::after {
+    background: currentColor;
+    height: .3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: $icon-border-width;
+  }
+}
+
+// Icon mail
+.icon-mail {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    width: 1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    height: .5em;
+    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+    width: .5em;
+  }
+}
+
+// Icon people
+.icon-people {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .45em;
+    top: 25%;
+    width: .45em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 0 0;
+    height: .4em;
+    top: 75%;
+    width: .9em;
+  }
+}
+
+// Icon message
+.icon-message {
+  border: $icon-border-width solid currentColor;
+  border-bottom: 0;
+  border-radius: $border-radius;
+  border-right: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top: 0;
+    height: .8em;
+    left: 65%;
+    top: 40%;
+    width: .7em;
+  }
+  &::after {
+    background: currentColor;
+    border-radius: $border-radius;
+    height: .3em;
+    left: 10%;
+    top: 100%;
+    transform: translate(0, -90%) rotate(45deg);
+    width: $icon-border-width;
+  }
+}
+
+// Icon photo
+.icon-photo {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .25em;
+    left: 35%;
+    top: 35%;
+    width: .25em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    height: .5em;
+    left: 60%;
+    transform: translate(-50%, 25%) rotate(-45deg);
+    width: .5em;
+  }
+}
+
+// Icon link
+.icon-link {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
+    height: .5em;
+    width: .75em;
+  }
+  &::before {
+    transform: translate(-70%, -45%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-30%, -55%) rotate(135deg);
+  }
+}
+
+// Icon location
+.icon-location {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    height: .8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .2em;
+    transform: translate(-50%, -80%);
+    width: .2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -.17em -.1em, .17em -.1em;
+    height: .15em;
+    width: .15em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    height: .5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: .5em;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_avatar.scss b/public/css/spectre-0.5.8/src/mixins/_avatar.scss
new file mode 100644
index 0000000..14617ad
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_avatar.scss
@@ -0,0 +1,6 @@
+// Avatar mixin
+@mixin avatar-base($size: $unit-8) {
+  font-size: $size / 2;
+  height: $size;
+  width: $size;
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_button.scss b/public/css/spectre-0.5.8/src/mixins/_button.scss
new file mode 100644
index 0000000..c90a94b
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_button.scss
@@ -0,0 +1,54 @@
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $light-color;
+      border-left-color: $light-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_clearfix.scss b/public/css/spectre-0.5.8/src/mixins/_clearfix.scss
new file mode 100644
index 0000000..db6895f
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_clearfix.scss
@@ -0,0 +1,8 @@
+// Clearfix mixin
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_color.scss b/public/css/spectre-0.5.8/src/mixins/_color.scss
new file mode 100644
index 0000000..697d0c3
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_color.scss
@@ -0,0 +1,27 @@
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color !important;
+
+    @if (lightness($color) < 60) {
+      color: $light-color;
+    }
+  }
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color !important;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+    &:visited {
+      color: lighten($color, 5%);
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_label.scss b/public/css/spectre-0.5.8/src/mixins/_label.scss
new file mode 100644
index 0000000..1574f02
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_label.scss
@@ -0,0 +1,11 @@
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1.25;
+  padding: .1rem .2rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_position.scss b/public/css/spectre-0.5.8/src/mixins/_position.scss
new file mode 100644
index 0000000..98b5cfc
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_position.scss
@@ -0,0 +1,65 @@
+// Margin utility mixin
+@mixin margin-variant($id: 1, $size: $unit-1) {
+  .m-#{$id} {
+    margin: $size !important;
+  }
+
+  .mb-#{$id} {
+    margin-bottom: $size !important;
+  }
+
+  .ml-#{$id} {
+    margin-left: $size !important;
+  }
+
+  .mr-#{$id} {
+    margin-right: $size !important;
+  }
+
+  .mt-#{$id} {
+    margin-top: $size !important;
+  }
+
+  .mx-#{$id} {
+    margin-left: $size !important;
+    margin-right: $size !important;
+  }
+
+  .my-#{$id} {
+    margin-bottom: $size !important;
+    margin-top: $size !important;
+  }
+}
+
+// Padding utility mixin
+@mixin padding-variant($id: 1, $size: $unit-1) {
+  .p-#{$id} {
+    padding: $size !important;
+  }
+
+  .pb-#{$id} {
+    padding-bottom: $size !important;
+  }
+
+  .pl-#{$id} {
+    padding-left: $size !important;
+  }
+
+  .pr-#{$id} {
+    padding-right: $size !important;
+  }
+
+  .pt-#{$id} {
+    padding-top: $size !important;
+  }
+
+  .px-#{$id} {
+    padding-left: $size !important;
+    padding-right: $size !important;
+  }
+  
+  .py-#{$id} {
+    padding-bottom: $size !important;
+    padding-top: $size !important;
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_shadow.scss b/public/css/spectre-0.5.8/src/mixins/_shadow.scss
new file mode 100644
index 0000000..7984449
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_shadow.scss
@@ -0,0 +1,9 @@
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 .1rem rgba($color, .2);
+}
+
+// Shadow mixin
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_text.scss b/public/css/spectre-0.5.8/src/mixins/_text.scss
new file mode 100644
index 0000000..97dc99d
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_text.scss
@@ -0,0 +1,6 @@
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/public/css/spectre-0.5.8/src/mixins/_toast.scss b/public/css/spectre-0.5.8/src/mixins/_toast.scss
new file mode 100644
index 0000000..fa2bb13
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/mixins/_toast.scss
@@ -0,0 +1,5 @@
+// Toast variant mixin
+@mixin toast-variant($color: $dark-color) {
+  background: rgba($color, .95);
+  border-color: $color;
+}
diff --git a/public/css/spectre-0.5.8/src/spectre-exp.scss b/public/css/spectre-0.5.8/src/spectre-exp.scss
new file mode 100644
index 0000000..33ed3fe
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/spectre-exp.scss
@@ -0,0 +1,18 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Experimentals
+@import "autocomplete";
+@import "calendars";
+@import "carousels";
+@import "comparison-sliders";
+@import "filters";
+@import "meters";
+@import "off-canvas";
+@import "parallax";
+@import "progress";
+@import "sliders";
+@import "timelines";
+@import "viewer-360";
diff --git a/public/css/spectre-0.5.8/src/spectre-icons.scss b/public/css/spectre-0.5.8/src/spectre-icons.scss
new file mode 100644
index 0000000..383624e
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/spectre-icons.scss
@@ -0,0 +1,10 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Icons
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";
diff --git a/public/css/spectre-0.5.8/src/spectre.scss b/public/css/spectre-0.5.8/src/spectre.scss
new file mode 100644
index 0000000..cff1fde
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/spectre.scss
@@ -0,0 +1,49 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Reset and dependencies
+@import "normalize";
+@import "base";
+
+// Elements
+@import "typography";
+@import "asian";
+@import "tables";
+@import "buttons";
+@import "forms";
+@import "labels";
+@import "codes";
+@import "media";
+
+// Layout
+@import "layout";
+@import "hero";
+@import "navbar";
+
+// Components
+@import "accordions";
+@import "avatars";
+@import "badges";
+@import "breadcrumbs";
+@import "bars";
+@import "cards";
+@import "chips";
+@import "dropdowns";
+@import "empty";
+@import "menus";
+@import "modals";
+@import "navs";
+@import "pagination";
+@import "panels";
+@import "popovers";
+@import "steps";
+@import "tabs";
+@import "tiles";
+@import "toasts";
+@import "tooltips";
+
+// Utility classes
+@import "animations";
+@import "utilities";
diff --git a/public/css/spectre-0.5.8/src/utilities/_colors.scss b/public/css/spectre-0.5.8/src/utilities/_colors.scss
new file mode 100644
index 0000000..28dd221
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_colors.scss
@@ -0,0 +1,31 @@
+// Text colors
+@include text-color-variant(".text-primary", $primary-color);
+
+@include text-color-variant(".text-secondary", $secondary-color-dark);
+
+@include text-color-variant(".text-gray", $gray-color);
+
+@include text-color-variant(".text-light", $light-color);
+
+@include text-color-variant(".text-dark", $body-font-color);
+
+@include text-color-variant(".text-success", $success-color);
+
+@include text-color-variant(".text-warning", $warning-color);
+
+@include text-color-variant(".text-error", $error-color);
+
+// Background colors
+@include bg-color-variant(".bg-primary", $primary-color);
+
+@include bg-color-variant(".bg-secondary", $secondary-color);
+
+@include bg-color-variant(".bg-dark", $dark-color);
+
+@include bg-color-variant(".bg-gray", $bg-color);
+
+@include bg-color-variant(".bg-success", $success-color);
+
+@include bg-color-variant(".bg-warning", $warning-color);
+
+@include bg-color-variant(".bg-error", $error-color);
diff --git a/public/css/spectre-0.5.8/src/utilities/_cursors.scss b/public/css/spectre-0.5.8/src/utilities/_cursors.scss
new file mode 100644
index 0000000..bd755c8
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_cursors.scss
@@ -0,0 +1,24 @@
+// Cursors
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/utilities/_display.scss b/public/css/spectre-0.5.8/src/utilities/_display.scss
new file mode 100644
index 0000000..c6248e0
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_display.scss
@@ -0,0 +1,44 @@
+// Display
+.d-block {
+  display: block;
+}
+.d-inline {
+  display: inline;
+}
+.d-inline-block {
+  display: inline-block;
+}
+.d-flex {
+  display: flex;
+}
+.d-inline-flex {
+  display: inline-flex;
+}
+.d-none,
+.d-hide {
+  display: none !important;
+}
+.d-visible {
+  visibility: visible;
+}
+.d-invisible {
+  visibility: hidden;
+}
+.text-hide {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
+}
+.text-assistive {
+  border: 0;
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
diff --git a/public/css/spectre-0.5.8/src/utilities/_divider.scss b/public/css/spectre-0.5.8/src/utilities/_divider.scss
new file mode 100644
index 0000000..e6c09d2
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_divider.scss
@@ -0,0 +1,50 @@
+// Divider
+.divider,
+.divider-vert {
+  display: block;
+  position: relative;
+
+  &[data-content]::after {
+    background: $bg-color-light;
+    color: $gray-color;
+    content: attr(data-content);
+    display: inline-block;
+    font-size: $font-size-sm;
+    padding: 0 $unit-2;
+    transform: translateY(-$font-size-sm + $border-width);
+  }
+}
+
+.divider {
+  border-top: $border-width solid $border-color-light;
+  height: $border-width;
+  margin: $unit-2 0;
+
+  &[data-content] {
+    margin: $unit-4 0;
+  }
+}
+
+.divider-vert {
+  display: block;
+  padding: $unit-4;
+
+  &::before {
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: $unit-2;
+    transform: translateX(-50%);
+  }
+
+  &[data-content]::after {
+    left: 50%;
+    padding: $unit-1 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/utilities/_loading.scss b/public/css/spectre-0.5.8/src/utilities/_loading.scss
new file mode 100644
index 0000000..1b4ea60
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_loading.scss
@@ -0,0 +1,34 @@
+// Loading
+.loading {
+  color: transparent !important;
+  min-height: $unit-4;
+  pointer-events: none;
+  position: relative;
+  &::after {
+    animation: loading 500ms infinite linear;
+    border: $border-width-lg solid $primary-color;
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: $unit-4;
+    left: 50%;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
+    position: absolute;
+    top: 50%;
+    width: $unit-4;
+    z-index: $zindex-0;
+  }
+
+  &.loading-lg {
+    min-height: $unit-10;
+    &::after {
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
+    }
+  }
+}
diff --git a/public/css/spectre-0.5.8/src/utilities/_position.scss b/public/css/spectre-0.5.8/src/utilities/_position.scss
new file mode 100644
index 0000000..c1a7f75
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_position.scss
@@ -0,0 +1,54 @@
+// Position
+.clearfix {
+  @include clearfix();
+}
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.p-relative {
+  position: relative !important;
+}
+
+.p-absolute {
+  position: absolute !important;
+}
+
+.p-fixed {
+  position: fixed !important;
+}
+
+.p-sticky {
+  position: sticky !important;
+}
+
+.p-centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flex-centered {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+// Spacing
+@include margin-variant(0, 0);
+
+@include margin-variant(1, $unit-1);
+
+@include margin-variant(2, $unit-2);
+
+@include padding-variant(0, 0);
+
+@include padding-variant(1, $unit-1);
+
+@include padding-variant(2, $unit-2);
diff --git a/public/css/spectre-0.5.8/src/utilities/_shapes.scss b/public/css/spectre-0.5.8/src/utilities/_shapes.scss
new file mode 100644
index 0000000..23e131e
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_shapes.scss
@@ -0,0 +1,8 @@
+// Shapes
+.s-rounded {
+  border-radius: $border-radius;
+}
+
+.s-circle {
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/public/css/spectre-0.5.8/src/utilities/_text.scss b/public/css/spectre-0.5.8/src/utilities/_text.scss
new file mode 100644
index 0000000..67793ac
--- /dev/null
+++ b/public/css/spectre-0.5.8/src/utilities/_text.scss
@@ -0,0 +1,64 @@
+// Text
+// Text alignment utilities
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+// Text transform utilities
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+// Text style utilities
+.text-normal {
+  font-weight: normal;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-large {
+  font-size: 1.2em;
+}
+
+// Text overflow utilities
+.text-ellipsis {
+  @include text-ellipsis();
+}
+
+.text-clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.text-break {
+  hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word;
+}
diff --git a/public/css/spectre-exp.min.css b/public/css/spectre-exp.min.css
new file mode 100644
index 0000000..942cf59
--- /dev/null
+++ b/public/css/spectre-exp.min.css
@@ -0,0 +1 @@
+/*! Spectre.css Experimentals v0.5.8 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #dadee4;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f7f8f9;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f7f8f9;border-bottom:.05rem solid #dadee4;color:#bcc3ce;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#66758c}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#66758c;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #dadee4;border-right:.05rem solid #dadee4;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-container .carousel-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-container .carousel-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-container .carousel-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-container .carousel-item:nth-of-type(8){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-nav .nav-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-nav .nav-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-nav .nav-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-nav .nav-item:nth-of-type(8){color:#f7f8f9}.carousel{background:#f7f8f9;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(247,248,249,.25);border-color:rgba(247,248,249,.5);color:#f7f8f9;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(247,248,249,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(48,55,66,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f8f9;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f7f8f9}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f7f8f9;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(48,55,66,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(48,55,66,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(48,55,66,.75);top:0;transform:translateZ(50px) scale(.95);transition:transform .4s;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#eef0f3;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#eef0f3 linear-gradient(to right,#5755d9 30%,#eef0f3 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#f7f8f9;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#dadee4;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{align-items:center;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;height:1.2rem;justify-content:center;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1.2rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}.viewer-360{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-direction:column;flex-direction:column}.viewer-360 .viewer-slider[max="36"][value="1"]+.viewer-image{background-position-y:0}.viewer-360 .viewer-slider[max="36"][value="2"]+.viewer-image{background-position-y:2.8571428571%}.viewer-360 .viewer-slider[max="36"][value="3"]+.viewer-image{background-position-y:5.7142857143%}.viewer-360 .viewer-slider[max="36"][value="4"]+.viewer-image{background-position-y:8.5714285714%}.viewer-360 .viewer-slider[max="36"][value="5"]+.viewer-image{background-position-y:11.4285714286%}.viewer-360 .viewer-slider[max="36"][value="6"]+.viewer-image{background-position-y:14.2857142857%}.viewer-360 .viewer-slider[max="36"][value="7"]+.viewer-image{background-position-y:17.1428571429%}.viewer-360 .viewer-slider[max="36"][value="8"]+.viewer-image{background-position-y:20%}.viewer-360 .viewer-slider[max="36"][value="9"]+.viewer-image{background-position-y:22.8571428571%}.viewer-360 .viewer-slider[max="36"][value="10"]+.viewer-image{background-position-y:25.7142857143%}.viewer-360 .viewer-slider[max="36"][value="11"]+.viewer-image{background-position-y:28.5714285714%}.viewer-360 .viewer-slider[max="36"][value="12"]+.viewer-image{background-position-y:31.4285714286%}.viewer-360 .viewer-slider[max="36"][value="13"]+.viewer-image{background-position-y:34.2857142857%}.viewer-360 .viewer-slider[max="36"][value="14"]+.viewer-image{background-position-y:37.1428571429%}.viewer-360 .viewer-slider[max="36"][value="15"]+.viewer-image{background-position-y:40%}.viewer-360 .viewer-slider[max="36"][value="16"]+.viewer-image{background-position-y:42.8571428571%}.viewer-360 .viewer-slider[max="36"][value="17"]+.viewer-image{background-position-y:45.7142857143%}.viewer-360 .viewer-slider[max="36"][value="18"]+.viewer-image{background-position-y:48.5714285714%}.viewer-360 .viewer-slider[max="36"][value="19"]+.viewer-image{background-position-y:51.4285714286%}.viewer-360 .viewer-slider[max="36"][value="20"]+.viewer-image{background-position-y:54.2857142857%}.viewer-360 .viewer-slider[max="36"][value="21"]+.viewer-image{background-position-y:57.1428571429%}.viewer-360 .viewer-slider[max="36"][value="22"]+.viewer-image{background-position-y:60%}.viewer-360 .viewer-slider[max="36"][value="23"]+.viewer-image{background-position-y:62.8571428571%}.viewer-360 .viewer-slider[max="36"][value="24"]+.viewer-image{background-position-y:65.7142857143%}.viewer-360 .viewer-slider[max="36"][value="25"]+.viewer-image{background-position-y:68.5714285714%}.viewer-360 .viewer-slider[max="36"][value="26"]+.viewer-image{background-position-y:71.4285714286%}.viewer-360 .viewer-slider[max="36"][value="27"]+.viewer-image{background-position-y:74.2857142857%}.viewer-360 .viewer-slider[max="36"][value="28"]+.viewer-image{background-position-y:77.1428571429%}.viewer-360 .viewer-slider[max="36"][value="29"]+.viewer-image{background-position-y:80%}.viewer-360 .viewer-slider[max="36"][value="30"]+.viewer-image{background-position-y:82.8571428571%}.viewer-360 .viewer-slider[max="36"][value="31"]+.viewer-image{background-position-y:85.7142857143%}.viewer-360 .viewer-slider[max="36"][value="32"]+.viewer-image{background-position-y:88.5714285714%}.viewer-360 .viewer-slider[max="36"][value="33"]+.viewer-image{background-position-y:91.4285714286%}.viewer-360 .viewer-slider[max="36"][value="34"]+.viewer-image{background-position-y:94.2857142857%}.viewer-360 .viewer-slider[max="36"][value="35"]+.viewer-image{background-position-y:97.1428571429%}.viewer-360 .viewer-slider[max="36"][value="36"]+.viewer-image{background-position-y:100%}.viewer-360 .viewer-slider{cursor:ew-resize;-ms-flex-order:2;margin:1rem;order:2;width:60%}.viewer-360 .viewer-image{background-position-y:0;background-repeat:no-repeat;background-size:100%;-ms-flex-order:1;max-width:100%;order:1}
\ No newline at end of file
diff --git a/public/css/spectre-icons.min.css b/public/css/spectre-icons.min.css
new file mode 100644
index 0000000..9b6167c
--- /dev/null
+++ b/public/css/spectre-icons.min.css
@@ -0,0 +1 @@
+/*! Spectre.css Icons v0.5.8 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;height:.5em;width:.6em}.icon-flag::before{background:currentColor;height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.1em,.17em -.1em;height:.15em;width:.15em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}
\ No newline at end of file
diff --git a/public/css/spectre.min.css b/public/css/spectre.min.css
new file mode 100644
index 0000000..9550fa4
--- /dev/null
+++ b/public/css/spectre.min.css
@@ -0,0 +1 @@
+/*! Spectre.css v0.5.8 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#3b4351;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1.2rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#303742;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.25;padding:.1rem .2rem}mark{background:#ffe9b3;border-bottom:.05rem solid #ffd367;border-radius:.1rem;color:#3b4351;padding:.05rem .1rem 0}blockquote{border-left:.1rem solid #dadee4;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}.lang-zh,.lang-zh-hans,html:lang(zh),html:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}.lang-zh-hant,html:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}.lang-ja,html:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}.lang-ko,html:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.lang-cjk ins,.lang-cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.lang-cjk del+del,.lang-cjk del+s,.lang-cjk ins+ins,.lang-cjk ins+u,.lang-cjk s+del,.lang-cjk s+s,.lang-cjk u+ins,.lang-cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f7f8f9}.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}.table.table-hover tbody tr:hover{background:#eef0f3}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #dadee4;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:1rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:.1rem;text-decoration:none;width:1rem}.btn.btn-clear:focus,.btn.btn-clear:hover{background:rgba(247,248,249,.5);opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1.2rem;padding:.3rem 0}.form-label.label-sm{font-size:.7rem;padding:.1rem 0}.form-label.label-lg{font-size:.9rem;padding:.4rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #bcc3ce;border-radius:.1rem;color:#3b4351;display:block;font-size:.8rem;height:1.8rem;line-height:1.2rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:background .2s,border .2s,box-shadow .2s,color .2s;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#bcc3ce}.form-input:-ms-input-placeholder{color:#bcc3ce}.form-input::-ms-input-placeholder{color:#bcc3ce}.form-input::placeholder{color:#bcc3ce}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input,textarea.form-input.input-lg,textarea.form-input.input-sm{height:auto}.form-input-hint{color:#bcc3ce;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.3rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.3rem}.form-checkbox,.form-radio,.form-switch{display:block;line-height:1.2rem;margin:.2rem 0;min-height:1.4rem;padding:.1rem .4rem .1rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #bcc3ce;cursor:pointer;display:inline-block;position:absolute;transition:background .2s,border .2s,box-shadow .2s,color .2s}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#eef0f3}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:9px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#bcc3ce;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:background .2s,border .2s,box-shadow .2s,color .2s,left .2s;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f7f8f9}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f7f8f9;border:.05rem solid #bcc3ce;border-radius:.1rem;line-height:1.2rem;padding:.25rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.05rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.35rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{background:#f9fdfa;border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{background:#fffaf7;border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error input:indeterminate+.form-icon,.has-error .form-checkbox input:indeterminate+.form-icon{background:#e85600;border-color:#e85600}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{background:#fffaf7;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#eef0f3;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f7f8f9}input.disabled+.form-icon,input:disabled+.form-icon{background:#eef0f3;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.form-inline{display:inline-block}.label{background:#eef0f3;border-radius:.1rem;color:#455060;display:inline-block;line-height:1.25;padding:.1rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.25;padding:.1rem .2rem}.code{border-radius:.1rem;color:#3b4351;position:relative}.code::before{color:#bcc3ce;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f7f8f9;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#66758c;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9,.column.col-auto{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.col-xl-auto{width:auto}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-auto{width:auto}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-auto{width:auto}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-auto{width:auto}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-auto{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-auto{width:auto}.hide-xs{display:none!important}.show-xs{display:block!important}}.hero{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:4rem;padding-top:4rem}.hero.hero-sm{padding-bottom:2rem;padding-top:2rem}.hero.hero-lg{padding-bottom:8rem;padding-top:8rem}.hero .hero-body{padding:.4rem}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:transform .25s}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .25s}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#bcc3ce;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.05rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#66758c;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#66758c}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#66758c;content:"/";padding-right:.4rem}.bar{background:#eef0f3;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#eef0f3;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-body{-ms-flex:1 1 auto;flex:1 1 auto}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#eef0f3;border-radius:5rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:320px;overflow:hidden;padding:.2rem .4rem;text-decoration:none;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.chip .btn-clear{border-radius:50%;transform:scale(.75)}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f7f8f9;border-radius:.1rem;color:#66758c;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(48,55,66,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;position:relative;text-decoration:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;height:100%;position:absolute;right:0;top:0}.menu .menu-badge .label{margin-right:.4rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#66758c;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#505c6e;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s;width:320px;z-index:300}.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(48,55,66,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#5755d9;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#dadee4}.step .step-item.active~.step-item a{color:#bcc3ce}.step .step-item.active~.step-item a::before{background:#dadee4}.tab{align-items:center;border-bottom:.05rem solid #dadee4;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1.2rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(48,55,66,.95);border:.05rem solid #303742;border-color:#303742;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.95);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.95);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.95);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.95);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:.1rem}.toast p:last-child{margin-bottom:0}.tooltip{position:relative}.tooltip::after{background:rgba(48,55,66,.95);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:opacity .2s,transform .2s;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9!important}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9!important}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#bcc3ce!important}a.text-gray:focus,a.text-gray:hover{color:#adb6c4}a.text-gray:visited{color:#cbd0d9}.text-light{color:#fff!important}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-dark{color:#3b4351!important}a.text-dark:focus,a.text-dark:hover{color:#303742}a.text-dark:visited{color:#455060}.text-success{color:#32b643!important}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700!important}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600!important}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9!important;color:#fff}.bg-secondary{background:#f1f1fc!important}.bg-dark{background:#303742!important;color:#fff}.bg-gray{background:#f7f8f9!important}.bg-success{background:#32b643!important;color:#fff}.bg-warning{background:#ffb700!important;color:#fff}.bg-error{background:#e85600!important;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #f1f3f5;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #dadee4;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.p-sticky{position:sticky!important;position:-webkit-sticky!important}.p-centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.s-rounded{border-radius:.1rem}.s-circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
diff --git a/public/css/tailwind.compiled.css b/public/css/tailwind.compiled.css
new file mode 100644
index 0000000..607d176
--- /dev/null
+++ b/public/css/tailwind.compiled.css
@@ -0,0 +1,54506 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * 1. Prevent padding and border from affecting element width
+ * https://goo.gl/pYtbK7
+ * 2. Change the default font family in all browsers (opinionated)
+ */
+
+html {
+  box-sizing: border-box; /* 1 */
+  font-family: sans-serif; /* 2 */
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+button {
+  background: transparent;
+  padding: 0;
+}
+
+/**
+ * Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ */
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the system font stack as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ * to override it to ensure consistency even when using the default theme.
+ */
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  line-height: 1.5; /* 2 */
+}
+
+/**
+ * Allow adding a border to an element by just adding a border-width.
+ *
+ * By default, the way the browser specifies that an element should have no
+ * border is by setting it's border-style to `none` in the user-agent
+ * stylesheet.
+ *
+ * In order to easily add borders to elements by just setting the `border-width`
+ * property, we change the default border-style for all elements to `solid`, and
+ * use border-width to hide them instead. This way our `border` utilities only
+ * need to set the `border-width` property instead of the entire `border`
+ * shorthand, making our border utilities much more straightforward to compose.
+ *
+ * https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+
+*,
+*::before,
+*::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: #e2e8f0;
+}
+
+/*
+ * Ensure horizontal rules are visible by default
+ */
+
+hr {
+  border-top-width: 1px;
+}
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+
+img {
+  border-style: solid;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: #a0aec0;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #a0aec0;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+input::-ms-input-placeholder, textarea::-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #a0aec0;
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/**
+ * Make replaced elements `display: block` by default as that's
+ * the behavior you want almost all of the time. Inspired by
+ * CSS Remedy, with `svg` added as well.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their instrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.focus\:sr-only:focus {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.focus\:not-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.bg-fixed {
+  background-attachment: fixed;
+}
+
+.bg-local {
+  background-attachment: local;
+}
+
+.bg-scroll {
+  background-attachment: scroll;
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-black {
+  background-color: #000;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.bg-gray-100 {
+  background-color: #f7fafc;
+}
+
+.bg-gray-200 {
+  background-color: #edf2f7;
+}
+
+.bg-gray-300 {
+  background-color: #e2e8f0;
+}
+
+.bg-gray-400 {
+  background-color: #cbd5e0;
+}
+
+.bg-gray-500 {
+  background-color: #a0aec0;
+}
+
+.bg-gray-600 {
+  background-color: #718096;
+}
+
+.bg-gray-700 {
+  background-color: #4a5568;
+}
+
+.bg-gray-800 {
+  background-color: #2d3748;
+}
+
+.bg-gray-900 {
+  background-color: #1a202c;
+}
+
+.bg-red-100 {
+  background-color: #fff5f5;
+}
+
+.bg-red-200 {
+  background-color: #fed7d7;
+}
+
+.bg-red-300 {
+  background-color: #feb2b2;
+}
+
+.bg-red-400 {
+  background-color: #fc8181;
+}
+
+.bg-red-500 {
+  background-color: #f56565;
+}
+
+.bg-red-600 {
+  background-color: #e53e3e;
+}
+
+.bg-red-700 {
+  background-color: #c53030;
+}
+
+.bg-red-800 {
+  background-color: #9b2c2c;
+}
+
+.bg-red-900 {
+  background-color: #742a2a;
+}
+
+.bg-orange-100 {
+  background-color: #fffaf0;
+}
+
+.bg-orange-200 {
+  background-color: #feebc8;
+}
+
+.bg-orange-300 {
+  background-color: #fbd38d;
+}
+
+.bg-orange-400 {
+  background-color: #f6ad55;
+}
+
+.bg-orange-500 {
+  background-color: #ed8936;
+}
+
+.bg-orange-600 {
+  background-color: #dd6b20;
+}
+
+.bg-orange-700 {
+  background-color: #c05621;
+}
+
+.bg-orange-800 {
+  background-color: #9c4221;
+}
+
+.bg-orange-900 {
+  background-color: #7b341e;
+}
+
+.bg-yellow-100 {
+  background-color: #fffff0;
+}
+
+.bg-yellow-200 {
+  background-color: #fefcbf;
+}
+
+.bg-yellow-300 {
+  background-color: #faf089;
+}
+
+.bg-yellow-400 {
+  background-color: #f6e05e;
+}
+
+.bg-yellow-500 {
+  background-color: #ecc94b;
+}
+
+.bg-yellow-600 {
+  background-color: #d69e2e;
+}
+
+.bg-yellow-700 {
+  background-color: #b7791f;
+}
+
+.bg-yellow-800 {
+  background-color: #975a16;
+}
+
+.bg-yellow-900 {
+  background-color: #744210;
+}
+
+.bg-green-100 {
+  background-color: #f0fff4;
+}
+
+.bg-green-200 {
+  background-color: #c6f6d5;
+}
+
+.bg-green-300 {
+  background-color: #9ae6b4;
+}
+
+.bg-green-400 {
+  background-color: #68d391;
+}
+
+.bg-green-500 {
+  background-color: #48bb78;
+}
+
+.bg-green-600 {
+  background-color: #38a169;
+}
+
+.bg-green-700 {
+  background-color: #2f855a;
+}
+
+.bg-green-800 {
+  background-color: #276749;
+}
+
+.bg-green-900 {
+  background-color: #22543d;
+}
+
+.bg-teal-100 {
+  background-color: #e6fffa;
+}
+
+.bg-teal-200 {
+  background-color: #b2f5ea;
+}
+
+.bg-teal-300 {
+  background-color: #81e6d9;
+}
+
+.bg-teal-400 {
+  background-color: #4fd1c5;
+}
+
+.bg-teal-500 {
+  background-color: #38b2ac;
+}
+
+.bg-teal-600 {
+  background-color: #319795;
+}
+
+.bg-teal-700 {
+  background-color: #2c7a7b;
+}
+
+.bg-teal-800 {
+  background-color: #285e61;
+}
+
+.bg-teal-900 {
+  background-color: #234e52;
+}
+
+.bg-blue-100 {
+  background-color: #ebf8ff;
+}
+
+.bg-blue-200 {
+  background-color: #bee3f8;
+}
+
+.bg-blue-300 {
+  background-color: #90cdf4;
+}
+
+.bg-blue-400 {
+  background-color: #63b3ed;
+}
+
+.bg-blue-500 {
+  background-color: #4299e1;
+}
+
+.bg-blue-600 {
+  background-color: #3182ce;
+}
+
+.bg-blue-700 {
+  background-color: #2b6cb0;
+}
+
+.bg-blue-800 {
+  background-color: #2c5282;
+}
+
+.bg-blue-900 {
+  background-color: #2a4365;
+}
+
+.bg-indigo-100 {
+  background-color: #ebf4ff;
+}
+
+.bg-indigo-200 {
+  background-color: #c3dafe;
+}
+
+.bg-indigo-300 {
+  background-color: #a3bffa;
+}
+
+.bg-indigo-400 {
+  background-color: #7f9cf5;
+}
+
+.bg-indigo-500 {
+  background-color: #667eea;
+}
+
+.bg-indigo-600 {
+  background-color: #5a67d8;
+}
+
+.bg-indigo-700 {
+  background-color: #4c51bf;
+}
+
+.bg-indigo-800 {
+  background-color: #434190;
+}
+
+.bg-indigo-900 {
+  background-color: #3c366b;
+}
+
+.bg-purple-100 {
+  background-color: #faf5ff;
+}
+
+.bg-purple-200 {
+  background-color: #e9d8fd;
+}
+
+.bg-purple-300 {
+  background-color: #d6bcfa;
+}
+
+.bg-purple-400 {
+  background-color: #b794f4;
+}
+
+.bg-purple-500 {
+  background-color: #9f7aea;
+}
+
+.bg-purple-600 {
+  background-color: #805ad5;
+}
+
+.bg-purple-700 {
+  background-color: #6b46c1;
+}
+
+.bg-purple-800 {
+  background-color: #553c9a;
+}
+
+.bg-purple-900 {
+  background-color: #44337a;
+}
+
+.bg-pink-100 {
+  background-color: #fff5f7;
+}
+
+.bg-pink-200 {
+  background-color: #fed7e2;
+}
+
+.bg-pink-300 {
+  background-color: #fbb6ce;
+}
+
+.bg-pink-400 {
+  background-color: #f687b3;
+}
+
+.bg-pink-500 {
+  background-color: #ed64a6;
+}
+
+.bg-pink-600 {
+  background-color: #d53f8c;
+}
+
+.bg-pink-700 {
+  background-color: #b83280;
+}
+
+.bg-pink-800 {
+  background-color: #97266d;
+}
+
+.bg-pink-900 {
+  background-color: #702459;
+}
+
+.hover\:bg-transparent:hover {
+  background-color: transparent;
+}
+
+.hover\:bg-black:hover {
+  background-color: #000;
+}
+
+.hover\:bg-white:hover {
+  background-color: #fff;
+}
+
+.hover\:bg-gray-100:hover {
+  background-color: #f7fafc;
+}
+
+.hover\:bg-gray-200:hover {
+  background-color: #edf2f7;
+}
+
+.hover\:bg-gray-300:hover {
+  background-color: #e2e8f0;
+}
+
+.hover\:bg-gray-400:hover {
+  background-color: #cbd5e0;
+}
+
+.hover\:bg-gray-500:hover {
+  background-color: #a0aec0;
+}
+
+.hover\:bg-gray-600:hover {
+  background-color: #718096;
+}
+
+.hover\:bg-gray-700:hover {
+  background-color: #4a5568;
+}
+
+.hover\:bg-gray-800:hover {
+  background-color: #2d3748;
+}
+
+.hover\:bg-gray-900:hover {
+  background-color: #1a202c;
+}
+
+.hover\:bg-red-100:hover {
+  background-color: #fff5f5;
+}
+
+.hover\:bg-red-200:hover {
+  background-color: #fed7d7;
+}
+
+.hover\:bg-red-300:hover {
+  background-color: #feb2b2;
+}
+
+.hover\:bg-red-400:hover {
+  background-color: #fc8181;
+}
+
+.hover\:bg-red-500:hover {
+  background-color: #f56565;
+}
+
+.hover\:bg-red-600:hover {
+  background-color: #e53e3e;
+}
+
+.hover\:bg-red-700:hover {
+  background-color: #c53030;
+}
+
+.hover\:bg-red-800:hover {
+  background-color: #9b2c2c;
+}
+
+.hover\:bg-red-900:hover {
+  background-color: #742a2a;
+}
+
+.hover\:bg-orange-100:hover {
+  background-color: #fffaf0;
+}
+
+.hover\:bg-orange-200:hover {
+  background-color: #feebc8;
+}
+
+.hover\:bg-orange-300:hover {
+  background-color: #fbd38d;
+}
+
+.hover\:bg-orange-400:hover {
+  background-color: #f6ad55;
+}
+
+.hover\:bg-orange-500:hover {
+  background-color: #ed8936;
+}
+
+.hover\:bg-orange-600:hover {
+  background-color: #dd6b20;
+}
+
+.hover\:bg-orange-700:hover {
+  background-color: #c05621;
+}
+
+.hover\:bg-orange-800:hover {
+  background-color: #9c4221;
+}
+
+.hover\:bg-orange-900:hover {
+  background-color: #7b341e;
+}
+
+.hover\:bg-yellow-100:hover {
+  background-color: #fffff0;
+}
+
+.hover\:bg-yellow-200:hover {
+  background-color: #fefcbf;
+}
+
+.hover\:bg-yellow-300:hover {
+  background-color: #faf089;
+}
+
+.hover\:bg-yellow-400:hover {
+  background-color: #f6e05e;
+}
+
+.hover\:bg-yellow-500:hover {
+  background-color: #ecc94b;
+}
+
+.hover\:bg-yellow-600:hover {
+  background-color: #d69e2e;
+}
+
+.hover\:bg-yellow-700:hover {
+  background-color: #b7791f;
+}
+
+.hover\:bg-yellow-800:hover {
+  background-color: #975a16;
+}
+
+.hover\:bg-yellow-900:hover {
+  background-color: #744210;
+}
+
+.hover\:bg-green-100:hover {
+  background-color: #f0fff4;
+}
+
+.hover\:bg-green-200:hover {
+  background-color: #c6f6d5;
+}
+
+.hover\:bg-green-300:hover {
+  background-color: #9ae6b4;
+}
+
+.hover\:bg-green-400:hover {
+  background-color: #68d391;
+}
+
+.hover\:bg-green-500:hover {
+  background-color: #48bb78;
+}
+
+.hover\:bg-green-600:hover {
+  background-color: #38a169;
+}
+
+.hover\:bg-green-700:hover {
+  background-color: #2f855a;
+}
+
+.hover\:bg-green-800:hover {
+  background-color: #276749;
+}
+
+.hover\:bg-green-900:hover {
+  background-color: #22543d;
+}
+
+.hover\:bg-teal-100:hover {
+  background-color: #e6fffa;
+}
+
+.hover\:bg-teal-200:hover {
+  background-color: #b2f5ea;
+}
+
+.hover\:bg-teal-300:hover {
+  background-color: #81e6d9;
+}
+
+.hover\:bg-teal-400:hover {
+  background-color: #4fd1c5;
+}
+
+.hover\:bg-teal-500:hover {
+  background-color: #38b2ac;
+}
+
+.hover\:bg-teal-600:hover {
+  background-color: #319795;
+}
+
+.hover\:bg-teal-700:hover {
+  background-color: #2c7a7b;
+}
+
+.hover\:bg-teal-800:hover {
+  background-color: #285e61;
+}
+
+.hover\:bg-teal-900:hover {
+  background-color: #234e52;
+}
+
+.hover\:bg-blue-100:hover {
+  background-color: #ebf8ff;
+}
+
+.hover\:bg-blue-200:hover {
+  background-color: #bee3f8;
+}
+
+.hover\:bg-blue-300:hover {
+  background-color: #90cdf4;
+}
+
+.hover\:bg-blue-400:hover {
+  background-color: #63b3ed;
+}
+
+.hover\:bg-blue-500:hover {
+  background-color: #4299e1;
+}
+
+.hover\:bg-blue-600:hover {
+  background-color: #3182ce;
+}
+
+.hover\:bg-blue-700:hover {
+  background-color: #2b6cb0;
+}
+
+.hover\:bg-blue-800:hover {
+  background-color: #2c5282;
+}
+
+.hover\:bg-blue-900:hover {
+  background-color: #2a4365;
+}
+
+.hover\:bg-indigo-100:hover {
+  background-color: #ebf4ff;
+}
+
+.hover\:bg-indigo-200:hover {
+  background-color: #c3dafe;
+}
+
+.hover\:bg-indigo-300:hover {
+  background-color: #a3bffa;
+}
+
+.hover\:bg-indigo-400:hover {
+  background-color: #7f9cf5;
+}
+
+.hover\:bg-indigo-500:hover {
+  background-color: #667eea;
+}
+
+.hover\:bg-indigo-600:hover {
+  background-color: #5a67d8;
+}
+
+.hover\:bg-indigo-700:hover {
+  background-color: #4c51bf;
+}
+
+.hover\:bg-indigo-800:hover {
+  background-color: #434190;
+}
+
+.hover\:bg-indigo-900:hover {
+  background-color: #3c366b;
+}
+
+.hover\:bg-purple-100:hover {
+  background-color: #faf5ff;
+}
+
+.hover\:bg-purple-200:hover {
+  background-color: #e9d8fd;
+}
+
+.hover\:bg-purple-300:hover {
+  background-color: #d6bcfa;
+}
+
+.hover\:bg-purple-400:hover {
+  background-color: #b794f4;
+}
+
+.hover\:bg-purple-500:hover {
+  background-color: #9f7aea;
+}
+
+.hover\:bg-purple-600:hover {
+  background-color: #805ad5;
+}
+
+.hover\:bg-purple-700:hover {
+  background-color: #6b46c1;
+}
+
+.hover\:bg-purple-800:hover {
+  background-color: #553c9a;
+}
+
+.hover\:bg-purple-900:hover {
+  background-color: #44337a;
+}
+
+.hover\:bg-pink-100:hover {
+  background-color: #fff5f7;
+}
+
+.hover\:bg-pink-200:hover {
+  background-color: #fed7e2;
+}
+
+.hover\:bg-pink-300:hover {
+  background-color: #fbb6ce;
+}
+
+.hover\:bg-pink-400:hover {
+  background-color: #f687b3;
+}
+
+.hover\:bg-pink-500:hover {
+  background-color: #ed64a6;
+}
+
+.hover\:bg-pink-600:hover {
+  background-color: #d53f8c;
+}
+
+.hover\:bg-pink-700:hover {
+  background-color: #b83280;
+}
+
+.hover\:bg-pink-800:hover {
+  background-color: #97266d;
+}
+
+.hover\:bg-pink-900:hover {
+  background-color: #702459;
+}
+
+.focus\:bg-transparent:focus {
+  background-color: transparent;
+}
+
+.focus\:bg-black:focus {
+  background-color: #000;
+}
+
+.focus\:bg-white:focus {
+  background-color: #fff;
+}
+
+.focus\:bg-gray-100:focus {
+  background-color: #f7fafc;
+}
+
+.focus\:bg-gray-200:focus {
+  background-color: #edf2f7;
+}
+
+.focus\:bg-gray-300:focus {
+  background-color: #e2e8f0;
+}
+
+.focus\:bg-gray-400:focus {
+  background-color: #cbd5e0;
+}
+
+.focus\:bg-gray-500:focus {
+  background-color: #a0aec0;
+}
+
+.focus\:bg-gray-600:focus {
+  background-color: #718096;
+}
+
+.focus\:bg-gray-700:focus {
+  background-color: #4a5568;
+}
+
+.focus\:bg-gray-800:focus {
+  background-color: #2d3748;
+}
+
+.focus\:bg-gray-900:focus {
+  background-color: #1a202c;
+}
+
+.focus\:bg-red-100:focus {
+  background-color: #fff5f5;
+}
+
+.focus\:bg-red-200:focus {
+  background-color: #fed7d7;
+}
+
+.focus\:bg-red-300:focus {
+  background-color: #feb2b2;
+}
+
+.focus\:bg-red-400:focus {
+  background-color: #fc8181;
+}
+
+.focus\:bg-red-500:focus {
+  background-color: #f56565;
+}
+
+.focus\:bg-red-600:focus {
+  background-color: #e53e3e;
+}
+
+.focus\:bg-red-700:focus {
+  background-color: #c53030;
+}
+
+.focus\:bg-red-800:focus {
+  background-color: #9b2c2c;
+}
+
+.focus\:bg-red-900:focus {
+  background-color: #742a2a;
+}
+
+.focus\:bg-orange-100:focus {
+  background-color: #fffaf0;
+}
+
+.focus\:bg-orange-200:focus {
+  background-color: #feebc8;
+}
+
+.focus\:bg-orange-300:focus {
+  background-color: #fbd38d;
+}
+
+.focus\:bg-orange-400:focus {
+  background-color: #f6ad55;
+}
+
+.focus\:bg-orange-500:focus {
+  background-color: #ed8936;
+}
+
+.focus\:bg-orange-600:focus {
+  background-color: #dd6b20;
+}
+
+.focus\:bg-orange-700:focus {
+  background-color: #c05621;
+}
+
+.focus\:bg-orange-800:focus {
+  background-color: #9c4221;
+}
+
+.focus\:bg-orange-900:focus {
+  background-color: #7b341e;
+}
+
+.focus\:bg-yellow-100:focus {
+  background-color: #fffff0;
+}
+
+.focus\:bg-yellow-200:focus {
+  background-color: #fefcbf;
+}
+
+.focus\:bg-yellow-300:focus {
+  background-color: #faf089;
+}
+
+.focus\:bg-yellow-400:focus {
+  background-color: #f6e05e;
+}
+
+.focus\:bg-yellow-500:focus {
+  background-color: #ecc94b;
+}
+
+.focus\:bg-yellow-600:focus {
+  background-color: #d69e2e;
+}
+
+.focus\:bg-yellow-700:focus {
+  background-color: #b7791f;
+}
+
+.focus\:bg-yellow-800:focus {
+  background-color: #975a16;
+}
+
+.focus\:bg-yellow-900:focus {
+  background-color: #744210;
+}
+
+.focus\:bg-green-100:focus {
+  background-color: #f0fff4;
+}
+
+.focus\:bg-green-200:focus {
+  background-color: #c6f6d5;
+}
+
+.focus\:bg-green-300:focus {
+  background-color: #9ae6b4;
+}
+
+.focus\:bg-green-400:focus {
+  background-color: #68d391;
+}
+
+.focus\:bg-green-500:focus {
+  background-color: #48bb78;
+}
+
+.focus\:bg-green-600:focus {
+  background-color: #38a169;
+}
+
+.focus\:bg-green-700:focus {
+  background-color: #2f855a;
+}
+
+.focus\:bg-green-800:focus {
+  background-color: #276749;
+}
+
+.focus\:bg-green-900:focus {
+  background-color: #22543d;
+}
+
+.focus\:bg-teal-100:focus {
+  background-color: #e6fffa;
+}
+
+.focus\:bg-teal-200:focus {
+  background-color: #b2f5ea;
+}
+
+.focus\:bg-teal-300:focus {
+  background-color: #81e6d9;
+}
+
+.focus\:bg-teal-400:focus {
+  background-color: #4fd1c5;
+}
+
+.focus\:bg-teal-500:focus {
+  background-color: #38b2ac;
+}
+
+.focus\:bg-teal-600:focus {
+  background-color: #319795;
+}
+
+.focus\:bg-teal-700:focus {
+  background-color: #2c7a7b;
+}
+
+.focus\:bg-teal-800:focus {
+  background-color: #285e61;
+}
+
+.focus\:bg-teal-900:focus {
+  background-color: #234e52;
+}
+
+.focus\:bg-blue-100:focus {
+  background-color: #ebf8ff;
+}
+
+.focus\:bg-blue-200:focus {
+  background-color: #bee3f8;
+}
+
+.focus\:bg-blue-300:focus {
+  background-color: #90cdf4;
+}
+
+.focus\:bg-blue-400:focus {
+  background-color: #63b3ed;
+}
+
+.focus\:bg-blue-500:focus {
+  background-color: #4299e1;
+}
+
+.focus\:bg-blue-600:focus {
+  background-color: #3182ce;
+}
+
+.focus\:bg-blue-700:focus {
+  background-color: #2b6cb0;
+}
+
+.focus\:bg-blue-800:focus {
+  background-color: #2c5282;
+}
+
+.focus\:bg-blue-900:focus {
+  background-color: #2a4365;
+}
+
+.focus\:bg-indigo-100:focus {
+  background-color: #ebf4ff;
+}
+
+.focus\:bg-indigo-200:focus {
+  background-color: #c3dafe;
+}
+
+.focus\:bg-indigo-300:focus {
+  background-color: #a3bffa;
+}
+
+.focus\:bg-indigo-400:focus {
+  background-color: #7f9cf5;
+}
+
+.focus\:bg-indigo-500:focus {
+  background-color: #667eea;
+}
+
+.focus\:bg-indigo-600:focus {
+  background-color: #5a67d8;
+}
+
+.focus\:bg-indigo-700:focus {
+  background-color: #4c51bf;
+}
+
+.focus\:bg-indigo-800:focus {
+  background-color: #434190;
+}
+
+.focus\:bg-indigo-900:focus {
+  background-color: #3c366b;
+}
+
+.focus\:bg-purple-100:focus {
+  background-color: #faf5ff;
+}
+
+.focus\:bg-purple-200:focus {
+  background-color: #e9d8fd;
+}
+
+.focus\:bg-purple-300:focus {
+  background-color: #d6bcfa;
+}
+
+.focus\:bg-purple-400:focus {
+  background-color: #b794f4;
+}
+
+.focus\:bg-purple-500:focus {
+  background-color: #9f7aea;
+}
+
+.focus\:bg-purple-600:focus {
+  background-color: #805ad5;
+}
+
+.focus\:bg-purple-700:focus {
+  background-color: #6b46c1;
+}
+
+.focus\:bg-purple-800:focus {
+  background-color: #553c9a;
+}
+
+.focus\:bg-purple-900:focus {
+  background-color: #44337a;
+}
+
+.focus\:bg-pink-100:focus {
+  background-color: #fff5f7;
+}
+
+.focus\:bg-pink-200:focus {
+  background-color: #fed7e2;
+}
+
+.focus\:bg-pink-300:focus {
+  background-color: #fbb6ce;
+}
+
+.focus\:bg-pink-400:focus {
+  background-color: #f687b3;
+}
+
+.focus\:bg-pink-500:focus {
+  background-color: #ed64a6;
+}
+
+.focus\:bg-pink-600:focus {
+  background-color: #d53f8c;
+}
+
+.focus\:bg-pink-700:focus {
+  background-color: #b83280;
+}
+
+.focus\:bg-pink-800:focus {
+  background-color: #97266d;
+}
+
+.focus\:bg-pink-900:focus {
+  background-color: #702459;
+}
+
+.bg-bottom {
+  background-position: bottom;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-left {
+  background-position: left;
+}
+
+.bg-left-bottom {
+  background-position: left bottom;
+}
+
+.bg-left-top {
+  background-position: left top;
+}
+
+.bg-right {
+  background-position: right;
+}
+
+.bg-right-bottom {
+  background-position: right bottom;
+}
+
+.bg-right-top {
+  background-position: right top;
+}
+
+.bg-top {
+  background-position: top;
+}
+
+.bg-repeat {
+  background-repeat: repeat;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.bg-repeat-x {
+  background-repeat: repeat-x;
+}
+
+.bg-repeat-y {
+  background-repeat: repeat-y;
+}
+
+.bg-repeat-round {
+  background-repeat: round;
+}
+
+.bg-repeat-space {
+  background-repeat: space;
+}
+
+.bg-auto {
+  background-size: auto;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-contain {
+  background-size: contain;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.border-separate {
+  border-collapse: separate;
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-black {
+  border-color: #000;
+}
+
+.border-white {
+  border-color: #fff;
+}
+
+.border-gray-100 {
+  border-color: #f7fafc;
+}
+
+.border-gray-200 {
+  border-color: #edf2f7;
+}
+
+.border-gray-300 {
+  border-color: #e2e8f0;
+}
+
+.border-gray-400 {
+  border-color: #cbd5e0;
+}
+
+.border-gray-500 {
+  border-color: #a0aec0;
+}
+
+.border-gray-600 {
+  border-color: #718096;
+}
+
+.border-gray-700 {
+  border-color: #4a5568;
+}
+
+.border-gray-800 {
+  border-color: #2d3748;
+}
+
+.border-gray-900 {
+  border-color: #1a202c;
+}
+
+.border-red-100 {
+  border-color: #fff5f5;
+}
+
+.border-red-200 {
+  border-color: #fed7d7;
+}
+
+.border-red-300 {
+  border-color: #feb2b2;
+}
+
+.border-red-400 {
+  border-color: #fc8181;
+}
+
+.border-red-500 {
+  border-color: #f56565;
+}
+
+.border-red-600 {
+  border-color: #e53e3e;
+}
+
+.border-red-700 {
+  border-color: #c53030;
+}
+
+.border-red-800 {
+  border-color: #9b2c2c;
+}
+
+.border-red-900 {
+  border-color: #742a2a;
+}
+
+.border-orange-100 {
+  border-color: #fffaf0;
+}
+
+.border-orange-200 {
+  border-color: #feebc8;
+}
+
+.border-orange-300 {
+  border-color: #fbd38d;
+}
+
+.border-orange-400 {
+  border-color: #f6ad55;
+}
+
+.border-orange-500 {
+  border-color: #ed8936;
+}
+
+.border-orange-600 {
+  border-color: #dd6b20;
+}
+
+.border-orange-700 {
+  border-color: #c05621;
+}
+
+.border-orange-800 {
+  border-color: #9c4221;
+}
+
+.border-orange-900 {
+  border-color: #7b341e;
+}
+
+.border-yellow-100 {
+  border-color: #fffff0;
+}
+
+.border-yellow-200 {
+  border-color: #fefcbf;
+}
+
+.border-yellow-300 {
+  border-color: #faf089;
+}
+
+.border-yellow-400 {
+  border-color: #f6e05e;
+}
+
+.border-yellow-500 {
+  border-color: #ecc94b;
+}
+
+.border-yellow-600 {
+  border-color: #d69e2e;
+}
+
+.border-yellow-700 {
+  border-color: #b7791f;
+}
+
+.border-yellow-800 {
+  border-color: #975a16;
+}
+
+.border-yellow-900 {
+  border-color: #744210;
+}
+
+.border-green-100 {
+  border-color: #f0fff4;
+}
+
+.border-green-200 {
+  border-color: #c6f6d5;
+}
+
+.border-green-300 {
+  border-color: #9ae6b4;
+}
+
+.border-green-400 {
+  border-color: #68d391;
+}
+
+.border-green-500 {
+  border-color: #48bb78;
+}
+
+.border-green-600 {
+  border-color: #38a169;
+}
+
+.border-green-700 {
+  border-color: #2f855a;
+}
+
+.border-green-800 {
+  border-color: #276749;
+}
+
+.border-green-900 {
+  border-color: #22543d;
+}
+
+.border-teal-100 {
+  border-color: #e6fffa;
+}
+
+.border-teal-200 {
+  border-color: #b2f5ea;
+}
+
+.border-teal-300 {
+  border-color: #81e6d9;
+}
+
+.border-teal-400 {
+  border-color: #4fd1c5;
+}
+
+.border-teal-500 {
+  border-color: #38b2ac;
+}
+
+.border-teal-600 {
+  border-color: #319795;
+}
+
+.border-teal-700 {
+  border-color: #2c7a7b;
+}
+
+.border-teal-800 {
+  border-color: #285e61;
+}
+
+.border-teal-900 {
+  border-color: #234e52;
+}
+
+.border-blue-100 {
+  border-color: #ebf8ff;
+}
+
+.border-blue-200 {
+  border-color: #bee3f8;
+}
+
+.border-blue-300 {
+  border-color: #90cdf4;
+}
+
+.border-blue-400 {
+  border-color: #63b3ed;
+}
+
+.border-blue-500 {
+  border-color: #4299e1;
+}
+
+.border-blue-600 {
+  border-color: #3182ce;
+}
+
+.border-blue-700 {
+  border-color: #2b6cb0;
+}
+
+.border-blue-800 {
+  border-color: #2c5282;
+}
+
+.border-blue-900 {
+  border-color: #2a4365;
+}
+
+.border-indigo-100 {
+  border-color: #ebf4ff;
+}
+
+.border-indigo-200 {
+  border-color: #c3dafe;
+}
+
+.border-indigo-300 {
+  border-color: #a3bffa;
+}
+
+.border-indigo-400 {
+  border-color: #7f9cf5;
+}
+
+.border-indigo-500 {
+  border-color: #667eea;
+}
+
+.border-indigo-600 {
+  border-color: #5a67d8;
+}
+
+.border-indigo-700 {
+  border-color: #4c51bf;
+}
+
+.border-indigo-800 {
+  border-color: #434190;
+}
+
+.border-indigo-900 {
+  border-color: #3c366b;
+}
+
+.border-purple-100 {
+  border-color: #faf5ff;
+}
+
+.border-purple-200 {
+  border-color: #e9d8fd;
+}
+
+.border-purple-300 {
+  border-color: #d6bcfa;
+}
+
+.border-purple-400 {
+  border-color: #b794f4;
+}
+
+.border-purple-500 {
+  border-color: #9f7aea;
+}
+
+.border-purple-600 {
+  border-color: #805ad5;
+}
+
+.border-purple-700 {
+  border-color: #6b46c1;
+}
+
+.border-purple-800 {
+  border-color: #553c9a;
+}
+
+.border-purple-900 {
+  border-color: #44337a;
+}
+
+.border-pink-100 {
+  border-color: #fff5f7;
+}
+
+.border-pink-200 {
+  border-color: #fed7e2;
+}
+
+.border-pink-300 {
+  border-color: #fbb6ce;
+}
+
+.border-pink-400 {
+  border-color: #f687b3;
+}
+
+.border-pink-500 {
+  border-color: #ed64a6;
+}
+
+.border-pink-600 {
+  border-color: #d53f8c;
+}
+
+.border-pink-700 {
+  border-color: #b83280;
+}
+
+.border-pink-800 {
+  border-color: #97266d;
+}
+
+.border-pink-900 {
+  border-color: #702459;
+}
+
+.hover\:border-transparent:hover {
+  border-color: transparent;
+}
+
+.hover\:border-black:hover {
+  border-color: #000;
+}
+
+.hover\:border-white:hover {
+  border-color: #fff;
+}
+
+.hover\:border-gray-100:hover {
+  border-color: #f7fafc;
+}
+
+.hover\:border-gray-200:hover {
+  border-color: #edf2f7;
+}
+
+.hover\:border-gray-300:hover {
+  border-color: #e2e8f0;
+}
+
+.hover\:border-gray-400:hover {
+  border-color: #cbd5e0;
+}
+
+.hover\:border-gray-500:hover {
+  border-color: #a0aec0;
+}
+
+.hover\:border-gray-600:hover {
+  border-color: #718096;
+}
+
+.hover\:border-gray-700:hover {
+  border-color: #4a5568;
+}
+
+.hover\:border-gray-800:hover {
+  border-color: #2d3748;
+}
+
+.hover\:border-gray-900:hover {
+  border-color: #1a202c;
+}
+
+.hover\:border-red-100:hover {
+  border-color: #fff5f5;
+}
+
+.hover\:border-red-200:hover {
+  border-color: #fed7d7;
+}
+
+.hover\:border-red-300:hover {
+  border-color: #feb2b2;
+}
+
+.hover\:border-red-400:hover {
+  border-color: #fc8181;
+}
+
+.hover\:border-red-500:hover {
+  border-color: #f56565;
+}
+
+.hover\:border-red-600:hover {
+  border-color: #e53e3e;
+}
+
+.hover\:border-red-700:hover {
+  border-color: #c53030;
+}
+
+.hover\:border-red-800:hover {
+  border-color: #9b2c2c;
+}
+
+.hover\:border-red-900:hover {
+  border-color: #742a2a;
+}
+
+.hover\:border-orange-100:hover {
+  border-color: #fffaf0;
+}
+
+.hover\:border-orange-200:hover {
+  border-color: #feebc8;
+}
+
+.hover\:border-orange-300:hover {
+  border-color: #fbd38d;
+}
+
+.hover\:border-orange-400:hover {
+  border-color: #f6ad55;
+}
+
+.hover\:border-orange-500:hover {
+  border-color: #ed8936;
+}
+
+.hover\:border-orange-600:hover {
+  border-color: #dd6b20;
+}
+
+.hover\:border-orange-700:hover {
+  border-color: #c05621;
+}
+
+.hover\:border-orange-800:hover {
+  border-color: #9c4221;
+}
+
+.hover\:border-orange-900:hover {
+  border-color: #7b341e;
+}
+
+.hover\:border-yellow-100:hover {
+  border-color: #fffff0;
+}
+
+.hover\:border-yellow-200:hover {
+  border-color: #fefcbf;
+}
+
+.hover\:border-yellow-300:hover {
+  border-color: #faf089;
+}
+
+.hover\:border-yellow-400:hover {
+  border-color: #f6e05e;
+}
+
+.hover\:border-yellow-500:hover {
+  border-color: #ecc94b;
+}
+
+.hover\:border-yellow-600:hover {
+  border-color: #d69e2e;
+}
+
+.hover\:border-yellow-700:hover {
+  border-color: #b7791f;
+}
+
+.hover\:border-yellow-800:hover {
+  border-color: #975a16;
+}
+
+.hover\:border-yellow-900:hover {
+  border-color: #744210;
+}
+
+.hover\:border-green-100:hover {
+  border-color: #f0fff4;
+}
+
+.hover\:border-green-200:hover {
+  border-color: #c6f6d5;
+}
+
+.hover\:border-green-300:hover {
+  border-color: #9ae6b4;
+}
+
+.hover\:border-green-400:hover {
+  border-color: #68d391;
+}
+
+.hover\:border-green-500:hover {
+  border-color: #48bb78;
+}
+
+.hover\:border-green-600:hover {
+  border-color: #38a169;
+}
+
+.hover\:border-green-700:hover {
+  border-color: #2f855a;
+}
+
+.hover\:border-green-800:hover {
+  border-color: #276749;
+}
+
+.hover\:border-green-900:hover {
+  border-color: #22543d;
+}
+
+.hover\:border-teal-100:hover {
+  border-color: #e6fffa;
+}
+
+.hover\:border-teal-200:hover {
+  border-color: #b2f5ea;
+}
+
+.hover\:border-teal-300:hover {
+  border-color: #81e6d9;
+}
+
+.hover\:border-teal-400:hover {
+  border-color: #4fd1c5;
+}
+
+.hover\:border-teal-500:hover {
+  border-color: #38b2ac;
+}
+
+.hover\:border-teal-600:hover {
+  border-color: #319795;
+}
+
+.hover\:border-teal-700:hover {
+  border-color: #2c7a7b;
+}
+
+.hover\:border-teal-800:hover {
+  border-color: #285e61;
+}
+
+.hover\:border-teal-900:hover {
+  border-color: #234e52;
+}
+
+.hover\:border-blue-100:hover {
+  border-color: #ebf8ff;
+}
+
+.hover\:border-blue-200:hover {
+  border-color: #bee3f8;
+}
+
+.hover\:border-blue-300:hover {
+  border-color: #90cdf4;
+}
+
+.hover\:border-blue-400:hover {
+  border-color: #63b3ed;
+}
+
+.hover\:border-blue-500:hover {
+  border-color: #4299e1;
+}
+
+.hover\:border-blue-600:hover {
+  border-color: #3182ce;
+}
+
+.hover\:border-blue-700:hover {
+  border-color: #2b6cb0;
+}
+
+.hover\:border-blue-800:hover {
+  border-color: #2c5282;
+}
+
+.hover\:border-blue-900:hover {
+  border-color: #2a4365;
+}
+
+.hover\:border-indigo-100:hover {
+  border-color: #ebf4ff;
+}
+
+.hover\:border-indigo-200:hover {
+  border-color: #c3dafe;
+}
+
+.hover\:border-indigo-300:hover {
+  border-color: #a3bffa;
+}
+
+.hover\:border-indigo-400:hover {
+  border-color: #7f9cf5;
+}
+
+.hover\:border-indigo-500:hover {
+  border-color: #667eea;
+}
+
+.hover\:border-indigo-600:hover {
+  border-color: #5a67d8;
+}
+
+.hover\:border-indigo-700:hover {
+  border-color: #4c51bf;
+}
+
+.hover\:border-indigo-800:hover {
+  border-color: #434190;
+}
+
+.hover\:border-indigo-900:hover {
+  border-color: #3c366b;
+}
+
+.hover\:border-purple-100:hover {
+  border-color: #faf5ff;
+}
+
+.hover\:border-purple-200:hover {
+  border-color: #e9d8fd;
+}
+
+.hover\:border-purple-300:hover {
+  border-color: #d6bcfa;
+}
+
+.hover\:border-purple-400:hover {
+  border-color: #b794f4;
+}
+
+.hover\:border-purple-500:hover {
+  border-color: #9f7aea;
+}
+
+.hover\:border-purple-600:hover {
+  border-color: #805ad5;
+}
+
+.hover\:border-purple-700:hover {
+  border-color: #6b46c1;
+}
+
+.hover\:border-purple-800:hover {
+  border-color: #553c9a;
+}
+
+.hover\:border-purple-900:hover {
+  border-color: #44337a;
+}
+
+.hover\:border-pink-100:hover {
+  border-color: #fff5f7;
+}
+
+.hover\:border-pink-200:hover {
+  border-color: #fed7e2;
+}
+
+.hover\:border-pink-300:hover {
+  border-color: #fbb6ce;
+}
+
+.hover\:border-pink-400:hover {
+  border-color: #f687b3;
+}
+
+.hover\:border-pink-500:hover {
+  border-color: #ed64a6;
+}
+
+.hover\:border-pink-600:hover {
+  border-color: #d53f8c;
+}
+
+.hover\:border-pink-700:hover {
+  border-color: #b83280;
+}
+
+.hover\:border-pink-800:hover {
+  border-color: #97266d;
+}
+
+.hover\:border-pink-900:hover {
+  border-color: #702459;
+}
+
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
+.focus\:border-black:focus {
+  border-color: #000;
+}
+
+.focus\:border-white:focus {
+  border-color: #fff;
+}
+
+.focus\:border-gray-100:focus {
+  border-color: #f7fafc;
+}
+
+.focus\:border-gray-200:focus {
+  border-color: #edf2f7;
+}
+
+.focus\:border-gray-300:focus {
+  border-color: #e2e8f0;
+}
+
+.focus\:border-gray-400:focus {
+  border-color: #cbd5e0;
+}
+
+.focus\:border-gray-500:focus {
+  border-color: #a0aec0;
+}
+
+.focus\:border-gray-600:focus {
+  border-color: #718096;
+}
+
+.focus\:border-gray-700:focus {
+  border-color: #4a5568;
+}
+
+.focus\:border-gray-800:focus {
+  border-color: #2d3748;
+}
+
+.focus\:border-gray-900:focus {
+  border-color: #1a202c;
+}
+
+.focus\:border-red-100:focus {
+  border-color: #fff5f5;
+}
+
+.focus\:border-red-200:focus {
+  border-color: #fed7d7;
+}
+
+.focus\:border-red-300:focus {
+  border-color: #feb2b2;
+}
+
+.focus\:border-red-400:focus {
+  border-color: #fc8181;
+}
+
+.focus\:border-red-500:focus {
+  border-color: #f56565;
+}
+
+.focus\:border-red-600:focus {
+  border-color: #e53e3e;
+}
+
+.focus\:border-red-700:focus {
+  border-color: #c53030;
+}
+
+.focus\:border-red-800:focus {
+  border-color: #9b2c2c;
+}
+
+.focus\:border-red-900:focus {
+  border-color: #742a2a;
+}
+
+.focus\:border-orange-100:focus {
+  border-color: #fffaf0;
+}
+
+.focus\:border-orange-200:focus {
+  border-color: #feebc8;
+}
+
+.focus\:border-orange-300:focus {
+  border-color: #fbd38d;
+}
+
+.focus\:border-orange-400:focus {
+  border-color: #f6ad55;
+}
+
+.focus\:border-orange-500:focus {
+  border-color: #ed8936;
+}
+
+.focus\:border-orange-600:focus {
+  border-color: #dd6b20;
+}
+
+.focus\:border-orange-700:focus {
+  border-color: #c05621;
+}
+
+.focus\:border-orange-800:focus {
+  border-color: #9c4221;
+}
+
+.focus\:border-orange-900:focus {
+  border-color: #7b341e;
+}
+
+.focus\:border-yellow-100:focus {
+  border-color: #fffff0;
+}
+
+.focus\:border-yellow-200:focus {
+  border-color: #fefcbf;
+}
+
+.focus\:border-yellow-300:focus {
+  border-color: #faf089;
+}
+
+.focus\:border-yellow-400:focus {
+  border-color: #f6e05e;
+}
+
+.focus\:border-yellow-500:focus {
+  border-color: #ecc94b;
+}
+
+.focus\:border-yellow-600:focus {
+  border-color: #d69e2e;
+}
+
+.focus\:border-yellow-700:focus {
+  border-color: #b7791f;
+}
+
+.focus\:border-yellow-800:focus {
+  border-color: #975a16;
+}
+
+.focus\:border-yellow-900:focus {
+  border-color: #744210;
+}
+
+.focus\:border-green-100:focus {
+  border-color: #f0fff4;
+}
+
+.focus\:border-green-200:focus {
+  border-color: #c6f6d5;
+}
+
+.focus\:border-green-300:focus {
+  border-color: #9ae6b4;
+}
+
+.focus\:border-green-400:focus {
+  border-color: #68d391;
+}
+
+.focus\:border-green-500:focus {
+  border-color: #48bb78;
+}
+
+.focus\:border-green-600:focus {
+  border-color: #38a169;
+}
+
+.focus\:border-green-700:focus {
+  border-color: #2f855a;
+}
+
+.focus\:border-green-800:focus {
+  border-color: #276749;
+}
+
+.focus\:border-green-900:focus {
+  border-color: #22543d;
+}
+
+.focus\:border-teal-100:focus {
+  border-color: #e6fffa;
+}
+
+.focus\:border-teal-200:focus {
+  border-color: #b2f5ea;
+}
+
+.focus\:border-teal-300:focus {
+  border-color: #81e6d9;
+}
+
+.focus\:border-teal-400:focus {
+  border-color: #4fd1c5;
+}
+
+.focus\:border-teal-500:focus {
+  border-color: #38b2ac;
+}
+
+.focus\:border-teal-600:focus {
+  border-color: #319795;
+}
+
+.focus\:border-teal-700:focus {
+  border-color: #2c7a7b;
+}
+
+.focus\:border-teal-800:focus {
+  border-color: #285e61;
+}
+
+.focus\:border-teal-900:focus {
+  border-color: #234e52;
+}
+
+.focus\:border-blue-100:focus {
+  border-color: #ebf8ff;
+}
+
+.focus\:border-blue-200:focus {
+  border-color: #bee3f8;
+}
+
+.focus\:border-blue-300:focus {
+  border-color: #90cdf4;
+}
+
+.focus\:border-blue-400:focus {
+  border-color: #63b3ed;
+}
+
+.focus\:border-blue-500:focus {
+  border-color: #4299e1;
+}
+
+.focus\:border-blue-600:focus {
+  border-color: #3182ce;
+}
+
+.focus\:border-blue-700:focus {
+  border-color: #2b6cb0;
+}
+
+.focus\:border-blue-800:focus {
+  border-color: #2c5282;
+}
+
+.focus\:border-blue-900:focus {
+  border-color: #2a4365;
+}
+
+.focus\:border-indigo-100:focus {
+  border-color: #ebf4ff;
+}
+
+.focus\:border-indigo-200:focus {
+  border-color: #c3dafe;
+}
+
+.focus\:border-indigo-300:focus {
+  border-color: #a3bffa;
+}
+
+.focus\:border-indigo-400:focus {
+  border-color: #7f9cf5;
+}
+
+.focus\:border-indigo-500:focus {
+  border-color: #667eea;
+}
+
+.focus\:border-indigo-600:focus {
+  border-color: #5a67d8;
+}
+
+.focus\:border-indigo-700:focus {
+  border-color: #4c51bf;
+}
+
+.focus\:border-indigo-800:focus {
+  border-color: #434190;
+}
+
+.focus\:border-indigo-900:focus {
+  border-color: #3c366b;
+}
+
+.focus\:border-purple-100:focus {
+  border-color: #faf5ff;
+}
+
+.focus\:border-purple-200:focus {
+  border-color: #e9d8fd;
+}
+
+.focus\:border-purple-300:focus {
+  border-color: #d6bcfa;
+}
+
+.focus\:border-purple-400:focus {
+  border-color: #b794f4;
+}
+
+.focus\:border-purple-500:focus {
+  border-color: #9f7aea;
+}
+
+.focus\:border-purple-600:focus {
+  border-color: #805ad5;
+}
+
+.focus\:border-purple-700:focus {
+  border-color: #6b46c1;
+}
+
+.focus\:border-purple-800:focus {
+  border-color: #553c9a;
+}
+
+.focus\:border-purple-900:focus {
+  border-color: #44337a;
+}
+
+.focus\:border-pink-100:focus {
+  border-color: #fff5f7;
+}
+
+.focus\:border-pink-200:focus {
+  border-color: #fed7e2;
+}
+
+.focus\:border-pink-300:focus {
+  border-color: #fbb6ce;
+}
+
+.focus\:border-pink-400:focus {
+  border-color: #f687b3;
+}
+
+.focus\:border-pink-500:focus {
+  border-color: #ed64a6;
+}
+
+.focus\:border-pink-600:focus {
+  border-color: #d53f8c;
+}
+
+.focus\:border-pink-700:focus {
+  border-color: #b83280;
+}
+
+.focus\:border-pink-800:focus {
+  border-color: #97266d;
+}
+
+.focus\:border-pink-900:focus {
+  border-color: #702459;
+}
+
+.rounded-none {
+  border-radius: 0;
+}
+
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-t-none {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.rounded-r-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rounded-b-none {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rounded-t-sm {
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
+}
+
+.rounded-r-sm {
+  border-top-right-radius: 0.125rem;
+  border-bottom-right-radius: 0.125rem;
+}
+
+.rounded-b-sm {
+  border-bottom-right-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
+
+.rounded-l-sm {
+  border-top-left-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
+
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-t-full {
+  border-top-left-radius: 9999px;
+  border-top-right-radius: 9999px;
+}
+
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
+.rounded-b-full {
+  border-bottom-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-tl-none {
+  border-top-left-radius: 0;
+}
+
+.rounded-tr-none {
+  border-top-right-radius: 0;
+}
+
+.rounded-br-none {
+  border-bottom-right-radius: 0;
+}
+
+.rounded-bl-none {
+  border-bottom-left-radius: 0;
+}
+
+.rounded-tl-sm {
+  border-top-left-radius: 0.125rem;
+}
+
+.rounded-tr-sm {
+  border-top-right-radius: 0.125rem;
+}
+
+.rounded-br-sm {
+  border-bottom-right-radius: 0.125rem;
+}
+
+.rounded-bl-sm {
+  border-bottom-left-radius: 0.125rem;
+}
+
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
+}
+
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-tl-lg {
+  border-top-left-radius: 0.5rem;
+}
+
+.rounded-tr-lg {
+  border-top-right-radius: 0.5rem;
+}
+
+.rounded-br-lg {
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-bl-lg {
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-tl-full {
+  border-top-left-radius: 9999px;
+}
+
+.rounded-tr-full {
+  border-top-right-radius: 9999px;
+}
+
+.rounded-br-full {
+  border-bottom-right-radius: 9999px;
+}
+
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-dotted {
+  border-style: dotted;
+}
+
+.border-double {
+  border-style: double;
+}
+
+.border-none {
+  border-style: none;
+}
+
+.border-0 {
+  border-width: 0;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
+.border-8 {
+  border-width: 8px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-t-0 {
+  border-top-width: 0;
+}
+
+.border-r-0 {
+  border-right-width: 0;
+}
+
+.border-b-0 {
+  border-bottom-width: 0;
+}
+
+.border-l-0 {
+  border-left-width: 0;
+}
+
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-r-2 {
+  border-right-width: 2px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-t-4 {
+  border-top-width: 4px;
+}
+
+.border-r-4 {
+  border-right-width: 4px;
+}
+
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
+.border-t-8 {
+  border-top-width: 8px;
+}
+
+.border-r-8 {
+  border-right-width: 8px;
+}
+
+.border-b-8 {
+  border-bottom-width: 8px;
+}
+
+.border-l-8 {
+  border-left-width: 8px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+.cursor-auto {
+  cursor: auto;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-wait {
+  cursor: wait;
+}
+
+.cursor-text {
+  cursor: text;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: -webkit-box;
+  display: flex;
+}
+
+.inline-flex {
+  display: -webkit-inline-box;
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.table-row {
+  display: table-row;
+}
+
+.table-cell {
+  display: table-cell;
+}
+
+.hidden {
+  display: none;
+}
+
+.flex-row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+}
+
+.flex-row-reverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+          flex-direction: row-reverse;
+}
+
+.flex-col {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+
+.flex-col-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+          flex-direction: column-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
+.items-start {
+  -webkit-box-align: start;
+          align-items: flex-start;
+}
+
+.items-end {
+  -webkit-box-align: end;
+          align-items: flex-end;
+}
+
+.items-center {
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+.items-baseline {
+  -webkit-box-align: baseline;
+          align-items: baseline;
+}
+
+.items-stretch {
+  -webkit-box-align: stretch;
+          align-items: stretch;
+}
+
+.self-auto {
+  align-self: auto;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.justify-start {
+  -webkit-box-pack: start;
+          justify-content: flex-start;
+}
+
+.justify-end {
+  -webkit-box-pack: end;
+          justify-content: flex-end;
+}
+
+.justify-center {
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+.justify-between {
+  -webkit-box-pack: justify;
+          justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.content-center {
+  align-content: center;
+}
+
+.content-start {
+  align-content: flex-start;
+}
+
+.content-end {
+  align-content: flex-end;
+}
+
+.content-between {
+  align-content: space-between;
+}
+
+.content-around {
+  align-content: space-around;
+}
+
+.flex-1 {
+  -webkit-box-flex: 1;
+          flex: 1 1 0%;
+}
+
+.flex-auto {
+  -webkit-box-flex: 1;
+          flex: 1 1 auto;
+}
+
+.flex-initial {
+  -webkit-box-flex: 0;
+          flex: 0 1 auto;
+}
+
+.flex-none {
+  -webkit-box-flex: 0;
+          flex: none;
+}
+
+.flex-grow-0 {
+  -webkit-box-flex: 0;
+          flex-grow: 0;
+}
+
+.flex-grow {
+  -webkit-box-flex: 1;
+          flex-grow: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.order-1 {
+  -webkit-box-ordinal-group: 2;
+          order: 1;
+}
+
+.order-2 {
+  -webkit-box-ordinal-group: 3;
+          order: 2;
+}
+
+.order-3 {
+  -webkit-box-ordinal-group: 4;
+          order: 3;
+}
+
+.order-4 {
+  -webkit-box-ordinal-group: 5;
+          order: 4;
+}
+
+.order-5 {
+  -webkit-box-ordinal-group: 6;
+          order: 5;
+}
+
+.order-6 {
+  -webkit-box-ordinal-group: 7;
+          order: 6;
+}
+
+.order-7 {
+  -webkit-box-ordinal-group: 8;
+          order: 7;
+}
+
+.order-8 {
+  -webkit-box-ordinal-group: 9;
+          order: 8;
+}
+
+.order-9 {
+  -webkit-box-ordinal-group: 10;
+          order: 9;
+}
+
+.order-10 {
+  -webkit-box-ordinal-group: 11;
+          order: 10;
+}
+
+.order-11 {
+  -webkit-box-ordinal-group: 12;
+          order: 11;
+}
+
+.order-12 {
+  -webkit-box-ordinal-group: 13;
+          order: 12;
+}
+
+.order-first {
+  -webkit-box-ordinal-group: -9998;
+          order: -9999;
+}
+
+.order-last {
+  -webkit-box-ordinal-group: 10000;
+          order: 9999;
+}
+
+.order-none {
+  -webkit-box-ordinal-group: 1;
+          order: 0;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-none {
+  float: none;
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.font-sans {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.font-serif {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.font-mono {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.font-hairline {
+  font-weight: 100;
+}
+
+.font-thin {
+  font-weight: 200;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-black {
+  font-weight: 900;
+}
+
+.hover\:font-hairline:hover {
+  font-weight: 100;
+}
+
+.hover\:font-thin:hover {
+  font-weight: 200;
+}
+
+.hover\:font-light:hover {
+  font-weight: 300;
+}
+
+.hover\:font-normal:hover {
+  font-weight: 400;
+}
+
+.hover\:font-medium:hover {
+  font-weight: 500;
+}
+
+.hover\:font-semibold:hover {
+  font-weight: 600;
+}
+
+.hover\:font-bold:hover {
+  font-weight: 700;
+}
+
+.hover\:font-extrabold:hover {
+  font-weight: 800;
+}
+
+.hover\:font-black:hover {
+  font-weight: 900;
+}
+
+.focus\:font-hairline:focus {
+  font-weight: 100;
+}
+
+.focus\:font-thin:focus {
+  font-weight: 200;
+}
+
+.focus\:font-light:focus {
+  font-weight: 300;
+}
+
+.focus\:font-normal:focus {
+  font-weight: 400;
+}
+
+.focus\:font-medium:focus {
+  font-weight: 500;
+}
+
+.focus\:font-semibold:focus {
+  font-weight: 600;
+}
+
+.focus\:font-bold:focus {
+  font-weight: 700;
+}
+
+.focus\:font-extrabold:focus {
+  font-weight: 800;
+}
+
+.focus\:font-black:focus {
+  font-weight: 900;
+}
+
+.h-0 {
+  height: 0;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-56 {
+  height: 14rem;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-px {
+  height: 1px;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.leading-snug {
+  line-height: 1.375;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.leading-loose {
+  line-height: 2;
+}
+
+.list-inside {
+  list-style-position: inside;
+}
+
+.list-outside {
+  list-style-position: outside;
+}
+
+.list-none {
+  list-style-type: none;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-3 {
+  margin: 0.75rem;
+}
+
+.m-4 {
+  margin: 1rem;
+}
+
+.m-5 {
+  margin: 1.25rem;
+}
+
+.m-6 {
+  margin: 1.5rem;
+}
+
+.m-8 {
+  margin: 2rem;
+}
+
+.m-10 {
+  margin: 2.5rem;
+}
+
+.m-12 {
+  margin: 3rem;
+}
+
+.m-16 {
+  margin: 4rem;
+}
+
+.m-20 {
+  margin: 5rem;
+}
+
+.m-24 {
+  margin: 6rem;
+}
+
+.m-32 {
+  margin: 8rem;
+}
+
+.m-40 {
+  margin: 10rem;
+}
+
+.m-48 {
+  margin: 12rem;
+}
+
+.m-56 {
+  margin: 14rem;
+}
+
+.m-64 {
+  margin: 16rem;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.m-px {
+  margin: 1px;
+}
+
+.-m-1 {
+  margin: -0.25rem;
+}
+
+.-m-2 {
+  margin: -0.5rem;
+}
+
+.-m-3 {
+  margin: -0.75rem;
+}
+
+.-m-4 {
+  margin: -1rem;
+}
+
+.-m-5 {
+  margin: -1.25rem;
+}
+
+.-m-6 {
+  margin: -1.5rem;
+}
+
+.-m-8 {
+  margin: -2rem;
+}
+
+.-m-10 {
+  margin: -2.5rem;
+}
+
+.-m-12 {
+  margin: -3rem;
+}
+
+.-m-16 {
+  margin: -4rem;
+}
+
+.-m-20 {
+  margin: -5rem;
+}
+
+.-m-24 {
+  margin: -6rem;
+}
+
+.-m-32 {
+  margin: -8rem;
+}
+
+.-m-40 {
+  margin: -10rem;
+}
+
+.-m-48 {
+  margin: -12rem;
+}
+
+.-m-56 {
+  margin: -14rem;
+}
+
+.-m-64 {
+  margin: -16rem;
+}
+
+.-m-px {
+  margin: -1px;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.mx-12 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.mx-16 {
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
+.my-20 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+
+.mx-20 {
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+
+.my-24 {
+  margin-top: 6rem;
+  margin-bottom: 6rem;
+}
+
+.mx-24 {
+  margin-left: 6rem;
+  margin-right: 6rem;
+}
+
+.my-32 {
+  margin-top: 8rem;
+  margin-bottom: 8rem;
+}
+
+.mx-32 {
+  margin-left: 8rem;
+  margin-right: 8rem;
+}
+
+.my-40 {
+  margin-top: 10rem;
+  margin-bottom: 10rem;
+}
+
+.mx-40 {
+  margin-left: 10rem;
+  margin-right: 10rem;
+}
+
+.my-48 {
+  margin-top: 12rem;
+  margin-bottom: 12rem;
+}
+
+.mx-48 {
+  margin-left: 12rem;
+  margin-right: 12rem;
+}
+
+.my-56 {
+  margin-top: 14rem;
+  margin-bottom: 14rem;
+}
+
+.mx-56 {
+  margin-left: 14rem;
+  margin-right: 14rem;
+}
+
+.my-64 {
+  margin-top: 16rem;
+  margin-bottom: 16rem;
+}
+
+.mx-64 {
+  margin-left: 16rem;
+  margin-right: 16rem;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-px {
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+.mx-px {
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+.-my-1 {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.-my-2 {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
+
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
+.-my-3 {
+  margin-top: -0.75rem;
+  margin-bottom: -0.75rem;
+}
+
+.-mx-3 {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+}
+
+.-my-4 {
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+}
+
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.-my-5 {
+  margin-top: -1.25rem;
+  margin-bottom: -1.25rem;
+}
+
+.-mx-5 {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+}
+
+.-my-6 {
+  margin-top: -1.5rem;
+  margin-bottom: -1.5rem;
+}
+
+.-mx-6 {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.-my-8 {
+  margin-top: -2rem;
+  margin-bottom: -2rem;
+}
+
+.-mx-8 {
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
+.-my-10 {
+  margin-top: -2.5rem;
+  margin-bottom: -2.5rem;
+}
+
+.-mx-10 {
+  margin-left: -2.5rem;
+  margin-right: -2.5rem;
+}
+
+.-my-12 {
+  margin-top: -3rem;
+  margin-bottom: -3rem;
+}
+
+.-mx-12 {
+  margin-left: -3rem;
+  margin-right: -3rem;
+}
+
+.-my-16 {
+  margin-top: -4rem;
+  margin-bottom: -4rem;
+}
+
+.-mx-16 {
+  margin-left: -4rem;
+  margin-right: -4rem;
+}
+
+.-my-20 {
+  margin-top: -5rem;
+  margin-bottom: -5rem;
+}
+
+.-mx-20 {
+  margin-left: -5rem;
+  margin-right: -5rem;
+}
+
+.-my-24 {
+  margin-top: -6rem;
+  margin-bottom: -6rem;
+}
+
+.-mx-24 {
+  margin-left: -6rem;
+  margin-right: -6rem;
+}
+
+.-my-32 {
+  margin-top: -8rem;
+  margin-bottom: -8rem;
+}
+
+.-mx-32 {
+  margin-left: -8rem;
+  margin-right: -8rem;
+}
+
+.-my-40 {
+  margin-top: -10rem;
+  margin-bottom: -10rem;
+}
+
+.-mx-40 {
+  margin-left: -10rem;
+  margin-right: -10rem;
+}
+
+.-my-48 {
+  margin-top: -12rem;
+  margin-bottom: -12rem;
+}
+
+.-mx-48 {
+  margin-left: -12rem;
+  margin-right: -12rem;
+}
+
+.-my-56 {
+  margin-top: -14rem;
+  margin-bottom: -14rem;
+}
+
+.-mx-56 {
+  margin-left: -14rem;
+  margin-right: -14rem;
+}
+
+.-my-64 {
+  margin-top: -16rem;
+  margin-bottom: -16rem;
+}
+
+.-mx-64 {
+  margin-left: -16rem;
+  margin-right: -16rem;
+}
+
+.-my-px {
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.-mx-px {
+  margin-left: -1px;
+  margin-right: -1px;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mr-8 {
+  margin-right: 2rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-8 {
+  margin-left: 2rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mr-12 {
+  margin-right: 3rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.ml-12 {
+  margin-left: 3rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
+.mr-16 {
+  margin-right: 4rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.ml-16 {
+  margin-left: 4rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.mr-20 {
+  margin-right: 5rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.ml-20 {
+  margin-left: 5rem;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mr-24 {
+  margin-right: 6rem;
+}
+
+.mb-24 {
+  margin-bottom: 6rem;
+}
+
+.ml-24 {
+  margin-left: 6rem;
+}
+
+.mt-32 {
+  margin-top: 8rem;
+}
+
+.mr-32 {
+  margin-right: 8rem;
+}
+
+.mb-32 {
+  margin-bottom: 8rem;
+}
+
+.ml-32 {
+  margin-left: 8rem;
+}
+
+.mt-40 {
+  margin-top: 10rem;
+}
+
+.mr-40 {
+  margin-right: 10rem;
+}
+
+.mb-40 {
+  margin-bottom: 10rem;
+}
+
+.ml-40 {
+  margin-left: 10rem;
+}
+
+.mt-48 {
+  margin-top: 12rem;
+}
+
+.mr-48 {
+  margin-right: 12rem;
+}
+
+.mb-48 {
+  margin-bottom: 12rem;
+}
+
+.ml-48 {
+  margin-left: 12rem;
+}
+
+.mt-56 {
+  margin-top: 14rem;
+}
+
+.mr-56 {
+  margin-right: 14rem;
+}
+
+.mb-56 {
+  margin-bottom: 14rem;
+}
+
+.ml-56 {
+  margin-left: 14rem;
+}
+
+.mt-64 {
+  margin-top: 16rem;
+}
+
+.mr-64 {
+  margin-right: 16rem;
+}
+
+.mb-64 {
+  margin-bottom: 16rem;
+}
+
+.ml-64 {
+  margin-left: 16rem;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mt-px {
+  margin-top: 1px;
+}
+
+.mr-px {
+  margin-right: 1px;
+}
+
+.mb-px {
+  margin-bottom: 1px;
+}
+
+.ml-px {
+  margin-left: 1px;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mr-1 {
+  margin-right: -0.25rem;
+}
+
+.-mb-1 {
+  margin-bottom: -0.25rem;
+}
+
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-mt-2 {
+  margin-top: -0.5rem;
+}
+
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
+.-mb-2 {
+  margin-bottom: -0.5rem;
+}
+
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
+.-mr-3 {
+  margin-right: -0.75rem;
+}
+
+.-mb-3 {
+  margin-bottom: -0.75rem;
+}
+
+.-ml-3 {
+  margin-left: -0.75rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.-mr-4 {
+  margin-right: -1rem;
+}
+
+.-mb-4 {
+  margin-bottom: -1rem;
+}
+
+.-ml-4 {
+  margin-left: -1rem;
+}
+
+.-mt-5 {
+  margin-top: -1.25rem;
+}
+
+.-mr-5 {
+  margin-right: -1.25rem;
+}
+
+.-mb-5 {
+  margin-bottom: -1.25rem;
+}
+
+.-ml-5 {
+  margin-left: -1.25rem;
+}
+
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
+.-mr-6 {
+  margin-right: -1.5rem;
+}
+
+.-mb-6 {
+  margin-bottom: -1.5rem;
+}
+
+.-ml-6 {
+  margin-left: -1.5rem;
+}
+
+.-mt-8 {
+  margin-top: -2rem;
+}
+
+.-mr-8 {
+  margin-right: -2rem;
+}
+
+.-mb-8 {
+  margin-bottom: -2rem;
+}
+
+.-ml-8 {
+  margin-left: -2rem;
+}
+
+.-mt-10 {
+  margin-top: -2.5rem;
+}
+
+.-mr-10 {
+  margin-right: -2.5rem;
+}
+
+.-mb-10 {
+  margin-bottom: -2.5rem;
+}
+
+.-ml-10 {
+  margin-left: -2.5rem;
+}
+
+.-mt-12 {
+  margin-top: -3rem;
+}
+
+.-mr-12 {
+  margin-right: -3rem;
+}
+
+.-mb-12 {
+  margin-bottom: -3rem;
+}
+
+.-ml-12 {
+  margin-left: -3rem;
+}
+
+.-mt-16 {
+  margin-top: -4rem;
+}
+
+.-mr-16 {
+  margin-right: -4rem;
+}
+
+.-mb-16 {
+  margin-bottom: -4rem;
+}
+
+.-ml-16 {
+  margin-left: -4rem;
+}
+
+.-mt-20 {
+  margin-top: -5rem;
+}
+
+.-mr-20 {
+  margin-right: -5rem;
+}
+
+.-mb-20 {
+  margin-bottom: -5rem;
+}
+
+.-ml-20 {
+  margin-left: -5rem;
+}
+
+.-mt-24 {
+  margin-top: -6rem;
+}
+
+.-mr-24 {
+  margin-right: -6rem;
+}
+
+.-mb-24 {
+  margin-bottom: -6rem;
+}
+
+.-ml-24 {
+  margin-left: -6rem;
+}
+
+.-mt-32 {
+  margin-top: -8rem;
+}
+
+.-mr-32 {
+  margin-right: -8rem;
+}
+
+.-mb-32 {
+  margin-bottom: -8rem;
+}
+
+.-ml-32 {
+  margin-left: -8rem;
+}
+
+.-mt-40 {
+  margin-top: -10rem;
+}
+
+.-mr-40 {
+  margin-right: -10rem;
+}
+
+.-mb-40 {
+  margin-bottom: -10rem;
+}
+
+.-ml-40 {
+  margin-left: -10rem;
+}
+
+.-mt-48 {
+  margin-top: -12rem;
+}
+
+.-mr-48 {
+  margin-right: -12rem;
+}
+
+.-mb-48 {
+  margin-bottom: -12rem;
+}
+
+.-ml-48 {
+  margin-left: -12rem;
+}
+
+.-mt-56 {
+  margin-top: -14rem;
+}
+
+.-mr-56 {
+  margin-right: -14rem;
+}
+
+.-mb-56 {
+  margin-bottom: -14rem;
+}
+
+.-ml-56 {
+  margin-left: -14rem;
+}
+
+.-mt-64 {
+  margin-top: -16rem;
+}
+
+.-mr-64 {
+  margin-right: -16rem;
+}
+
+.-mb-64 {
+  margin-bottom: -16rem;
+}
+
+.-ml-64 {
+  margin-left: -16rem;
+}
+
+.-mt-px {
+  margin-top: -1px;
+}
+
+.-mr-px {
+  margin-right: -1px;
+}
+
+.-mb-px {
+  margin-bottom: -1px;
+}
+
+.-ml-px {
+  margin-left: -1px;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.min-w-0 {
+  min-width: 0;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.object-fill {
+  -o-object-fit: fill;
+     object-fit: fill;
+}
+
+.object-none {
+  -o-object-fit: none;
+     object-fit: none;
+}
+
+.object-scale-down {
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+}
+
+.object-bottom {
+  -o-object-position: bottom;
+     object-position: bottom;
+}
+
+.object-center {
+  -o-object-position: center;
+     object-position: center;
+}
+
+.object-left {
+  -o-object-position: left;
+     object-position: left;
+}
+
+.object-left-bottom {
+  -o-object-position: left bottom;
+     object-position: left bottom;
+}
+
+.object-left-top {
+  -o-object-position: left top;
+     object-position: left top;
+}
+
+.object-right {
+  -o-object-position: right;
+     object-position: right;
+}
+
+.object-right-bottom {
+  -o-object-position: right bottom;
+     object-position: right bottom;
+}
+
+.object-right-top {
+  -o-object-position: right top;
+     object-position: right top;
+}
+
+.object-top {
+  -o-object-position: top;
+     object-position: top;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.hover\:opacity-0:hover {
+  opacity: 0;
+}
+
+.hover\:opacity-25:hover {
+  opacity: 0.25;
+}
+
+.hover\:opacity-50:hover {
+  opacity: 0.5;
+}
+
+.hover\:opacity-75:hover {
+  opacity: 0.75;
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.focus\:opacity-0:focus {
+  opacity: 0;
+}
+
+.focus\:opacity-25:focus {
+  opacity: 0.25;
+}
+
+.focus\:opacity-50:focus {
+  opacity: 0.5;
+}
+
+.focus\:opacity-75:focus {
+  opacity: 0.75;
+}
+
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
+
+.outline-none {
+  outline: 0;
+}
+
+.focus\:outline-none:focus {
+  outline: 0;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-visible {
+  overflow-x: visible;
+}
+
+.overflow-y-visible {
+  overflow-y: visible;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.scrolling-touch {
+  -webkit-overflow-scrolling: touch;
+}
+
+.scrolling-auto {
+  -webkit-overflow-scrolling: auto;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
+}
+
+.p-12 {
+  padding: 3rem;
+}
+
+.p-16 {
+  padding: 4rem;
+}
+
+.p-20 {
+  padding: 5rem;
+}
+
+.p-24 {
+  padding: 6rem;
+}
+
+.p-32 {
+  padding: 8rem;
+}
+
+.p-40 {
+  padding: 10rem;
+}
+
+.p-48 {
+  padding: 12rem;
+}
+
+.p-56 {
+  padding: 14rem;
+}
+
+.p-64 {
+  padding: 16rem;
+}
+
+.p-px {
+  padding: 1px;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
+.px-24 {
+  padding-left: 6rem;
+  padding-right: 6rem;
+}
+
+.py-32 {
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+.px-32 {
+  padding-left: 8rem;
+  padding-right: 8rem;
+}
+
+.py-40 {
+  padding-top: 10rem;
+  padding-bottom: 10rem;
+}
+
+.px-40 {
+  padding-left: 10rem;
+  padding-right: 10rem;
+}
+
+.py-48 {
+  padding-top: 12rem;
+  padding-bottom: 12rem;
+}
+
+.px-48 {
+  padding-left: 12rem;
+  padding-right: 12rem;
+}
+
+.py-56 {
+  padding-top: 14rem;
+  padding-bottom: 14rem;
+}
+
+.px-56 {
+  padding-left: 14rem;
+  padding-right: 14rem;
+}
+
+.py-64 {
+  padding-top: 16rem;
+  padding-bottom: 16rem;
+}
+
+.px-64 {
+  padding-left: 16rem;
+  padding-right: 16rem;
+}
+
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.px-px {
+  padding-left: 1px;
+  padding-right: 1px;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pt-12 {
+  padding-top: 3rem;
+}
+
+.pr-12 {
+  padding-right: 3rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pl-12 {
+  padding-left: 3rem;
+}
+
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.pr-16 {
+  padding-right: 4rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
+.pl-16 {
+  padding-left: 4rem;
+}
+
+.pt-20 {
+  padding-top: 5rem;
+}
+
+.pr-20 {
+  padding-right: 5rem;
+}
+
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
+.pl-20 {
+  padding-left: 5rem;
+}
+
+.pt-24 {
+  padding-top: 6rem;
+}
+
+.pr-24 {
+  padding-right: 6rem;
+}
+
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
+.pl-24 {
+  padding-left: 6rem;
+}
+
+.pt-32 {
+  padding-top: 8rem;
+}
+
+.pr-32 {
+  padding-right: 8rem;
+}
+
+.pb-32 {
+  padding-bottom: 8rem;
+}
+
+.pl-32 {
+  padding-left: 8rem;
+}
+
+.pt-40 {
+  padding-top: 10rem;
+}
+
+.pr-40 {
+  padding-right: 10rem;
+}
+
+.pb-40 {
+  padding-bottom: 10rem;
+}
+
+.pl-40 {
+  padding-left: 10rem;
+}
+
+.pt-48 {
+  padding-top: 12rem;
+}
+
+.pr-48 {
+  padding-right: 12rem;
+}
+
+.pb-48 {
+  padding-bottom: 12rem;
+}
+
+.pl-48 {
+  padding-left: 12rem;
+}
+
+.pt-56 {
+  padding-top: 14rem;
+}
+
+.pr-56 {
+  padding-right: 14rem;
+}
+
+.pb-56 {
+  padding-bottom: 14rem;
+}
+
+.pl-56 {
+  padding-left: 14rem;
+}
+
+.pt-64 {
+  padding-top: 16rem;
+}
+
+.pr-64 {
+  padding-right: 16rem;
+}
+
+.pb-64 {
+  padding-bottom: 16rem;
+}
+
+.pl-64 {
+  padding-left: 16rem;
+}
+
+.pt-px {
+  padding-top: 1px;
+}
+
+.pr-px {
+  padding-right: 1px;
+}
+
+.pb-px {
+  padding-bottom: 1px;
+}
+
+.pl-px {
+  padding-left: 1px;
+}
+
+.placeholder-transparent::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.placeholder-transparent::-moz-placeholder {
+  color: transparent;
+}
+
+.placeholder-transparent:-ms-input-placeholder {
+  color: transparent;
+}
+
+.placeholder-transparent::-ms-input-placeholder {
+  color: transparent;
+}
+
+.placeholder-transparent::placeholder {
+  color: transparent;
+}
+
+.placeholder-black::-webkit-input-placeholder {
+  color: #000;
+}
+
+.placeholder-black::-moz-placeholder {
+  color: #000;
+}
+
+.placeholder-black:-ms-input-placeholder {
+  color: #000;
+}
+
+.placeholder-black::-ms-input-placeholder {
+  color: #000;
+}
+
+.placeholder-black::placeholder {
+  color: #000;
+}
+
+.placeholder-white::-webkit-input-placeholder {
+  color: #fff;
+}
+
+.placeholder-white::-moz-placeholder {
+  color: #fff;
+}
+
+.placeholder-white:-ms-input-placeholder {
+  color: #fff;
+}
+
+.placeholder-white::-ms-input-placeholder {
+  color: #fff;
+}
+
+.placeholder-white::placeholder {
+  color: #fff;
+}
+
+.placeholder-gray-100::-webkit-input-placeholder {
+  color: #f7fafc;
+}
+
+.placeholder-gray-100::-moz-placeholder {
+  color: #f7fafc;
+}
+
+.placeholder-gray-100:-ms-input-placeholder {
+  color: #f7fafc;
+}
+
+.placeholder-gray-100::-ms-input-placeholder {
+  color: #f7fafc;
+}
+
+.placeholder-gray-100::placeholder {
+  color: #f7fafc;
+}
+
+.placeholder-gray-200::-webkit-input-placeholder {
+  color: #edf2f7;
+}
+
+.placeholder-gray-200::-moz-placeholder {
+  color: #edf2f7;
+}
+
+.placeholder-gray-200:-ms-input-placeholder {
+  color: #edf2f7;
+}
+
+.placeholder-gray-200::-ms-input-placeholder {
+  color: #edf2f7;
+}
+
+.placeholder-gray-200::placeholder {
+  color: #edf2f7;
+}
+
+.placeholder-gray-300::-webkit-input-placeholder {
+  color: #e2e8f0;
+}
+
+.placeholder-gray-300::-moz-placeholder {
+  color: #e2e8f0;
+}
+
+.placeholder-gray-300:-ms-input-placeholder {
+  color: #e2e8f0;
+}
+
+.placeholder-gray-300::-ms-input-placeholder {
+  color: #e2e8f0;
+}
+
+.placeholder-gray-300::placeholder {
+  color: #e2e8f0;
+}
+
+.placeholder-gray-400::-webkit-input-placeholder {
+  color: #cbd5e0;
+}
+
+.placeholder-gray-400::-moz-placeholder {
+  color: #cbd5e0;
+}
+
+.placeholder-gray-400:-ms-input-placeholder {
+  color: #cbd5e0;
+}
+
+.placeholder-gray-400::-ms-input-placeholder {
+  color: #cbd5e0;
+}
+
+.placeholder-gray-400::placeholder {
+  color: #cbd5e0;
+}
+
+.placeholder-gray-500::-webkit-input-placeholder {
+  color: #a0aec0;
+}
+
+.placeholder-gray-500::-moz-placeholder {
+  color: #a0aec0;
+}
+
+.placeholder-gray-500:-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+.placeholder-gray-500::-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+.placeholder-gray-500::placeholder {
+  color: #a0aec0;
+}
+
+.placeholder-gray-600::-webkit-input-placeholder {
+  color: #718096;
+}
+
+.placeholder-gray-600::-moz-placeholder {
+  color: #718096;
+}
+
+.placeholder-gray-600:-ms-input-placeholder {
+  color: #718096;
+}
+
+.placeholder-gray-600::-ms-input-placeholder {
+  color: #718096;
+}
+
+.placeholder-gray-600::placeholder {
+  color: #718096;
+}
+
+.placeholder-gray-700::-webkit-input-placeholder {
+  color: #4a5568;
+}
+
+.placeholder-gray-700::-moz-placeholder {
+  color: #4a5568;
+}
+
+.placeholder-gray-700:-ms-input-placeholder {
+  color: #4a5568;
+}
+
+.placeholder-gray-700::-ms-input-placeholder {
+  color: #4a5568;
+}
+
+.placeholder-gray-700::placeholder {
+  color: #4a5568;
+}
+
+.placeholder-gray-800::-webkit-input-placeholder {
+  color: #2d3748;
+}
+
+.placeholder-gray-800::-moz-placeholder {
+  color: #2d3748;
+}
+
+.placeholder-gray-800:-ms-input-placeholder {
+  color: #2d3748;
+}
+
+.placeholder-gray-800::-ms-input-placeholder {
+  color: #2d3748;
+}
+
+.placeholder-gray-800::placeholder {
+  color: #2d3748;
+}
+
+.placeholder-gray-900::-webkit-input-placeholder {
+  color: #1a202c;
+}
+
+.placeholder-gray-900::-moz-placeholder {
+  color: #1a202c;
+}
+
+.placeholder-gray-900:-ms-input-placeholder {
+  color: #1a202c;
+}
+
+.placeholder-gray-900::-ms-input-placeholder {
+  color: #1a202c;
+}
+
+.placeholder-gray-900::placeholder {
+  color: #1a202c;
+}
+
+.placeholder-red-100::-webkit-input-placeholder {
+  color: #fff5f5;
+}
+
+.placeholder-red-100::-moz-placeholder {
+  color: #fff5f5;
+}
+
+.placeholder-red-100:-ms-input-placeholder {
+  color: #fff5f5;
+}
+
+.placeholder-red-100::-ms-input-placeholder {
+  color: #fff5f5;
+}
+
+.placeholder-red-100::placeholder {
+  color: #fff5f5;
+}
+
+.placeholder-red-200::-webkit-input-placeholder {
+  color: #fed7d7;
+}
+
+.placeholder-red-200::-moz-placeholder {
+  color: #fed7d7;
+}
+
+.placeholder-red-200:-ms-input-placeholder {
+  color: #fed7d7;
+}
+
+.placeholder-red-200::-ms-input-placeholder {
+  color: #fed7d7;
+}
+
+.placeholder-red-200::placeholder {
+  color: #fed7d7;
+}
+
+.placeholder-red-300::-webkit-input-placeholder {
+  color: #feb2b2;
+}
+
+.placeholder-red-300::-moz-placeholder {
+  color: #feb2b2;
+}
+
+.placeholder-red-300:-ms-input-placeholder {
+  color: #feb2b2;
+}
+
+.placeholder-red-300::-ms-input-placeholder {
+  color: #feb2b2;
+}
+
+.placeholder-red-300::placeholder {
+  color: #feb2b2;
+}
+
+.placeholder-red-400::-webkit-input-placeholder {
+  color: #fc8181;
+}
+
+.placeholder-red-400::-moz-placeholder {
+  color: #fc8181;
+}
+
+.placeholder-red-400:-ms-input-placeholder {
+  color: #fc8181;
+}
+
+.placeholder-red-400::-ms-input-placeholder {
+  color: #fc8181;
+}
+
+.placeholder-red-400::placeholder {
+  color: #fc8181;
+}
+
+.placeholder-red-500::-webkit-input-placeholder {
+  color: #f56565;
+}
+
+.placeholder-red-500::-moz-placeholder {
+  color: #f56565;
+}
+
+.placeholder-red-500:-ms-input-placeholder {
+  color: #f56565;
+}
+
+.placeholder-red-500::-ms-input-placeholder {
+  color: #f56565;
+}
+
+.placeholder-red-500::placeholder {
+  color: #f56565;
+}
+
+.placeholder-red-600::-webkit-input-placeholder {
+  color: #e53e3e;
+}
+
+.placeholder-red-600::-moz-placeholder {
+  color: #e53e3e;
+}
+
+.placeholder-red-600:-ms-input-placeholder {
+  color: #e53e3e;
+}
+
+.placeholder-red-600::-ms-input-placeholder {
+  color: #e53e3e;
+}
+
+.placeholder-red-600::placeholder {
+  color: #e53e3e;
+}
+
+.placeholder-red-700::-webkit-input-placeholder {
+  color: #c53030;
+}
+
+.placeholder-red-700::-moz-placeholder {
+  color: #c53030;
+}
+
+.placeholder-red-700:-ms-input-placeholder {
+  color: #c53030;
+}
+
+.placeholder-red-700::-ms-input-placeholder {
+  color: #c53030;
+}
+
+.placeholder-red-700::placeholder {
+  color: #c53030;
+}
+
+.placeholder-red-800::-webkit-input-placeholder {
+  color: #9b2c2c;
+}
+
+.placeholder-red-800::-moz-placeholder {
+  color: #9b2c2c;
+}
+
+.placeholder-red-800:-ms-input-placeholder {
+  color: #9b2c2c;
+}
+
+.placeholder-red-800::-ms-input-placeholder {
+  color: #9b2c2c;
+}
+
+.placeholder-red-800::placeholder {
+  color: #9b2c2c;
+}
+
+.placeholder-red-900::-webkit-input-placeholder {
+  color: #742a2a;
+}
+
+.placeholder-red-900::-moz-placeholder {
+  color: #742a2a;
+}
+
+.placeholder-red-900:-ms-input-placeholder {
+  color: #742a2a;
+}
+
+.placeholder-red-900::-ms-input-placeholder {
+  color: #742a2a;
+}
+
+.placeholder-red-900::placeholder {
+  color: #742a2a;
+}
+
+.placeholder-orange-100::-webkit-input-placeholder {
+  color: #fffaf0;
+}
+
+.placeholder-orange-100::-moz-placeholder {
+  color: #fffaf0;
+}
+
+.placeholder-orange-100:-ms-input-placeholder {
+  color: #fffaf0;
+}
+
+.placeholder-orange-100::-ms-input-placeholder {
+  color: #fffaf0;
+}
+
+.placeholder-orange-100::placeholder {
+  color: #fffaf0;
+}
+
+.placeholder-orange-200::-webkit-input-placeholder {
+  color: #feebc8;
+}
+
+.placeholder-orange-200::-moz-placeholder {
+  color: #feebc8;
+}
+
+.placeholder-orange-200:-ms-input-placeholder {
+  color: #feebc8;
+}
+
+.placeholder-orange-200::-ms-input-placeholder {
+  color: #feebc8;
+}
+
+.placeholder-orange-200::placeholder {
+  color: #feebc8;
+}
+
+.placeholder-orange-300::-webkit-input-placeholder {
+  color: #fbd38d;
+}
+
+.placeholder-orange-300::-moz-placeholder {
+  color: #fbd38d;
+}
+
+.placeholder-orange-300:-ms-input-placeholder {
+  color: #fbd38d;
+}
+
+.placeholder-orange-300::-ms-input-placeholder {
+  color: #fbd38d;
+}
+
+.placeholder-orange-300::placeholder {
+  color: #fbd38d;
+}
+
+.placeholder-orange-400::-webkit-input-placeholder {
+  color: #f6ad55;
+}
+
+.placeholder-orange-400::-moz-placeholder {
+  color: #f6ad55;
+}
+
+.placeholder-orange-400:-ms-input-placeholder {
+  color: #f6ad55;
+}
+
+.placeholder-orange-400::-ms-input-placeholder {
+  color: #f6ad55;
+}
+
+.placeholder-orange-400::placeholder {
+  color: #f6ad55;
+}
+
+.placeholder-orange-500::-webkit-input-placeholder {
+  color: #ed8936;
+}
+
+.placeholder-orange-500::-moz-placeholder {
+  color: #ed8936;
+}
+
+.placeholder-orange-500:-ms-input-placeholder {
+  color: #ed8936;
+}
+
+.placeholder-orange-500::-ms-input-placeholder {
+  color: #ed8936;
+}
+
+.placeholder-orange-500::placeholder {
+  color: #ed8936;
+}
+
+.placeholder-orange-600::-webkit-input-placeholder {
+  color: #dd6b20;
+}
+
+.placeholder-orange-600::-moz-placeholder {
+  color: #dd6b20;
+}
+
+.placeholder-orange-600:-ms-input-placeholder {
+  color: #dd6b20;
+}
+
+.placeholder-orange-600::-ms-input-placeholder {
+  color: #dd6b20;
+}
+
+.placeholder-orange-600::placeholder {
+  color: #dd6b20;
+}
+
+.placeholder-orange-700::-webkit-input-placeholder {
+  color: #c05621;
+}
+
+.placeholder-orange-700::-moz-placeholder {
+  color: #c05621;
+}
+
+.placeholder-orange-700:-ms-input-placeholder {
+  color: #c05621;
+}
+
+.placeholder-orange-700::-ms-input-placeholder {
+  color: #c05621;
+}
+
+.placeholder-orange-700::placeholder {
+  color: #c05621;
+}
+
+.placeholder-orange-800::-webkit-input-placeholder {
+  color: #9c4221;
+}
+
+.placeholder-orange-800::-moz-placeholder {
+  color: #9c4221;
+}
+
+.placeholder-orange-800:-ms-input-placeholder {
+  color: #9c4221;
+}
+
+.placeholder-orange-800::-ms-input-placeholder {
+  color: #9c4221;
+}
+
+.placeholder-orange-800::placeholder {
+  color: #9c4221;
+}
+
+.placeholder-orange-900::-webkit-input-placeholder {
+  color: #7b341e;
+}
+
+.placeholder-orange-900::-moz-placeholder {
+  color: #7b341e;
+}
+
+.placeholder-orange-900:-ms-input-placeholder {
+  color: #7b341e;
+}
+
+.placeholder-orange-900::-ms-input-placeholder {
+  color: #7b341e;
+}
+
+.placeholder-orange-900::placeholder {
+  color: #7b341e;
+}
+
+.placeholder-yellow-100::-webkit-input-placeholder {
+  color: #fffff0;
+}
+
+.placeholder-yellow-100::-moz-placeholder {
+  color: #fffff0;
+}
+
+.placeholder-yellow-100:-ms-input-placeholder {
+  color: #fffff0;
+}
+
+.placeholder-yellow-100::-ms-input-placeholder {
+  color: #fffff0;
+}
+
+.placeholder-yellow-100::placeholder {
+  color: #fffff0;
+}
+
+.placeholder-yellow-200::-webkit-input-placeholder {
+  color: #fefcbf;
+}
+
+.placeholder-yellow-200::-moz-placeholder {
+  color: #fefcbf;
+}
+
+.placeholder-yellow-200:-ms-input-placeholder {
+  color: #fefcbf;
+}
+
+.placeholder-yellow-200::-ms-input-placeholder {
+  color: #fefcbf;
+}
+
+.placeholder-yellow-200::placeholder {
+  color: #fefcbf;
+}
+
+.placeholder-yellow-300::-webkit-input-placeholder {
+  color: #faf089;
+}
+
+.placeholder-yellow-300::-moz-placeholder {
+  color: #faf089;
+}
+
+.placeholder-yellow-300:-ms-input-placeholder {
+  color: #faf089;
+}
+
+.placeholder-yellow-300::-ms-input-placeholder {
+  color: #faf089;
+}
+
+.placeholder-yellow-300::placeholder {
+  color: #faf089;
+}
+
+.placeholder-yellow-400::-webkit-input-placeholder {
+  color: #f6e05e;
+}
+
+.placeholder-yellow-400::-moz-placeholder {
+  color: #f6e05e;
+}
+
+.placeholder-yellow-400:-ms-input-placeholder {
+  color: #f6e05e;
+}
+
+.placeholder-yellow-400::-ms-input-placeholder {
+  color: #f6e05e;
+}
+
+.placeholder-yellow-400::placeholder {
+  color: #f6e05e;
+}
+
+.placeholder-yellow-500::-webkit-input-placeholder {
+  color: #ecc94b;
+}
+
+.placeholder-yellow-500::-moz-placeholder {
+  color: #ecc94b;
+}
+
+.placeholder-yellow-500:-ms-input-placeholder {
+  color: #ecc94b;
+}
+
+.placeholder-yellow-500::-ms-input-placeholder {
+  color: #ecc94b;
+}
+
+.placeholder-yellow-500::placeholder {
+  color: #ecc94b;
+}
+
+.placeholder-yellow-600::-webkit-input-placeholder {
+  color: #d69e2e;
+}
+
+.placeholder-yellow-600::-moz-placeholder {
+  color: #d69e2e;
+}
+
+.placeholder-yellow-600:-ms-input-placeholder {
+  color: #d69e2e;
+}
+
+.placeholder-yellow-600::-ms-input-placeholder {
+  color: #d69e2e;
+}
+
+.placeholder-yellow-600::placeholder {
+  color: #d69e2e;
+}
+
+.placeholder-yellow-700::-webkit-input-placeholder {
+  color: #b7791f;
+}
+
+.placeholder-yellow-700::-moz-placeholder {
+  color: #b7791f;
+}
+
+.placeholder-yellow-700:-ms-input-placeholder {
+  color: #b7791f;
+}
+
+.placeholder-yellow-700::-ms-input-placeholder {
+  color: #b7791f;
+}
+
+.placeholder-yellow-700::placeholder {
+  color: #b7791f;
+}
+
+.placeholder-yellow-800::-webkit-input-placeholder {
+  color: #975a16;
+}
+
+.placeholder-yellow-800::-moz-placeholder {
+  color: #975a16;
+}
+
+.placeholder-yellow-800:-ms-input-placeholder {
+  color: #975a16;
+}
+
+.placeholder-yellow-800::-ms-input-placeholder {
+  color: #975a16;
+}
+
+.placeholder-yellow-800::placeholder {
+  color: #975a16;
+}
+
+.placeholder-yellow-900::-webkit-input-placeholder {
+  color: #744210;
+}
+
+.placeholder-yellow-900::-moz-placeholder {
+  color: #744210;
+}
+
+.placeholder-yellow-900:-ms-input-placeholder {
+  color: #744210;
+}
+
+.placeholder-yellow-900::-ms-input-placeholder {
+  color: #744210;
+}
+
+.placeholder-yellow-900::placeholder {
+  color: #744210;
+}
+
+.placeholder-green-100::-webkit-input-placeholder {
+  color: #f0fff4;
+}
+
+.placeholder-green-100::-moz-placeholder {
+  color: #f0fff4;
+}
+
+.placeholder-green-100:-ms-input-placeholder {
+  color: #f0fff4;
+}
+
+.placeholder-green-100::-ms-input-placeholder {
+  color: #f0fff4;
+}
+
+.placeholder-green-100::placeholder {
+  color: #f0fff4;
+}
+
+.placeholder-green-200::-webkit-input-placeholder {
+  color: #c6f6d5;
+}
+
+.placeholder-green-200::-moz-placeholder {
+  color: #c6f6d5;
+}
+
+.placeholder-green-200:-ms-input-placeholder {
+  color: #c6f6d5;
+}
+
+.placeholder-green-200::-ms-input-placeholder {
+  color: #c6f6d5;
+}
+
+.placeholder-green-200::placeholder {
+  color: #c6f6d5;
+}
+
+.placeholder-green-300::-webkit-input-placeholder {
+  color: #9ae6b4;
+}
+
+.placeholder-green-300::-moz-placeholder {
+  color: #9ae6b4;
+}
+
+.placeholder-green-300:-ms-input-placeholder {
+  color: #9ae6b4;
+}
+
+.placeholder-green-300::-ms-input-placeholder {
+  color: #9ae6b4;
+}
+
+.placeholder-green-300::placeholder {
+  color: #9ae6b4;
+}
+
+.placeholder-green-400::-webkit-input-placeholder {
+  color: #68d391;
+}
+
+.placeholder-green-400::-moz-placeholder {
+  color: #68d391;
+}
+
+.placeholder-green-400:-ms-input-placeholder {
+  color: #68d391;
+}
+
+.placeholder-green-400::-ms-input-placeholder {
+  color: #68d391;
+}
+
+.placeholder-green-400::placeholder {
+  color: #68d391;
+}
+
+.placeholder-green-500::-webkit-input-placeholder {
+  color: #48bb78;
+}
+
+.placeholder-green-500::-moz-placeholder {
+  color: #48bb78;
+}
+
+.placeholder-green-500:-ms-input-placeholder {
+  color: #48bb78;
+}
+
+.placeholder-green-500::-ms-input-placeholder {
+  color: #48bb78;
+}
+
+.placeholder-green-500::placeholder {
+  color: #48bb78;
+}
+
+.placeholder-green-600::-webkit-input-placeholder {
+  color: #38a169;
+}
+
+.placeholder-green-600::-moz-placeholder {
+  color: #38a169;
+}
+
+.placeholder-green-600:-ms-input-placeholder {
+  color: #38a169;
+}
+
+.placeholder-green-600::-ms-input-placeholder {
+  color: #38a169;
+}
+
+.placeholder-green-600::placeholder {
+  color: #38a169;
+}
+
+.placeholder-green-700::-webkit-input-placeholder {
+  color: #2f855a;
+}
+
+.placeholder-green-700::-moz-placeholder {
+  color: #2f855a;
+}
+
+.placeholder-green-700:-ms-input-placeholder {
+  color: #2f855a;
+}
+
+.placeholder-green-700::-ms-input-placeholder {
+  color: #2f855a;
+}
+
+.placeholder-green-700::placeholder {
+  color: #2f855a;
+}
+
+.placeholder-green-800::-webkit-input-placeholder {
+  color: #276749;
+}
+
+.placeholder-green-800::-moz-placeholder {
+  color: #276749;
+}
+
+.placeholder-green-800:-ms-input-placeholder {
+  color: #276749;
+}
+
+.placeholder-green-800::-ms-input-placeholder {
+  color: #276749;
+}
+
+.placeholder-green-800::placeholder {
+  color: #276749;
+}
+
+.placeholder-green-900::-webkit-input-placeholder {
+  color: #22543d;
+}
+
+.placeholder-green-900::-moz-placeholder {
+  color: #22543d;
+}
+
+.placeholder-green-900:-ms-input-placeholder {
+  color: #22543d;
+}
+
+.placeholder-green-900::-ms-input-placeholder {
+  color: #22543d;
+}
+
+.placeholder-green-900::placeholder {
+  color: #22543d;
+}
+
+.placeholder-teal-100::-webkit-input-placeholder {
+  color: #e6fffa;
+}
+
+.placeholder-teal-100::-moz-placeholder {
+  color: #e6fffa;
+}
+
+.placeholder-teal-100:-ms-input-placeholder {
+  color: #e6fffa;
+}
+
+.placeholder-teal-100::-ms-input-placeholder {
+  color: #e6fffa;
+}
+
+.placeholder-teal-100::placeholder {
+  color: #e6fffa;
+}
+
+.placeholder-teal-200::-webkit-input-placeholder {
+  color: #b2f5ea;
+}
+
+.placeholder-teal-200::-moz-placeholder {
+  color: #b2f5ea;
+}
+
+.placeholder-teal-200:-ms-input-placeholder {
+  color: #b2f5ea;
+}
+
+.placeholder-teal-200::-ms-input-placeholder {
+  color: #b2f5ea;
+}
+
+.placeholder-teal-200::placeholder {
+  color: #b2f5ea;
+}
+
+.placeholder-teal-300::-webkit-input-placeholder {
+  color: #81e6d9;
+}
+
+.placeholder-teal-300::-moz-placeholder {
+  color: #81e6d9;
+}
+
+.placeholder-teal-300:-ms-input-placeholder {
+  color: #81e6d9;
+}
+
+.placeholder-teal-300::-ms-input-placeholder {
+  color: #81e6d9;
+}
+
+.placeholder-teal-300::placeholder {
+  color: #81e6d9;
+}
+
+.placeholder-teal-400::-webkit-input-placeholder {
+  color: #4fd1c5;
+}
+
+.placeholder-teal-400::-moz-placeholder {
+  color: #4fd1c5;
+}
+
+.placeholder-teal-400:-ms-input-placeholder {
+  color: #4fd1c5;
+}
+
+.placeholder-teal-400::-ms-input-placeholder {
+  color: #4fd1c5;
+}
+
+.placeholder-teal-400::placeholder {
+  color: #4fd1c5;
+}
+
+.placeholder-teal-500::-webkit-input-placeholder {
+  color: #38b2ac;
+}
+
+.placeholder-teal-500::-moz-placeholder {
+  color: #38b2ac;
+}
+
+.placeholder-teal-500:-ms-input-placeholder {
+  color: #38b2ac;
+}
+
+.placeholder-teal-500::-ms-input-placeholder {
+  color: #38b2ac;
+}
+
+.placeholder-teal-500::placeholder {
+  color: #38b2ac;
+}
+
+.placeholder-teal-600::-webkit-input-placeholder {
+  color: #319795;
+}
+
+.placeholder-teal-600::-moz-placeholder {
+  color: #319795;
+}
+
+.placeholder-teal-600:-ms-input-placeholder {
+  color: #319795;
+}
+
+.placeholder-teal-600::-ms-input-placeholder {
+  color: #319795;
+}
+
+.placeholder-teal-600::placeholder {
+  color: #319795;
+}
+
+.placeholder-teal-700::-webkit-input-placeholder {
+  color: #2c7a7b;
+}
+
+.placeholder-teal-700::-moz-placeholder {
+  color: #2c7a7b;
+}
+
+.placeholder-teal-700:-ms-input-placeholder {
+  color: #2c7a7b;
+}
+
+.placeholder-teal-700::-ms-input-placeholder {
+  color: #2c7a7b;
+}
+
+.placeholder-teal-700::placeholder {
+  color: #2c7a7b;
+}
+
+.placeholder-teal-800::-webkit-input-placeholder {
+  color: #285e61;
+}
+
+.placeholder-teal-800::-moz-placeholder {
+  color: #285e61;
+}
+
+.placeholder-teal-800:-ms-input-placeholder {
+  color: #285e61;
+}
+
+.placeholder-teal-800::-ms-input-placeholder {
+  color: #285e61;
+}
+
+.placeholder-teal-800::placeholder {
+  color: #285e61;
+}
+
+.placeholder-teal-900::-webkit-input-placeholder {
+  color: #234e52;
+}
+
+.placeholder-teal-900::-moz-placeholder {
+  color: #234e52;
+}
+
+.placeholder-teal-900:-ms-input-placeholder {
+  color: #234e52;
+}
+
+.placeholder-teal-900::-ms-input-placeholder {
+  color: #234e52;
+}
+
+.placeholder-teal-900::placeholder {
+  color: #234e52;
+}
+
+.placeholder-blue-100::-webkit-input-placeholder {
+  color: #ebf8ff;
+}
+
+.placeholder-blue-100::-moz-placeholder {
+  color: #ebf8ff;
+}
+
+.placeholder-blue-100:-ms-input-placeholder {
+  color: #ebf8ff;
+}
+
+.placeholder-blue-100::-ms-input-placeholder {
+  color: #ebf8ff;
+}
+
+.placeholder-blue-100::placeholder {
+  color: #ebf8ff;
+}
+
+.placeholder-blue-200::-webkit-input-placeholder {
+  color: #bee3f8;
+}
+
+.placeholder-blue-200::-moz-placeholder {
+  color: #bee3f8;
+}
+
+.placeholder-blue-200:-ms-input-placeholder {
+  color: #bee3f8;
+}
+
+.placeholder-blue-200::-ms-input-placeholder {
+  color: #bee3f8;
+}
+
+.placeholder-blue-200::placeholder {
+  color: #bee3f8;
+}
+
+.placeholder-blue-300::-webkit-input-placeholder {
+  color: #90cdf4;
+}
+
+.placeholder-blue-300::-moz-placeholder {
+  color: #90cdf4;
+}
+
+.placeholder-blue-300:-ms-input-placeholder {
+  color: #90cdf4;
+}
+
+.placeholder-blue-300::-ms-input-placeholder {
+  color: #90cdf4;
+}
+
+.placeholder-blue-300::placeholder {
+  color: #90cdf4;
+}
+
+.placeholder-blue-400::-webkit-input-placeholder {
+  color: #63b3ed;
+}
+
+.placeholder-blue-400::-moz-placeholder {
+  color: #63b3ed;
+}
+
+.placeholder-blue-400:-ms-input-placeholder {
+  color: #63b3ed;
+}
+
+.placeholder-blue-400::-ms-input-placeholder {
+  color: #63b3ed;
+}
+
+.placeholder-blue-400::placeholder {
+  color: #63b3ed;
+}
+
+.placeholder-blue-500::-webkit-input-placeholder {
+  color: #4299e1;
+}
+
+.placeholder-blue-500::-moz-placeholder {
+  color: #4299e1;
+}
+
+.placeholder-blue-500:-ms-input-placeholder {
+  color: #4299e1;
+}
+
+.placeholder-blue-500::-ms-input-placeholder {
+  color: #4299e1;
+}
+
+.placeholder-blue-500::placeholder {
+  color: #4299e1;
+}
+
+.placeholder-blue-600::-webkit-input-placeholder {
+  color: #3182ce;
+}
+
+.placeholder-blue-600::-moz-placeholder {
+  color: #3182ce;
+}
+
+.placeholder-blue-600:-ms-input-placeholder {
+  color: #3182ce;
+}
+
+.placeholder-blue-600::-ms-input-placeholder {
+  color: #3182ce;
+}
+
+.placeholder-blue-600::placeholder {
+  color: #3182ce;
+}
+
+.placeholder-blue-700::-webkit-input-placeholder {
+  color: #2b6cb0;
+}
+
+.placeholder-blue-700::-moz-placeholder {
+  color: #2b6cb0;
+}
+
+.placeholder-blue-700:-ms-input-placeholder {
+  color: #2b6cb0;
+}
+
+.placeholder-blue-700::-ms-input-placeholder {
+  color: #2b6cb0;
+}
+
+.placeholder-blue-700::placeholder {
+  color: #2b6cb0;
+}
+
+.placeholder-blue-800::-webkit-input-placeholder {
+  color: #2c5282;
+}
+
+.placeholder-blue-800::-moz-placeholder {
+  color: #2c5282;
+}
+
+.placeholder-blue-800:-ms-input-placeholder {
+  color: #2c5282;
+}
+
+.placeholder-blue-800::-ms-input-placeholder {
+  color: #2c5282;
+}
+
+.placeholder-blue-800::placeholder {
+  color: #2c5282;
+}
+
+.placeholder-blue-900::-webkit-input-placeholder {
+  color: #2a4365;
+}
+
+.placeholder-blue-900::-moz-placeholder {
+  color: #2a4365;
+}
+
+.placeholder-blue-900:-ms-input-placeholder {
+  color: #2a4365;
+}
+
+.placeholder-blue-900::-ms-input-placeholder {
+  color: #2a4365;
+}
+
+.placeholder-blue-900::placeholder {
+  color: #2a4365;
+}
+
+.placeholder-indigo-100::-webkit-input-placeholder {
+  color: #ebf4ff;
+}
+
+.placeholder-indigo-100::-moz-placeholder {
+  color: #ebf4ff;
+}
+
+.placeholder-indigo-100:-ms-input-placeholder {
+  color: #ebf4ff;
+}
+
+.placeholder-indigo-100::-ms-input-placeholder {
+  color: #ebf4ff;
+}
+
+.placeholder-indigo-100::placeholder {
+  color: #ebf4ff;
+}
+
+.placeholder-indigo-200::-webkit-input-placeholder {
+  color: #c3dafe;
+}
+
+.placeholder-indigo-200::-moz-placeholder {
+  color: #c3dafe;
+}
+
+.placeholder-indigo-200:-ms-input-placeholder {
+  color: #c3dafe;
+}
+
+.placeholder-indigo-200::-ms-input-placeholder {
+  color: #c3dafe;
+}
+
+.placeholder-indigo-200::placeholder {
+  color: #c3dafe;
+}
+
+.placeholder-indigo-300::-webkit-input-placeholder {
+  color: #a3bffa;
+}
+
+.placeholder-indigo-300::-moz-placeholder {
+  color: #a3bffa;
+}
+
+.placeholder-indigo-300:-ms-input-placeholder {
+  color: #a3bffa;
+}
+
+.placeholder-indigo-300::-ms-input-placeholder {
+  color: #a3bffa;
+}
+
+.placeholder-indigo-300::placeholder {
+  color: #a3bffa;
+}
+
+.placeholder-indigo-400::-webkit-input-placeholder {
+  color: #7f9cf5;
+}
+
+.placeholder-indigo-400::-moz-placeholder {
+  color: #7f9cf5;
+}
+
+.placeholder-indigo-400:-ms-input-placeholder {
+  color: #7f9cf5;
+}
+
+.placeholder-indigo-400::-ms-input-placeholder {
+  color: #7f9cf5;
+}
+
+.placeholder-indigo-400::placeholder {
+  color: #7f9cf5;
+}
+
+.placeholder-indigo-500::-webkit-input-placeholder {
+  color: #667eea;
+}
+
+.placeholder-indigo-500::-moz-placeholder {
+  color: #667eea;
+}
+
+.placeholder-indigo-500:-ms-input-placeholder {
+  color: #667eea;
+}
+
+.placeholder-indigo-500::-ms-input-placeholder {
+  color: #667eea;
+}
+
+.placeholder-indigo-500::placeholder {
+  color: #667eea;
+}
+
+.placeholder-indigo-600::-webkit-input-placeholder {
+  color: #5a67d8;
+}
+
+.placeholder-indigo-600::-moz-placeholder {
+  color: #5a67d8;
+}
+
+.placeholder-indigo-600:-ms-input-placeholder {
+  color: #5a67d8;
+}
+
+.placeholder-indigo-600::-ms-input-placeholder {
+  color: #5a67d8;
+}
+
+.placeholder-indigo-600::placeholder {
+  color: #5a67d8;
+}
+
+.placeholder-indigo-700::-webkit-input-placeholder {
+  color: #4c51bf;
+}
+
+.placeholder-indigo-700::-moz-placeholder {
+  color: #4c51bf;
+}
+
+.placeholder-indigo-700:-ms-input-placeholder {
+  color: #4c51bf;
+}
+
+.placeholder-indigo-700::-ms-input-placeholder {
+  color: #4c51bf;
+}
+
+.placeholder-indigo-700::placeholder {
+  color: #4c51bf;
+}
+
+.placeholder-indigo-800::-webkit-input-placeholder {
+  color: #434190;
+}
+
+.placeholder-indigo-800::-moz-placeholder {
+  color: #434190;
+}
+
+.placeholder-indigo-800:-ms-input-placeholder {
+  color: #434190;
+}
+
+.placeholder-indigo-800::-ms-input-placeholder {
+  color: #434190;
+}
+
+.placeholder-indigo-800::placeholder {
+  color: #434190;
+}
+
+.placeholder-indigo-900::-webkit-input-placeholder {
+  color: #3c366b;
+}
+
+.placeholder-indigo-900::-moz-placeholder {
+  color: #3c366b;
+}
+
+.placeholder-indigo-900:-ms-input-placeholder {
+  color: #3c366b;
+}
+
+.placeholder-indigo-900::-ms-input-placeholder {
+  color: #3c366b;
+}
+
+.placeholder-indigo-900::placeholder {
+  color: #3c366b;
+}
+
+.placeholder-purple-100::-webkit-input-placeholder {
+  color: #faf5ff;
+}
+
+.placeholder-purple-100::-moz-placeholder {
+  color: #faf5ff;
+}
+
+.placeholder-purple-100:-ms-input-placeholder {
+  color: #faf5ff;
+}
+
+.placeholder-purple-100::-ms-input-placeholder {
+  color: #faf5ff;
+}
+
+.placeholder-purple-100::placeholder {
+  color: #faf5ff;
+}
+
+.placeholder-purple-200::-webkit-input-placeholder {
+  color: #e9d8fd;
+}
+
+.placeholder-purple-200::-moz-placeholder {
+  color: #e9d8fd;
+}
+
+.placeholder-purple-200:-ms-input-placeholder {
+  color: #e9d8fd;
+}
+
+.placeholder-purple-200::-ms-input-placeholder {
+  color: #e9d8fd;
+}
+
+.placeholder-purple-200::placeholder {
+  color: #e9d8fd;
+}
+
+.placeholder-purple-300::-webkit-input-placeholder {
+  color: #d6bcfa;
+}
+
+.placeholder-purple-300::-moz-placeholder {
+  color: #d6bcfa;
+}
+
+.placeholder-purple-300:-ms-input-placeholder {
+  color: #d6bcfa;
+}
+
+.placeholder-purple-300::-ms-input-placeholder {
+  color: #d6bcfa;
+}
+
+.placeholder-purple-300::placeholder {
+  color: #d6bcfa;
+}
+
+.placeholder-purple-400::-webkit-input-placeholder {
+  color: #b794f4;
+}
+
+.placeholder-purple-400::-moz-placeholder {
+  color: #b794f4;
+}
+
+.placeholder-purple-400:-ms-input-placeholder {
+  color: #b794f4;
+}
+
+.placeholder-purple-400::-ms-input-placeholder {
+  color: #b794f4;
+}
+
+.placeholder-purple-400::placeholder {
+  color: #b794f4;
+}
+
+.placeholder-purple-500::-webkit-input-placeholder {
+  color: #9f7aea;
+}
+
+.placeholder-purple-500::-moz-placeholder {
+  color: #9f7aea;
+}
+
+.placeholder-purple-500:-ms-input-placeholder {
+  color: #9f7aea;
+}
+
+.placeholder-purple-500::-ms-input-placeholder {
+  color: #9f7aea;
+}
+
+.placeholder-purple-500::placeholder {
+  color: #9f7aea;
+}
+
+.placeholder-purple-600::-webkit-input-placeholder {
+  color: #805ad5;
+}
+
+.placeholder-purple-600::-moz-placeholder {
+  color: #805ad5;
+}
+
+.placeholder-purple-600:-ms-input-placeholder {
+  color: #805ad5;
+}
+
+.placeholder-purple-600::-ms-input-placeholder {
+  color: #805ad5;
+}
+
+.placeholder-purple-600::placeholder {
+  color: #805ad5;
+}
+
+.placeholder-purple-700::-webkit-input-placeholder {
+  color: #6b46c1;
+}
+
+.placeholder-purple-700::-moz-placeholder {
+  color: #6b46c1;
+}
+
+.placeholder-purple-700:-ms-input-placeholder {
+  color: #6b46c1;
+}
+
+.placeholder-purple-700::-ms-input-placeholder {
+  color: #6b46c1;
+}
+
+.placeholder-purple-700::placeholder {
+  color: #6b46c1;
+}
+
+.placeholder-purple-800::-webkit-input-placeholder {
+  color: #553c9a;
+}
+
+.placeholder-purple-800::-moz-placeholder {
+  color: #553c9a;
+}
+
+.placeholder-purple-800:-ms-input-placeholder {
+  color: #553c9a;
+}
+
+.placeholder-purple-800::-ms-input-placeholder {
+  color: #553c9a;
+}
+
+.placeholder-purple-800::placeholder {
+  color: #553c9a;
+}
+
+.placeholder-purple-900::-webkit-input-placeholder {
+  color: #44337a;
+}
+
+.placeholder-purple-900::-moz-placeholder {
+  color: #44337a;
+}
+
+.placeholder-purple-900:-ms-input-placeholder {
+  color: #44337a;
+}
+
+.placeholder-purple-900::-ms-input-placeholder {
+  color: #44337a;
+}
+
+.placeholder-purple-900::placeholder {
+  color: #44337a;
+}
+
+.placeholder-pink-100::-webkit-input-placeholder {
+  color: #fff5f7;
+}
+
+.placeholder-pink-100::-moz-placeholder {
+  color: #fff5f7;
+}
+
+.placeholder-pink-100:-ms-input-placeholder {
+  color: #fff5f7;
+}
+
+.placeholder-pink-100::-ms-input-placeholder {
+  color: #fff5f7;
+}
+
+.placeholder-pink-100::placeholder {
+  color: #fff5f7;
+}
+
+.placeholder-pink-200::-webkit-input-placeholder {
+  color: #fed7e2;
+}
+
+.placeholder-pink-200::-moz-placeholder {
+  color: #fed7e2;
+}
+
+.placeholder-pink-200:-ms-input-placeholder {
+  color: #fed7e2;
+}
+
+.placeholder-pink-200::-ms-input-placeholder {
+  color: #fed7e2;
+}
+
+.placeholder-pink-200::placeholder {
+  color: #fed7e2;
+}
+
+.placeholder-pink-300::-webkit-input-placeholder {
+  color: #fbb6ce;
+}
+
+.placeholder-pink-300::-moz-placeholder {
+  color: #fbb6ce;
+}
+
+.placeholder-pink-300:-ms-input-placeholder {
+  color: #fbb6ce;
+}
+
+.placeholder-pink-300::-ms-input-placeholder {
+  color: #fbb6ce;
+}
+
+.placeholder-pink-300::placeholder {
+  color: #fbb6ce;
+}
+
+.placeholder-pink-400::-webkit-input-placeholder {
+  color: #f687b3;
+}
+
+.placeholder-pink-400::-moz-placeholder {
+  color: #f687b3;
+}
+
+.placeholder-pink-400:-ms-input-placeholder {
+  color: #f687b3;
+}
+
+.placeholder-pink-400::-ms-input-placeholder {
+  color: #f687b3;
+}
+
+.placeholder-pink-400::placeholder {
+  color: #f687b3;
+}
+
+.placeholder-pink-500::-webkit-input-placeholder {
+  color: #ed64a6;
+}
+
+.placeholder-pink-500::-moz-placeholder {
+  color: #ed64a6;
+}
+
+.placeholder-pink-500:-ms-input-placeholder {
+  color: #ed64a6;
+}
+
+.placeholder-pink-500::-ms-input-placeholder {
+  color: #ed64a6;
+}
+
+.placeholder-pink-500::placeholder {
+  color: #ed64a6;
+}
+
+.placeholder-pink-600::-webkit-input-placeholder {
+  color: #d53f8c;
+}
+
+.placeholder-pink-600::-moz-placeholder {
+  color: #d53f8c;
+}
+
+.placeholder-pink-600:-ms-input-placeholder {
+  color: #d53f8c;
+}
+
+.placeholder-pink-600::-ms-input-placeholder {
+  color: #d53f8c;
+}
+
+.placeholder-pink-600::placeholder {
+  color: #d53f8c;
+}
+
+.placeholder-pink-700::-webkit-input-placeholder {
+  color: #b83280;
+}
+
+.placeholder-pink-700::-moz-placeholder {
+  color: #b83280;
+}
+
+.placeholder-pink-700:-ms-input-placeholder {
+  color: #b83280;
+}
+
+.placeholder-pink-700::-ms-input-placeholder {
+  color: #b83280;
+}
+
+.placeholder-pink-700::placeholder {
+  color: #b83280;
+}
+
+.placeholder-pink-800::-webkit-input-placeholder {
+  color: #97266d;
+}
+
+.placeholder-pink-800::-moz-placeholder {
+  color: #97266d;
+}
+
+.placeholder-pink-800:-ms-input-placeholder {
+  color: #97266d;
+}
+
+.placeholder-pink-800::-ms-input-placeholder {
+  color: #97266d;
+}
+
+.placeholder-pink-800::placeholder {
+  color: #97266d;
+}
+
+.placeholder-pink-900::-webkit-input-placeholder {
+  color: #702459;
+}
+
+.placeholder-pink-900::-moz-placeholder {
+  color: #702459;
+}
+
+.placeholder-pink-900:-ms-input-placeholder {
+  color: #702459;
+}
+
+.placeholder-pink-900::-ms-input-placeholder {
+  color: #702459;
+}
+
+.placeholder-pink-900::placeholder {
+  color: #702459;
+}
+
+.focus\:placeholder-transparent:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.focus\:placeholder-transparent:focus::-moz-placeholder {
+  color: transparent;
+}
+
+.focus\:placeholder-transparent:focus:-ms-input-placeholder {
+  color: transparent;
+}
+
+.focus\:placeholder-transparent:focus::-ms-input-placeholder {
+  color: transparent;
+}
+
+.focus\:placeholder-transparent:focus::placeholder {
+  color: transparent;
+}
+
+.focus\:placeholder-black:focus::-webkit-input-placeholder {
+  color: #000;
+}
+
+.focus\:placeholder-black:focus::-moz-placeholder {
+  color: #000;
+}
+
+.focus\:placeholder-black:focus:-ms-input-placeholder {
+  color: #000;
+}
+
+.focus\:placeholder-black:focus::-ms-input-placeholder {
+  color: #000;
+}
+
+.focus\:placeholder-black:focus::placeholder {
+  color: #000;
+}
+
+.focus\:placeholder-white:focus::-webkit-input-placeholder {
+  color: #fff;
+}
+
+.focus\:placeholder-white:focus::-moz-placeholder {
+  color: #fff;
+}
+
+.focus\:placeholder-white:focus:-ms-input-placeholder {
+  color: #fff;
+}
+
+.focus\:placeholder-white:focus::-ms-input-placeholder {
+  color: #fff;
+}
+
+.focus\:placeholder-white:focus::placeholder {
+  color: #fff;
+}
+
+.focus\:placeholder-gray-100:focus::-webkit-input-placeholder {
+  color: #f7fafc;
+}
+
+.focus\:placeholder-gray-100:focus::-moz-placeholder {
+  color: #f7fafc;
+}
+
+.focus\:placeholder-gray-100:focus:-ms-input-placeholder {
+  color: #f7fafc;
+}
+
+.focus\:placeholder-gray-100:focus::-ms-input-placeholder {
+  color: #f7fafc;
+}
+
+.focus\:placeholder-gray-100:focus::placeholder {
+  color: #f7fafc;
+}
+
+.focus\:placeholder-gray-200:focus::-webkit-input-placeholder {
+  color: #edf2f7;
+}
+
+.focus\:placeholder-gray-200:focus::-moz-placeholder {
+  color: #edf2f7;
+}
+
+.focus\:placeholder-gray-200:focus:-ms-input-placeholder {
+  color: #edf2f7;
+}
+
+.focus\:placeholder-gray-200:focus::-ms-input-placeholder {
+  color: #edf2f7;
+}
+
+.focus\:placeholder-gray-200:focus::placeholder {
+  color: #edf2f7;
+}
+
+.focus\:placeholder-gray-300:focus::-webkit-input-placeholder {
+  color: #e2e8f0;
+}
+
+.focus\:placeholder-gray-300:focus::-moz-placeholder {
+  color: #e2e8f0;
+}
+
+.focus\:placeholder-gray-300:focus:-ms-input-placeholder {
+  color: #e2e8f0;
+}
+
+.focus\:placeholder-gray-300:focus::-ms-input-placeholder {
+  color: #e2e8f0;
+}
+
+.focus\:placeholder-gray-300:focus::placeholder {
+  color: #e2e8f0;
+}
+
+.focus\:placeholder-gray-400:focus::-webkit-input-placeholder {
+  color: #cbd5e0;
+}
+
+.focus\:placeholder-gray-400:focus::-moz-placeholder {
+  color: #cbd5e0;
+}
+
+.focus\:placeholder-gray-400:focus:-ms-input-placeholder {
+  color: #cbd5e0;
+}
+
+.focus\:placeholder-gray-400:focus::-ms-input-placeholder {
+  color: #cbd5e0;
+}
+
+.focus\:placeholder-gray-400:focus::placeholder {
+  color: #cbd5e0;
+}
+
+.focus\:placeholder-gray-500:focus::-webkit-input-placeholder {
+  color: #a0aec0;
+}
+
+.focus\:placeholder-gray-500:focus::-moz-placeholder {
+  color: #a0aec0;
+}
+
+.focus\:placeholder-gray-500:focus:-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+.focus\:placeholder-gray-500:focus::-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+.focus\:placeholder-gray-500:focus::placeholder {
+  color: #a0aec0;
+}
+
+.focus\:placeholder-gray-600:focus::-webkit-input-placeholder {
+  color: #718096;
+}
+
+.focus\:placeholder-gray-600:focus::-moz-placeholder {
+  color: #718096;
+}
+
+.focus\:placeholder-gray-600:focus:-ms-input-placeholder {
+  color: #718096;
+}
+
+.focus\:placeholder-gray-600:focus::-ms-input-placeholder {
+  color: #718096;
+}
+
+.focus\:placeholder-gray-600:focus::placeholder {
+  color: #718096;
+}
+
+.focus\:placeholder-gray-700:focus::-webkit-input-placeholder {
+  color: #4a5568;
+}
+
+.focus\:placeholder-gray-700:focus::-moz-placeholder {
+  color: #4a5568;
+}
+
+.focus\:placeholder-gray-700:focus:-ms-input-placeholder {
+  color: #4a5568;
+}
+
+.focus\:placeholder-gray-700:focus::-ms-input-placeholder {
+  color: #4a5568;
+}
+
+.focus\:placeholder-gray-700:focus::placeholder {
+  color: #4a5568;
+}
+
+.focus\:placeholder-gray-800:focus::-webkit-input-placeholder {
+  color: #2d3748;
+}
+
+.focus\:placeholder-gray-800:focus::-moz-placeholder {
+  color: #2d3748;
+}
+
+.focus\:placeholder-gray-800:focus:-ms-input-placeholder {
+  color: #2d3748;
+}
+
+.focus\:placeholder-gray-800:focus::-ms-input-placeholder {
+  color: #2d3748;
+}
+
+.focus\:placeholder-gray-800:focus::placeholder {
+  color: #2d3748;
+}
+
+.focus\:placeholder-gray-900:focus::-webkit-input-placeholder {
+  color: #1a202c;
+}
+
+.focus\:placeholder-gray-900:focus::-moz-placeholder {
+  color: #1a202c;
+}
+
+.focus\:placeholder-gray-900:focus:-ms-input-placeholder {
+  color: #1a202c;
+}
+
+.focus\:placeholder-gray-900:focus::-ms-input-placeholder {
+  color: #1a202c;
+}
+
+.focus\:placeholder-gray-900:focus::placeholder {
+  color: #1a202c;
+}
+
+.focus\:placeholder-red-100:focus::-webkit-input-placeholder {
+  color: #fff5f5;
+}
+
+.focus\:placeholder-red-100:focus::-moz-placeholder {
+  color: #fff5f5;
+}
+
+.focus\:placeholder-red-100:focus:-ms-input-placeholder {
+  color: #fff5f5;
+}
+
+.focus\:placeholder-red-100:focus::-ms-input-placeholder {
+  color: #fff5f5;
+}
+
+.focus\:placeholder-red-100:focus::placeholder {
+  color: #fff5f5;
+}
+
+.focus\:placeholder-red-200:focus::-webkit-input-placeholder {
+  color: #fed7d7;
+}
+
+.focus\:placeholder-red-200:focus::-moz-placeholder {
+  color: #fed7d7;
+}
+
+.focus\:placeholder-red-200:focus:-ms-input-placeholder {
+  color: #fed7d7;
+}
+
+.focus\:placeholder-red-200:focus::-ms-input-placeholder {
+  color: #fed7d7;
+}
+
+.focus\:placeholder-red-200:focus::placeholder {
+  color: #fed7d7;
+}
+
+.focus\:placeholder-red-300:focus::-webkit-input-placeholder {
+  color: #feb2b2;
+}
+
+.focus\:placeholder-red-300:focus::-moz-placeholder {
+  color: #feb2b2;
+}
+
+.focus\:placeholder-red-300:focus:-ms-input-placeholder {
+  color: #feb2b2;
+}
+
+.focus\:placeholder-red-300:focus::-ms-input-placeholder {
+  color: #feb2b2;
+}
+
+.focus\:placeholder-red-300:focus::placeholder {
+  color: #feb2b2;
+}
+
+.focus\:placeholder-red-400:focus::-webkit-input-placeholder {
+  color: #fc8181;
+}
+
+.focus\:placeholder-red-400:focus::-moz-placeholder {
+  color: #fc8181;
+}
+
+.focus\:placeholder-red-400:focus:-ms-input-placeholder {
+  color: #fc8181;
+}
+
+.focus\:placeholder-red-400:focus::-ms-input-placeholder {
+  color: #fc8181;
+}
+
+.focus\:placeholder-red-400:focus::placeholder {
+  color: #fc8181;
+}
+
+.focus\:placeholder-red-500:focus::-webkit-input-placeholder {
+  color: #f56565;
+}
+
+.focus\:placeholder-red-500:focus::-moz-placeholder {
+  color: #f56565;
+}
+
+.focus\:placeholder-red-500:focus:-ms-input-placeholder {
+  color: #f56565;
+}
+
+.focus\:placeholder-red-500:focus::-ms-input-placeholder {
+  color: #f56565;
+}
+
+.focus\:placeholder-red-500:focus::placeholder {
+  color: #f56565;
+}
+
+.focus\:placeholder-red-600:focus::-webkit-input-placeholder {
+  color: #e53e3e;
+}
+
+.focus\:placeholder-red-600:focus::-moz-placeholder {
+  color: #e53e3e;
+}
+
+.focus\:placeholder-red-600:focus:-ms-input-placeholder {
+  color: #e53e3e;
+}
+
+.focus\:placeholder-red-600:focus::-ms-input-placeholder {
+  color: #e53e3e;
+}
+
+.focus\:placeholder-red-600:focus::placeholder {
+  color: #e53e3e;
+}
+
+.focus\:placeholder-red-700:focus::-webkit-input-placeholder {
+  color: #c53030;
+}
+
+.focus\:placeholder-red-700:focus::-moz-placeholder {
+  color: #c53030;
+}
+
+.focus\:placeholder-red-700:focus:-ms-input-placeholder {
+  color: #c53030;
+}
+
+.focus\:placeholder-red-700:focus::-ms-input-placeholder {
+  color: #c53030;
+}
+
+.focus\:placeholder-red-700:focus::placeholder {
+  color: #c53030;
+}
+
+.focus\:placeholder-red-800:focus::-webkit-input-placeholder {
+  color: #9b2c2c;
+}
+
+.focus\:placeholder-red-800:focus::-moz-placeholder {
+  color: #9b2c2c;
+}
+
+.focus\:placeholder-red-800:focus:-ms-input-placeholder {
+  color: #9b2c2c;
+}
+
+.focus\:placeholder-red-800:focus::-ms-input-placeholder {
+  color: #9b2c2c;
+}
+
+.focus\:placeholder-red-800:focus::placeholder {
+  color: #9b2c2c;
+}
+
+.focus\:placeholder-red-900:focus::-webkit-input-placeholder {
+  color: #742a2a;
+}
+
+.focus\:placeholder-red-900:focus::-moz-placeholder {
+  color: #742a2a;
+}
+
+.focus\:placeholder-red-900:focus:-ms-input-placeholder {
+  color: #742a2a;
+}
+
+.focus\:placeholder-red-900:focus::-ms-input-placeholder {
+  color: #742a2a;
+}
+
+.focus\:placeholder-red-900:focus::placeholder {
+  color: #742a2a;
+}
+
+.focus\:placeholder-orange-100:focus::-webkit-input-placeholder {
+  color: #fffaf0;
+}
+
+.focus\:placeholder-orange-100:focus::-moz-placeholder {
+  color: #fffaf0;
+}
+
+.focus\:placeholder-orange-100:focus:-ms-input-placeholder {
+  color: #fffaf0;
+}
+
+.focus\:placeholder-orange-100:focus::-ms-input-placeholder {
+  color: #fffaf0;
+}
+
+.focus\:placeholder-orange-100:focus::placeholder {
+  color: #fffaf0;
+}
+
+.focus\:placeholder-orange-200:focus::-webkit-input-placeholder {
+  color: #feebc8;
+}
+
+.focus\:placeholder-orange-200:focus::-moz-placeholder {
+  color: #feebc8;
+}
+
+.focus\:placeholder-orange-200:focus:-ms-input-placeholder {
+  color: #feebc8;
+}
+
+.focus\:placeholder-orange-200:focus::-ms-input-placeholder {
+  color: #feebc8;
+}
+
+.focus\:placeholder-orange-200:focus::placeholder {
+  color: #feebc8;
+}
+
+.focus\:placeholder-orange-300:focus::-webkit-input-placeholder {
+  color: #fbd38d;
+}
+
+.focus\:placeholder-orange-300:focus::-moz-placeholder {
+  color: #fbd38d;
+}
+
+.focus\:placeholder-orange-300:focus:-ms-input-placeholder {
+  color: #fbd38d;
+}
+
+.focus\:placeholder-orange-300:focus::-ms-input-placeholder {
+  color: #fbd38d;
+}
+
+.focus\:placeholder-orange-300:focus::placeholder {
+  color: #fbd38d;
+}
+
+.focus\:placeholder-orange-400:focus::-webkit-input-placeholder {
+  color: #f6ad55;
+}
+
+.focus\:placeholder-orange-400:focus::-moz-placeholder {
+  color: #f6ad55;
+}
+
+.focus\:placeholder-orange-400:focus:-ms-input-placeholder {
+  color: #f6ad55;
+}
+
+.focus\:placeholder-orange-400:focus::-ms-input-placeholder {
+  color: #f6ad55;
+}
+
+.focus\:placeholder-orange-400:focus::placeholder {
+  color: #f6ad55;
+}
+
+.focus\:placeholder-orange-500:focus::-webkit-input-placeholder {
+  color: #ed8936;
+}
+
+.focus\:placeholder-orange-500:focus::-moz-placeholder {
+  color: #ed8936;
+}
+
+.focus\:placeholder-orange-500:focus:-ms-input-placeholder {
+  color: #ed8936;
+}
+
+.focus\:placeholder-orange-500:focus::-ms-input-placeholder {
+  color: #ed8936;
+}
+
+.focus\:placeholder-orange-500:focus::placeholder {
+  color: #ed8936;
+}
+
+.focus\:placeholder-orange-600:focus::-webkit-input-placeholder {
+  color: #dd6b20;
+}
+
+.focus\:placeholder-orange-600:focus::-moz-placeholder {
+  color: #dd6b20;
+}
+
+.focus\:placeholder-orange-600:focus:-ms-input-placeholder {
+  color: #dd6b20;
+}
+
+.focus\:placeholder-orange-600:focus::-ms-input-placeholder {
+  color: #dd6b20;
+}
+
+.focus\:placeholder-orange-600:focus::placeholder {
+  color: #dd6b20;
+}
+
+.focus\:placeholder-orange-700:focus::-webkit-input-placeholder {
+  color: #c05621;
+}
+
+.focus\:placeholder-orange-700:focus::-moz-placeholder {
+  color: #c05621;
+}
+
+.focus\:placeholder-orange-700:focus:-ms-input-placeholder {
+  color: #c05621;
+}
+
+.focus\:placeholder-orange-700:focus::-ms-input-placeholder {
+  color: #c05621;
+}
+
+.focus\:placeholder-orange-700:focus::placeholder {
+  color: #c05621;
+}
+
+.focus\:placeholder-orange-800:focus::-webkit-input-placeholder {
+  color: #9c4221;
+}
+
+.focus\:placeholder-orange-800:focus::-moz-placeholder {
+  color: #9c4221;
+}
+
+.focus\:placeholder-orange-800:focus:-ms-input-placeholder {
+  color: #9c4221;
+}
+
+.focus\:placeholder-orange-800:focus::-ms-input-placeholder {
+  color: #9c4221;
+}
+
+.focus\:placeholder-orange-800:focus::placeholder {
+  color: #9c4221;
+}
+
+.focus\:placeholder-orange-900:focus::-webkit-input-placeholder {
+  color: #7b341e;
+}
+
+.focus\:placeholder-orange-900:focus::-moz-placeholder {
+  color: #7b341e;
+}
+
+.focus\:placeholder-orange-900:focus:-ms-input-placeholder {
+  color: #7b341e;
+}
+
+.focus\:placeholder-orange-900:focus::-ms-input-placeholder {
+  color: #7b341e;
+}
+
+.focus\:placeholder-orange-900:focus::placeholder {
+  color: #7b341e;
+}
+
+.focus\:placeholder-yellow-100:focus::-webkit-input-placeholder {
+  color: #fffff0;
+}
+
+.focus\:placeholder-yellow-100:focus::-moz-placeholder {
+  color: #fffff0;
+}
+
+.focus\:placeholder-yellow-100:focus:-ms-input-placeholder {
+  color: #fffff0;
+}
+
+.focus\:placeholder-yellow-100:focus::-ms-input-placeholder {
+  color: #fffff0;
+}
+
+.focus\:placeholder-yellow-100:focus::placeholder {
+  color: #fffff0;
+}
+
+.focus\:placeholder-yellow-200:focus::-webkit-input-placeholder {
+  color: #fefcbf;
+}
+
+.focus\:placeholder-yellow-200:focus::-moz-placeholder {
+  color: #fefcbf;
+}
+
+.focus\:placeholder-yellow-200:focus:-ms-input-placeholder {
+  color: #fefcbf;
+}
+
+.focus\:placeholder-yellow-200:focus::-ms-input-placeholder {
+  color: #fefcbf;
+}
+
+.focus\:placeholder-yellow-200:focus::placeholder {
+  color: #fefcbf;
+}
+
+.focus\:placeholder-yellow-300:focus::-webkit-input-placeholder {
+  color: #faf089;
+}
+
+.focus\:placeholder-yellow-300:focus::-moz-placeholder {
+  color: #faf089;
+}
+
+.focus\:placeholder-yellow-300:focus:-ms-input-placeholder {
+  color: #faf089;
+}
+
+.focus\:placeholder-yellow-300:focus::-ms-input-placeholder {
+  color: #faf089;
+}
+
+.focus\:placeholder-yellow-300:focus::placeholder {
+  color: #faf089;
+}
+
+.focus\:placeholder-yellow-400:focus::-webkit-input-placeholder {
+  color: #f6e05e;
+}
+
+.focus\:placeholder-yellow-400:focus::-moz-placeholder {
+  color: #f6e05e;
+}
+
+.focus\:placeholder-yellow-400:focus:-ms-input-placeholder {
+  color: #f6e05e;
+}
+
+.focus\:placeholder-yellow-400:focus::-ms-input-placeholder {
+  color: #f6e05e;
+}
+
+.focus\:placeholder-yellow-400:focus::placeholder {
+  color: #f6e05e;
+}
+
+.focus\:placeholder-yellow-500:focus::-webkit-input-placeholder {
+  color: #ecc94b;
+}
+
+.focus\:placeholder-yellow-500:focus::-moz-placeholder {
+  color: #ecc94b;
+}
+
+.focus\:placeholder-yellow-500:focus:-ms-input-placeholder {
+  color: #ecc94b;
+}
+
+.focus\:placeholder-yellow-500:focus::-ms-input-placeholder {
+  color: #ecc94b;
+}
+
+.focus\:placeholder-yellow-500:focus::placeholder {
+  color: #ecc94b;
+}
+
+.focus\:placeholder-yellow-600:focus::-webkit-input-placeholder {
+  color: #d69e2e;
+}
+
+.focus\:placeholder-yellow-600:focus::-moz-placeholder {
+  color: #d69e2e;
+}
+
+.focus\:placeholder-yellow-600:focus:-ms-input-placeholder {
+  color: #d69e2e;
+}
+
+.focus\:placeholder-yellow-600:focus::-ms-input-placeholder {
+  color: #d69e2e;
+}
+
+.focus\:placeholder-yellow-600:focus::placeholder {
+  color: #d69e2e;
+}
+
+.focus\:placeholder-yellow-700:focus::-webkit-input-placeholder {
+  color: #b7791f;
+}
+
+.focus\:placeholder-yellow-700:focus::-moz-placeholder {
+  color: #b7791f;
+}
+
+.focus\:placeholder-yellow-700:focus:-ms-input-placeholder {
+  color: #b7791f;
+}
+
+.focus\:placeholder-yellow-700:focus::-ms-input-placeholder {
+  color: #b7791f;
+}
+
+.focus\:placeholder-yellow-700:focus::placeholder {
+  color: #b7791f;
+}
+
+.focus\:placeholder-yellow-800:focus::-webkit-input-placeholder {
+  color: #975a16;
+}
+
+.focus\:placeholder-yellow-800:focus::-moz-placeholder {
+  color: #975a16;
+}
+
+.focus\:placeholder-yellow-800:focus:-ms-input-placeholder {
+  color: #975a16;
+}
+
+.focus\:placeholder-yellow-800:focus::-ms-input-placeholder {
+  color: #975a16;
+}
+
+.focus\:placeholder-yellow-800:focus::placeholder {
+  color: #975a16;
+}
+
+.focus\:placeholder-yellow-900:focus::-webkit-input-placeholder {
+  color: #744210;
+}
+
+.focus\:placeholder-yellow-900:focus::-moz-placeholder {
+  color: #744210;
+}
+
+.focus\:placeholder-yellow-900:focus:-ms-input-placeholder {
+  color: #744210;
+}
+
+.focus\:placeholder-yellow-900:focus::-ms-input-placeholder {
+  color: #744210;
+}
+
+.focus\:placeholder-yellow-900:focus::placeholder {
+  color: #744210;
+}
+
+.focus\:placeholder-green-100:focus::-webkit-input-placeholder {
+  color: #f0fff4;
+}
+
+.focus\:placeholder-green-100:focus::-moz-placeholder {
+  color: #f0fff4;
+}
+
+.focus\:placeholder-green-100:focus:-ms-input-placeholder {
+  color: #f0fff4;
+}
+
+.focus\:placeholder-green-100:focus::-ms-input-placeholder {
+  color: #f0fff4;
+}
+
+.focus\:placeholder-green-100:focus::placeholder {
+  color: #f0fff4;
+}
+
+.focus\:placeholder-green-200:focus::-webkit-input-placeholder {
+  color: #c6f6d5;
+}
+
+.focus\:placeholder-green-200:focus::-moz-placeholder {
+  color: #c6f6d5;
+}
+
+.focus\:placeholder-green-200:focus:-ms-input-placeholder {
+  color: #c6f6d5;
+}
+
+.focus\:placeholder-green-200:focus::-ms-input-placeholder {
+  color: #c6f6d5;
+}
+
+.focus\:placeholder-green-200:focus::placeholder {
+  color: #c6f6d5;
+}
+
+.focus\:placeholder-green-300:focus::-webkit-input-placeholder {
+  color: #9ae6b4;
+}
+
+.focus\:placeholder-green-300:focus::-moz-placeholder {
+  color: #9ae6b4;
+}
+
+.focus\:placeholder-green-300:focus:-ms-input-placeholder {
+  color: #9ae6b4;
+}
+
+.focus\:placeholder-green-300:focus::-ms-input-placeholder {
+  color: #9ae6b4;
+}
+
+.focus\:placeholder-green-300:focus::placeholder {
+  color: #9ae6b4;
+}
+
+.focus\:placeholder-green-400:focus::-webkit-input-placeholder {
+  color: #68d391;
+}
+
+.focus\:placeholder-green-400:focus::-moz-placeholder {
+  color: #68d391;
+}
+
+.focus\:placeholder-green-400:focus:-ms-input-placeholder {
+  color: #68d391;
+}
+
+.focus\:placeholder-green-400:focus::-ms-input-placeholder {
+  color: #68d391;
+}
+
+.focus\:placeholder-green-400:focus::placeholder {
+  color: #68d391;
+}
+
+.focus\:placeholder-green-500:focus::-webkit-input-placeholder {
+  color: #48bb78;
+}
+
+.focus\:placeholder-green-500:focus::-moz-placeholder {
+  color: #48bb78;
+}
+
+.focus\:placeholder-green-500:focus:-ms-input-placeholder {
+  color: #48bb78;
+}
+
+.focus\:placeholder-green-500:focus::-ms-input-placeholder {
+  color: #48bb78;
+}
+
+.focus\:placeholder-green-500:focus::placeholder {
+  color: #48bb78;
+}
+
+.focus\:placeholder-green-600:focus::-webkit-input-placeholder {
+  color: #38a169;
+}
+
+.focus\:placeholder-green-600:focus::-moz-placeholder {
+  color: #38a169;
+}
+
+.focus\:placeholder-green-600:focus:-ms-input-placeholder {
+  color: #38a169;
+}
+
+.focus\:placeholder-green-600:focus::-ms-input-placeholder {
+  color: #38a169;
+}
+
+.focus\:placeholder-green-600:focus::placeholder {
+  color: #38a169;
+}
+
+.focus\:placeholder-green-700:focus::-webkit-input-placeholder {
+  color: #2f855a;
+}
+
+.focus\:placeholder-green-700:focus::-moz-placeholder {
+  color: #2f855a;
+}
+
+.focus\:placeholder-green-700:focus:-ms-input-placeholder {
+  color: #2f855a;
+}
+
+.focus\:placeholder-green-700:focus::-ms-input-placeholder {
+  color: #2f855a;
+}
+
+.focus\:placeholder-green-700:focus::placeholder {
+  color: #2f855a;
+}
+
+.focus\:placeholder-green-800:focus::-webkit-input-placeholder {
+  color: #276749;
+}
+
+.focus\:placeholder-green-800:focus::-moz-placeholder {
+  color: #276749;
+}
+
+.focus\:placeholder-green-800:focus:-ms-input-placeholder {
+  color: #276749;
+}
+
+.focus\:placeholder-green-800:focus::-ms-input-placeholder {
+  color: #276749;
+}
+
+.focus\:placeholder-green-800:focus::placeholder {
+  color: #276749;
+}
+
+.focus\:placeholder-green-900:focus::-webkit-input-placeholder {
+  color: #22543d;
+}
+
+.focus\:placeholder-green-900:focus::-moz-placeholder {
+  color: #22543d;
+}
+
+.focus\:placeholder-green-900:focus:-ms-input-placeholder {
+  color: #22543d;
+}
+
+.focus\:placeholder-green-900:focus::-ms-input-placeholder {
+  color: #22543d;
+}
+
+.focus\:placeholder-green-900:focus::placeholder {
+  color: #22543d;
+}
+
+.focus\:placeholder-teal-100:focus::-webkit-input-placeholder {
+  color: #e6fffa;
+}
+
+.focus\:placeholder-teal-100:focus::-moz-placeholder {
+  color: #e6fffa;
+}
+
+.focus\:placeholder-teal-100:focus:-ms-input-placeholder {
+  color: #e6fffa;
+}
+
+.focus\:placeholder-teal-100:focus::-ms-input-placeholder {
+  color: #e6fffa;
+}
+
+.focus\:placeholder-teal-100:focus::placeholder {
+  color: #e6fffa;
+}
+
+.focus\:placeholder-teal-200:focus::-webkit-input-placeholder {
+  color: #b2f5ea;
+}
+
+.focus\:placeholder-teal-200:focus::-moz-placeholder {
+  color: #b2f5ea;
+}
+
+.focus\:placeholder-teal-200:focus:-ms-input-placeholder {
+  color: #b2f5ea;
+}
+
+.focus\:placeholder-teal-200:focus::-ms-input-placeholder {
+  color: #b2f5ea;
+}
+
+.focus\:placeholder-teal-200:focus::placeholder {
+  color: #b2f5ea;
+}
+
+.focus\:placeholder-teal-300:focus::-webkit-input-placeholder {
+  color: #81e6d9;
+}
+
+.focus\:placeholder-teal-300:focus::-moz-placeholder {
+  color: #81e6d9;
+}
+
+.focus\:placeholder-teal-300:focus:-ms-input-placeholder {
+  color: #81e6d9;
+}
+
+.focus\:placeholder-teal-300:focus::-ms-input-placeholder {
+  color: #81e6d9;
+}
+
+.focus\:placeholder-teal-300:focus::placeholder {
+  color: #81e6d9;
+}
+
+.focus\:placeholder-teal-400:focus::-webkit-input-placeholder {
+  color: #4fd1c5;
+}
+
+.focus\:placeholder-teal-400:focus::-moz-placeholder {
+  color: #4fd1c5;
+}
+
+.focus\:placeholder-teal-400:focus:-ms-input-placeholder {
+  color: #4fd1c5;
+}
+
+.focus\:placeholder-teal-400:focus::-ms-input-placeholder {
+  color: #4fd1c5;
+}
+
+.focus\:placeholder-teal-400:focus::placeholder {
+  color: #4fd1c5;
+}
+
+.focus\:placeholder-teal-500:focus::-webkit-input-placeholder {
+  color: #38b2ac;
+}
+
+.focus\:placeholder-teal-500:focus::-moz-placeholder {
+  color: #38b2ac;
+}
+
+.focus\:placeholder-teal-500:focus:-ms-input-placeholder {
+  color: #38b2ac;
+}
+
+.focus\:placeholder-teal-500:focus::-ms-input-placeholder {
+  color: #38b2ac;
+}
+
+.focus\:placeholder-teal-500:focus::placeholder {
+  color: #38b2ac;
+}
+
+.focus\:placeholder-teal-600:focus::-webkit-input-placeholder {
+  color: #319795;
+}
+
+.focus\:placeholder-teal-600:focus::-moz-placeholder {
+  color: #319795;
+}
+
+.focus\:placeholder-teal-600:focus:-ms-input-placeholder {
+  color: #319795;
+}
+
+.focus\:placeholder-teal-600:focus::-ms-input-placeholder {
+  color: #319795;
+}
+
+.focus\:placeholder-teal-600:focus::placeholder {
+  color: #319795;
+}
+
+.focus\:placeholder-teal-700:focus::-webkit-input-placeholder {
+  color: #2c7a7b;
+}
+
+.focus\:placeholder-teal-700:focus::-moz-placeholder {
+  color: #2c7a7b;
+}
+
+.focus\:placeholder-teal-700:focus:-ms-input-placeholder {
+  color: #2c7a7b;
+}
+
+.focus\:placeholder-teal-700:focus::-ms-input-placeholder {
+  color: #2c7a7b;
+}
+
+.focus\:placeholder-teal-700:focus::placeholder {
+  color: #2c7a7b;
+}
+
+.focus\:placeholder-teal-800:focus::-webkit-input-placeholder {
+  color: #285e61;
+}
+
+.focus\:placeholder-teal-800:focus::-moz-placeholder {
+  color: #285e61;
+}
+
+.focus\:placeholder-teal-800:focus:-ms-input-placeholder {
+  color: #285e61;
+}
+
+.focus\:placeholder-teal-800:focus::-ms-input-placeholder {
+  color: #285e61;
+}
+
+.focus\:placeholder-teal-800:focus::placeholder {
+  color: #285e61;
+}
+
+.focus\:placeholder-teal-900:focus::-webkit-input-placeholder {
+  color: #234e52;
+}
+
+.focus\:placeholder-teal-900:focus::-moz-placeholder {
+  color: #234e52;
+}
+
+.focus\:placeholder-teal-900:focus:-ms-input-placeholder {
+  color: #234e52;
+}
+
+.focus\:placeholder-teal-900:focus::-ms-input-placeholder {
+  color: #234e52;
+}
+
+.focus\:placeholder-teal-900:focus::placeholder {
+  color: #234e52;
+}
+
+.focus\:placeholder-blue-100:focus::-webkit-input-placeholder {
+  color: #ebf8ff;
+}
+
+.focus\:placeholder-blue-100:focus::-moz-placeholder {
+  color: #ebf8ff;
+}
+
+.focus\:placeholder-blue-100:focus:-ms-input-placeholder {
+  color: #ebf8ff;
+}
+
+.focus\:placeholder-blue-100:focus::-ms-input-placeholder {
+  color: #ebf8ff;
+}
+
+.focus\:placeholder-blue-100:focus::placeholder {
+  color: #ebf8ff;
+}
+
+.focus\:placeholder-blue-200:focus::-webkit-input-placeholder {
+  color: #bee3f8;
+}
+
+.focus\:placeholder-blue-200:focus::-moz-placeholder {
+  color: #bee3f8;
+}
+
+.focus\:placeholder-blue-200:focus:-ms-input-placeholder {
+  color: #bee3f8;
+}
+
+.focus\:placeholder-blue-200:focus::-ms-input-placeholder {
+  color: #bee3f8;
+}
+
+.focus\:placeholder-blue-200:focus::placeholder {
+  color: #bee3f8;
+}
+
+.focus\:placeholder-blue-300:focus::-webkit-input-placeholder {
+  color: #90cdf4;
+}
+
+.focus\:placeholder-blue-300:focus::-moz-placeholder {
+  color: #90cdf4;
+}
+
+.focus\:placeholder-blue-300:focus:-ms-input-placeholder {
+  color: #90cdf4;
+}
+
+.focus\:placeholder-blue-300:focus::-ms-input-placeholder {
+  color: #90cdf4;
+}
+
+.focus\:placeholder-blue-300:focus::placeholder {
+  color: #90cdf4;
+}
+
+.focus\:placeholder-blue-400:focus::-webkit-input-placeholder {
+  color: #63b3ed;
+}
+
+.focus\:placeholder-blue-400:focus::-moz-placeholder {
+  color: #63b3ed;
+}
+
+.focus\:placeholder-blue-400:focus:-ms-input-placeholder {
+  color: #63b3ed;
+}
+
+.focus\:placeholder-blue-400:focus::-ms-input-placeholder {
+  color: #63b3ed;
+}
+
+.focus\:placeholder-blue-400:focus::placeholder {
+  color: #63b3ed;
+}
+
+.focus\:placeholder-blue-500:focus::-webkit-input-placeholder {
+  color: #4299e1;
+}
+
+.focus\:placeholder-blue-500:focus::-moz-placeholder {
+  color: #4299e1;
+}
+
+.focus\:placeholder-blue-500:focus:-ms-input-placeholder {
+  color: #4299e1;
+}
+
+.focus\:placeholder-blue-500:focus::-ms-input-placeholder {
+  color: #4299e1;
+}
+
+.focus\:placeholder-blue-500:focus::placeholder {
+  color: #4299e1;
+}
+
+.focus\:placeholder-blue-600:focus::-webkit-input-placeholder {
+  color: #3182ce;
+}
+
+.focus\:placeholder-blue-600:focus::-moz-placeholder {
+  color: #3182ce;
+}
+
+.focus\:placeholder-blue-600:focus:-ms-input-placeholder {
+  color: #3182ce;
+}
+
+.focus\:placeholder-blue-600:focus::-ms-input-placeholder {
+  color: #3182ce;
+}
+
+.focus\:placeholder-blue-600:focus::placeholder {
+  color: #3182ce;
+}
+
+.focus\:placeholder-blue-700:focus::-webkit-input-placeholder {
+  color: #2b6cb0;
+}
+
+.focus\:placeholder-blue-700:focus::-moz-placeholder {
+  color: #2b6cb0;
+}
+
+.focus\:placeholder-blue-700:focus:-ms-input-placeholder {
+  color: #2b6cb0;
+}
+
+.focus\:placeholder-blue-700:focus::-ms-input-placeholder {
+  color: #2b6cb0;
+}
+
+.focus\:placeholder-blue-700:focus::placeholder {
+  color: #2b6cb0;
+}
+
+.focus\:placeholder-blue-800:focus::-webkit-input-placeholder {
+  color: #2c5282;
+}
+
+.focus\:placeholder-blue-800:focus::-moz-placeholder {
+  color: #2c5282;
+}
+
+.focus\:placeholder-blue-800:focus:-ms-input-placeholder {
+  color: #2c5282;
+}
+
+.focus\:placeholder-blue-800:focus::-ms-input-placeholder {
+  color: #2c5282;
+}
+
+.focus\:placeholder-blue-800:focus::placeholder {
+  color: #2c5282;
+}
+
+.focus\:placeholder-blue-900:focus::-webkit-input-placeholder {
+  color: #2a4365;
+}
+
+.focus\:placeholder-blue-900:focus::-moz-placeholder {
+  color: #2a4365;
+}
+
+.focus\:placeholder-blue-900:focus:-ms-input-placeholder {
+  color: #2a4365;
+}
+
+.focus\:placeholder-blue-900:focus::-ms-input-placeholder {
+  color: #2a4365;
+}
+
+.focus\:placeholder-blue-900:focus::placeholder {
+  color: #2a4365;
+}
+
+.focus\:placeholder-indigo-100:focus::-webkit-input-placeholder {
+  color: #ebf4ff;
+}
+
+.focus\:placeholder-indigo-100:focus::-moz-placeholder {
+  color: #ebf4ff;
+}
+
+.focus\:placeholder-indigo-100:focus:-ms-input-placeholder {
+  color: #ebf4ff;
+}
+
+.focus\:placeholder-indigo-100:focus::-ms-input-placeholder {
+  color: #ebf4ff;
+}
+
+.focus\:placeholder-indigo-100:focus::placeholder {
+  color: #ebf4ff;
+}
+
+.focus\:placeholder-indigo-200:focus::-webkit-input-placeholder {
+  color: #c3dafe;
+}
+
+.focus\:placeholder-indigo-200:focus::-moz-placeholder {
+  color: #c3dafe;
+}
+
+.focus\:placeholder-indigo-200:focus:-ms-input-placeholder {
+  color: #c3dafe;
+}
+
+.focus\:placeholder-indigo-200:focus::-ms-input-placeholder {
+  color: #c3dafe;
+}
+
+.focus\:placeholder-indigo-200:focus::placeholder {
+  color: #c3dafe;
+}
+
+.focus\:placeholder-indigo-300:focus::-webkit-input-placeholder {
+  color: #a3bffa;
+}
+
+.focus\:placeholder-indigo-300:focus::-moz-placeholder {
+  color: #a3bffa;
+}
+
+.focus\:placeholder-indigo-300:focus:-ms-input-placeholder {
+  color: #a3bffa;
+}
+
+.focus\:placeholder-indigo-300:focus::-ms-input-placeholder {
+  color: #a3bffa;
+}
+
+.focus\:placeholder-indigo-300:focus::placeholder {
+  color: #a3bffa;
+}
+
+.focus\:placeholder-indigo-400:focus::-webkit-input-placeholder {
+  color: #7f9cf5;
+}
+
+.focus\:placeholder-indigo-400:focus::-moz-placeholder {
+  color: #7f9cf5;
+}
+
+.focus\:placeholder-indigo-400:focus:-ms-input-placeholder {
+  color: #7f9cf5;
+}
+
+.focus\:placeholder-indigo-400:focus::-ms-input-placeholder {
+  color: #7f9cf5;
+}
+
+.focus\:placeholder-indigo-400:focus::placeholder {
+  color: #7f9cf5;
+}
+
+.focus\:placeholder-indigo-500:focus::-webkit-input-placeholder {
+  color: #667eea;
+}
+
+.focus\:placeholder-indigo-500:focus::-moz-placeholder {
+  color: #667eea;
+}
+
+.focus\:placeholder-indigo-500:focus:-ms-input-placeholder {
+  color: #667eea;
+}
+
+.focus\:placeholder-indigo-500:focus::-ms-input-placeholder {
+  color: #667eea;
+}
+
+.focus\:placeholder-indigo-500:focus::placeholder {
+  color: #667eea;
+}
+
+.focus\:placeholder-indigo-600:focus::-webkit-input-placeholder {
+  color: #5a67d8;
+}
+
+.focus\:placeholder-indigo-600:focus::-moz-placeholder {
+  color: #5a67d8;
+}
+
+.focus\:placeholder-indigo-600:focus:-ms-input-placeholder {
+  color: #5a67d8;
+}
+
+.focus\:placeholder-indigo-600:focus::-ms-input-placeholder {
+  color: #5a67d8;
+}
+
+.focus\:placeholder-indigo-600:focus::placeholder {
+  color: #5a67d8;
+}
+
+.focus\:placeholder-indigo-700:focus::-webkit-input-placeholder {
+  color: #4c51bf;
+}
+
+.focus\:placeholder-indigo-700:focus::-moz-placeholder {
+  color: #4c51bf;
+}
+
+.focus\:placeholder-indigo-700:focus:-ms-input-placeholder {
+  color: #4c51bf;
+}
+
+.focus\:placeholder-indigo-700:focus::-ms-input-placeholder {
+  color: #4c51bf;
+}
+
+.focus\:placeholder-indigo-700:focus::placeholder {
+  color: #4c51bf;
+}
+
+.focus\:placeholder-indigo-800:focus::-webkit-input-placeholder {
+  color: #434190;
+}
+
+.focus\:placeholder-indigo-800:focus::-moz-placeholder {
+  color: #434190;
+}
+
+.focus\:placeholder-indigo-800:focus:-ms-input-placeholder {
+  color: #434190;
+}
+
+.focus\:placeholder-indigo-800:focus::-ms-input-placeholder {
+  color: #434190;
+}
+
+.focus\:placeholder-indigo-800:focus::placeholder {
+  color: #434190;
+}
+
+.focus\:placeholder-indigo-900:focus::-webkit-input-placeholder {
+  color: #3c366b;
+}
+
+.focus\:placeholder-indigo-900:focus::-moz-placeholder {
+  color: #3c366b;
+}
+
+.focus\:placeholder-indigo-900:focus:-ms-input-placeholder {
+  color: #3c366b;
+}
+
+.focus\:placeholder-indigo-900:focus::-ms-input-placeholder {
+  color: #3c366b;
+}
+
+.focus\:placeholder-indigo-900:focus::placeholder {
+  color: #3c366b;
+}
+
+.focus\:placeholder-purple-100:focus::-webkit-input-placeholder {
+  color: #faf5ff;
+}
+
+.focus\:placeholder-purple-100:focus::-moz-placeholder {
+  color: #faf5ff;
+}
+
+.focus\:placeholder-purple-100:focus:-ms-input-placeholder {
+  color: #faf5ff;
+}
+
+.focus\:placeholder-purple-100:focus::-ms-input-placeholder {
+  color: #faf5ff;
+}
+
+.focus\:placeholder-purple-100:focus::placeholder {
+  color: #faf5ff;
+}
+
+.focus\:placeholder-purple-200:focus::-webkit-input-placeholder {
+  color: #e9d8fd;
+}
+
+.focus\:placeholder-purple-200:focus::-moz-placeholder {
+  color: #e9d8fd;
+}
+
+.focus\:placeholder-purple-200:focus:-ms-input-placeholder {
+  color: #e9d8fd;
+}
+
+.focus\:placeholder-purple-200:focus::-ms-input-placeholder {
+  color: #e9d8fd;
+}
+
+.focus\:placeholder-purple-200:focus::placeholder {
+  color: #e9d8fd;
+}
+
+.focus\:placeholder-purple-300:focus::-webkit-input-placeholder {
+  color: #d6bcfa;
+}
+
+.focus\:placeholder-purple-300:focus::-moz-placeholder {
+  color: #d6bcfa;
+}
+
+.focus\:placeholder-purple-300:focus:-ms-input-placeholder {
+  color: #d6bcfa;
+}
+
+.focus\:placeholder-purple-300:focus::-ms-input-placeholder {
+  color: #d6bcfa;
+}
+
+.focus\:placeholder-purple-300:focus::placeholder {
+  color: #d6bcfa;
+}
+
+.focus\:placeholder-purple-400:focus::-webkit-input-placeholder {
+  color: #b794f4;
+}
+
+.focus\:placeholder-purple-400:focus::-moz-placeholder {
+  color: #b794f4;
+}
+
+.focus\:placeholder-purple-400:focus:-ms-input-placeholder {
+  color: #b794f4;
+}
+
+.focus\:placeholder-purple-400:focus::-ms-input-placeholder {
+  color: #b794f4;
+}
+
+.focus\:placeholder-purple-400:focus::placeholder {
+  color: #b794f4;
+}
+
+.focus\:placeholder-purple-500:focus::-webkit-input-placeholder {
+  color: #9f7aea;
+}
+
+.focus\:placeholder-purple-500:focus::-moz-placeholder {
+  color: #9f7aea;
+}
+
+.focus\:placeholder-purple-500:focus:-ms-input-placeholder {
+  color: #9f7aea;
+}
+
+.focus\:placeholder-purple-500:focus::-ms-input-placeholder {
+  color: #9f7aea;
+}
+
+.focus\:placeholder-purple-500:focus::placeholder {
+  color: #9f7aea;
+}
+
+.focus\:placeholder-purple-600:focus::-webkit-input-placeholder {
+  color: #805ad5;
+}
+
+.focus\:placeholder-purple-600:focus::-moz-placeholder {
+  color: #805ad5;
+}
+
+.focus\:placeholder-purple-600:focus:-ms-input-placeholder {
+  color: #805ad5;
+}
+
+.focus\:placeholder-purple-600:focus::-ms-input-placeholder {
+  color: #805ad5;
+}
+
+.focus\:placeholder-purple-600:focus::placeholder {
+  color: #805ad5;
+}
+
+.focus\:placeholder-purple-700:focus::-webkit-input-placeholder {
+  color: #6b46c1;
+}
+
+.focus\:placeholder-purple-700:focus::-moz-placeholder {
+  color: #6b46c1;
+}
+
+.focus\:placeholder-purple-700:focus:-ms-input-placeholder {
+  color: #6b46c1;
+}
+
+.focus\:placeholder-purple-700:focus::-ms-input-placeholder {
+  color: #6b46c1;
+}
+
+.focus\:placeholder-purple-700:focus::placeholder {
+  color: #6b46c1;
+}
+
+.focus\:placeholder-purple-800:focus::-webkit-input-placeholder {
+  color: #553c9a;
+}
+
+.focus\:placeholder-purple-800:focus::-moz-placeholder {
+  color: #553c9a;
+}
+
+.focus\:placeholder-purple-800:focus:-ms-input-placeholder {
+  color: #553c9a;
+}
+
+.focus\:placeholder-purple-800:focus::-ms-input-placeholder {
+  color: #553c9a;
+}
+
+.focus\:placeholder-purple-800:focus::placeholder {
+  color: #553c9a;
+}
+
+.focus\:placeholder-purple-900:focus::-webkit-input-placeholder {
+  color: #44337a;
+}
+
+.focus\:placeholder-purple-900:focus::-moz-placeholder {
+  color: #44337a;
+}
+
+.focus\:placeholder-purple-900:focus:-ms-input-placeholder {
+  color: #44337a;
+}
+
+.focus\:placeholder-purple-900:focus::-ms-input-placeholder {
+  color: #44337a;
+}
+
+.focus\:placeholder-purple-900:focus::placeholder {
+  color: #44337a;
+}
+
+.focus\:placeholder-pink-100:focus::-webkit-input-placeholder {
+  color: #fff5f7;
+}
+
+.focus\:placeholder-pink-100:focus::-moz-placeholder {
+  color: #fff5f7;
+}
+
+.focus\:placeholder-pink-100:focus:-ms-input-placeholder {
+  color: #fff5f7;
+}
+
+.focus\:placeholder-pink-100:focus::-ms-input-placeholder {
+  color: #fff5f7;
+}
+
+.focus\:placeholder-pink-100:focus::placeholder {
+  color: #fff5f7;
+}
+
+.focus\:placeholder-pink-200:focus::-webkit-input-placeholder {
+  color: #fed7e2;
+}
+
+.focus\:placeholder-pink-200:focus::-moz-placeholder {
+  color: #fed7e2;
+}
+
+.focus\:placeholder-pink-200:focus:-ms-input-placeholder {
+  color: #fed7e2;
+}
+
+.focus\:placeholder-pink-200:focus::-ms-input-placeholder {
+  color: #fed7e2;
+}
+
+.focus\:placeholder-pink-200:focus::placeholder {
+  color: #fed7e2;
+}
+
+.focus\:placeholder-pink-300:focus::-webkit-input-placeholder {
+  color: #fbb6ce;
+}
+
+.focus\:placeholder-pink-300:focus::-moz-placeholder {
+  color: #fbb6ce;
+}
+
+.focus\:placeholder-pink-300:focus:-ms-input-placeholder {
+  color: #fbb6ce;
+}
+
+.focus\:placeholder-pink-300:focus::-ms-input-placeholder {
+  color: #fbb6ce;
+}
+
+.focus\:placeholder-pink-300:focus::placeholder {
+  color: #fbb6ce;
+}
+
+.focus\:placeholder-pink-400:focus::-webkit-input-placeholder {
+  color: #f687b3;
+}
+
+.focus\:placeholder-pink-400:focus::-moz-placeholder {
+  color: #f687b3;
+}
+
+.focus\:placeholder-pink-400:focus:-ms-input-placeholder {
+  color: #f687b3;
+}
+
+.focus\:placeholder-pink-400:focus::-ms-input-placeholder {
+  color: #f687b3;
+}
+
+.focus\:placeholder-pink-400:focus::placeholder {
+  color: #f687b3;
+}
+
+.focus\:placeholder-pink-500:focus::-webkit-input-placeholder {
+  color: #ed64a6;
+}
+
+.focus\:placeholder-pink-500:focus::-moz-placeholder {
+  color: #ed64a6;
+}
+
+.focus\:placeholder-pink-500:focus:-ms-input-placeholder {
+  color: #ed64a6;
+}
+
+.focus\:placeholder-pink-500:focus::-ms-input-placeholder {
+  color: #ed64a6;
+}
+
+.focus\:placeholder-pink-500:focus::placeholder {
+  color: #ed64a6;
+}
+
+.focus\:placeholder-pink-600:focus::-webkit-input-placeholder {
+  color: #d53f8c;
+}
+
+.focus\:placeholder-pink-600:focus::-moz-placeholder {
+  color: #d53f8c;
+}
+
+.focus\:placeholder-pink-600:focus:-ms-input-placeholder {
+  color: #d53f8c;
+}
+
+.focus\:placeholder-pink-600:focus::-ms-input-placeholder {
+  color: #d53f8c;
+}
+
+.focus\:placeholder-pink-600:focus::placeholder {
+  color: #d53f8c;
+}
+
+.focus\:placeholder-pink-700:focus::-webkit-input-placeholder {
+  color: #b83280;
+}
+
+.focus\:placeholder-pink-700:focus::-moz-placeholder {
+  color: #b83280;
+}
+
+.focus\:placeholder-pink-700:focus:-ms-input-placeholder {
+  color: #b83280;
+}
+
+.focus\:placeholder-pink-700:focus::-ms-input-placeholder {
+  color: #b83280;
+}
+
+.focus\:placeholder-pink-700:focus::placeholder {
+  color: #b83280;
+}
+
+.focus\:placeholder-pink-800:focus::-webkit-input-placeholder {
+  color: #97266d;
+}
+
+.focus\:placeholder-pink-800:focus::-moz-placeholder {
+  color: #97266d;
+}
+
+.focus\:placeholder-pink-800:focus:-ms-input-placeholder {
+  color: #97266d;
+}
+
+.focus\:placeholder-pink-800:focus::-ms-input-placeholder {
+  color: #97266d;
+}
+
+.focus\:placeholder-pink-800:focus::placeholder {
+  color: #97266d;
+}
+
+.focus\:placeholder-pink-900:focus::-webkit-input-placeholder {
+  color: #702459;
+}
+
+.focus\:placeholder-pink-900:focus::-moz-placeholder {
+  color: #702459;
+}
+
+.focus\:placeholder-pink-900:focus:-ms-input-placeholder {
+  color: #702459;
+}
+
+.focus\:placeholder-pink-900:focus::-ms-input-placeholder {
+  color: #702459;
+}
+
+.focus\:placeholder-pink-900:focus::placeholder {
+  color: #702459;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+.inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.inset-auto {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+}
+
+.inset-y-0 {
+  top: 0;
+  bottom: 0;
+}
+
+.inset-x-0 {
+  right: 0;
+  left: 0;
+}
+
+.inset-y-auto {
+  top: auto;
+  bottom: auto;
+}
+
+.inset-x-auto {
+  right: auto;
+  left: auto;
+}
+
+.top-0 {
+  top: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.top-auto {
+  top: auto;
+}
+
+.right-auto {
+  right: auto;
+}
+
+.bottom-auto {
+  bottom: auto;
+}
+
+.left-auto {
+  left: auto;
+}
+
+.resize-none {
+  resize: none;
+}
+
+.resize-y {
+  resize: vertical;
+}
+
+.resize-x {
+  resize: horizontal;
+}
+
+.resize {
+  resize: both;
+}
+
+.shadow {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.shadow-md {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.shadow-lg {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.shadow-xl {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-2xl {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.shadow-inner {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+}
+
+.shadow-outline {
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.shadow-none {
+  box-shadow: none;
+}
+
+.hover\:shadow:hover {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.hover\:shadow-md:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.hover\:shadow-lg:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.hover\:shadow-xl:hover {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.hover\:shadow-2xl:hover {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.hover\:shadow-inner:hover {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+}
+
+.hover\:shadow-outline:hover {
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.hover\:shadow-none:hover {
+  box-shadow: none;
+}
+
+.focus\:shadow:focus {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.focus\:shadow-md:focus {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.focus\:shadow-lg:focus {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.focus\:shadow-xl:focus {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.focus\:shadow-2xl:focus {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.focus\:shadow-inner:focus {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+}
+
+.focus\:shadow-outline:focus {
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.focus\:shadow-none:focus {
+  box-shadow: none;
+}
+
+.fill-current {
+  fill: currentColor;
+}
+
+.stroke-current {
+  stroke: currentColor;
+}
+
+.table-auto {
+  table-layout: auto;
+}
+
+.table-fixed {
+  table-layout: fixed;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-transparent {
+  color: transparent;
+}
+
+.text-black {
+  color: #000;
+}
+
+.text-white {
+  color: #fff;
+}
+
+.text-gray-100 {
+  color: #f7fafc;
+}
+
+.text-gray-200 {
+  color: #edf2f7;
+}
+
+.text-gray-300 {
+  color: #e2e8f0;
+}
+
+.text-gray-400 {
+  color: #cbd5e0;
+}
+
+.text-gray-500 {
+  color: #a0aec0;
+}
+
+.text-gray-600 {
+  color: #718096;
+}
+
+.text-gray-700 {
+  color: #4a5568;
+}
+
+.text-gray-800 {
+  color: #2d3748;
+}
+
+.text-gray-900 {
+  color: #1a202c;
+}
+
+.text-red-100 {
+  color: #fff5f5;
+}
+
+.text-red-200 {
+  color: #fed7d7;
+}
+
+.text-red-300 {
+  color: #feb2b2;
+}
+
+.text-red-400 {
+  color: #fc8181;
+}
+
+.text-red-500 {
+  color: #f56565;
+}
+
+.text-red-600 {
+  color: #e53e3e;
+}
+
+.text-red-700 {
+  color: #c53030;
+}
+
+.text-red-800 {
+  color: #9b2c2c;
+}
+
+.text-red-900 {
+  color: #742a2a;
+}
+
+.text-orange-100 {
+  color: #fffaf0;
+}
+
+.text-orange-200 {
+  color: #feebc8;
+}
+
+.text-orange-300 {
+  color: #fbd38d;
+}
+
+.text-orange-400 {
+  color: #f6ad55;
+}
+
+.text-orange-500 {
+  color: #ed8936;
+}
+
+.text-orange-600 {
+  color: #dd6b20;
+}
+
+.text-orange-700 {
+  color: #c05621;
+}
+
+.text-orange-800 {
+  color: #9c4221;
+}
+
+.text-orange-900 {
+  color: #7b341e;
+}
+
+.text-yellow-100 {
+  color: #fffff0;
+}
+
+.text-yellow-200 {
+  color: #fefcbf;
+}
+
+.text-yellow-300 {
+  color: #faf089;
+}
+
+.text-yellow-400 {
+  color: #f6e05e;
+}
+
+.text-yellow-500 {
+  color: #ecc94b;
+}
+
+.text-yellow-600 {
+  color: #d69e2e;
+}
+
+.text-yellow-700 {
+  color: #b7791f;
+}
+
+.text-yellow-800 {
+  color: #975a16;
+}
+
+.text-yellow-900 {
+  color: #744210;
+}
+
+.text-green-100 {
+  color: #f0fff4;
+}
+
+.text-green-200 {
+  color: #c6f6d5;
+}
+
+.text-green-300 {
+  color: #9ae6b4;
+}
+
+.text-green-400 {
+  color: #68d391;
+}
+
+.text-green-500 {
+  color: #48bb78;
+}
+
+.text-green-600 {
+  color: #38a169;
+}
+
+.text-green-700 {
+  color: #2f855a;
+}
+
+.text-green-800 {
+  color: #276749;
+}
+
+.text-green-900 {
+  color: #22543d;
+}
+
+.text-teal-100 {
+  color: #e6fffa;
+}
+
+.text-teal-200 {
+  color: #b2f5ea;
+}
+
+.text-teal-300 {
+  color: #81e6d9;
+}
+
+.text-teal-400 {
+  color: #4fd1c5;
+}
+
+.text-teal-500 {
+  color: #38b2ac;
+}
+
+.text-teal-600 {
+  color: #319795;
+}
+
+.text-teal-700 {
+  color: #2c7a7b;
+}
+
+.text-teal-800 {
+  color: #285e61;
+}
+
+.text-teal-900 {
+  color: #234e52;
+}
+
+.text-blue-100 {
+  color: #ebf8ff;
+}
+
+.text-blue-200 {
+  color: #bee3f8;
+}
+
+.text-blue-300 {
+  color: #90cdf4;
+}
+
+.text-blue-400 {
+  color: #63b3ed;
+}
+
+.text-blue-500 {
+  color: #4299e1;
+}
+
+.text-blue-600 {
+  color: #3182ce;
+}
+
+.text-blue-700 {
+  color: #2b6cb0;
+}
+
+.text-blue-800 {
+  color: #2c5282;
+}
+
+.text-blue-900 {
+  color: #2a4365;
+}
+
+.text-indigo-100 {
+  color: #ebf4ff;
+}
+
+.text-indigo-200 {
+  color: #c3dafe;
+}
+
+.text-indigo-300 {
+  color: #a3bffa;
+}
+
+.text-indigo-400 {
+  color: #7f9cf5;
+}
+
+.text-indigo-500 {
+  color: #667eea;
+}
+
+.text-indigo-600 {
+  color: #5a67d8;
+}
+
+.text-indigo-700 {
+  color: #4c51bf;
+}
+
+.text-indigo-800 {
+  color: #434190;
+}
+
+.text-indigo-900 {
+  color: #3c366b;
+}
+
+.text-purple-100 {
+  color: #faf5ff;
+}
+
+.text-purple-200 {
+  color: #e9d8fd;
+}
+
+.text-purple-300 {
+  color: #d6bcfa;
+}
+
+.text-purple-400 {
+  color: #b794f4;
+}
+
+.text-purple-500 {
+  color: #9f7aea;
+}
+
+.text-purple-600 {
+  color: #805ad5;
+}
+
+.text-purple-700 {
+  color: #6b46c1;
+}
+
+.text-purple-800 {
+  color: #553c9a;
+}
+
+.text-purple-900 {
+  color: #44337a;
+}
+
+.text-pink-100 {
+  color: #fff5f7;
+}
+
+.text-pink-200 {
+  color: #fed7e2;
+}
+
+.text-pink-300 {
+  color: #fbb6ce;
+}
+
+.text-pink-400 {
+  color: #f687b3;
+}
+
+.text-pink-500 {
+  color: #ed64a6;
+}
+
+.text-pink-600 {
+  color: #d53f8c;
+}
+
+.text-pink-700 {
+  color: #b83280;
+}
+
+.text-pink-800 {
+  color: #97266d;
+}
+
+.text-pink-900 {
+  color: #702459;
+}
+
+.hover\:text-transparent:hover {
+  color: transparent;
+}
+
+.hover\:text-black:hover {
+  color: #000;
+}
+
+.hover\:text-white:hover {
+  color: #fff;
+}
+
+.hover\:text-gray-100:hover {
+  color: #f7fafc;
+}
+
+.hover\:text-gray-200:hover {
+  color: #edf2f7;
+}
+
+.hover\:text-gray-300:hover {
+  color: #e2e8f0;
+}
+
+.hover\:text-gray-400:hover {
+  color: #cbd5e0;
+}
+
+.hover\:text-gray-500:hover {
+  color: #a0aec0;
+}
+
+.hover\:text-gray-600:hover {
+  color: #718096;
+}
+
+.hover\:text-gray-700:hover {
+  color: #4a5568;
+}
+
+.hover\:text-gray-800:hover {
+  color: #2d3748;
+}
+
+.hover\:text-gray-900:hover {
+  color: #1a202c;
+}
+
+.hover\:text-red-100:hover {
+  color: #fff5f5;
+}
+
+.hover\:text-red-200:hover {
+  color: #fed7d7;
+}
+
+.hover\:text-red-300:hover {
+  color: #feb2b2;
+}
+
+.hover\:text-red-400:hover {
+  color: #fc8181;
+}
+
+.hover\:text-red-500:hover {
+  color: #f56565;
+}
+
+.hover\:text-red-600:hover {
+  color: #e53e3e;
+}
+
+.hover\:text-red-700:hover {
+  color: #c53030;
+}
+
+.hover\:text-red-800:hover {
+  color: #9b2c2c;
+}
+
+.hover\:text-red-900:hover {
+  color: #742a2a;
+}
+
+.hover\:text-orange-100:hover {
+  color: #fffaf0;
+}
+
+.hover\:text-orange-200:hover {
+  color: #feebc8;
+}
+
+.hover\:text-orange-300:hover {
+  color: #fbd38d;
+}
+
+.hover\:text-orange-400:hover {
+  color: #f6ad55;
+}
+
+.hover\:text-orange-500:hover {
+  color: #ed8936;
+}
+
+.hover\:text-orange-600:hover {
+  color: #dd6b20;
+}
+
+.hover\:text-orange-700:hover {
+  color: #c05621;
+}
+
+.hover\:text-orange-800:hover {
+  color: #9c4221;
+}
+
+.hover\:text-orange-900:hover {
+  color: #7b341e;
+}
+
+.hover\:text-yellow-100:hover {
+  color: #fffff0;
+}
+
+.hover\:text-yellow-200:hover {
+  color: #fefcbf;
+}
+
+.hover\:text-yellow-300:hover {
+  color: #faf089;
+}
+
+.hover\:text-yellow-400:hover {
+  color: #f6e05e;
+}
+
+.hover\:text-yellow-500:hover {
+  color: #ecc94b;
+}
+
+.hover\:text-yellow-600:hover {
+  color: #d69e2e;
+}
+
+.hover\:text-yellow-700:hover {
+  color: #b7791f;
+}
+
+.hover\:text-yellow-800:hover {
+  color: #975a16;
+}
+
+.hover\:text-yellow-900:hover {
+  color: #744210;
+}
+
+.hover\:text-green-100:hover {
+  color: #f0fff4;
+}
+
+.hover\:text-green-200:hover {
+  color: #c6f6d5;
+}
+
+.hover\:text-green-300:hover {
+  color: #9ae6b4;
+}
+
+.hover\:text-green-400:hover {
+  color: #68d391;
+}
+
+.hover\:text-green-500:hover {
+  color: #48bb78;
+}
+
+.hover\:text-green-600:hover {
+  color: #38a169;
+}
+
+.hover\:text-green-700:hover {
+  color: #2f855a;
+}
+
+.hover\:text-green-800:hover {
+  color: #276749;
+}
+
+.hover\:text-green-900:hover {
+  color: #22543d;
+}
+
+.hover\:text-teal-100:hover {
+  color: #e6fffa;
+}
+
+.hover\:text-teal-200:hover {
+  color: #b2f5ea;
+}
+
+.hover\:text-teal-300:hover {
+  color: #81e6d9;
+}
+
+.hover\:text-teal-400:hover {
+  color: #4fd1c5;
+}
+
+.hover\:text-teal-500:hover {
+  color: #38b2ac;
+}
+
+.hover\:text-teal-600:hover {
+  color: #319795;
+}
+
+.hover\:text-teal-700:hover {
+  color: #2c7a7b;
+}
+
+.hover\:text-teal-800:hover {
+  color: #285e61;
+}
+
+.hover\:text-teal-900:hover {
+  color: #234e52;
+}
+
+.hover\:text-blue-100:hover {
+  color: #ebf8ff;
+}
+
+.hover\:text-blue-200:hover {
+  color: #bee3f8;
+}
+
+.hover\:text-blue-300:hover {
+  color: #90cdf4;
+}
+
+.hover\:text-blue-400:hover {
+  color: #63b3ed;
+}
+
+.hover\:text-blue-500:hover {
+  color: #4299e1;
+}
+
+.hover\:text-blue-600:hover {
+  color: #3182ce;
+}
+
+.hover\:text-blue-700:hover {
+  color: #2b6cb0;
+}
+
+.hover\:text-blue-800:hover {
+  color: #2c5282;
+}
+
+.hover\:text-blue-900:hover {
+  color: #2a4365;
+}
+
+.hover\:text-indigo-100:hover {
+  color: #ebf4ff;
+}
+
+.hover\:text-indigo-200:hover {
+  color: #c3dafe;
+}
+
+.hover\:text-indigo-300:hover {
+  color: #a3bffa;
+}
+
+.hover\:text-indigo-400:hover {
+  color: #7f9cf5;
+}
+
+.hover\:text-indigo-500:hover {
+  color: #667eea;
+}
+
+.hover\:text-indigo-600:hover {
+  color: #5a67d8;
+}
+
+.hover\:text-indigo-700:hover {
+  color: #4c51bf;
+}
+
+.hover\:text-indigo-800:hover {
+  color: #434190;
+}
+
+.hover\:text-indigo-900:hover {
+  color: #3c366b;
+}
+
+.hover\:text-purple-100:hover {
+  color: #faf5ff;
+}
+
+.hover\:text-purple-200:hover {
+  color: #e9d8fd;
+}
+
+.hover\:text-purple-300:hover {
+  color: #d6bcfa;
+}
+
+.hover\:text-purple-400:hover {
+  color: #b794f4;
+}
+
+.hover\:text-purple-500:hover {
+  color: #9f7aea;
+}
+
+.hover\:text-purple-600:hover {
+  color: #805ad5;
+}
+
+.hover\:text-purple-700:hover {
+  color: #6b46c1;
+}
+
+.hover\:text-purple-800:hover {
+  color: #553c9a;
+}
+
+.hover\:text-purple-900:hover {
+  color: #44337a;
+}
+
+.hover\:text-pink-100:hover {
+  color: #fff5f7;
+}
+
+.hover\:text-pink-200:hover {
+  color: #fed7e2;
+}
+
+.hover\:text-pink-300:hover {
+  color: #fbb6ce;
+}
+
+.hover\:text-pink-400:hover {
+  color: #f687b3;
+}
+
+.hover\:text-pink-500:hover {
+  color: #ed64a6;
+}
+
+.hover\:text-pink-600:hover {
+  color: #d53f8c;
+}
+
+.hover\:text-pink-700:hover {
+  color: #b83280;
+}
+
+.hover\:text-pink-800:hover {
+  color: #97266d;
+}
+
+.hover\:text-pink-900:hover {
+  color: #702459;
+}
+
+.focus\:text-transparent:focus {
+  color: transparent;
+}
+
+.focus\:text-black:focus {
+  color: #000;
+}
+
+.focus\:text-white:focus {
+  color: #fff;
+}
+
+.focus\:text-gray-100:focus {
+  color: #f7fafc;
+}
+
+.focus\:text-gray-200:focus {
+  color: #edf2f7;
+}
+
+.focus\:text-gray-300:focus {
+  color: #e2e8f0;
+}
+
+.focus\:text-gray-400:focus {
+  color: #cbd5e0;
+}
+
+.focus\:text-gray-500:focus {
+  color: #a0aec0;
+}
+
+.focus\:text-gray-600:focus {
+  color: #718096;
+}
+
+.focus\:text-gray-700:focus {
+  color: #4a5568;
+}
+
+.focus\:text-gray-800:focus {
+  color: #2d3748;
+}
+
+.focus\:text-gray-900:focus {
+  color: #1a202c;
+}
+
+.focus\:text-red-100:focus {
+  color: #fff5f5;
+}
+
+.focus\:text-red-200:focus {
+  color: #fed7d7;
+}
+
+.focus\:text-red-300:focus {
+  color: #feb2b2;
+}
+
+.focus\:text-red-400:focus {
+  color: #fc8181;
+}
+
+.focus\:text-red-500:focus {
+  color: #f56565;
+}
+
+.focus\:text-red-600:focus {
+  color: #e53e3e;
+}
+
+.focus\:text-red-700:focus {
+  color: #c53030;
+}
+
+.focus\:text-red-800:focus {
+  color: #9b2c2c;
+}
+
+.focus\:text-red-900:focus {
+  color: #742a2a;
+}
+
+.focus\:text-orange-100:focus {
+  color: #fffaf0;
+}
+
+.focus\:text-orange-200:focus {
+  color: #feebc8;
+}
+
+.focus\:text-orange-300:focus {
+  color: #fbd38d;
+}
+
+.focus\:text-orange-400:focus {
+  color: #f6ad55;
+}
+
+.focus\:text-orange-500:focus {
+  color: #ed8936;
+}
+
+.focus\:text-orange-600:focus {
+  color: #dd6b20;
+}
+
+.focus\:text-orange-700:focus {
+  color: #c05621;
+}
+
+.focus\:text-orange-800:focus {
+  color: #9c4221;
+}
+
+.focus\:text-orange-900:focus {
+  color: #7b341e;
+}
+
+.focus\:text-yellow-100:focus {
+  color: #fffff0;
+}
+
+.focus\:text-yellow-200:focus {
+  color: #fefcbf;
+}
+
+.focus\:text-yellow-300:focus {
+  color: #faf089;
+}
+
+.focus\:text-yellow-400:focus {
+  color: #f6e05e;
+}
+
+.focus\:text-yellow-500:focus {
+  color: #ecc94b;
+}
+
+.focus\:text-yellow-600:focus {
+  color: #d69e2e;
+}
+
+.focus\:text-yellow-700:focus {
+  color: #b7791f;
+}
+
+.focus\:text-yellow-800:focus {
+  color: #975a16;
+}
+
+.focus\:text-yellow-900:focus {
+  color: #744210;
+}
+
+.focus\:text-green-100:focus {
+  color: #f0fff4;
+}
+
+.focus\:text-green-200:focus {
+  color: #c6f6d5;
+}
+
+.focus\:text-green-300:focus {
+  color: #9ae6b4;
+}
+
+.focus\:text-green-400:focus {
+  color: #68d391;
+}
+
+.focus\:text-green-500:focus {
+  color: #48bb78;
+}
+
+.focus\:text-green-600:focus {
+  color: #38a169;
+}
+
+.focus\:text-green-700:focus {
+  color: #2f855a;
+}
+
+.focus\:text-green-800:focus {
+  color: #276749;
+}
+
+.focus\:text-green-900:focus {
+  color: #22543d;
+}
+
+.focus\:text-teal-100:focus {
+  color: #e6fffa;
+}
+
+.focus\:text-teal-200:focus {
+  color: #b2f5ea;
+}
+
+.focus\:text-teal-300:focus {
+  color: #81e6d9;
+}
+
+.focus\:text-teal-400:focus {
+  color: #4fd1c5;
+}
+
+.focus\:text-teal-500:focus {
+  color: #38b2ac;
+}
+
+.focus\:text-teal-600:focus {
+  color: #319795;
+}
+
+.focus\:text-teal-700:focus {
+  color: #2c7a7b;
+}
+
+.focus\:text-teal-800:focus {
+  color: #285e61;
+}
+
+.focus\:text-teal-900:focus {
+  color: #234e52;
+}
+
+.focus\:text-blue-100:focus {
+  color: #ebf8ff;
+}
+
+.focus\:text-blue-200:focus {
+  color: #bee3f8;
+}
+
+.focus\:text-blue-300:focus {
+  color: #90cdf4;
+}
+
+.focus\:text-blue-400:focus {
+  color: #63b3ed;
+}
+
+.focus\:text-blue-500:focus {
+  color: #4299e1;
+}
+
+.focus\:text-blue-600:focus {
+  color: #3182ce;
+}
+
+.focus\:text-blue-700:focus {
+  color: #2b6cb0;
+}
+
+.focus\:text-blue-800:focus {
+  color: #2c5282;
+}
+
+.focus\:text-blue-900:focus {
+  color: #2a4365;
+}
+
+.focus\:text-indigo-100:focus {
+  color: #ebf4ff;
+}
+
+.focus\:text-indigo-200:focus {
+  color: #c3dafe;
+}
+
+.focus\:text-indigo-300:focus {
+  color: #a3bffa;
+}
+
+.focus\:text-indigo-400:focus {
+  color: #7f9cf5;
+}
+
+.focus\:text-indigo-500:focus {
+  color: #667eea;
+}
+
+.focus\:text-indigo-600:focus {
+  color: #5a67d8;
+}
+
+.focus\:text-indigo-700:focus {
+  color: #4c51bf;
+}
+
+.focus\:text-indigo-800:focus {
+  color: #434190;
+}
+
+.focus\:text-indigo-900:focus {
+  color: #3c366b;
+}
+
+.focus\:text-purple-100:focus {
+  color: #faf5ff;
+}
+
+.focus\:text-purple-200:focus {
+  color: #e9d8fd;
+}
+
+.focus\:text-purple-300:focus {
+  color: #d6bcfa;
+}
+
+.focus\:text-purple-400:focus {
+  color: #b794f4;
+}
+
+.focus\:text-purple-500:focus {
+  color: #9f7aea;
+}
+
+.focus\:text-purple-600:focus {
+  color: #805ad5;
+}
+
+.focus\:text-purple-700:focus {
+  color: #6b46c1;
+}
+
+.focus\:text-purple-800:focus {
+  color: #553c9a;
+}
+
+.focus\:text-purple-900:focus {
+  color: #44337a;
+}
+
+.focus\:text-pink-100:focus {
+  color: #fff5f7;
+}
+
+.focus\:text-pink-200:focus {
+  color: #fed7e2;
+}
+
+.focus\:text-pink-300:focus {
+  color: #fbb6ce;
+}
+
+.focus\:text-pink-400:focus {
+  color: #f687b3;
+}
+
+.focus\:text-pink-500:focus {
+  color: #ed64a6;
+}
+
+.focus\:text-pink-600:focus {
+  color: #d53f8c;
+}
+
+.focus\:text-pink-700:focus {
+  color: #b83280;
+}
+
+.focus\:text-pink-800:focus {
+  color: #97266d;
+}
+
+.focus\:text-pink-900:focus {
+  color: #702459;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+}
+
+.text-6xl {
+  font-size: 4rem;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.not-italic {
+  font-style: normal;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.normal-case {
+  text-transform: none;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+.no-underline {
+  text-decoration: none;
+}
+
+.hover\:underline:hover {
+  text-decoration: underline;
+}
+
+.hover\:line-through:hover {
+  text-decoration: line-through;
+}
+
+.hover\:no-underline:hover {
+  text-decoration: none;
+}
+
+.focus\:underline:focus {
+  text-decoration: underline;
+}
+
+.focus\:line-through:focus {
+  text-decoration: line-through;
+}
+
+.focus\:no-underline:focus {
+  text-decoration: none;
+}
+
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.tracking-normal {
+  letter-spacing: 0;
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.select-all {
+  -webkit-user-select: all;
+     -moz-user-select: all;
+      -ms-user-select: all;
+          user-select: all;
+}
+
+.select-auto {
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+      -ms-user-select: auto;
+          user-select: auto;
+}
+
+.align-baseline {
+  vertical-align: baseline;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
+.align-text-top {
+  vertical-align: text-top;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.whitespace-normal {
+  white-space: normal;
+}
+
+.whitespace-no-wrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre {
+  white-space: pre;
+}
+
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w-0 {
+  width: 0;
+}
+
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-40 {
+  width: 10rem;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
+.w-56 {
+  width: 14rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-px {
+  width: 1px;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
+.w-2\/4 {
+  width: 50%;
+}
+
+.w-3\/4 {
+  width: 75%;
+}
+
+.w-1\/5 {
+  width: 20%;
+}
+
+.w-2\/5 {
+  width: 40%;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
+.w-2\/6 {
+  width: 33.333333%;
+}
+
+.w-3\/6 {
+  width: 50%;
+}
+
+.w-4\/6 {
+  width: 66.666667%;
+}
+
+.w-5\/6 {
+  width: 83.333333%;
+}
+
+.w-1\/12 {
+  width: 8.333333%;
+}
+
+.w-2\/12 {
+  width: 16.666667%;
+}
+
+.w-3\/12 {
+  width: 25%;
+}
+
+.w-4\/12 {
+  width: 33.333333%;
+}
+
+.w-5\/12 {
+  width: 41.666667%;
+}
+
+.w-6\/12 {
+  width: 50%;
+}
+
+.w-7\/12 {
+  width: 58.333333%;
+}
+
+.w-8\/12 {
+  width: 66.666667%;
+}
+
+.w-9\/12 {
+  width: 75%;
+}
+
+.w-10\/12 {
+  width: 83.333333%;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-auto {
+  z-index: auto;
+}
+
+@media (min-width: 640px) {
+  .sm\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .sm\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .sm\:focus\:sr-only:focus {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .sm\:focus\:not-sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .sm\:appearance-none {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+  .sm\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .sm\:bg-local {
+    background-attachment: local;
+  }
+
+  .sm\:bg-scroll {
+    background-attachment: scroll;
+  }
+
+  .sm\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .sm\:bg-black {
+    background-color: #000;
+  }
+
+  .sm\:bg-white {
+    background-color: #fff;
+  }
+
+  .sm\:bg-gray-100 {
+    background-color: #f7fafc;
+  }
+
+  .sm\:bg-gray-200 {
+    background-color: #edf2f7;
+  }
+
+  .sm\:bg-gray-300 {
+    background-color: #e2e8f0;
+  }
+
+  .sm\:bg-gray-400 {
+    background-color: #cbd5e0;
+  }
+
+  .sm\:bg-gray-500 {
+    background-color: #a0aec0;
+  }
+
+  .sm\:bg-gray-600 {
+    background-color: #718096;
+  }
+
+  .sm\:bg-gray-700 {
+    background-color: #4a5568;
+  }
+
+  .sm\:bg-gray-800 {
+    background-color: #2d3748;
+  }
+
+  .sm\:bg-gray-900 {
+    background-color: #1a202c;
+  }
+
+  .sm\:bg-red-100 {
+    background-color: #fff5f5;
+  }
+
+  .sm\:bg-red-200 {
+    background-color: #fed7d7;
+  }
+
+  .sm\:bg-red-300 {
+    background-color: #feb2b2;
+  }
+
+  .sm\:bg-red-400 {
+    background-color: #fc8181;
+  }
+
+  .sm\:bg-red-500 {
+    background-color: #f56565;
+  }
+
+  .sm\:bg-red-600 {
+    background-color: #e53e3e;
+  }
+
+  .sm\:bg-red-700 {
+    background-color: #c53030;
+  }
+
+  .sm\:bg-red-800 {
+    background-color: #9b2c2c;
+  }
+
+  .sm\:bg-red-900 {
+    background-color: #742a2a;
+  }
+
+  .sm\:bg-orange-100 {
+    background-color: #fffaf0;
+  }
+
+  .sm\:bg-orange-200 {
+    background-color: #feebc8;
+  }
+
+  .sm\:bg-orange-300 {
+    background-color: #fbd38d;
+  }
+
+  .sm\:bg-orange-400 {
+    background-color: #f6ad55;
+  }
+
+  .sm\:bg-orange-500 {
+    background-color: #ed8936;
+  }
+
+  .sm\:bg-orange-600 {
+    background-color: #dd6b20;
+  }
+
+  .sm\:bg-orange-700 {
+    background-color: #c05621;
+  }
+
+  .sm\:bg-orange-800 {
+    background-color: #9c4221;
+  }
+
+  .sm\:bg-orange-900 {
+    background-color: #7b341e;
+  }
+
+  .sm\:bg-yellow-100 {
+    background-color: #fffff0;
+  }
+
+  .sm\:bg-yellow-200 {
+    background-color: #fefcbf;
+  }
+
+  .sm\:bg-yellow-300 {
+    background-color: #faf089;
+  }
+
+  .sm\:bg-yellow-400 {
+    background-color: #f6e05e;
+  }
+
+  .sm\:bg-yellow-500 {
+    background-color: #ecc94b;
+  }
+
+  .sm\:bg-yellow-600 {
+    background-color: #d69e2e;
+  }
+
+  .sm\:bg-yellow-700 {
+    background-color: #b7791f;
+  }
+
+  .sm\:bg-yellow-800 {
+    background-color: #975a16;
+  }
+
+  .sm\:bg-yellow-900 {
+    background-color: #744210;
+  }
+
+  .sm\:bg-green-100 {
+    background-color: #f0fff4;
+  }
+
+  .sm\:bg-green-200 {
+    background-color: #c6f6d5;
+  }
+
+  .sm\:bg-green-300 {
+    background-color: #9ae6b4;
+  }
+
+  .sm\:bg-green-400 {
+    background-color: #68d391;
+  }
+
+  .sm\:bg-green-500 {
+    background-color: #48bb78;
+  }
+
+  .sm\:bg-green-600 {
+    background-color: #38a169;
+  }
+
+  .sm\:bg-green-700 {
+    background-color: #2f855a;
+  }
+
+  .sm\:bg-green-800 {
+    background-color: #276749;
+  }
+
+  .sm\:bg-green-900 {
+    background-color: #22543d;
+  }
+
+  .sm\:bg-teal-100 {
+    background-color: #e6fffa;
+  }
+
+  .sm\:bg-teal-200 {
+    background-color: #b2f5ea;
+  }
+
+  .sm\:bg-teal-300 {
+    background-color: #81e6d9;
+  }
+
+  .sm\:bg-teal-400 {
+    background-color: #4fd1c5;
+  }
+
+  .sm\:bg-teal-500 {
+    background-color: #38b2ac;
+  }
+
+  .sm\:bg-teal-600 {
+    background-color: #319795;
+  }
+
+  .sm\:bg-teal-700 {
+    background-color: #2c7a7b;
+  }
+
+  .sm\:bg-teal-800 {
+    background-color: #285e61;
+  }
+
+  .sm\:bg-teal-900 {
+    background-color: #234e52;
+  }
+
+  .sm\:bg-blue-100 {
+    background-color: #ebf8ff;
+  }
+
+  .sm\:bg-blue-200 {
+    background-color: #bee3f8;
+  }
+
+  .sm\:bg-blue-300 {
+    background-color: #90cdf4;
+  }
+
+  .sm\:bg-blue-400 {
+    background-color: #63b3ed;
+  }
+
+  .sm\:bg-blue-500 {
+    background-color: #4299e1;
+  }
+
+  .sm\:bg-blue-600 {
+    background-color: #3182ce;
+  }
+
+  .sm\:bg-blue-700 {
+    background-color: #2b6cb0;
+  }
+
+  .sm\:bg-blue-800 {
+    background-color: #2c5282;
+  }
+
+  .sm\:bg-blue-900 {
+    background-color: #2a4365;
+  }
+
+  .sm\:bg-indigo-100 {
+    background-color: #ebf4ff;
+  }
+
+  .sm\:bg-indigo-200 {
+    background-color: #c3dafe;
+  }
+
+  .sm\:bg-indigo-300 {
+    background-color: #a3bffa;
+  }
+
+  .sm\:bg-indigo-400 {
+    background-color: #7f9cf5;
+  }
+
+  .sm\:bg-indigo-500 {
+    background-color: #667eea;
+  }
+
+  .sm\:bg-indigo-600 {
+    background-color: #5a67d8;
+  }
+
+  .sm\:bg-indigo-700 {
+    background-color: #4c51bf;
+  }
+
+  .sm\:bg-indigo-800 {
+    background-color: #434190;
+  }
+
+  .sm\:bg-indigo-900 {
+    background-color: #3c366b;
+  }
+
+  .sm\:bg-purple-100 {
+    background-color: #faf5ff;
+  }
+
+  .sm\:bg-purple-200 {
+    background-color: #e9d8fd;
+  }
+
+  .sm\:bg-purple-300 {
+    background-color: #d6bcfa;
+  }
+
+  .sm\:bg-purple-400 {
+    background-color: #b794f4;
+  }
+
+  .sm\:bg-purple-500 {
+    background-color: #9f7aea;
+  }
+
+  .sm\:bg-purple-600 {
+    background-color: #805ad5;
+  }
+
+  .sm\:bg-purple-700 {
+    background-color: #6b46c1;
+  }
+
+  .sm\:bg-purple-800 {
+    background-color: #553c9a;
+  }
+
+  .sm\:bg-purple-900 {
+    background-color: #44337a;
+  }
+
+  .sm\:bg-pink-100 {
+    background-color: #fff5f7;
+  }
+
+  .sm\:bg-pink-200 {
+    background-color: #fed7e2;
+  }
+
+  .sm\:bg-pink-300 {
+    background-color: #fbb6ce;
+  }
+
+  .sm\:bg-pink-400 {
+    background-color: #f687b3;
+  }
+
+  .sm\:bg-pink-500 {
+    background-color: #ed64a6;
+  }
+
+  .sm\:bg-pink-600 {
+    background-color: #d53f8c;
+  }
+
+  .sm\:bg-pink-700 {
+    background-color: #b83280;
+  }
+
+  .sm\:bg-pink-800 {
+    background-color: #97266d;
+  }
+
+  .sm\:bg-pink-900 {
+    background-color: #702459;
+  }
+
+  .sm\:hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+
+  .sm\:hover\:bg-black:hover {
+    background-color: #000;
+  }
+
+  .sm\:hover\:bg-white:hover {
+    background-color: #fff;
+  }
+
+  .sm\:hover\:bg-gray-100:hover {
+    background-color: #f7fafc;
+  }
+
+  .sm\:hover\:bg-gray-200:hover {
+    background-color: #edf2f7;
+  }
+
+  .sm\:hover\:bg-gray-300:hover {
+    background-color: #e2e8f0;
+  }
+
+  .sm\:hover\:bg-gray-400:hover {
+    background-color: #cbd5e0;
+  }
+
+  .sm\:hover\:bg-gray-500:hover {
+    background-color: #a0aec0;
+  }
+
+  .sm\:hover\:bg-gray-600:hover {
+    background-color: #718096;
+  }
+
+  .sm\:hover\:bg-gray-700:hover {
+    background-color: #4a5568;
+  }
+
+  .sm\:hover\:bg-gray-800:hover {
+    background-color: #2d3748;
+  }
+
+  .sm\:hover\:bg-gray-900:hover {
+    background-color: #1a202c;
+  }
+
+  .sm\:hover\:bg-red-100:hover {
+    background-color: #fff5f5;
+  }
+
+  .sm\:hover\:bg-red-200:hover {
+    background-color: #fed7d7;
+  }
+
+  .sm\:hover\:bg-red-300:hover {
+    background-color: #feb2b2;
+  }
+
+  .sm\:hover\:bg-red-400:hover {
+    background-color: #fc8181;
+  }
+
+  .sm\:hover\:bg-red-500:hover {
+    background-color: #f56565;
+  }
+
+  .sm\:hover\:bg-red-600:hover {
+    background-color: #e53e3e;
+  }
+
+  .sm\:hover\:bg-red-700:hover {
+    background-color: #c53030;
+  }
+
+  .sm\:hover\:bg-red-800:hover {
+    background-color: #9b2c2c;
+  }
+
+  .sm\:hover\:bg-red-900:hover {
+    background-color: #742a2a;
+  }
+
+  .sm\:hover\:bg-orange-100:hover {
+    background-color: #fffaf0;
+  }
+
+  .sm\:hover\:bg-orange-200:hover {
+    background-color: #feebc8;
+  }
+
+  .sm\:hover\:bg-orange-300:hover {
+    background-color: #fbd38d;
+  }
+
+  .sm\:hover\:bg-orange-400:hover {
+    background-color: #f6ad55;
+  }
+
+  .sm\:hover\:bg-orange-500:hover {
+    background-color: #ed8936;
+  }
+
+  .sm\:hover\:bg-orange-600:hover {
+    background-color: #dd6b20;
+  }
+
+  .sm\:hover\:bg-orange-700:hover {
+    background-color: #c05621;
+  }
+
+  .sm\:hover\:bg-orange-800:hover {
+    background-color: #9c4221;
+  }
+
+  .sm\:hover\:bg-orange-900:hover {
+    background-color: #7b341e;
+  }
+
+  .sm\:hover\:bg-yellow-100:hover {
+    background-color: #fffff0;
+  }
+
+  .sm\:hover\:bg-yellow-200:hover {
+    background-color: #fefcbf;
+  }
+
+  .sm\:hover\:bg-yellow-300:hover {
+    background-color: #faf089;
+  }
+
+  .sm\:hover\:bg-yellow-400:hover {
+    background-color: #f6e05e;
+  }
+
+  .sm\:hover\:bg-yellow-500:hover {
+    background-color: #ecc94b;
+  }
+
+  .sm\:hover\:bg-yellow-600:hover {
+    background-color: #d69e2e;
+  }
+
+  .sm\:hover\:bg-yellow-700:hover {
+    background-color: #b7791f;
+  }
+
+  .sm\:hover\:bg-yellow-800:hover {
+    background-color: #975a16;
+  }
+
+  .sm\:hover\:bg-yellow-900:hover {
+    background-color: #744210;
+  }
+
+  .sm\:hover\:bg-green-100:hover {
+    background-color: #f0fff4;
+  }
+
+  .sm\:hover\:bg-green-200:hover {
+    background-color: #c6f6d5;
+  }
+
+  .sm\:hover\:bg-green-300:hover {
+    background-color: #9ae6b4;
+  }
+
+  .sm\:hover\:bg-green-400:hover {
+    background-color: #68d391;
+  }
+
+  .sm\:hover\:bg-green-500:hover {
+    background-color: #48bb78;
+  }
+
+  .sm\:hover\:bg-green-600:hover {
+    background-color: #38a169;
+  }
+
+  .sm\:hover\:bg-green-700:hover {
+    background-color: #2f855a;
+  }
+
+  .sm\:hover\:bg-green-800:hover {
+    background-color: #276749;
+  }
+
+  .sm\:hover\:bg-green-900:hover {
+    background-color: #22543d;
+  }
+
+  .sm\:hover\:bg-teal-100:hover {
+    background-color: #e6fffa;
+  }
+
+  .sm\:hover\:bg-teal-200:hover {
+    background-color: #b2f5ea;
+  }
+
+  .sm\:hover\:bg-teal-300:hover {
+    background-color: #81e6d9;
+  }
+
+  .sm\:hover\:bg-teal-400:hover {
+    background-color: #4fd1c5;
+  }
+
+  .sm\:hover\:bg-teal-500:hover {
+    background-color: #38b2ac;
+  }
+
+  .sm\:hover\:bg-teal-600:hover {
+    background-color: #319795;
+  }
+
+  .sm\:hover\:bg-teal-700:hover {
+    background-color: #2c7a7b;
+  }
+
+  .sm\:hover\:bg-teal-800:hover {
+    background-color: #285e61;
+  }
+
+  .sm\:hover\:bg-teal-900:hover {
+    background-color: #234e52;
+  }
+
+  .sm\:hover\:bg-blue-100:hover {
+    background-color: #ebf8ff;
+  }
+
+  .sm\:hover\:bg-blue-200:hover {
+    background-color: #bee3f8;
+  }
+
+  .sm\:hover\:bg-blue-300:hover {
+    background-color: #90cdf4;
+  }
+
+  .sm\:hover\:bg-blue-400:hover {
+    background-color: #63b3ed;
+  }
+
+  .sm\:hover\:bg-blue-500:hover {
+    background-color: #4299e1;
+  }
+
+  .sm\:hover\:bg-blue-600:hover {
+    background-color: #3182ce;
+  }
+
+  .sm\:hover\:bg-blue-700:hover {
+    background-color: #2b6cb0;
+  }
+
+  .sm\:hover\:bg-blue-800:hover {
+    background-color: #2c5282;
+  }
+
+  .sm\:hover\:bg-blue-900:hover {
+    background-color: #2a4365;
+  }
+
+  .sm\:hover\:bg-indigo-100:hover {
+    background-color: #ebf4ff;
+  }
+
+  .sm\:hover\:bg-indigo-200:hover {
+    background-color: #c3dafe;
+  }
+
+  .sm\:hover\:bg-indigo-300:hover {
+    background-color: #a3bffa;
+  }
+
+  .sm\:hover\:bg-indigo-400:hover {
+    background-color: #7f9cf5;
+  }
+
+  .sm\:hover\:bg-indigo-500:hover {
+    background-color: #667eea;
+  }
+
+  .sm\:hover\:bg-indigo-600:hover {
+    background-color: #5a67d8;
+  }
+
+  .sm\:hover\:bg-indigo-700:hover {
+    background-color: #4c51bf;
+  }
+
+  .sm\:hover\:bg-indigo-800:hover {
+    background-color: #434190;
+  }
+
+  .sm\:hover\:bg-indigo-900:hover {
+    background-color: #3c366b;
+  }
+
+  .sm\:hover\:bg-purple-100:hover {
+    background-color: #faf5ff;
+  }
+
+  .sm\:hover\:bg-purple-200:hover {
+    background-color: #e9d8fd;
+  }
+
+  .sm\:hover\:bg-purple-300:hover {
+    background-color: #d6bcfa;
+  }
+
+  .sm\:hover\:bg-purple-400:hover {
+    background-color: #b794f4;
+  }
+
+  .sm\:hover\:bg-purple-500:hover {
+    background-color: #9f7aea;
+  }
+
+  .sm\:hover\:bg-purple-600:hover {
+    background-color: #805ad5;
+  }
+
+  .sm\:hover\:bg-purple-700:hover {
+    background-color: #6b46c1;
+  }
+
+  .sm\:hover\:bg-purple-800:hover {
+    background-color: #553c9a;
+  }
+
+  .sm\:hover\:bg-purple-900:hover {
+    background-color: #44337a;
+  }
+
+  .sm\:hover\:bg-pink-100:hover {
+    background-color: #fff5f7;
+  }
+
+  .sm\:hover\:bg-pink-200:hover {
+    background-color: #fed7e2;
+  }
+
+  .sm\:hover\:bg-pink-300:hover {
+    background-color: #fbb6ce;
+  }
+
+  .sm\:hover\:bg-pink-400:hover {
+    background-color: #f687b3;
+  }
+
+  .sm\:hover\:bg-pink-500:hover {
+    background-color: #ed64a6;
+  }
+
+  .sm\:hover\:bg-pink-600:hover {
+    background-color: #d53f8c;
+  }
+
+  .sm\:hover\:bg-pink-700:hover {
+    background-color: #b83280;
+  }
+
+  .sm\:hover\:bg-pink-800:hover {
+    background-color: #97266d;
+  }
+
+  .sm\:hover\:bg-pink-900:hover {
+    background-color: #702459;
+  }
+
+  .sm\:focus\:bg-transparent:focus {
+    background-color: transparent;
+  }
+
+  .sm\:focus\:bg-black:focus {
+    background-color: #000;
+  }
+
+  .sm\:focus\:bg-white:focus {
+    background-color: #fff;
+  }
+
+  .sm\:focus\:bg-gray-100:focus {
+    background-color: #f7fafc;
+  }
+
+  .sm\:focus\:bg-gray-200:focus {
+    background-color: #edf2f7;
+  }
+
+  .sm\:focus\:bg-gray-300:focus {
+    background-color: #e2e8f0;
+  }
+
+  .sm\:focus\:bg-gray-400:focus {
+    background-color: #cbd5e0;
+  }
+
+  .sm\:focus\:bg-gray-500:focus {
+    background-color: #a0aec0;
+  }
+
+  .sm\:focus\:bg-gray-600:focus {
+    background-color: #718096;
+  }
+
+  .sm\:focus\:bg-gray-700:focus {
+    background-color: #4a5568;
+  }
+
+  .sm\:focus\:bg-gray-800:focus {
+    background-color: #2d3748;
+  }
+
+  .sm\:focus\:bg-gray-900:focus {
+    background-color: #1a202c;
+  }
+
+  .sm\:focus\:bg-red-100:focus {
+    background-color: #fff5f5;
+  }
+
+  .sm\:focus\:bg-red-200:focus {
+    background-color: #fed7d7;
+  }
+
+  .sm\:focus\:bg-red-300:focus {
+    background-color: #feb2b2;
+  }
+
+  .sm\:focus\:bg-red-400:focus {
+    background-color: #fc8181;
+  }
+
+  .sm\:focus\:bg-red-500:focus {
+    background-color: #f56565;
+  }
+
+  .sm\:focus\:bg-red-600:focus {
+    background-color: #e53e3e;
+  }
+
+  .sm\:focus\:bg-red-700:focus {
+    background-color: #c53030;
+  }
+
+  .sm\:focus\:bg-red-800:focus {
+    background-color: #9b2c2c;
+  }
+
+  .sm\:focus\:bg-red-900:focus {
+    background-color: #742a2a;
+  }
+
+  .sm\:focus\:bg-orange-100:focus {
+    background-color: #fffaf0;
+  }
+
+  .sm\:focus\:bg-orange-200:focus {
+    background-color: #feebc8;
+  }
+
+  .sm\:focus\:bg-orange-300:focus {
+    background-color: #fbd38d;
+  }
+
+  .sm\:focus\:bg-orange-400:focus {
+    background-color: #f6ad55;
+  }
+
+  .sm\:focus\:bg-orange-500:focus {
+    background-color: #ed8936;
+  }
+
+  .sm\:focus\:bg-orange-600:focus {
+    background-color: #dd6b20;
+  }
+
+  .sm\:focus\:bg-orange-700:focus {
+    background-color: #c05621;
+  }
+
+  .sm\:focus\:bg-orange-800:focus {
+    background-color: #9c4221;
+  }
+
+  .sm\:focus\:bg-orange-900:focus {
+    background-color: #7b341e;
+  }
+
+  .sm\:focus\:bg-yellow-100:focus {
+    background-color: #fffff0;
+  }
+
+  .sm\:focus\:bg-yellow-200:focus {
+    background-color: #fefcbf;
+  }
+
+  .sm\:focus\:bg-yellow-300:focus {
+    background-color: #faf089;
+  }
+
+  .sm\:focus\:bg-yellow-400:focus {
+    background-color: #f6e05e;
+  }
+
+  .sm\:focus\:bg-yellow-500:focus {
+    background-color: #ecc94b;
+  }
+
+  .sm\:focus\:bg-yellow-600:focus {
+    background-color: #d69e2e;
+  }
+
+  .sm\:focus\:bg-yellow-700:focus {
+    background-color: #b7791f;
+  }
+
+  .sm\:focus\:bg-yellow-800:focus {
+    background-color: #975a16;
+  }
+
+  .sm\:focus\:bg-yellow-900:focus {
+    background-color: #744210;
+  }
+
+  .sm\:focus\:bg-green-100:focus {
+    background-color: #f0fff4;
+  }
+
+  .sm\:focus\:bg-green-200:focus {
+    background-color: #c6f6d5;
+  }
+
+  .sm\:focus\:bg-green-300:focus {
+    background-color: #9ae6b4;
+  }
+
+  .sm\:focus\:bg-green-400:focus {
+    background-color: #68d391;
+  }
+
+  .sm\:focus\:bg-green-500:focus {
+    background-color: #48bb78;
+  }
+
+  .sm\:focus\:bg-green-600:focus {
+    background-color: #38a169;
+  }
+
+  .sm\:focus\:bg-green-700:focus {
+    background-color: #2f855a;
+  }
+
+  .sm\:focus\:bg-green-800:focus {
+    background-color: #276749;
+  }
+
+  .sm\:focus\:bg-green-900:focus {
+    background-color: #22543d;
+  }
+
+  .sm\:focus\:bg-teal-100:focus {
+    background-color: #e6fffa;
+  }
+
+  .sm\:focus\:bg-teal-200:focus {
+    background-color: #b2f5ea;
+  }
+
+  .sm\:focus\:bg-teal-300:focus {
+    background-color: #81e6d9;
+  }
+
+  .sm\:focus\:bg-teal-400:focus {
+    background-color: #4fd1c5;
+  }
+
+  .sm\:focus\:bg-teal-500:focus {
+    background-color: #38b2ac;
+  }
+
+  .sm\:focus\:bg-teal-600:focus {
+    background-color: #319795;
+  }
+
+  .sm\:focus\:bg-teal-700:focus {
+    background-color: #2c7a7b;
+  }
+
+  .sm\:focus\:bg-teal-800:focus {
+    background-color: #285e61;
+  }
+
+  .sm\:focus\:bg-teal-900:focus {
+    background-color: #234e52;
+  }
+
+  .sm\:focus\:bg-blue-100:focus {
+    background-color: #ebf8ff;
+  }
+
+  .sm\:focus\:bg-blue-200:focus {
+    background-color: #bee3f8;
+  }
+
+  .sm\:focus\:bg-blue-300:focus {
+    background-color: #90cdf4;
+  }
+
+  .sm\:focus\:bg-blue-400:focus {
+    background-color: #63b3ed;
+  }
+
+  .sm\:focus\:bg-blue-500:focus {
+    background-color: #4299e1;
+  }
+
+  .sm\:focus\:bg-blue-600:focus {
+    background-color: #3182ce;
+  }
+
+  .sm\:focus\:bg-blue-700:focus {
+    background-color: #2b6cb0;
+  }
+
+  .sm\:focus\:bg-blue-800:focus {
+    background-color: #2c5282;
+  }
+
+  .sm\:focus\:bg-blue-900:focus {
+    background-color: #2a4365;
+  }
+
+  .sm\:focus\:bg-indigo-100:focus {
+    background-color: #ebf4ff;
+  }
+
+  .sm\:focus\:bg-indigo-200:focus {
+    background-color: #c3dafe;
+  }
+
+  .sm\:focus\:bg-indigo-300:focus {
+    background-color: #a3bffa;
+  }
+
+  .sm\:focus\:bg-indigo-400:focus {
+    background-color: #7f9cf5;
+  }
+
+  .sm\:focus\:bg-indigo-500:focus {
+    background-color: #667eea;
+  }
+
+  .sm\:focus\:bg-indigo-600:focus {
+    background-color: #5a67d8;
+  }
+
+  .sm\:focus\:bg-indigo-700:focus {
+    background-color: #4c51bf;
+  }
+
+  .sm\:focus\:bg-indigo-800:focus {
+    background-color: #434190;
+  }
+
+  .sm\:focus\:bg-indigo-900:focus {
+    background-color: #3c366b;
+  }
+
+  .sm\:focus\:bg-purple-100:focus {
+    background-color: #faf5ff;
+  }
+
+  .sm\:focus\:bg-purple-200:focus {
+    background-color: #e9d8fd;
+  }
+
+  .sm\:focus\:bg-purple-300:focus {
+    background-color: #d6bcfa;
+  }
+
+  .sm\:focus\:bg-purple-400:focus {
+    background-color: #b794f4;
+  }
+
+  .sm\:focus\:bg-purple-500:focus {
+    background-color: #9f7aea;
+  }
+
+  .sm\:focus\:bg-purple-600:focus {
+    background-color: #805ad5;
+  }
+
+  .sm\:focus\:bg-purple-700:focus {
+    background-color: #6b46c1;
+  }
+
+  .sm\:focus\:bg-purple-800:focus {
+    background-color: #553c9a;
+  }
+
+  .sm\:focus\:bg-purple-900:focus {
+    background-color: #44337a;
+  }
+
+  .sm\:focus\:bg-pink-100:focus {
+    background-color: #fff5f7;
+  }
+
+  .sm\:focus\:bg-pink-200:focus {
+    background-color: #fed7e2;
+  }
+
+  .sm\:focus\:bg-pink-300:focus {
+    background-color: #fbb6ce;
+  }
+
+  .sm\:focus\:bg-pink-400:focus {
+    background-color: #f687b3;
+  }
+
+  .sm\:focus\:bg-pink-500:focus {
+    background-color: #ed64a6;
+  }
+
+  .sm\:focus\:bg-pink-600:focus {
+    background-color: #d53f8c;
+  }
+
+  .sm\:focus\:bg-pink-700:focus {
+    background-color: #b83280;
+  }
+
+  .sm\:focus\:bg-pink-800:focus {
+    background-color: #97266d;
+  }
+
+  .sm\:focus\:bg-pink-900:focus {
+    background-color: #702459;
+  }
+
+  .sm\:bg-bottom {
+    background-position: bottom;
+  }
+
+  .sm\:bg-center {
+    background-position: center;
+  }
+
+  .sm\:bg-left {
+    background-position: left;
+  }
+
+  .sm\:bg-left-bottom {
+    background-position: left bottom;
+  }
+
+  .sm\:bg-left-top {
+    background-position: left top;
+  }
+
+  .sm\:bg-right {
+    background-position: right;
+  }
+
+  .sm\:bg-right-bottom {
+    background-position: right bottom;
+  }
+
+  .sm\:bg-right-top {
+    background-position: right top;
+  }
+
+  .sm\:bg-top {
+    background-position: top;
+  }
+
+  .sm\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .sm\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .sm\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .sm\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
+  .sm\:bg-repeat-round {
+    background-repeat: round;
+  }
+
+  .sm\:bg-repeat-space {
+    background-repeat: space;
+  }
+
+  .sm\:bg-auto {
+    background-size: auto;
+  }
+
+  .sm\:bg-cover {
+    background-size: cover;
+  }
+
+  .sm\:bg-contain {
+    background-size: contain;
+  }
+
+  .sm\:border-collapse {
+    border-collapse: collapse;
+  }
+
+  .sm\:border-separate {
+    border-collapse: separate;
+  }
+
+  .sm\:border-transparent {
+    border-color: transparent;
+  }
+
+  .sm\:border-black {
+    border-color: #000;
+  }
+
+  .sm\:border-white {
+    border-color: #fff;
+  }
+
+  .sm\:border-gray-100 {
+    border-color: #f7fafc;
+  }
+
+  .sm\:border-gray-200 {
+    border-color: #edf2f7;
+  }
+
+  .sm\:border-gray-300 {
+    border-color: #e2e8f0;
+  }
+
+  .sm\:border-gray-400 {
+    border-color: #cbd5e0;
+  }
+
+  .sm\:border-gray-500 {
+    border-color: #a0aec0;
+  }
+
+  .sm\:border-gray-600 {
+    border-color: #718096;
+  }
+
+  .sm\:border-gray-700 {
+    border-color: #4a5568;
+  }
+
+  .sm\:border-gray-800 {
+    border-color: #2d3748;
+  }
+
+  .sm\:border-gray-900 {
+    border-color: #1a202c;
+  }
+
+  .sm\:border-red-100 {
+    border-color: #fff5f5;
+  }
+
+  .sm\:border-red-200 {
+    border-color: #fed7d7;
+  }
+
+  .sm\:border-red-300 {
+    border-color: #feb2b2;
+  }
+
+  .sm\:border-red-400 {
+    border-color: #fc8181;
+  }
+
+  .sm\:border-red-500 {
+    border-color: #f56565;
+  }
+
+  .sm\:border-red-600 {
+    border-color: #e53e3e;
+  }
+
+  .sm\:border-red-700 {
+    border-color: #c53030;
+  }
+
+  .sm\:border-red-800 {
+    border-color: #9b2c2c;
+  }
+
+  .sm\:border-red-900 {
+    border-color: #742a2a;
+  }
+
+  .sm\:border-orange-100 {
+    border-color: #fffaf0;
+  }
+
+  .sm\:border-orange-200 {
+    border-color: #feebc8;
+  }
+
+  .sm\:border-orange-300 {
+    border-color: #fbd38d;
+  }
+
+  .sm\:border-orange-400 {
+    border-color: #f6ad55;
+  }
+
+  .sm\:border-orange-500 {
+    border-color: #ed8936;
+  }
+
+  .sm\:border-orange-600 {
+    border-color: #dd6b20;
+  }
+
+  .sm\:border-orange-700 {
+    border-color: #c05621;
+  }
+
+  .sm\:border-orange-800 {
+    border-color: #9c4221;
+  }
+
+  .sm\:border-orange-900 {
+    border-color: #7b341e;
+  }
+
+  .sm\:border-yellow-100 {
+    border-color: #fffff0;
+  }
+
+  .sm\:border-yellow-200 {
+    border-color: #fefcbf;
+  }
+
+  .sm\:border-yellow-300 {
+    border-color: #faf089;
+  }
+
+  .sm\:border-yellow-400 {
+    border-color: #f6e05e;
+  }
+
+  .sm\:border-yellow-500 {
+    border-color: #ecc94b;
+  }
+
+  .sm\:border-yellow-600 {
+    border-color: #d69e2e;
+  }
+
+  .sm\:border-yellow-700 {
+    border-color: #b7791f;
+  }
+
+  .sm\:border-yellow-800 {
+    border-color: #975a16;
+  }
+
+  .sm\:border-yellow-900 {
+    border-color: #744210;
+  }
+
+  .sm\:border-green-100 {
+    border-color: #f0fff4;
+  }
+
+  .sm\:border-green-200 {
+    border-color: #c6f6d5;
+  }
+
+  .sm\:border-green-300 {
+    border-color: #9ae6b4;
+  }
+
+  .sm\:border-green-400 {
+    border-color: #68d391;
+  }
+
+  .sm\:border-green-500 {
+    border-color: #48bb78;
+  }
+
+  .sm\:border-green-600 {
+    border-color: #38a169;
+  }
+
+  .sm\:border-green-700 {
+    border-color: #2f855a;
+  }
+
+  .sm\:border-green-800 {
+    border-color: #276749;
+  }
+
+  .sm\:border-green-900 {
+    border-color: #22543d;
+  }
+
+  .sm\:border-teal-100 {
+    border-color: #e6fffa;
+  }
+
+  .sm\:border-teal-200 {
+    border-color: #b2f5ea;
+  }
+
+  .sm\:border-teal-300 {
+    border-color: #81e6d9;
+  }
+
+  .sm\:border-teal-400 {
+    border-color: #4fd1c5;
+  }
+
+  .sm\:border-teal-500 {
+    border-color: #38b2ac;
+  }
+
+  .sm\:border-teal-600 {
+    border-color: #319795;
+  }
+
+  .sm\:border-teal-700 {
+    border-color: #2c7a7b;
+  }
+
+  .sm\:border-teal-800 {
+    border-color: #285e61;
+  }
+
+  .sm\:border-teal-900 {
+    border-color: #234e52;
+  }
+
+  .sm\:border-blue-100 {
+    border-color: #ebf8ff;
+  }
+
+  .sm\:border-blue-200 {
+    border-color: #bee3f8;
+  }
+
+  .sm\:border-blue-300 {
+    border-color: #90cdf4;
+  }
+
+  .sm\:border-blue-400 {
+    border-color: #63b3ed;
+  }
+
+  .sm\:border-blue-500 {
+    border-color: #4299e1;
+  }
+
+  .sm\:border-blue-600 {
+    border-color: #3182ce;
+  }
+
+  .sm\:border-blue-700 {
+    border-color: #2b6cb0;
+  }
+
+  .sm\:border-blue-800 {
+    border-color: #2c5282;
+  }
+
+  .sm\:border-blue-900 {
+    border-color: #2a4365;
+  }
+
+  .sm\:border-indigo-100 {
+    border-color: #ebf4ff;
+  }
+
+  .sm\:border-indigo-200 {
+    border-color: #c3dafe;
+  }
+
+  .sm\:border-indigo-300 {
+    border-color: #a3bffa;
+  }
+
+  .sm\:border-indigo-400 {
+    border-color: #7f9cf5;
+  }
+
+  .sm\:border-indigo-500 {
+    border-color: #667eea;
+  }
+
+  .sm\:border-indigo-600 {
+    border-color: #5a67d8;
+  }
+
+  .sm\:border-indigo-700 {
+    border-color: #4c51bf;
+  }
+
+  .sm\:border-indigo-800 {
+    border-color: #434190;
+  }
+
+  .sm\:border-indigo-900 {
+    border-color: #3c366b;
+  }
+
+  .sm\:border-purple-100 {
+    border-color: #faf5ff;
+  }
+
+  .sm\:border-purple-200 {
+    border-color: #e9d8fd;
+  }
+
+  .sm\:border-purple-300 {
+    border-color: #d6bcfa;
+  }
+
+  .sm\:border-purple-400 {
+    border-color: #b794f4;
+  }
+
+  .sm\:border-purple-500 {
+    border-color: #9f7aea;
+  }
+
+  .sm\:border-purple-600 {
+    border-color: #805ad5;
+  }
+
+  .sm\:border-purple-700 {
+    border-color: #6b46c1;
+  }
+
+  .sm\:border-purple-800 {
+    border-color: #553c9a;
+  }
+
+  .sm\:border-purple-900 {
+    border-color: #44337a;
+  }
+
+  .sm\:border-pink-100 {
+    border-color: #fff5f7;
+  }
+
+  .sm\:border-pink-200 {
+    border-color: #fed7e2;
+  }
+
+  .sm\:border-pink-300 {
+    border-color: #fbb6ce;
+  }
+
+  .sm\:border-pink-400 {
+    border-color: #f687b3;
+  }
+
+  .sm\:border-pink-500 {
+    border-color: #ed64a6;
+  }
+
+  .sm\:border-pink-600 {
+    border-color: #d53f8c;
+  }
+
+  .sm\:border-pink-700 {
+    border-color: #b83280;
+  }
+
+  .sm\:border-pink-800 {
+    border-color: #97266d;
+  }
+
+  .sm\:border-pink-900 {
+    border-color: #702459;
+  }
+
+  .sm\:hover\:border-transparent:hover {
+    border-color: transparent;
+  }
+
+  .sm\:hover\:border-black:hover {
+    border-color: #000;
+  }
+
+  .sm\:hover\:border-white:hover {
+    border-color: #fff;
+  }
+
+  .sm\:hover\:border-gray-100:hover {
+    border-color: #f7fafc;
+  }
+
+  .sm\:hover\:border-gray-200:hover {
+    border-color: #edf2f7;
+  }
+
+  .sm\:hover\:border-gray-300:hover {
+    border-color: #e2e8f0;
+  }
+
+  .sm\:hover\:border-gray-400:hover {
+    border-color: #cbd5e0;
+  }
+
+  .sm\:hover\:border-gray-500:hover {
+    border-color: #a0aec0;
+  }
+
+  .sm\:hover\:border-gray-600:hover {
+    border-color: #718096;
+  }
+
+  .sm\:hover\:border-gray-700:hover {
+    border-color: #4a5568;
+  }
+
+  .sm\:hover\:border-gray-800:hover {
+    border-color: #2d3748;
+  }
+
+  .sm\:hover\:border-gray-900:hover {
+    border-color: #1a202c;
+  }
+
+  .sm\:hover\:border-red-100:hover {
+    border-color: #fff5f5;
+  }
+
+  .sm\:hover\:border-red-200:hover {
+    border-color: #fed7d7;
+  }
+
+  .sm\:hover\:border-red-300:hover {
+    border-color: #feb2b2;
+  }
+
+  .sm\:hover\:border-red-400:hover {
+    border-color: #fc8181;
+  }
+
+  .sm\:hover\:border-red-500:hover {
+    border-color: #f56565;
+  }
+
+  .sm\:hover\:border-red-600:hover {
+    border-color: #e53e3e;
+  }
+
+  .sm\:hover\:border-red-700:hover {
+    border-color: #c53030;
+  }
+
+  .sm\:hover\:border-red-800:hover {
+    border-color: #9b2c2c;
+  }
+
+  .sm\:hover\:border-red-900:hover {
+    border-color: #742a2a;
+  }
+
+  .sm\:hover\:border-orange-100:hover {
+    border-color: #fffaf0;
+  }
+
+  .sm\:hover\:border-orange-200:hover {
+    border-color: #feebc8;
+  }
+
+  .sm\:hover\:border-orange-300:hover {
+    border-color: #fbd38d;
+  }
+
+  .sm\:hover\:border-orange-400:hover {
+    border-color: #f6ad55;
+  }
+
+  .sm\:hover\:border-orange-500:hover {
+    border-color: #ed8936;
+  }
+
+  .sm\:hover\:border-orange-600:hover {
+    border-color: #dd6b20;
+  }
+
+  .sm\:hover\:border-orange-700:hover {
+    border-color: #c05621;
+  }
+
+  .sm\:hover\:border-orange-800:hover {
+    border-color: #9c4221;
+  }
+
+  .sm\:hover\:border-orange-900:hover {
+    border-color: #7b341e;
+  }
+
+  .sm\:hover\:border-yellow-100:hover {
+    border-color: #fffff0;
+  }
+
+  .sm\:hover\:border-yellow-200:hover {
+    border-color: #fefcbf;
+  }
+
+  .sm\:hover\:border-yellow-300:hover {
+    border-color: #faf089;
+  }
+
+  .sm\:hover\:border-yellow-400:hover {
+    border-color: #f6e05e;
+  }
+
+  .sm\:hover\:border-yellow-500:hover {
+    border-color: #ecc94b;
+  }
+
+  .sm\:hover\:border-yellow-600:hover {
+    border-color: #d69e2e;
+  }
+
+  .sm\:hover\:border-yellow-700:hover {
+    border-color: #b7791f;
+  }
+
+  .sm\:hover\:border-yellow-800:hover {
+    border-color: #975a16;
+  }
+
+  .sm\:hover\:border-yellow-900:hover {
+    border-color: #744210;
+  }
+
+  .sm\:hover\:border-green-100:hover {
+    border-color: #f0fff4;
+  }
+
+  .sm\:hover\:border-green-200:hover {
+    border-color: #c6f6d5;
+  }
+
+  .sm\:hover\:border-green-300:hover {
+    border-color: #9ae6b4;
+  }
+
+  .sm\:hover\:border-green-400:hover {
+    border-color: #68d391;
+  }
+
+  .sm\:hover\:border-green-500:hover {
+    border-color: #48bb78;
+  }
+
+  .sm\:hover\:border-green-600:hover {
+    border-color: #38a169;
+  }
+
+  .sm\:hover\:border-green-700:hover {
+    border-color: #2f855a;
+  }
+
+  .sm\:hover\:border-green-800:hover {
+    border-color: #276749;
+  }
+
+  .sm\:hover\:border-green-900:hover {
+    border-color: #22543d;
+  }
+
+  .sm\:hover\:border-teal-100:hover {
+    border-color: #e6fffa;
+  }
+
+  .sm\:hover\:border-teal-200:hover {
+    border-color: #b2f5ea;
+  }
+
+  .sm\:hover\:border-teal-300:hover {
+    border-color: #81e6d9;
+  }
+
+  .sm\:hover\:border-teal-400:hover {
+    border-color: #4fd1c5;
+  }
+
+  .sm\:hover\:border-teal-500:hover {
+    border-color: #38b2ac;
+  }
+
+  .sm\:hover\:border-teal-600:hover {
+    border-color: #319795;
+  }
+
+  .sm\:hover\:border-teal-700:hover {
+    border-color: #2c7a7b;
+  }
+
+  .sm\:hover\:border-teal-800:hover {
+    border-color: #285e61;
+  }
+
+  .sm\:hover\:border-teal-900:hover {
+    border-color: #234e52;
+  }
+
+  .sm\:hover\:border-blue-100:hover {
+    border-color: #ebf8ff;
+  }
+
+  .sm\:hover\:border-blue-200:hover {
+    border-color: #bee3f8;
+  }
+
+  .sm\:hover\:border-blue-300:hover {
+    border-color: #90cdf4;
+  }
+
+  .sm\:hover\:border-blue-400:hover {
+    border-color: #63b3ed;
+  }
+
+  .sm\:hover\:border-blue-500:hover {
+    border-color: #4299e1;
+  }
+
+  .sm\:hover\:border-blue-600:hover {
+    border-color: #3182ce;
+  }
+
+  .sm\:hover\:border-blue-700:hover {
+    border-color: #2b6cb0;
+  }
+
+  .sm\:hover\:border-blue-800:hover {
+    border-color: #2c5282;
+  }
+
+  .sm\:hover\:border-blue-900:hover {
+    border-color: #2a4365;
+  }
+
+  .sm\:hover\:border-indigo-100:hover {
+    border-color: #ebf4ff;
+  }
+
+  .sm\:hover\:border-indigo-200:hover {
+    border-color: #c3dafe;
+  }
+
+  .sm\:hover\:border-indigo-300:hover {
+    border-color: #a3bffa;
+  }
+
+  .sm\:hover\:border-indigo-400:hover {
+    border-color: #7f9cf5;
+  }
+
+  .sm\:hover\:border-indigo-500:hover {
+    border-color: #667eea;
+  }
+
+  .sm\:hover\:border-indigo-600:hover {
+    border-color: #5a67d8;
+  }
+
+  .sm\:hover\:border-indigo-700:hover {
+    border-color: #4c51bf;
+  }
+
+  .sm\:hover\:border-indigo-800:hover {
+    border-color: #434190;
+  }
+
+  .sm\:hover\:border-indigo-900:hover {
+    border-color: #3c366b;
+  }
+
+  .sm\:hover\:border-purple-100:hover {
+    border-color: #faf5ff;
+  }
+
+  .sm\:hover\:border-purple-200:hover {
+    border-color: #e9d8fd;
+  }
+
+  .sm\:hover\:border-purple-300:hover {
+    border-color: #d6bcfa;
+  }
+
+  .sm\:hover\:border-purple-400:hover {
+    border-color: #b794f4;
+  }
+
+  .sm\:hover\:border-purple-500:hover {
+    border-color: #9f7aea;
+  }
+
+  .sm\:hover\:border-purple-600:hover {
+    border-color: #805ad5;
+  }
+
+  .sm\:hover\:border-purple-700:hover {
+    border-color: #6b46c1;
+  }
+
+  .sm\:hover\:border-purple-800:hover {
+    border-color: #553c9a;
+  }
+
+  .sm\:hover\:border-purple-900:hover {
+    border-color: #44337a;
+  }
+
+  .sm\:hover\:border-pink-100:hover {
+    border-color: #fff5f7;
+  }
+
+  .sm\:hover\:border-pink-200:hover {
+    border-color: #fed7e2;
+  }
+
+  .sm\:hover\:border-pink-300:hover {
+    border-color: #fbb6ce;
+  }
+
+  .sm\:hover\:border-pink-400:hover {
+    border-color: #f687b3;
+  }
+
+  .sm\:hover\:border-pink-500:hover {
+    border-color: #ed64a6;
+  }
+
+  .sm\:hover\:border-pink-600:hover {
+    border-color: #d53f8c;
+  }
+
+  .sm\:hover\:border-pink-700:hover {
+    border-color: #b83280;
+  }
+
+  .sm\:hover\:border-pink-800:hover {
+    border-color: #97266d;
+  }
+
+  .sm\:hover\:border-pink-900:hover {
+    border-color: #702459;
+  }
+
+  .sm\:focus\:border-transparent:focus {
+    border-color: transparent;
+  }
+
+  .sm\:focus\:border-black:focus {
+    border-color: #000;
+  }
+
+  .sm\:focus\:border-white:focus {
+    border-color: #fff;
+  }
+
+  .sm\:focus\:border-gray-100:focus {
+    border-color: #f7fafc;
+  }
+
+  .sm\:focus\:border-gray-200:focus {
+    border-color: #edf2f7;
+  }
+
+  .sm\:focus\:border-gray-300:focus {
+    border-color: #e2e8f0;
+  }
+
+  .sm\:focus\:border-gray-400:focus {
+    border-color: #cbd5e0;
+  }
+
+  .sm\:focus\:border-gray-500:focus {
+    border-color: #a0aec0;
+  }
+
+  .sm\:focus\:border-gray-600:focus {
+    border-color: #718096;
+  }
+
+  .sm\:focus\:border-gray-700:focus {
+    border-color: #4a5568;
+  }
+
+  .sm\:focus\:border-gray-800:focus {
+    border-color: #2d3748;
+  }
+
+  .sm\:focus\:border-gray-900:focus {
+    border-color: #1a202c;
+  }
+
+  .sm\:focus\:border-red-100:focus {
+    border-color: #fff5f5;
+  }
+
+  .sm\:focus\:border-red-200:focus {
+    border-color: #fed7d7;
+  }
+
+  .sm\:focus\:border-red-300:focus {
+    border-color: #feb2b2;
+  }
+
+  .sm\:focus\:border-red-400:focus {
+    border-color: #fc8181;
+  }
+
+  .sm\:focus\:border-red-500:focus {
+    border-color: #f56565;
+  }
+
+  .sm\:focus\:border-red-600:focus {
+    border-color: #e53e3e;
+  }
+
+  .sm\:focus\:border-red-700:focus {
+    border-color: #c53030;
+  }
+
+  .sm\:focus\:border-red-800:focus {
+    border-color: #9b2c2c;
+  }
+
+  .sm\:focus\:border-red-900:focus {
+    border-color: #742a2a;
+  }
+
+  .sm\:focus\:border-orange-100:focus {
+    border-color: #fffaf0;
+  }
+
+  .sm\:focus\:border-orange-200:focus {
+    border-color: #feebc8;
+  }
+
+  .sm\:focus\:border-orange-300:focus {
+    border-color: #fbd38d;
+  }
+
+  .sm\:focus\:border-orange-400:focus {
+    border-color: #f6ad55;
+  }
+
+  .sm\:focus\:border-orange-500:focus {
+    border-color: #ed8936;
+  }
+
+  .sm\:focus\:border-orange-600:focus {
+    border-color: #dd6b20;
+  }
+
+  .sm\:focus\:border-orange-700:focus {
+    border-color: #c05621;
+  }
+
+  .sm\:focus\:border-orange-800:focus {
+    border-color: #9c4221;
+  }
+
+  .sm\:focus\:border-orange-900:focus {
+    border-color: #7b341e;
+  }
+
+  .sm\:focus\:border-yellow-100:focus {
+    border-color: #fffff0;
+  }
+
+  .sm\:focus\:border-yellow-200:focus {
+    border-color: #fefcbf;
+  }
+
+  .sm\:focus\:border-yellow-300:focus {
+    border-color: #faf089;
+  }
+
+  .sm\:focus\:border-yellow-400:focus {
+    border-color: #f6e05e;
+  }
+
+  .sm\:focus\:border-yellow-500:focus {
+    border-color: #ecc94b;
+  }
+
+  .sm\:focus\:border-yellow-600:focus {
+    border-color: #d69e2e;
+  }
+
+  .sm\:focus\:border-yellow-700:focus {
+    border-color: #b7791f;
+  }
+
+  .sm\:focus\:border-yellow-800:focus {
+    border-color: #975a16;
+  }
+
+  .sm\:focus\:border-yellow-900:focus {
+    border-color: #744210;
+  }
+
+  .sm\:focus\:border-green-100:focus {
+    border-color: #f0fff4;
+  }
+
+  .sm\:focus\:border-green-200:focus {
+    border-color: #c6f6d5;
+  }
+
+  .sm\:focus\:border-green-300:focus {
+    border-color: #9ae6b4;
+  }
+
+  .sm\:focus\:border-green-400:focus {
+    border-color: #68d391;
+  }
+
+  .sm\:focus\:border-green-500:focus {
+    border-color: #48bb78;
+  }
+
+  .sm\:focus\:border-green-600:focus {
+    border-color: #38a169;
+  }
+
+  .sm\:focus\:border-green-700:focus {
+    border-color: #2f855a;
+  }
+
+  .sm\:focus\:border-green-800:focus {
+    border-color: #276749;
+  }
+
+  .sm\:focus\:border-green-900:focus {
+    border-color: #22543d;
+  }
+
+  .sm\:focus\:border-teal-100:focus {
+    border-color: #e6fffa;
+  }
+
+  .sm\:focus\:border-teal-200:focus {
+    border-color: #b2f5ea;
+  }
+
+  .sm\:focus\:border-teal-300:focus {
+    border-color: #81e6d9;
+  }
+
+  .sm\:focus\:border-teal-400:focus {
+    border-color: #4fd1c5;
+  }
+
+  .sm\:focus\:border-teal-500:focus {
+    border-color: #38b2ac;
+  }
+
+  .sm\:focus\:border-teal-600:focus {
+    border-color: #319795;
+  }
+
+  .sm\:focus\:border-teal-700:focus {
+    border-color: #2c7a7b;
+  }
+
+  .sm\:focus\:border-teal-800:focus {
+    border-color: #285e61;
+  }
+
+  .sm\:focus\:border-teal-900:focus {
+    border-color: #234e52;
+  }
+
+  .sm\:focus\:border-blue-100:focus {
+    border-color: #ebf8ff;
+  }
+
+  .sm\:focus\:border-blue-200:focus {
+    border-color: #bee3f8;
+  }
+
+  .sm\:focus\:border-blue-300:focus {
+    border-color: #90cdf4;
+  }
+
+  .sm\:focus\:border-blue-400:focus {
+    border-color: #63b3ed;
+  }
+
+  .sm\:focus\:border-blue-500:focus {
+    border-color: #4299e1;
+  }
+
+  .sm\:focus\:border-blue-600:focus {
+    border-color: #3182ce;
+  }
+
+  .sm\:focus\:border-blue-700:focus {
+    border-color: #2b6cb0;
+  }
+
+  .sm\:focus\:border-blue-800:focus {
+    border-color: #2c5282;
+  }
+
+  .sm\:focus\:border-blue-900:focus {
+    border-color: #2a4365;
+  }
+
+  .sm\:focus\:border-indigo-100:focus {
+    border-color: #ebf4ff;
+  }
+
+  .sm\:focus\:border-indigo-200:focus {
+    border-color: #c3dafe;
+  }
+
+  .sm\:focus\:border-indigo-300:focus {
+    border-color: #a3bffa;
+  }
+
+  .sm\:focus\:border-indigo-400:focus {
+    border-color: #7f9cf5;
+  }
+
+  .sm\:focus\:border-indigo-500:focus {
+    border-color: #667eea;
+  }
+
+  .sm\:focus\:border-indigo-600:focus {
+    border-color: #5a67d8;
+  }
+
+  .sm\:focus\:border-indigo-700:focus {
+    border-color: #4c51bf;
+  }
+
+  .sm\:focus\:border-indigo-800:focus {
+    border-color: #434190;
+  }
+
+  .sm\:focus\:border-indigo-900:focus {
+    border-color: #3c366b;
+  }
+
+  .sm\:focus\:border-purple-100:focus {
+    border-color: #faf5ff;
+  }
+
+  .sm\:focus\:border-purple-200:focus {
+    border-color: #e9d8fd;
+  }
+
+  .sm\:focus\:border-purple-300:focus {
+    border-color: #d6bcfa;
+  }
+
+  .sm\:focus\:border-purple-400:focus {
+    border-color: #b794f4;
+  }
+
+  .sm\:focus\:border-purple-500:focus {
+    border-color: #9f7aea;
+  }
+
+  .sm\:focus\:border-purple-600:focus {
+    border-color: #805ad5;
+  }
+
+  .sm\:focus\:border-purple-700:focus {
+    border-color: #6b46c1;
+  }
+
+  .sm\:focus\:border-purple-800:focus {
+    border-color: #553c9a;
+  }
+
+  .sm\:focus\:border-purple-900:focus {
+    border-color: #44337a;
+  }
+
+  .sm\:focus\:border-pink-100:focus {
+    border-color: #fff5f7;
+  }
+
+  .sm\:focus\:border-pink-200:focus {
+    border-color: #fed7e2;
+  }
+
+  .sm\:focus\:border-pink-300:focus {
+    border-color: #fbb6ce;
+  }
+
+  .sm\:focus\:border-pink-400:focus {
+    border-color: #f687b3;
+  }
+
+  .sm\:focus\:border-pink-500:focus {
+    border-color: #ed64a6;
+  }
+
+  .sm\:focus\:border-pink-600:focus {
+    border-color: #d53f8c;
+  }
+
+  .sm\:focus\:border-pink-700:focus {
+    border-color: #b83280;
+  }
+
+  .sm\:focus\:border-pink-800:focus {
+    border-color: #97266d;
+  }
+
+  .sm\:focus\:border-pink-900:focus {
+    border-color: #702459;
+  }
+
+  .sm\:rounded-none {
+    border-radius: 0;
+  }
+
+  .sm\:rounded-sm {
+    border-radius: 0.125rem;
+  }
+
+  .sm\:rounded {
+    border-radius: 0.25rem;
+  }
+
+  .sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .sm\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .sm\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .sm\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .sm\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+
+  .sm\:rounded-r-sm {
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .sm\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .sm\:rounded-l-sm {
+    border-top-left-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .sm\:rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  .sm\:rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .sm\:rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .sm\:rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .sm\:rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .sm\:rounded-r-lg {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .sm\:rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .sm\:rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .sm\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .sm\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .sm\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .sm\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .sm\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .sm\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-tl-sm {
+    border-top-left-radius: 0.125rem;
+  }
+
+  .sm\:rounded-tr-sm {
+    border-top-right-radius: 0.125rem;
+  }
+
+  .sm\:rounded-br-sm {
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .sm\:rounded-bl-sm {
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .sm\:rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+
+  .sm\:rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+
+  .sm\:rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .sm\:rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .sm\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem;
+  }
+
+  .sm\:rounded-tr-lg {
+    border-top-right-radius: 0.5rem;
+  }
+
+  .sm\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .sm\:rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .sm\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .sm\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .sm\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .sm\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:border-solid {
+    border-style: solid;
+  }
+
+  .sm\:border-dashed {
+    border-style: dashed;
+  }
+
+  .sm\:border-dotted {
+    border-style: dotted;
+  }
+
+  .sm\:border-double {
+    border-style: double;
+  }
+
+  .sm\:border-none {
+    border-style: none;
+  }
+
+  .sm\:border-0 {
+    border-width: 0;
+  }
+
+  .sm\:border-2 {
+    border-width: 2px;
+  }
+
+  .sm\:border-4 {
+    border-width: 4px;
+  }
+
+  .sm\:border-8 {
+    border-width: 8px;
+  }
+
+  .sm\:border {
+    border-width: 1px;
+  }
+
+  .sm\:border-t-0 {
+    border-top-width: 0;
+  }
+
+  .sm\:border-r-0 {
+    border-right-width: 0;
+  }
+
+  .sm\:border-b-0 {
+    border-bottom-width: 0;
+  }
+
+  .sm\:border-l-0 {
+    border-left-width: 0;
+  }
+
+  .sm\:border-t-2 {
+    border-top-width: 2px;
+  }
+
+  .sm\:border-r-2 {
+    border-right-width: 2px;
+  }
+
+  .sm\:border-b-2 {
+    border-bottom-width: 2px;
+  }
+
+  .sm\:border-l-2 {
+    border-left-width: 2px;
+  }
+
+  .sm\:border-t-4 {
+    border-top-width: 4px;
+  }
+
+  .sm\:border-r-4 {
+    border-right-width: 4px;
+  }
+
+  .sm\:border-b-4 {
+    border-bottom-width: 4px;
+  }
+
+  .sm\:border-l-4 {
+    border-left-width: 4px;
+  }
+
+  .sm\:border-t-8 {
+    border-top-width: 8px;
+  }
+
+  .sm\:border-r-8 {
+    border-right-width: 8px;
+  }
+
+  .sm\:border-b-8 {
+    border-bottom-width: 8px;
+  }
+
+  .sm\:border-l-8 {
+    border-left-width: 8px;
+  }
+
+  .sm\:border-t {
+    border-top-width: 1px;
+  }
+
+  .sm\:border-r {
+    border-right-width: 1px;
+  }
+
+  .sm\:border-b {
+    border-bottom-width: 1px;
+  }
+
+  .sm\:border-l {
+    border-left-width: 1px;
+  }
+
+  .sm\:cursor-auto {
+    cursor: auto;
+  }
+
+  .sm\:cursor-default {
+    cursor: default;
+  }
+
+  .sm\:cursor-pointer {
+    cursor: pointer;
+  }
+
+  .sm\:cursor-wait {
+    cursor: wait;
+  }
+
+  .sm\:cursor-text {
+    cursor: text;
+  }
+
+  .sm\:cursor-move {
+    cursor: move;
+  }
+
+  .sm\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:inline-block {
+    display: inline-block;
+  }
+
+  .sm\:inline {
+    display: inline;
+  }
+
+  .sm\:flex {
+    display: -webkit-box;
+    display: flex;
+  }
+
+  .sm\:inline-flex {
+    display: -webkit-inline-box;
+    display: inline-flex;
+  }
+
+  .sm\:table {
+    display: table;
+  }
+
+  .sm\:table-row {
+    display: table-row;
+  }
+
+  .sm\:table-cell {
+    display: table-cell;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
+
+  .sm\:flex-row {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+  }
+
+  .sm\:flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+            flex-direction: row-reverse;
+  }
+
+  .sm\:flex-col {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+  }
+
+  .sm\:flex-col-reverse {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+            flex-direction: column-reverse;
+  }
+
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .sm\:flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .sm\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  .sm\:items-start {
+    -webkit-box-align: start;
+            align-items: flex-start;
+  }
+
+  .sm\:items-end {
+    -webkit-box-align: end;
+            align-items: flex-end;
+  }
+
+  .sm\:items-center {
+    -webkit-box-align: center;
+            align-items: center;
+  }
+
+  .sm\:items-baseline {
+    -webkit-box-align: baseline;
+            align-items: baseline;
+  }
+
+  .sm\:items-stretch {
+    -webkit-box-align: stretch;
+            align-items: stretch;
+  }
+
+  .sm\:self-auto {
+    align-self: auto;
+  }
+
+  .sm\:self-start {
+    align-self: flex-start;
+  }
+
+  .sm\:self-end {
+    align-self: flex-end;
+  }
+
+  .sm\:self-center {
+    align-self: center;
+  }
+
+  .sm\:self-stretch {
+    align-self: stretch;
+  }
+
+  .sm\:justify-start {
+    -webkit-box-pack: start;
+            justify-content: flex-start;
+  }
+
+  .sm\:justify-end {
+    -webkit-box-pack: end;
+            justify-content: flex-end;
+  }
+
+  .sm\:justify-center {
+    -webkit-box-pack: center;
+            justify-content: center;
+  }
+
+  .sm\:justify-between {
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+  }
+
+  .sm\:justify-around {
+    justify-content: space-around;
+  }
+
+  .sm\:content-center {
+    align-content: center;
+  }
+
+  .sm\:content-start {
+    align-content: flex-start;
+  }
+
+  .sm\:content-end {
+    align-content: flex-end;
+  }
+
+  .sm\:content-between {
+    align-content: space-between;
+  }
+
+  .sm\:content-around {
+    align-content: space-around;
+  }
+
+  .sm\:flex-1 {
+    -webkit-box-flex: 1;
+            flex: 1 1 0%;
+  }
+
+  .sm\:flex-auto {
+    -webkit-box-flex: 1;
+            flex: 1 1 auto;
+  }
+
+  .sm\:flex-initial {
+    -webkit-box-flex: 0;
+            flex: 0 1 auto;
+  }
+
+  .sm\:flex-none {
+    -webkit-box-flex: 0;
+            flex: none;
+  }
+
+  .sm\:flex-grow-0 {
+    -webkit-box-flex: 0;
+            flex-grow: 0;
+  }
+
+  .sm\:flex-grow {
+    -webkit-box-flex: 1;
+            flex-grow: 1;
+  }
+
+  .sm\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .sm\:flex-shrink {
+    flex-shrink: 1;
+  }
+
+  .sm\:order-1 {
+    -webkit-box-ordinal-group: 2;
+            order: 1;
+  }
+
+  .sm\:order-2 {
+    -webkit-box-ordinal-group: 3;
+            order: 2;
+  }
+
+  .sm\:order-3 {
+    -webkit-box-ordinal-group: 4;
+            order: 3;
+  }
+
+  .sm\:order-4 {
+    -webkit-box-ordinal-group: 5;
+            order: 4;
+  }
+
+  .sm\:order-5 {
+    -webkit-box-ordinal-group: 6;
+            order: 5;
+  }
+
+  .sm\:order-6 {
+    -webkit-box-ordinal-group: 7;
+            order: 6;
+  }
+
+  .sm\:order-7 {
+    -webkit-box-ordinal-group: 8;
+            order: 7;
+  }
+
+  .sm\:order-8 {
+    -webkit-box-ordinal-group: 9;
+            order: 8;
+  }
+
+  .sm\:order-9 {
+    -webkit-box-ordinal-group: 10;
+            order: 9;
+  }
+
+  .sm\:order-10 {
+    -webkit-box-ordinal-group: 11;
+            order: 10;
+  }
+
+  .sm\:order-11 {
+    -webkit-box-ordinal-group: 12;
+            order: 11;
+  }
+
+  .sm\:order-12 {
+    -webkit-box-ordinal-group: 13;
+            order: 12;
+  }
+
+  .sm\:order-first {
+    -webkit-box-ordinal-group: -9998;
+            order: -9999;
+  }
+
+  .sm\:order-last {
+    -webkit-box-ordinal-group: 10000;
+            order: 9999;
+  }
+
+  .sm\:order-none {
+    -webkit-box-ordinal-group: 1;
+            order: 0;
+  }
+
+  .sm\:float-right {
+    float: right;
+  }
+
+  .sm\:float-left {
+    float: left;
+  }
+
+  .sm\:float-none {
+    float: none;
+  }
+
+  .sm\:clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .sm\:font-sans {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .sm\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .sm\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .sm\:font-hairline {
+    font-weight: 100;
+  }
+
+  .sm\:font-thin {
+    font-weight: 200;
+  }
+
+  .sm\:font-light {
+    font-weight: 300;
+  }
+
+  .sm\:font-normal {
+    font-weight: 400;
+  }
+
+  .sm\:font-medium {
+    font-weight: 500;
+  }
+
+  .sm\:font-semibold {
+    font-weight: 600;
+  }
+
+  .sm\:font-bold {
+    font-weight: 700;
+  }
+
+  .sm\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .sm\:font-black {
+    font-weight: 900;
+  }
+
+  .sm\:hover\:font-hairline:hover {
+    font-weight: 100;
+  }
+
+  .sm\:hover\:font-thin:hover {
+    font-weight: 200;
+  }
+
+  .sm\:hover\:font-light:hover {
+    font-weight: 300;
+  }
+
+  .sm\:hover\:font-normal:hover {
+    font-weight: 400;
+  }
+
+  .sm\:hover\:font-medium:hover {
+    font-weight: 500;
+  }
+
+  .sm\:hover\:font-semibold:hover {
+    font-weight: 600;
+  }
+
+  .sm\:hover\:font-bold:hover {
+    font-weight: 700;
+  }
+
+  .sm\:hover\:font-extrabold:hover {
+    font-weight: 800;
+  }
+
+  .sm\:hover\:font-black:hover {
+    font-weight: 900;
+  }
+
+  .sm\:focus\:font-hairline:focus {
+    font-weight: 100;
+  }
+
+  .sm\:focus\:font-thin:focus {
+    font-weight: 200;
+  }
+
+  .sm\:focus\:font-light:focus {
+    font-weight: 300;
+  }
+
+  .sm\:focus\:font-normal:focus {
+    font-weight: 400;
+  }
+
+  .sm\:focus\:font-medium:focus {
+    font-weight: 500;
+  }
+
+  .sm\:focus\:font-semibold:focus {
+    font-weight: 600;
+  }
+
+  .sm\:focus\:font-bold:focus {
+    font-weight: 700;
+  }
+
+  .sm\:focus\:font-extrabold:focus {
+    font-weight: 800;
+  }
+
+  .sm\:focus\:font-black:focus {
+    font-weight: 900;
+  }
+
+  .sm\:h-0 {
+    height: 0;
+  }
+
+  .sm\:h-1 {
+    height: 0.25rem;
+  }
+
+  .sm\:h-2 {
+    height: 0.5rem;
+  }
+
+  .sm\:h-3 {
+    height: 0.75rem;
+  }
+
+  .sm\:h-4 {
+    height: 1rem;
+  }
+
+  .sm\:h-5 {
+    height: 1.25rem;
+  }
+
+  .sm\:h-6 {
+    height: 1.5rem;
+  }
+
+  .sm\:h-8 {
+    height: 2rem;
+  }
+
+  .sm\:h-10 {
+    height: 2.5rem;
+  }
+
+  .sm\:h-12 {
+    height: 3rem;
+  }
+
+  .sm\:h-16 {
+    height: 4rem;
+  }
+
+  .sm\:h-20 {
+    height: 5rem;
+  }
+
+  .sm\:h-24 {
+    height: 6rem;
+  }
+
+  .sm\:h-32 {
+    height: 8rem;
+  }
+
+  .sm\:h-40 {
+    height: 10rem;
+  }
+
+  .sm\:h-48 {
+    height: 12rem;
+  }
+
+  .sm\:h-56 {
+    height: 14rem;
+  }
+
+  .sm\:h-64 {
+    height: 16rem;
+  }
+
+  .sm\:h-auto {
+    height: auto;
+  }
+
+  .sm\:h-px {
+    height: 1px;
+  }
+
+  .sm\:h-full {
+    height: 100%;
+  }
+
+  .sm\:h-screen {
+    height: 100vh;
+  }
+
+  .sm\:leading-none {
+    line-height: 1;
+  }
+
+  .sm\:leading-tight {
+    line-height: 1.25;
+  }
+
+  .sm\:leading-snug {
+    line-height: 1.375;
+  }
+
+  .sm\:leading-normal {
+    line-height: 1.5;
+  }
+
+  .sm\:leading-relaxed {
+    line-height: 1.625;
+  }
+
+  .sm\:leading-loose {
+    line-height: 2;
+  }
+
+  .sm\:list-inside {
+    list-style-position: inside;
+  }
+
+  .sm\:list-outside {
+    list-style-position: outside;
+  }
+
+  .sm\:list-none {
+    list-style-type: none;
+  }
+
+  .sm\:list-disc {
+    list-style-type: disc;
+  }
+
+  .sm\:list-decimal {
+    list-style-type: decimal;
+  }
+
+  .sm\:m-0 {
+    margin: 0;
+  }
+
+  .sm\:m-1 {
+    margin: 0.25rem;
+  }
+
+  .sm\:m-2 {
+    margin: 0.5rem;
+  }
+
+  .sm\:m-3 {
+    margin: 0.75rem;
+  }
+
+  .sm\:m-4 {
+    margin: 1rem;
+  }
+
+  .sm\:m-5 {
+    margin: 1.25rem;
+  }
+
+  .sm\:m-6 {
+    margin: 1.5rem;
+  }
+
+  .sm\:m-8 {
+    margin: 2rem;
+  }
+
+  .sm\:m-10 {
+    margin: 2.5rem;
+  }
+
+  .sm\:m-12 {
+    margin: 3rem;
+  }
+
+  .sm\:m-16 {
+    margin: 4rem;
+  }
+
+  .sm\:m-20 {
+    margin: 5rem;
+  }
+
+  .sm\:m-24 {
+    margin: 6rem;
+  }
+
+  .sm\:m-32 {
+    margin: 8rem;
+  }
+
+  .sm\:m-40 {
+    margin: 10rem;
+  }
+
+  .sm\:m-48 {
+    margin: 12rem;
+  }
+
+  .sm\:m-56 {
+    margin: 14rem;
+  }
+
+  .sm\:m-64 {
+    margin: 16rem;
+  }
+
+  .sm\:m-auto {
+    margin: auto;
+  }
+
+  .sm\:m-px {
+    margin: 1px;
+  }
+
+  .sm\:-m-1 {
+    margin: -0.25rem;
+  }
+
+  .sm\:-m-2 {
+    margin: -0.5rem;
+  }
+
+  .sm\:-m-3 {
+    margin: -0.75rem;
+  }
+
+  .sm\:-m-4 {
+    margin: -1rem;
+  }
+
+  .sm\:-m-5 {
+    margin: -1.25rem;
+  }
+
+  .sm\:-m-6 {
+    margin: -1.5rem;
+  }
+
+  .sm\:-m-8 {
+    margin: -2rem;
+  }
+
+  .sm\:-m-10 {
+    margin: -2.5rem;
+  }
+
+  .sm\:-m-12 {
+    margin: -3rem;
+  }
+
+  .sm\:-m-16 {
+    margin: -4rem;
+  }
+
+  .sm\:-m-20 {
+    margin: -5rem;
+  }
+
+  .sm\:-m-24 {
+    margin: -6rem;
+  }
+
+  .sm\:-m-32 {
+    margin: -8rem;
+  }
+
+  .sm\:-m-40 {
+    margin: -10rem;
+  }
+
+  .sm\:-m-48 {
+    margin: -12rem;
+  }
+
+  .sm\:-m-56 {
+    margin: -14rem;
+  }
+
+  .sm\:-m-64 {
+    margin: -16rem;
+  }
+
+  .sm\:-m-px {
+    margin: -1px;
+  }
+
+  .sm\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .sm\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .sm\:my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .sm\:mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .sm\:my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .sm\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .sm\:my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .sm\:mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+
+  .sm\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .sm\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .sm\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .sm\:mx-5 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+
+  .sm\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .sm\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .sm\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .sm\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .sm\:my-10 {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .sm\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
+  .sm\:my-12 {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .sm\:mx-12 {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  .sm\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
+  .sm\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+
+  .sm\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  .sm\:mx-20 {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+
+  .sm\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
+  .sm\:mx-24 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
+  .sm\:my-32 {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+  }
+
+  .sm\:mx-32 {
+    margin-left: 8rem;
+    margin-right: 8rem;
+  }
+
+  .sm\:my-40 {
+    margin-top: 10rem;
+    margin-bottom: 10rem;
+  }
+
+  .sm\:mx-40 {
+    margin-left: 10rem;
+    margin-right: 10rem;
+  }
+
+  .sm\:my-48 {
+    margin-top: 12rem;
+    margin-bottom: 12rem;
+  }
+
+  .sm\:mx-48 {
+    margin-left: 12rem;
+    margin-right: 12rem;
+  }
+
+  .sm\:my-56 {
+    margin-top: 14rem;
+    margin-bottom: 14rem;
+  }
+
+  .sm\:mx-56 {
+    margin-left: 14rem;
+    margin-right: 14rem;
+  }
+
+  .sm\:my-64 {
+    margin-top: 16rem;
+    margin-bottom: 16rem;
+  }
+
+  .sm\:mx-64 {
+    margin-left: 16rem;
+    margin-right: 16rem;
+  }
+
+  .sm\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .sm\:my-px {
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  .sm\:mx-px {
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+
+  .sm\:-my-1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .sm\:-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+  .sm\:-my-2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+
+  .sm\:-mx-2 {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .sm\:-my-3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+
+  .sm\:-mx-3 {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+
+  .sm\:-my-4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+
+  .sm\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  .sm\:-my-5 {
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
+  }
+
+  .sm\:-mx-5 {
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+  }
+
+  .sm\:-my-6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+
+  .sm\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .sm\:-my-8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+
+  .sm\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .sm\:-my-10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+
+  .sm\:-mx-10 {
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+  }
+
+  .sm\:-my-12 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+
+  .sm\:-mx-12 {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+
+  .sm\:-my-16 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+
+  .sm\:-mx-16 {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+
+  .sm\:-my-20 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+
+  .sm\:-mx-20 {
+    margin-left: -5rem;
+    margin-right: -5rem;
+  }
+
+  .sm\:-my-24 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+
+  .sm\:-mx-24 {
+    margin-left: -6rem;
+    margin-right: -6rem;
+  }
+
+  .sm\:-my-32 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+
+  .sm\:-mx-32 {
+    margin-left: -8rem;
+    margin-right: -8rem;
+  }
+
+  .sm\:-my-40 {
+    margin-top: -10rem;
+    margin-bottom: -10rem;
+  }
+
+  .sm\:-mx-40 {
+    margin-left: -10rem;
+    margin-right: -10rem;
+  }
+
+  .sm\:-my-48 {
+    margin-top: -12rem;
+    margin-bottom: -12rem;
+  }
+
+  .sm\:-mx-48 {
+    margin-left: -12rem;
+    margin-right: -12rem;
+  }
+
+  .sm\:-my-56 {
+    margin-top: -14rem;
+    margin-bottom: -14rem;
+  }
+
+  .sm\:-mx-56 {
+    margin-left: -14rem;
+    margin-right: -14rem;
+  }
+
+  .sm\:-my-64 {
+    margin-top: -16rem;
+    margin-bottom: -16rem;
+  }
+
+  .sm\:-mx-64 {
+    margin-left: -16rem;
+    margin-right: -16rem;
+  }
+
+  .sm\:-my-px {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  .sm\:-mx-px {
+    margin-left: -1px;
+    margin-right: -1px;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0;
+  }
+
+  .sm\:mr-0 {
+    margin-right: 0;
+  }
+
+  .sm\:mb-0 {
+    margin-bottom: 0;
+  }
+
+  .sm\:ml-0 {
+    margin-left: 0;
+  }
+
+  .sm\:mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .sm\:mr-1 {
+    margin-right: 0.25rem;
+  }
+
+  .sm\:mb-1 {
+    margin-bottom: 0.25rem;
+  }
+
+  .sm\:ml-1 {
+    margin-left: 0.25rem;
+  }
+
+  .sm\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .sm\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
+  .sm\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .sm\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
+  .sm\:mt-3 {
+    margin-top: 0.75rem;
+  }
+
+  .sm\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
+  .sm\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
+  .sm\:ml-3 {
+    margin-left: 0.75rem;
+  }
+
+  .sm\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .sm\:mr-4 {
+    margin-right: 1rem;
+  }
+
+  .sm\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .sm\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .sm\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .sm\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .sm\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
+  .sm\:ml-5 {
+    margin-left: 1.25rem;
+  }
+
+  .sm\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .sm\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
+  .sm\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .sm\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .sm\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .sm\:mr-8 {
+    margin-right: 2rem;
+  }
+
+  .sm\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .sm\:ml-8 {
+    margin-left: 2rem;
+  }
+
+  .sm\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .sm\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .sm\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .sm\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .sm\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .sm\:mr-12 {
+    margin-right: 3rem;
+  }
+
+  .sm\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
+  .sm\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .sm\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .sm\:mr-16 {
+    margin-right: 4rem;
+  }
+
+  .sm\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .sm\:ml-16 {
+    margin-left: 4rem;
+  }
+
+  .sm\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .sm\:mr-20 {
+    margin-right: 5rem;
+  }
+
+  .sm\:mb-20 {
+    margin-bottom: 5rem;
+  }
+
+  .sm\:ml-20 {
+    margin-left: 5rem;
+  }
+
+  .sm\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .sm\:mr-24 {
+    margin-right: 6rem;
+  }
+
+  .sm\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .sm\:ml-24 {
+    margin-left: 6rem;
+  }
+
+  .sm\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .sm\:mr-32 {
+    margin-right: 8rem;
+  }
+
+  .sm\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
+  .sm\:ml-32 {
+    margin-left: 8rem;
+  }
+
+  .sm\:mt-40 {
+    margin-top: 10rem;
+  }
+
+  .sm\:mr-40 {
+    margin-right: 10rem;
+  }
+
+  .sm\:mb-40 {
+    margin-bottom: 10rem;
+  }
+
+  .sm\:ml-40 {
+    margin-left: 10rem;
+  }
+
+  .sm\:mt-48 {
+    margin-top: 12rem;
+  }
+
+  .sm\:mr-48 {
+    margin-right: 12rem;
+  }
+
+  .sm\:mb-48 {
+    margin-bottom: 12rem;
+  }
+
+  .sm\:ml-48 {
+    margin-left: 12rem;
+  }
+
+  .sm\:mt-56 {
+    margin-top: 14rem;
+  }
+
+  .sm\:mr-56 {
+    margin-right: 14rem;
+  }
+
+  .sm\:mb-56 {
+    margin-bottom: 14rem;
+  }
+
+  .sm\:ml-56 {
+    margin-left: 14rem;
+  }
+
+  .sm\:mt-64 {
+    margin-top: 16rem;
+  }
+
+  .sm\:mr-64 {
+    margin-right: 16rem;
+  }
+
+  .sm\:mb-64 {
+    margin-bottom: 16rem;
+  }
+
+  .sm\:ml-64 {
+    margin-left: 16rem;
+  }
+
+  .sm\:mt-auto {
+    margin-top: auto;
+  }
+
+  .sm\:mr-auto {
+    margin-right: auto;
+  }
+
+  .sm\:mb-auto {
+    margin-bottom: auto;
+  }
+
+  .sm\:ml-auto {
+    margin-left: auto;
+  }
+
+  .sm\:mt-px {
+    margin-top: 1px;
+  }
+
+  .sm\:mr-px {
+    margin-right: 1px;
+  }
+
+  .sm\:mb-px {
+    margin-bottom: 1px;
+  }
+
+  .sm\:ml-px {
+    margin-left: 1px;
+  }
+
+  .sm\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .sm\:-mr-1 {
+    margin-right: -0.25rem;
+  }
+
+  .sm\:-mb-1 {
+    margin-bottom: -0.25rem;
+  }
+
+  .sm\:-ml-1 {
+    margin-left: -0.25rem;
+  }
+
+  .sm\:-mt-2 {
+    margin-top: -0.5rem;
+  }
+
+  .sm\:-mr-2 {
+    margin-right: -0.5rem;
+  }
+
+  .sm\:-mb-2 {
+    margin-bottom: -0.5rem;
+  }
+
+  .sm\:-ml-2 {
+    margin-left: -0.5rem;
+  }
+
+  .sm\:-mt-3 {
+    margin-top: -0.75rem;
+  }
+
+  .sm\:-mr-3 {
+    margin-right: -0.75rem;
+  }
+
+  .sm\:-mb-3 {
+    margin-bottom: -0.75rem;
+  }
+
+  .sm\:-ml-3 {
+    margin-left: -0.75rem;
+  }
+
+  .sm\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .sm\:-mr-4 {
+    margin-right: -1rem;
+  }
+
+  .sm\:-mb-4 {
+    margin-bottom: -1rem;
+  }
+
+  .sm\:-ml-4 {
+    margin-left: -1rem;
+  }
+
+  .sm\:-mt-5 {
+    margin-top: -1.25rem;
+  }
+
+  .sm\:-mr-5 {
+    margin-right: -1.25rem;
+  }
+
+  .sm\:-mb-5 {
+    margin-bottom: -1.25rem;
+  }
+
+  .sm\:-ml-5 {
+    margin-left: -1.25rem;
+  }
+
+  .sm\:-mt-6 {
+    margin-top: -1.5rem;
+  }
+
+  .sm\:-mr-6 {
+    margin-right: -1.5rem;
+  }
+
+  .sm\:-mb-6 {
+    margin-bottom: -1.5rem;
+  }
+
+  .sm\:-ml-6 {
+    margin-left: -1.5rem;
+  }
+
+  .sm\:-mt-8 {
+    margin-top: -2rem;
+  }
+
+  .sm\:-mr-8 {
+    margin-right: -2rem;
+  }
+
+  .sm\:-mb-8 {
+    margin-bottom: -2rem;
+  }
+
+  .sm\:-ml-8 {
+    margin-left: -2rem;
+  }
+
+  .sm\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .sm\:-mr-10 {
+    margin-right: -2.5rem;
+  }
+
+  .sm\:-mb-10 {
+    margin-bottom: -2.5rem;
+  }
+
+  .sm\:-ml-10 {
+    margin-left: -2.5rem;
+  }
+
+  .sm\:-mt-12 {
+    margin-top: -3rem;
+  }
+
+  .sm\:-mr-12 {
+    margin-right: -3rem;
+  }
+
+  .sm\:-mb-12 {
+    margin-bottom: -3rem;
+  }
+
+  .sm\:-ml-12 {
+    margin-left: -3rem;
+  }
+
+  .sm\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .sm\:-mr-16 {
+    margin-right: -4rem;
+  }
+
+  .sm\:-mb-16 {
+    margin-bottom: -4rem;
+  }
+
+  .sm\:-ml-16 {
+    margin-left: -4rem;
+  }
+
+  .sm\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .sm\:-mr-20 {
+    margin-right: -5rem;
+  }
+
+  .sm\:-mb-20 {
+    margin-bottom: -5rem;
+  }
+
+  .sm\:-ml-20 {
+    margin-left: -5rem;
+  }
+
+  .sm\:-mt-24 {
+    margin-top: -6rem;
+  }
+
+  .sm\:-mr-24 {
+    margin-right: -6rem;
+  }
+
+  .sm\:-mb-24 {
+    margin-bottom: -6rem;
+  }
+
+  .sm\:-ml-24 {
+    margin-left: -6rem;
+  }
+
+  .sm\:-mt-32 {
+    margin-top: -8rem;
+  }
+
+  .sm\:-mr-32 {
+    margin-right: -8rem;
+  }
+
+  .sm\:-mb-32 {
+    margin-bottom: -8rem;
+  }
+
+  .sm\:-ml-32 {
+    margin-left: -8rem;
+  }
+
+  .sm\:-mt-40 {
+    margin-top: -10rem;
+  }
+
+  .sm\:-mr-40 {
+    margin-right: -10rem;
+  }
+
+  .sm\:-mb-40 {
+    margin-bottom: -10rem;
+  }
+
+  .sm\:-ml-40 {
+    margin-left: -10rem;
+  }
+
+  .sm\:-mt-48 {
+    margin-top: -12rem;
+  }
+
+  .sm\:-mr-48 {
+    margin-right: -12rem;
+  }
+
+  .sm\:-mb-48 {
+    margin-bottom: -12rem;
+  }
+
+  .sm\:-ml-48 {
+    margin-left: -12rem;
+  }
+
+  .sm\:-mt-56 {
+    margin-top: -14rem;
+  }
+
+  .sm\:-mr-56 {
+    margin-right: -14rem;
+  }
+
+  .sm\:-mb-56 {
+    margin-bottom: -14rem;
+  }
+
+  .sm\:-ml-56 {
+    margin-left: -14rem;
+  }
+
+  .sm\:-mt-64 {
+    margin-top: -16rem;
+  }
+
+  .sm\:-mr-64 {
+    margin-right: -16rem;
+  }
+
+  .sm\:-mb-64 {
+    margin-bottom: -16rem;
+  }
+
+  .sm\:-ml-64 {
+    margin-left: -16rem;
+  }
+
+  .sm\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .sm\:-mr-px {
+    margin-right: -1px;
+  }
+
+  .sm\:-mb-px {
+    margin-bottom: -1px;
+  }
+
+  .sm\:-ml-px {
+    margin-left: -1px;
+  }
+
+  .sm\:max-h-full {
+    max-height: 100%;
+  }
+
+  .sm\:max-h-screen {
+    max-height: 100vh;
+  }
+
+  .sm\:max-w-xs {
+    max-width: 20rem;
+  }
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .sm\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .sm\:max-w-lg {
+    max-width: 32rem;
+  }
+
+  .sm\:max-w-xl {
+    max-width: 36rem;
+  }
+
+  .sm\:max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .sm\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .sm\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .sm\:max-w-5xl {
+    max-width: 64rem;
+  }
+
+  .sm\:max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .sm\:max-w-full {
+    max-width: 100%;
+  }
+
+  .sm\:min-h-0 {
+    min-height: 0;
+  }
+
+  .sm\:min-h-full {
+    min-height: 100%;
+  }
+
+  .sm\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .sm\:min-w-0 {
+    min-width: 0;
+  }
+
+  .sm\:min-w-full {
+    min-width: 100%;
+  }
+
+  .sm\:object-contain {
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .sm\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+  .sm\:object-fill {
+    -o-object-fit: fill;
+       object-fit: fill;
+  }
+
+  .sm\:object-none {
+    -o-object-fit: none;
+       object-fit: none;
+  }
+
+  .sm\:object-scale-down {
+    -o-object-fit: scale-down;
+       object-fit: scale-down;
+  }
+
+  .sm\:object-bottom {
+    -o-object-position: bottom;
+       object-position: bottom;
+  }
+
+  .sm\:object-center {
+    -o-object-position: center;
+       object-position: center;
+  }
+
+  .sm\:object-left {
+    -o-object-position: left;
+       object-position: left;
+  }
+
+  .sm\:object-left-bottom {
+    -o-object-position: left bottom;
+       object-position: left bottom;
+  }
+
+  .sm\:object-left-top {
+    -o-object-position: left top;
+       object-position: left top;
+  }
+
+  .sm\:object-right {
+    -o-object-position: right;
+       object-position: right;
+  }
+
+  .sm\:object-right-bottom {
+    -o-object-position: right bottom;
+       object-position: right bottom;
+  }
+
+  .sm\:object-right-top {
+    -o-object-position: right top;
+       object-position: right top;
+  }
+
+  .sm\:object-top {
+    -o-object-position: top;
+       object-position: top;
+  }
+
+  .sm\:opacity-0 {
+    opacity: 0;
+  }
+
+  .sm\:opacity-25 {
+    opacity: 0.25;
+  }
+
+  .sm\:opacity-50 {
+    opacity: 0.5;
+  }
+
+  .sm\:opacity-75 {
+    opacity: 0.75;
+  }
+
+  .sm\:opacity-100 {
+    opacity: 1;
+  }
+
+  .sm\:hover\:opacity-0:hover {
+    opacity: 0;
+  }
+
+  .sm\:hover\:opacity-25:hover {
+    opacity: 0.25;
+  }
+
+  .sm\:hover\:opacity-50:hover {
+    opacity: 0.5;
+  }
+
+  .sm\:hover\:opacity-75:hover {
+    opacity: 0.75;
+  }
+
+  .sm\:hover\:opacity-100:hover {
+    opacity: 1;
+  }
+
+  .sm\:focus\:opacity-0:focus {
+    opacity: 0;
+  }
+
+  .sm\:focus\:opacity-25:focus {
+    opacity: 0.25;
+  }
+
+  .sm\:focus\:opacity-50:focus {
+    opacity: 0.5;
+  }
+
+  .sm\:focus\:opacity-75:focus {
+    opacity: 0.75;
+  }
+
+  .sm\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
+
+  .sm\:outline-none {
+    outline: 0;
+  }
+
+  .sm\:focus\:outline-none:focus {
+    outline: 0;
+  }
+
+  .sm\:overflow-auto {
+    overflow: auto;
+  }
+
+  .sm\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .sm\:overflow-visible {
+    overflow: visible;
+  }
+
+  .sm\:overflow-scroll {
+    overflow: scroll;
+  }
+
+  .sm\:overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .sm\:overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .sm\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .sm\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .sm\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .sm\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
+  .sm\:overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .sm\:overflow-y-scroll {
+    overflow-y: scroll;
+  }
+
+  .sm\:scrolling-touch {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .sm\:scrolling-auto {
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .sm\:p-0 {
+    padding: 0;
+  }
+
+  .sm\:p-1 {
+    padding: 0.25rem;
+  }
+
+  .sm\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .sm\:p-3 {
+    padding: 0.75rem;
+  }
+
+  .sm\:p-4 {
+    padding: 1rem;
+  }
+
+  .sm\:p-5 {
+    padding: 1.25rem;
+  }
+
+  .sm\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .sm\:p-8 {
+    padding: 2rem;
+  }
+
+  .sm\:p-10 {
+    padding: 2.5rem;
+  }
+
+  .sm\:p-12 {
+    padding: 3rem;
+  }
+
+  .sm\:p-16 {
+    padding: 4rem;
+  }
+
+  .sm\:p-20 {
+    padding: 5rem;
+  }
+
+  .sm\:p-24 {
+    padding: 6rem;
+  }
+
+  .sm\:p-32 {
+    padding: 8rem;
+  }
+
+  .sm\:p-40 {
+    padding: 10rem;
+  }
+
+  .sm\:p-48 {
+    padding: 12rem;
+  }
+
+  .sm\:p-56 {
+    padding: 14rem;
+  }
+
+  .sm\:p-64 {
+    padding: 16rem;
+  }
+
+  .sm\:p-px {
+    padding: 1px;
+  }
+
+  .sm\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .sm\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .sm\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .sm\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .sm\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .sm\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .sm\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .sm\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .sm\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .sm\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .sm\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .sm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .sm\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
+  .sm\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .sm\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .sm\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .sm\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .sm\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .sm\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
+  .sm\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .sm\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .sm\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
+  .sm\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .sm\:px-32 {
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+
+  .sm\:py-40 {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+  }
+
+  .sm\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
+  .sm\:py-48 {
+    padding-top: 12rem;
+    padding-bottom: 12rem;
+  }
+
+  .sm\:px-48 {
+    padding-left: 12rem;
+    padding-right: 12rem;
+  }
+
+  .sm\:py-56 {
+    padding-top: 14rem;
+    padding-bottom: 14rem;
+  }
+
+  .sm\:px-56 {
+    padding-left: 14rem;
+    padding-right: 14rem;
+  }
+
+  .sm\:py-64 {
+    padding-top: 16rem;
+    padding-bottom: 16rem;
+  }
+
+  .sm\:px-64 {
+    padding-left: 16rem;
+    padding-right: 16rem;
+  }
+
+  .sm\:py-px {
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .sm\:px-px {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .sm\:pt-0 {
+    padding-top: 0;
+  }
+
+  .sm\:pr-0 {
+    padding-right: 0;
+  }
+
+  .sm\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .sm\:pl-0 {
+    padding-left: 0;
+  }
+
+  .sm\:pt-1 {
+    padding-top: 0.25rem;
+  }
+
+  .sm\:pr-1 {
+    padding-right: 0.25rem;
+  }
+
+  .sm\:pb-1 {
+    padding-bottom: 0.25rem;
+  }
+
+  .sm\:pl-1 {
+    padding-left: 0.25rem;
+  }
+
+  .sm\:pt-2 {
+    padding-top: 0.5rem;
+  }
+
+  .sm\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .sm\:pb-2 {
+    padding-bottom: 0.5rem;
+  }
+
+  .sm\:pl-2 {
+    padding-left: 0.5rem;
+  }
+
+  .sm\:pt-3 {
+    padding-top: 0.75rem;
+  }
+
+  .sm\:pr-3 {
+    padding-right: 0.75rem;
+  }
+
+  .sm\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
+  .sm\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
+  .sm\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .sm\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .sm\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .sm\:pl-4 {
+    padding-left: 1rem;
+  }
+
+  .sm\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .sm\:pr-5 {
+    padding-right: 1.25rem;
+  }
+
+  .sm\:pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
+  .sm\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .sm\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .sm\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .sm\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
+  .sm\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .sm\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .sm\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .sm\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .sm\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .sm\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .sm\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
+  .sm\:pb-10 {
+    padding-bottom: 2.5rem;
+  }
+
+  .sm\:pl-10 {
+    padding-left: 2.5rem;
+  }
+
+  .sm\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .sm\:pr-12 {
+    padding-right: 3rem;
+  }
+
+  .sm\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
+  .sm\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .sm\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .sm\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .sm\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .sm\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .sm\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .sm\:pr-20 {
+    padding-right: 5rem;
+  }
+
+  .sm\:pb-20 {
+    padding-bottom: 5rem;
+  }
+
+  .sm\:pl-20 {
+    padding-left: 5rem;
+  }
+
+  .sm\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .sm\:pr-24 {
+    padding-right: 6rem;
+  }
+
+  .sm\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .sm\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .sm\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .sm\:pr-32 {
+    padding-right: 8rem;
+  }
+
+  .sm\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
+  .sm\:pl-32 {
+    padding-left: 8rem;
+  }
+
+  .sm\:pt-40 {
+    padding-top: 10rem;
+  }
+
+  .sm\:pr-40 {
+    padding-right: 10rem;
+  }
+
+  .sm\:pb-40 {
+    padding-bottom: 10rem;
+  }
+
+  .sm\:pl-40 {
+    padding-left: 10rem;
+  }
+
+  .sm\:pt-48 {
+    padding-top: 12rem;
+  }
+
+  .sm\:pr-48 {
+    padding-right: 12rem;
+  }
+
+  .sm\:pb-48 {
+    padding-bottom: 12rem;
+  }
+
+  .sm\:pl-48 {
+    padding-left: 12rem;
+  }
+
+  .sm\:pt-56 {
+    padding-top: 14rem;
+  }
+
+  .sm\:pr-56 {
+    padding-right: 14rem;
+  }
+
+  .sm\:pb-56 {
+    padding-bottom: 14rem;
+  }
+
+  .sm\:pl-56 {
+    padding-left: 14rem;
+  }
+
+  .sm\:pt-64 {
+    padding-top: 16rem;
+  }
+
+  .sm\:pr-64 {
+    padding-right: 16rem;
+  }
+
+  .sm\:pb-64 {
+    padding-bottom: 16rem;
+  }
+
+  .sm\:pl-64 {
+    padding-left: 16rem;
+  }
+
+  .sm\:pt-px {
+    padding-top: 1px;
+  }
+
+  .sm\:pr-px {
+    padding-right: 1px;
+  }
+
+  .sm\:pb-px {
+    padding-bottom: 1px;
+  }
+
+  .sm\:pl-px {
+    padding-left: 1px;
+  }
+
+  .sm\:placeholder-transparent::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .sm\:placeholder-transparent::-moz-placeholder {
+    color: transparent;
+  }
+
+  .sm\:placeholder-transparent:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .sm\:placeholder-transparent::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .sm\:placeholder-transparent::placeholder {
+    color: transparent;
+  }
+
+  .sm\:placeholder-black::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .sm\:placeholder-black::-moz-placeholder {
+    color: #000;
+  }
+
+  .sm\:placeholder-black:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .sm\:placeholder-black::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .sm\:placeholder-black::placeholder {
+    color: #000;
+  }
+
+  .sm\:placeholder-white::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .sm\:placeholder-white::-moz-placeholder {
+    color: #fff;
+  }
+
+  .sm\:placeholder-white:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .sm\:placeholder-white::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .sm\:placeholder-white::placeholder {
+    color: #fff;
+  }
+
+  .sm\:placeholder-gray-100::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:placeholder-gray-100::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:placeholder-gray-100:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:placeholder-gray-100::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:placeholder-gray-100::placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:placeholder-gray-200::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:placeholder-gray-200::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:placeholder-gray-200:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:placeholder-gray-200::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:placeholder-gray-200::placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:placeholder-gray-300::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:placeholder-gray-300::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:placeholder-gray-300:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:placeholder-gray-300::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:placeholder-gray-300::placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:placeholder-gray-400::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:placeholder-gray-400::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:placeholder-gray-400:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:placeholder-gray-400::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:placeholder-gray-400::placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:placeholder-gray-500::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:placeholder-gray-500::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:placeholder-gray-500:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:placeholder-gray-500::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:placeholder-gray-500::placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:placeholder-gray-600::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .sm\:placeholder-gray-600::-moz-placeholder {
+    color: #718096;
+  }
+
+  .sm\:placeholder-gray-600:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .sm\:placeholder-gray-600::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .sm\:placeholder-gray-600::placeholder {
+    color: #718096;
+  }
+
+  .sm\:placeholder-gray-700::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:placeholder-gray-700::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:placeholder-gray-700:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:placeholder-gray-700::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:placeholder-gray-700::placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:placeholder-gray-800::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:placeholder-gray-800::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:placeholder-gray-800:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:placeholder-gray-800::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:placeholder-gray-800::placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:placeholder-gray-900::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:placeholder-gray-900::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:placeholder-gray-900:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:placeholder-gray-900::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:placeholder-gray-900::placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:placeholder-red-100::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:placeholder-red-100::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:placeholder-red-100:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:placeholder-red-100::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:placeholder-red-100::placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:placeholder-red-200::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:placeholder-red-200::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:placeholder-red-200:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:placeholder-red-200::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:placeholder-red-200::placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:placeholder-red-300::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:placeholder-red-300::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:placeholder-red-300:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:placeholder-red-300::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:placeholder-red-300::placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:placeholder-red-400::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:placeholder-red-400::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:placeholder-red-400:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:placeholder-red-400::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:placeholder-red-400::placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:placeholder-red-500::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:placeholder-red-500::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:placeholder-red-500:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:placeholder-red-500::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:placeholder-red-500::placeholder {
+    color: #f56565;
+  }
+
+  .sm\:placeholder-red-600::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:placeholder-red-600::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:placeholder-red-600:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:placeholder-red-600::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:placeholder-red-600::placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:placeholder-red-700::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:placeholder-red-700::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:placeholder-red-700:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:placeholder-red-700::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:placeholder-red-700::placeholder {
+    color: #c53030;
+  }
+
+  .sm\:placeholder-red-800::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:placeholder-red-800::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:placeholder-red-800:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:placeholder-red-800::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:placeholder-red-800::placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:placeholder-red-900::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:placeholder-red-900::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:placeholder-red-900:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:placeholder-red-900::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:placeholder-red-900::placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:placeholder-orange-100::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:placeholder-orange-100::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:placeholder-orange-100:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:placeholder-orange-100::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:placeholder-orange-100::placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:placeholder-orange-200::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:placeholder-orange-200::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:placeholder-orange-200:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:placeholder-orange-200::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:placeholder-orange-200::placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:placeholder-orange-300::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:placeholder-orange-300::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:placeholder-orange-300:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:placeholder-orange-300::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:placeholder-orange-300::placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:placeholder-orange-400::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:placeholder-orange-400::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:placeholder-orange-400:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:placeholder-orange-400::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:placeholder-orange-400::placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:placeholder-orange-500::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:placeholder-orange-500::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:placeholder-orange-500:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:placeholder-orange-500::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:placeholder-orange-500::placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:placeholder-orange-600::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:placeholder-orange-600::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:placeholder-orange-600:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:placeholder-orange-600::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:placeholder-orange-600::placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:placeholder-orange-700::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:placeholder-orange-700::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:placeholder-orange-700:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:placeholder-orange-700::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:placeholder-orange-700::placeholder {
+    color: #c05621;
+  }
+
+  .sm\:placeholder-orange-800::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:placeholder-orange-800::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:placeholder-orange-800:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:placeholder-orange-800::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:placeholder-orange-800::placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:placeholder-orange-900::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:placeholder-orange-900::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:placeholder-orange-900:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:placeholder-orange-900::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:placeholder-orange-900::placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:placeholder-yellow-100::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:placeholder-yellow-100::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:placeholder-yellow-100:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:placeholder-yellow-100::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:placeholder-yellow-100::placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:placeholder-yellow-200::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:placeholder-yellow-200::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:placeholder-yellow-200:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:placeholder-yellow-200::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:placeholder-yellow-200::placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:placeholder-yellow-300::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:placeholder-yellow-300::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:placeholder-yellow-300:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:placeholder-yellow-300::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:placeholder-yellow-300::placeholder {
+    color: #faf089;
+  }
+
+  .sm\:placeholder-yellow-400::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:placeholder-yellow-400::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:placeholder-yellow-400:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:placeholder-yellow-400::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:placeholder-yellow-400::placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:placeholder-yellow-500::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:placeholder-yellow-500::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:placeholder-yellow-500:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:placeholder-yellow-500::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:placeholder-yellow-500::placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:placeholder-yellow-600::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:placeholder-yellow-600::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:placeholder-yellow-600:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:placeholder-yellow-600::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:placeholder-yellow-600::placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:placeholder-yellow-700::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:placeholder-yellow-700::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:placeholder-yellow-700:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:placeholder-yellow-700::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:placeholder-yellow-700::placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:placeholder-yellow-800::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:placeholder-yellow-800::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:placeholder-yellow-800:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:placeholder-yellow-800::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:placeholder-yellow-800::placeholder {
+    color: #975a16;
+  }
+
+  .sm\:placeholder-yellow-900::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .sm\:placeholder-yellow-900::-moz-placeholder {
+    color: #744210;
+  }
+
+  .sm\:placeholder-yellow-900:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .sm\:placeholder-yellow-900::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .sm\:placeholder-yellow-900::placeholder {
+    color: #744210;
+  }
+
+  .sm\:placeholder-green-100::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:placeholder-green-100::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:placeholder-green-100:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:placeholder-green-100::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:placeholder-green-100::placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:placeholder-green-200::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:placeholder-green-200::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:placeholder-green-200:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:placeholder-green-200::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:placeholder-green-200::placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:placeholder-green-300::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:placeholder-green-300::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:placeholder-green-300:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:placeholder-green-300::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:placeholder-green-300::placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:placeholder-green-400::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:placeholder-green-400::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:placeholder-green-400:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:placeholder-green-400::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:placeholder-green-400::placeholder {
+    color: #68d391;
+  }
+
+  .sm\:placeholder-green-500::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:placeholder-green-500::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:placeholder-green-500:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:placeholder-green-500::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:placeholder-green-500::placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:placeholder-green-600::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:placeholder-green-600::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:placeholder-green-600:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:placeholder-green-600::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:placeholder-green-600::placeholder {
+    color: #38a169;
+  }
+
+  .sm\:placeholder-green-700::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:placeholder-green-700::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:placeholder-green-700:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:placeholder-green-700::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:placeholder-green-700::placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:placeholder-green-800::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .sm\:placeholder-green-800::-moz-placeholder {
+    color: #276749;
+  }
+
+  .sm\:placeholder-green-800:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .sm\:placeholder-green-800::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .sm\:placeholder-green-800::placeholder {
+    color: #276749;
+  }
+
+  .sm\:placeholder-green-900::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:placeholder-green-900::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:placeholder-green-900:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:placeholder-green-900::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:placeholder-green-900::placeholder {
+    color: #22543d;
+  }
+
+  .sm\:placeholder-teal-100::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:placeholder-teal-100::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:placeholder-teal-100:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:placeholder-teal-100::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:placeholder-teal-100::placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:placeholder-teal-200::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:placeholder-teal-200::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:placeholder-teal-200:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:placeholder-teal-200::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:placeholder-teal-200::placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:placeholder-teal-300::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:placeholder-teal-300::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:placeholder-teal-300:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:placeholder-teal-300::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:placeholder-teal-300::placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:placeholder-teal-400::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:placeholder-teal-400::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:placeholder-teal-400:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:placeholder-teal-400::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:placeholder-teal-400::placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:placeholder-teal-500::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:placeholder-teal-500::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:placeholder-teal-500:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:placeholder-teal-500::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:placeholder-teal-500::placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:placeholder-teal-600::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .sm\:placeholder-teal-600::-moz-placeholder {
+    color: #319795;
+  }
+
+  .sm\:placeholder-teal-600:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .sm\:placeholder-teal-600::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .sm\:placeholder-teal-600::placeholder {
+    color: #319795;
+  }
+
+  .sm\:placeholder-teal-700::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:placeholder-teal-700::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:placeholder-teal-700:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:placeholder-teal-700::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:placeholder-teal-700::placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:placeholder-teal-800::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:placeholder-teal-800::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:placeholder-teal-800:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:placeholder-teal-800::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:placeholder-teal-800::placeholder {
+    color: #285e61;
+  }
+
+  .sm\:placeholder-teal-900::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:placeholder-teal-900::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:placeholder-teal-900:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:placeholder-teal-900::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:placeholder-teal-900::placeholder {
+    color: #234e52;
+  }
+
+  .sm\:placeholder-blue-100::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:placeholder-blue-100::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:placeholder-blue-100:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:placeholder-blue-100::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:placeholder-blue-100::placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:placeholder-blue-200::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:placeholder-blue-200::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:placeholder-blue-200:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:placeholder-blue-200::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:placeholder-blue-200::placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:placeholder-blue-300::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:placeholder-blue-300::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:placeholder-blue-300:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:placeholder-blue-300::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:placeholder-blue-300::placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:placeholder-blue-400::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:placeholder-blue-400::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:placeholder-blue-400:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:placeholder-blue-400::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:placeholder-blue-400::placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:placeholder-blue-500::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:placeholder-blue-500::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:placeholder-blue-500:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:placeholder-blue-500::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:placeholder-blue-500::placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:placeholder-blue-600::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:placeholder-blue-600::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:placeholder-blue-600:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:placeholder-blue-600::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:placeholder-blue-600::placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:placeholder-blue-700::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:placeholder-blue-700::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:placeholder-blue-700:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:placeholder-blue-700::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:placeholder-blue-700::placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:placeholder-blue-800::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:placeholder-blue-800::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:placeholder-blue-800:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:placeholder-blue-800::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:placeholder-blue-800::placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:placeholder-blue-900::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:placeholder-blue-900::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:placeholder-blue-900:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:placeholder-blue-900::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:placeholder-blue-900::placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:placeholder-indigo-100::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:placeholder-indigo-100::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:placeholder-indigo-100:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:placeholder-indigo-100::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:placeholder-indigo-100::placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:placeholder-indigo-200::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:placeholder-indigo-200::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:placeholder-indigo-200:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:placeholder-indigo-200::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:placeholder-indigo-200::placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:placeholder-indigo-300::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:placeholder-indigo-300::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:placeholder-indigo-300:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:placeholder-indigo-300::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:placeholder-indigo-300::placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:placeholder-indigo-400::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:placeholder-indigo-400::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:placeholder-indigo-400:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:placeholder-indigo-400::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:placeholder-indigo-400::placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:placeholder-indigo-500::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:placeholder-indigo-500::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:placeholder-indigo-500:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:placeholder-indigo-500::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:placeholder-indigo-500::placeholder {
+    color: #667eea;
+  }
+
+  .sm\:placeholder-indigo-600::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:placeholder-indigo-600::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:placeholder-indigo-600:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:placeholder-indigo-600::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:placeholder-indigo-600::placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:placeholder-indigo-700::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:placeholder-indigo-700::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:placeholder-indigo-700:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:placeholder-indigo-700::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:placeholder-indigo-700::placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:placeholder-indigo-800::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .sm\:placeholder-indigo-800::-moz-placeholder {
+    color: #434190;
+  }
+
+  .sm\:placeholder-indigo-800:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .sm\:placeholder-indigo-800::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .sm\:placeholder-indigo-800::placeholder {
+    color: #434190;
+  }
+
+  .sm\:placeholder-indigo-900::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:placeholder-indigo-900::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:placeholder-indigo-900:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:placeholder-indigo-900::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:placeholder-indigo-900::placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:placeholder-purple-100::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:placeholder-purple-100::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:placeholder-purple-100:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:placeholder-purple-100::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:placeholder-purple-100::placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:placeholder-purple-200::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:placeholder-purple-200::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:placeholder-purple-200:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:placeholder-purple-200::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:placeholder-purple-200::placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:placeholder-purple-300::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:placeholder-purple-300::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:placeholder-purple-300:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:placeholder-purple-300::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:placeholder-purple-300::placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:placeholder-purple-400::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:placeholder-purple-400::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:placeholder-purple-400:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:placeholder-purple-400::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:placeholder-purple-400::placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:placeholder-purple-500::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:placeholder-purple-500::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:placeholder-purple-500:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:placeholder-purple-500::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:placeholder-purple-500::placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:placeholder-purple-600::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:placeholder-purple-600::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:placeholder-purple-600:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:placeholder-purple-600::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:placeholder-purple-600::placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:placeholder-purple-700::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:placeholder-purple-700::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:placeholder-purple-700:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:placeholder-purple-700::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:placeholder-purple-700::placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:placeholder-purple-800::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:placeholder-purple-800::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:placeholder-purple-800:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:placeholder-purple-800::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:placeholder-purple-800::placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:placeholder-purple-900::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:placeholder-purple-900::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:placeholder-purple-900:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:placeholder-purple-900::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:placeholder-purple-900::placeholder {
+    color: #44337a;
+  }
+
+  .sm\:placeholder-pink-100::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:placeholder-pink-100::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:placeholder-pink-100:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:placeholder-pink-100::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:placeholder-pink-100::placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:placeholder-pink-200::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:placeholder-pink-200::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:placeholder-pink-200:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:placeholder-pink-200::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:placeholder-pink-200::placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:placeholder-pink-300::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:placeholder-pink-300::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:placeholder-pink-300:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:placeholder-pink-300::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:placeholder-pink-300::placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:placeholder-pink-400::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:placeholder-pink-400::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:placeholder-pink-400:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:placeholder-pink-400::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:placeholder-pink-400::placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:placeholder-pink-500::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:placeholder-pink-500::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:placeholder-pink-500:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:placeholder-pink-500::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:placeholder-pink-500::placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:placeholder-pink-600::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:placeholder-pink-600::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:placeholder-pink-600:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:placeholder-pink-600::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:placeholder-pink-600::placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:placeholder-pink-700::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:placeholder-pink-700::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:placeholder-pink-700:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:placeholder-pink-700::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:placeholder-pink-700::placeholder {
+    color: #b83280;
+  }
+
+  .sm\:placeholder-pink-800::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:placeholder-pink-800::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:placeholder-pink-800:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:placeholder-pink-800::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:placeholder-pink-800::placeholder {
+    color: #97266d;
+  }
+
+  .sm\:placeholder-pink-900::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .sm\:placeholder-pink-900::-moz-placeholder {
+    color: #702459;
+  }
+
+  .sm\:placeholder-pink-900:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .sm\:placeholder-pink-900::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .sm\:placeholder-pink-900::placeholder {
+    color: #702459;
+  }
+
+  .sm\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .sm\:focus\:placeholder-transparent:focus::-moz-placeholder {
+    color: transparent;
+  }
+
+  .sm\:focus\:placeholder-transparent:focus:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .sm\:focus\:placeholder-transparent:focus::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .sm\:focus\:placeholder-transparent:focus::placeholder {
+    color: transparent;
+  }
+
+  .sm\:focus\:placeholder-black:focus::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .sm\:focus\:placeholder-black:focus::-moz-placeholder {
+    color: #000;
+  }
+
+  .sm\:focus\:placeholder-black:focus:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .sm\:focus\:placeholder-black:focus::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .sm\:focus\:placeholder-black:focus::placeholder {
+    color: #000;
+  }
+
+  .sm\:focus\:placeholder-white:focus::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .sm\:focus\:placeholder-white:focus::-moz-placeholder {
+    color: #fff;
+  }
+
+  .sm\:focus\:placeholder-white:focus:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .sm\:focus\:placeholder-white:focus::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .sm\:focus\:placeholder-white:focus::placeholder {
+    color: #fff;
+  }
+
+  .sm\:focus\:placeholder-gray-100:focus::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:focus\:placeholder-gray-100:focus::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:focus\:placeholder-gray-100:focus:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:focus\:placeholder-gray-100:focus::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:focus\:placeholder-gray-100:focus::placeholder {
+    color: #f7fafc;
+  }
+
+  .sm\:focus\:placeholder-gray-200:focus::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:focus\:placeholder-gray-200:focus::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:focus\:placeholder-gray-200:focus:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:focus\:placeholder-gray-200:focus::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:focus\:placeholder-gray-200:focus::placeholder {
+    color: #edf2f7;
+  }
+
+  .sm\:focus\:placeholder-gray-300:focus::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:focus\:placeholder-gray-300:focus::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:focus\:placeholder-gray-300:focus:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:focus\:placeholder-gray-300:focus::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:focus\:placeholder-gray-300:focus::placeholder {
+    color: #e2e8f0;
+  }
+
+  .sm\:focus\:placeholder-gray-400:focus::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:focus\:placeholder-gray-400:focus::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:focus\:placeholder-gray-400:focus:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:focus\:placeholder-gray-400:focus::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:focus\:placeholder-gray-400:focus::placeholder {
+    color: #cbd5e0;
+  }
+
+  .sm\:focus\:placeholder-gray-500:focus::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:focus\:placeholder-gray-500:focus::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:focus\:placeholder-gray-500:focus:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:focus\:placeholder-gray-500:focus::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:focus\:placeholder-gray-500:focus::placeholder {
+    color: #a0aec0;
+  }
+
+  .sm\:focus\:placeholder-gray-600:focus::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .sm\:focus\:placeholder-gray-600:focus::-moz-placeholder {
+    color: #718096;
+  }
+
+  .sm\:focus\:placeholder-gray-600:focus:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .sm\:focus\:placeholder-gray-600:focus::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .sm\:focus\:placeholder-gray-600:focus::placeholder {
+    color: #718096;
+  }
+
+  .sm\:focus\:placeholder-gray-700:focus::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:focus\:placeholder-gray-700:focus::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:focus\:placeholder-gray-700:focus:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:focus\:placeholder-gray-700:focus::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:focus\:placeholder-gray-700:focus::placeholder {
+    color: #4a5568;
+  }
+
+  .sm\:focus\:placeholder-gray-800:focus::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:focus\:placeholder-gray-800:focus::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:focus\:placeholder-gray-800:focus:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:focus\:placeholder-gray-800:focus::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:focus\:placeholder-gray-800:focus::placeholder {
+    color: #2d3748;
+  }
+
+  .sm\:focus\:placeholder-gray-900:focus::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:focus\:placeholder-gray-900:focus::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:focus\:placeholder-gray-900:focus:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:focus\:placeholder-gray-900:focus::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:focus\:placeholder-gray-900:focus::placeholder {
+    color: #1a202c;
+  }
+
+  .sm\:focus\:placeholder-red-100:focus::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:focus\:placeholder-red-100:focus::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:focus\:placeholder-red-100:focus:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:focus\:placeholder-red-100:focus::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:focus\:placeholder-red-100:focus::placeholder {
+    color: #fff5f5;
+  }
+
+  .sm\:focus\:placeholder-red-200:focus::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:focus\:placeholder-red-200:focus::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:focus\:placeholder-red-200:focus:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:focus\:placeholder-red-200:focus::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:focus\:placeholder-red-200:focus::placeholder {
+    color: #fed7d7;
+  }
+
+  .sm\:focus\:placeholder-red-300:focus::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:focus\:placeholder-red-300:focus::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:focus\:placeholder-red-300:focus:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:focus\:placeholder-red-300:focus::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:focus\:placeholder-red-300:focus::placeholder {
+    color: #feb2b2;
+  }
+
+  .sm\:focus\:placeholder-red-400:focus::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:focus\:placeholder-red-400:focus::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:focus\:placeholder-red-400:focus:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:focus\:placeholder-red-400:focus::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:focus\:placeholder-red-400:focus::placeholder {
+    color: #fc8181;
+  }
+
+  .sm\:focus\:placeholder-red-500:focus::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:focus\:placeholder-red-500:focus::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:focus\:placeholder-red-500:focus:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:focus\:placeholder-red-500:focus::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .sm\:focus\:placeholder-red-500:focus::placeholder {
+    color: #f56565;
+  }
+
+  .sm\:focus\:placeholder-red-600:focus::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:focus\:placeholder-red-600:focus::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:focus\:placeholder-red-600:focus:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:focus\:placeholder-red-600:focus::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:focus\:placeholder-red-600:focus::placeholder {
+    color: #e53e3e;
+  }
+
+  .sm\:focus\:placeholder-red-700:focus::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:focus\:placeholder-red-700:focus::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:focus\:placeholder-red-700:focus:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:focus\:placeholder-red-700:focus::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .sm\:focus\:placeholder-red-700:focus::placeholder {
+    color: #c53030;
+  }
+
+  .sm\:focus\:placeholder-red-800:focus::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:focus\:placeholder-red-800:focus::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:focus\:placeholder-red-800:focus:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:focus\:placeholder-red-800:focus::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:focus\:placeholder-red-800:focus::placeholder {
+    color: #9b2c2c;
+  }
+
+  .sm\:focus\:placeholder-red-900:focus::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:focus\:placeholder-red-900:focus::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:focus\:placeholder-red-900:focus:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:focus\:placeholder-red-900:focus::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:focus\:placeholder-red-900:focus::placeholder {
+    color: #742a2a;
+  }
+
+  .sm\:focus\:placeholder-orange-100:focus::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:focus\:placeholder-orange-100:focus::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:focus\:placeholder-orange-100:focus:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:focus\:placeholder-orange-100:focus::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:focus\:placeholder-orange-100:focus::placeholder {
+    color: #fffaf0;
+  }
+
+  .sm\:focus\:placeholder-orange-200:focus::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:focus\:placeholder-orange-200:focus::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:focus\:placeholder-orange-200:focus:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:focus\:placeholder-orange-200:focus::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:focus\:placeholder-orange-200:focus::placeholder {
+    color: #feebc8;
+  }
+
+  .sm\:focus\:placeholder-orange-300:focus::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:focus\:placeholder-orange-300:focus::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:focus\:placeholder-orange-300:focus:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:focus\:placeholder-orange-300:focus::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:focus\:placeholder-orange-300:focus::placeholder {
+    color: #fbd38d;
+  }
+
+  .sm\:focus\:placeholder-orange-400:focus::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:focus\:placeholder-orange-400:focus::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:focus\:placeholder-orange-400:focus:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:focus\:placeholder-orange-400:focus::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:focus\:placeholder-orange-400:focus::placeholder {
+    color: #f6ad55;
+  }
+
+  .sm\:focus\:placeholder-orange-500:focus::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:focus\:placeholder-orange-500:focus::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:focus\:placeholder-orange-500:focus:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:focus\:placeholder-orange-500:focus::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:focus\:placeholder-orange-500:focus::placeholder {
+    color: #ed8936;
+  }
+
+  .sm\:focus\:placeholder-orange-600:focus::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:focus\:placeholder-orange-600:focus::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:focus\:placeholder-orange-600:focus:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:focus\:placeholder-orange-600:focus::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:focus\:placeholder-orange-600:focus::placeholder {
+    color: #dd6b20;
+  }
+
+  .sm\:focus\:placeholder-orange-700:focus::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:focus\:placeholder-orange-700:focus::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:focus\:placeholder-orange-700:focus:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:focus\:placeholder-orange-700:focus::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .sm\:focus\:placeholder-orange-700:focus::placeholder {
+    color: #c05621;
+  }
+
+  .sm\:focus\:placeholder-orange-800:focus::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:focus\:placeholder-orange-800:focus::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:focus\:placeholder-orange-800:focus:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:focus\:placeholder-orange-800:focus::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:focus\:placeholder-orange-800:focus::placeholder {
+    color: #9c4221;
+  }
+
+  .sm\:focus\:placeholder-orange-900:focus::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:focus\:placeholder-orange-900:focus::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:focus\:placeholder-orange-900:focus:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:focus\:placeholder-orange-900:focus::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:focus\:placeholder-orange-900:focus::placeholder {
+    color: #7b341e;
+  }
+
+  .sm\:focus\:placeholder-yellow-100:focus::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:focus\:placeholder-yellow-100:focus::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:focus\:placeholder-yellow-100:focus:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:focus\:placeholder-yellow-100:focus::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:focus\:placeholder-yellow-100:focus::placeholder {
+    color: #fffff0;
+  }
+
+  .sm\:focus\:placeholder-yellow-200:focus::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:focus\:placeholder-yellow-200:focus::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:focus\:placeholder-yellow-200:focus:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:focus\:placeholder-yellow-200:focus::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:focus\:placeholder-yellow-200:focus::placeholder {
+    color: #fefcbf;
+  }
+
+  .sm\:focus\:placeholder-yellow-300:focus::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:focus\:placeholder-yellow-300:focus::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:focus\:placeholder-yellow-300:focus:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:focus\:placeholder-yellow-300:focus::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .sm\:focus\:placeholder-yellow-300:focus::placeholder {
+    color: #faf089;
+  }
+
+  .sm\:focus\:placeholder-yellow-400:focus::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:focus\:placeholder-yellow-400:focus::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:focus\:placeholder-yellow-400:focus:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:focus\:placeholder-yellow-400:focus::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:focus\:placeholder-yellow-400:focus::placeholder {
+    color: #f6e05e;
+  }
+
+  .sm\:focus\:placeholder-yellow-500:focus::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:focus\:placeholder-yellow-500:focus::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:focus\:placeholder-yellow-500:focus:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:focus\:placeholder-yellow-500:focus::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:focus\:placeholder-yellow-500:focus::placeholder {
+    color: #ecc94b;
+  }
+
+  .sm\:focus\:placeholder-yellow-600:focus::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:focus\:placeholder-yellow-600:focus::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:focus\:placeholder-yellow-600:focus:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:focus\:placeholder-yellow-600:focus::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:focus\:placeholder-yellow-600:focus::placeholder {
+    color: #d69e2e;
+  }
+
+  .sm\:focus\:placeholder-yellow-700:focus::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:focus\:placeholder-yellow-700:focus::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:focus\:placeholder-yellow-700:focus:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:focus\:placeholder-yellow-700:focus::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:focus\:placeholder-yellow-700:focus::placeholder {
+    color: #b7791f;
+  }
+
+  .sm\:focus\:placeholder-yellow-800:focus::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:focus\:placeholder-yellow-800:focus::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:focus\:placeholder-yellow-800:focus:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:focus\:placeholder-yellow-800:focus::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .sm\:focus\:placeholder-yellow-800:focus::placeholder {
+    color: #975a16;
+  }
+
+  .sm\:focus\:placeholder-yellow-900:focus::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .sm\:focus\:placeholder-yellow-900:focus::-moz-placeholder {
+    color: #744210;
+  }
+
+  .sm\:focus\:placeholder-yellow-900:focus:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .sm\:focus\:placeholder-yellow-900:focus::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .sm\:focus\:placeholder-yellow-900:focus::placeholder {
+    color: #744210;
+  }
+
+  .sm\:focus\:placeholder-green-100:focus::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:focus\:placeholder-green-100:focus::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:focus\:placeholder-green-100:focus:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:focus\:placeholder-green-100:focus::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:focus\:placeholder-green-100:focus::placeholder {
+    color: #f0fff4;
+  }
+
+  .sm\:focus\:placeholder-green-200:focus::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:focus\:placeholder-green-200:focus::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:focus\:placeholder-green-200:focus:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:focus\:placeholder-green-200:focus::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:focus\:placeholder-green-200:focus::placeholder {
+    color: #c6f6d5;
+  }
+
+  .sm\:focus\:placeholder-green-300:focus::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:focus\:placeholder-green-300:focus::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:focus\:placeholder-green-300:focus:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:focus\:placeholder-green-300:focus::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:focus\:placeholder-green-300:focus::placeholder {
+    color: #9ae6b4;
+  }
+
+  .sm\:focus\:placeholder-green-400:focus::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:focus\:placeholder-green-400:focus::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:focus\:placeholder-green-400:focus:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:focus\:placeholder-green-400:focus::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .sm\:focus\:placeholder-green-400:focus::placeholder {
+    color: #68d391;
+  }
+
+  .sm\:focus\:placeholder-green-500:focus::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:focus\:placeholder-green-500:focus::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:focus\:placeholder-green-500:focus:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:focus\:placeholder-green-500:focus::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:focus\:placeholder-green-500:focus::placeholder {
+    color: #48bb78;
+  }
+
+  .sm\:focus\:placeholder-green-600:focus::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:focus\:placeholder-green-600:focus::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:focus\:placeholder-green-600:focus:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:focus\:placeholder-green-600:focus::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .sm\:focus\:placeholder-green-600:focus::placeholder {
+    color: #38a169;
+  }
+
+  .sm\:focus\:placeholder-green-700:focus::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:focus\:placeholder-green-700:focus::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:focus\:placeholder-green-700:focus:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:focus\:placeholder-green-700:focus::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:focus\:placeholder-green-700:focus::placeholder {
+    color: #2f855a;
+  }
+
+  .sm\:focus\:placeholder-green-800:focus::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .sm\:focus\:placeholder-green-800:focus::-moz-placeholder {
+    color: #276749;
+  }
+
+  .sm\:focus\:placeholder-green-800:focus:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .sm\:focus\:placeholder-green-800:focus::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .sm\:focus\:placeholder-green-800:focus::placeholder {
+    color: #276749;
+  }
+
+  .sm\:focus\:placeholder-green-900:focus::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:focus\:placeholder-green-900:focus::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:focus\:placeholder-green-900:focus:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:focus\:placeholder-green-900:focus::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .sm\:focus\:placeholder-green-900:focus::placeholder {
+    color: #22543d;
+  }
+
+  .sm\:focus\:placeholder-teal-100:focus::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:focus\:placeholder-teal-100:focus::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:focus\:placeholder-teal-100:focus:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:focus\:placeholder-teal-100:focus::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:focus\:placeholder-teal-100:focus::placeholder {
+    color: #e6fffa;
+  }
+
+  .sm\:focus\:placeholder-teal-200:focus::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:focus\:placeholder-teal-200:focus::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:focus\:placeholder-teal-200:focus:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:focus\:placeholder-teal-200:focus::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:focus\:placeholder-teal-200:focus::placeholder {
+    color: #b2f5ea;
+  }
+
+  .sm\:focus\:placeholder-teal-300:focus::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:focus\:placeholder-teal-300:focus::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:focus\:placeholder-teal-300:focus:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:focus\:placeholder-teal-300:focus::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:focus\:placeholder-teal-300:focus::placeholder {
+    color: #81e6d9;
+  }
+
+  .sm\:focus\:placeholder-teal-400:focus::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:focus\:placeholder-teal-400:focus::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:focus\:placeholder-teal-400:focus:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:focus\:placeholder-teal-400:focus::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:focus\:placeholder-teal-400:focus::placeholder {
+    color: #4fd1c5;
+  }
+
+  .sm\:focus\:placeholder-teal-500:focus::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:focus\:placeholder-teal-500:focus::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:focus\:placeholder-teal-500:focus:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:focus\:placeholder-teal-500:focus::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:focus\:placeholder-teal-500:focus::placeholder {
+    color: #38b2ac;
+  }
+
+  .sm\:focus\:placeholder-teal-600:focus::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .sm\:focus\:placeholder-teal-600:focus::-moz-placeholder {
+    color: #319795;
+  }
+
+  .sm\:focus\:placeholder-teal-600:focus:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .sm\:focus\:placeholder-teal-600:focus::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .sm\:focus\:placeholder-teal-600:focus::placeholder {
+    color: #319795;
+  }
+
+  .sm\:focus\:placeholder-teal-700:focus::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:focus\:placeholder-teal-700:focus::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:focus\:placeholder-teal-700:focus:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:focus\:placeholder-teal-700:focus::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:focus\:placeholder-teal-700:focus::placeholder {
+    color: #2c7a7b;
+  }
+
+  .sm\:focus\:placeholder-teal-800:focus::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:focus\:placeholder-teal-800:focus::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:focus\:placeholder-teal-800:focus:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:focus\:placeholder-teal-800:focus::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .sm\:focus\:placeholder-teal-800:focus::placeholder {
+    color: #285e61;
+  }
+
+  .sm\:focus\:placeholder-teal-900:focus::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:focus\:placeholder-teal-900:focus::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:focus\:placeholder-teal-900:focus:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:focus\:placeholder-teal-900:focus::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .sm\:focus\:placeholder-teal-900:focus::placeholder {
+    color: #234e52;
+  }
+
+  .sm\:focus\:placeholder-blue-100:focus::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:focus\:placeholder-blue-100:focus::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:focus\:placeholder-blue-100:focus:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:focus\:placeholder-blue-100:focus::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:focus\:placeholder-blue-100:focus::placeholder {
+    color: #ebf8ff;
+  }
+
+  .sm\:focus\:placeholder-blue-200:focus::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:focus\:placeholder-blue-200:focus::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:focus\:placeholder-blue-200:focus:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:focus\:placeholder-blue-200:focus::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:focus\:placeholder-blue-200:focus::placeholder {
+    color: #bee3f8;
+  }
+
+  .sm\:focus\:placeholder-blue-300:focus::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:focus\:placeholder-blue-300:focus::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:focus\:placeholder-blue-300:focus:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:focus\:placeholder-blue-300:focus::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:focus\:placeholder-blue-300:focus::placeholder {
+    color: #90cdf4;
+  }
+
+  .sm\:focus\:placeholder-blue-400:focus::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:focus\:placeholder-blue-400:focus::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:focus\:placeholder-blue-400:focus:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:focus\:placeholder-blue-400:focus::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:focus\:placeholder-blue-400:focus::placeholder {
+    color: #63b3ed;
+  }
+
+  .sm\:focus\:placeholder-blue-500:focus::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:focus\:placeholder-blue-500:focus::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:focus\:placeholder-blue-500:focus:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:focus\:placeholder-blue-500:focus::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:focus\:placeholder-blue-500:focus::placeholder {
+    color: #4299e1;
+  }
+
+  .sm\:focus\:placeholder-blue-600:focus::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:focus\:placeholder-blue-600:focus::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:focus\:placeholder-blue-600:focus:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:focus\:placeholder-blue-600:focus::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:focus\:placeholder-blue-600:focus::placeholder {
+    color: #3182ce;
+  }
+
+  .sm\:focus\:placeholder-blue-700:focus::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:focus\:placeholder-blue-700:focus::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:focus\:placeholder-blue-700:focus:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:focus\:placeholder-blue-700:focus::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:focus\:placeholder-blue-700:focus::placeholder {
+    color: #2b6cb0;
+  }
+
+  .sm\:focus\:placeholder-blue-800:focus::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:focus\:placeholder-blue-800:focus::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:focus\:placeholder-blue-800:focus:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:focus\:placeholder-blue-800:focus::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:focus\:placeholder-blue-800:focus::placeholder {
+    color: #2c5282;
+  }
+
+  .sm\:focus\:placeholder-blue-900:focus::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:focus\:placeholder-blue-900:focus::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:focus\:placeholder-blue-900:focus:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:focus\:placeholder-blue-900:focus::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:focus\:placeholder-blue-900:focus::placeholder {
+    color: #2a4365;
+  }
+
+  .sm\:focus\:placeholder-indigo-100:focus::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:focus\:placeholder-indigo-100:focus::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:focus\:placeholder-indigo-100:focus:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:focus\:placeholder-indigo-100:focus::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:focus\:placeholder-indigo-100:focus::placeholder {
+    color: #ebf4ff;
+  }
+
+  .sm\:focus\:placeholder-indigo-200:focus::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:focus\:placeholder-indigo-200:focus::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:focus\:placeholder-indigo-200:focus:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:focus\:placeholder-indigo-200:focus::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:focus\:placeholder-indigo-200:focus::placeholder {
+    color: #c3dafe;
+  }
+
+  .sm\:focus\:placeholder-indigo-300:focus::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:focus\:placeholder-indigo-300:focus::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:focus\:placeholder-indigo-300:focus:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:focus\:placeholder-indigo-300:focus::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:focus\:placeholder-indigo-300:focus::placeholder {
+    color: #a3bffa;
+  }
+
+  .sm\:focus\:placeholder-indigo-400:focus::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:focus\:placeholder-indigo-400:focus::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:focus\:placeholder-indigo-400:focus:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:focus\:placeholder-indigo-400:focus::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:focus\:placeholder-indigo-400:focus::placeholder {
+    color: #7f9cf5;
+  }
+
+  .sm\:focus\:placeholder-indigo-500:focus::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:focus\:placeholder-indigo-500:focus::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:focus\:placeholder-indigo-500:focus:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:focus\:placeholder-indigo-500:focus::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .sm\:focus\:placeholder-indigo-500:focus::placeholder {
+    color: #667eea;
+  }
+
+  .sm\:focus\:placeholder-indigo-600:focus::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:focus\:placeholder-indigo-600:focus::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:focus\:placeholder-indigo-600:focus:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:focus\:placeholder-indigo-600:focus::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:focus\:placeholder-indigo-600:focus::placeholder {
+    color: #5a67d8;
+  }
+
+  .sm\:focus\:placeholder-indigo-700:focus::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:focus\:placeholder-indigo-700:focus::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:focus\:placeholder-indigo-700:focus:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:focus\:placeholder-indigo-700:focus::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:focus\:placeholder-indigo-700:focus::placeholder {
+    color: #4c51bf;
+  }
+
+  .sm\:focus\:placeholder-indigo-800:focus::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .sm\:focus\:placeholder-indigo-800:focus::-moz-placeholder {
+    color: #434190;
+  }
+
+  .sm\:focus\:placeholder-indigo-800:focus:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .sm\:focus\:placeholder-indigo-800:focus::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .sm\:focus\:placeholder-indigo-800:focus::placeholder {
+    color: #434190;
+  }
+
+  .sm\:focus\:placeholder-indigo-900:focus::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:focus\:placeholder-indigo-900:focus::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:focus\:placeholder-indigo-900:focus:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:focus\:placeholder-indigo-900:focus::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:focus\:placeholder-indigo-900:focus::placeholder {
+    color: #3c366b;
+  }
+
+  .sm\:focus\:placeholder-purple-100:focus::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:focus\:placeholder-purple-100:focus::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:focus\:placeholder-purple-100:focus:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:focus\:placeholder-purple-100:focus::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:focus\:placeholder-purple-100:focus::placeholder {
+    color: #faf5ff;
+  }
+
+  .sm\:focus\:placeholder-purple-200:focus::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:focus\:placeholder-purple-200:focus::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:focus\:placeholder-purple-200:focus:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:focus\:placeholder-purple-200:focus::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:focus\:placeholder-purple-200:focus::placeholder {
+    color: #e9d8fd;
+  }
+
+  .sm\:focus\:placeholder-purple-300:focus::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:focus\:placeholder-purple-300:focus::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:focus\:placeholder-purple-300:focus:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:focus\:placeholder-purple-300:focus::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:focus\:placeholder-purple-300:focus::placeholder {
+    color: #d6bcfa;
+  }
+
+  .sm\:focus\:placeholder-purple-400:focus::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:focus\:placeholder-purple-400:focus::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:focus\:placeholder-purple-400:focus:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:focus\:placeholder-purple-400:focus::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:focus\:placeholder-purple-400:focus::placeholder {
+    color: #b794f4;
+  }
+
+  .sm\:focus\:placeholder-purple-500:focus::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:focus\:placeholder-purple-500:focus::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:focus\:placeholder-purple-500:focus:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:focus\:placeholder-purple-500:focus::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:focus\:placeholder-purple-500:focus::placeholder {
+    color: #9f7aea;
+  }
+
+  .sm\:focus\:placeholder-purple-600:focus::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:focus\:placeholder-purple-600:focus::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:focus\:placeholder-purple-600:focus:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:focus\:placeholder-purple-600:focus::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:focus\:placeholder-purple-600:focus::placeholder {
+    color: #805ad5;
+  }
+
+  .sm\:focus\:placeholder-purple-700:focus::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:focus\:placeholder-purple-700:focus::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:focus\:placeholder-purple-700:focus:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:focus\:placeholder-purple-700:focus::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:focus\:placeholder-purple-700:focus::placeholder {
+    color: #6b46c1;
+  }
+
+  .sm\:focus\:placeholder-purple-800:focus::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:focus\:placeholder-purple-800:focus::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:focus\:placeholder-purple-800:focus:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:focus\:placeholder-purple-800:focus::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:focus\:placeholder-purple-800:focus::placeholder {
+    color: #553c9a;
+  }
+
+  .sm\:focus\:placeholder-purple-900:focus::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:focus\:placeholder-purple-900:focus::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:focus\:placeholder-purple-900:focus:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:focus\:placeholder-purple-900:focus::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .sm\:focus\:placeholder-purple-900:focus::placeholder {
+    color: #44337a;
+  }
+
+  .sm\:focus\:placeholder-pink-100:focus::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:focus\:placeholder-pink-100:focus::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:focus\:placeholder-pink-100:focus:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:focus\:placeholder-pink-100:focus::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:focus\:placeholder-pink-100:focus::placeholder {
+    color: #fff5f7;
+  }
+
+  .sm\:focus\:placeholder-pink-200:focus::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:focus\:placeholder-pink-200:focus::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:focus\:placeholder-pink-200:focus:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:focus\:placeholder-pink-200:focus::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:focus\:placeholder-pink-200:focus::placeholder {
+    color: #fed7e2;
+  }
+
+  .sm\:focus\:placeholder-pink-300:focus::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:focus\:placeholder-pink-300:focus::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:focus\:placeholder-pink-300:focus:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:focus\:placeholder-pink-300:focus::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:focus\:placeholder-pink-300:focus::placeholder {
+    color: #fbb6ce;
+  }
+
+  .sm\:focus\:placeholder-pink-400:focus::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:focus\:placeholder-pink-400:focus::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:focus\:placeholder-pink-400:focus:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:focus\:placeholder-pink-400:focus::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:focus\:placeholder-pink-400:focus::placeholder {
+    color: #f687b3;
+  }
+
+  .sm\:focus\:placeholder-pink-500:focus::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:focus\:placeholder-pink-500:focus::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:focus\:placeholder-pink-500:focus:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:focus\:placeholder-pink-500:focus::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:focus\:placeholder-pink-500:focus::placeholder {
+    color: #ed64a6;
+  }
+
+  .sm\:focus\:placeholder-pink-600:focus::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:focus\:placeholder-pink-600:focus::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:focus\:placeholder-pink-600:focus:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:focus\:placeholder-pink-600:focus::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:focus\:placeholder-pink-600:focus::placeholder {
+    color: #d53f8c;
+  }
+
+  .sm\:focus\:placeholder-pink-700:focus::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:focus\:placeholder-pink-700:focus::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:focus\:placeholder-pink-700:focus:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:focus\:placeholder-pink-700:focus::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .sm\:focus\:placeholder-pink-700:focus::placeholder {
+    color: #b83280;
+  }
+
+  .sm\:focus\:placeholder-pink-800:focus::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:focus\:placeholder-pink-800:focus::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:focus\:placeholder-pink-800:focus:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:focus\:placeholder-pink-800:focus::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .sm\:focus\:placeholder-pink-800:focus::placeholder {
+    color: #97266d;
+  }
+
+  .sm\:focus\:placeholder-pink-900:focus::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .sm\:focus\:placeholder-pink-900:focus::-moz-placeholder {
+    color: #702459;
+  }
+
+  .sm\:focus\:placeholder-pink-900:focus:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .sm\:focus\:placeholder-pink-900:focus::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .sm\:focus\:placeholder-pink-900:focus::placeholder {
+    color: #702459;
+  }
+
+  .sm\:pointer-events-none {
+    pointer-events: none;
+  }
+
+  .sm\:pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  .sm\:static {
+    position: static;
+  }
+
+  .sm\:fixed {
+    position: fixed;
+  }
+
+  .sm\:absolute {
+    position: absolute;
+  }
+
+  .sm\:relative {
+    position: relative;
+  }
+
+  .sm\:sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  .sm\:inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .sm\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .sm\:inset-y-0 {
+    top: 0;
+    bottom: 0;
+  }
+
+  .sm\:inset-x-0 {
+    right: 0;
+    left: 0;
+  }
+
+  .sm\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .sm\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
+  .sm\:top-0 {
+    top: 0;
+  }
+
+  .sm\:right-0 {
+    right: 0;
+  }
+
+  .sm\:bottom-0 {
+    bottom: 0;
+  }
+
+  .sm\:left-0 {
+    left: 0;
+  }
+
+  .sm\:top-auto {
+    top: auto;
+  }
+
+  .sm\:right-auto {
+    right: auto;
+  }
+
+  .sm\:bottom-auto {
+    bottom: auto;
+  }
+
+  .sm\:left-auto {
+    left: auto;
+  }
+
+  .sm\:resize-none {
+    resize: none;
+  }
+
+  .sm\:resize-y {
+    resize: vertical;
+  }
+
+  .sm\:resize-x {
+    resize: horizontal;
+  }
+
+  .sm\:resize {
+    resize: both;
+  }
+
+  .sm\:shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:shadow-md {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:shadow-lg {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .sm\:shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .sm\:shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .sm\:shadow-inner {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:shadow-outline {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .sm\:shadow-none {
+    box-shadow: none;
+  }
+
+  .sm\:hover\:shadow:hover {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:hover\:shadow-lg:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .sm\:hover\:shadow-xl:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .sm\:hover\:shadow-2xl:hover {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .sm\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:hover\:shadow-outline:hover {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .sm\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
+  .sm\:focus\:shadow:focus {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:focus\:shadow-lg:focus {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .sm\:focus\:shadow-xl:focus {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .sm\:focus\:shadow-2xl:focus {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .sm\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .sm\:focus\:shadow-outline:focus {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .sm\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
+  .sm\:fill-current {
+    fill: currentColor;
+  }
+
+  .sm\:stroke-current {
+    stroke: currentColor;
+  }
+
+  .sm\:table-auto {
+    table-layout: auto;
+  }
+
+  .sm\:table-fixed {
+    table-layout: fixed;
+  }
+
+  .sm\:text-left {
+    text-align: left;
+  }
+
+  .sm\:text-center {
+    text-align: center;
+  }
+
+  .sm\:text-right {
+    text-align: right;
+  }
+
+  .sm\:text-justify {
+    text-align: justify;
+  }
+
+  .sm\:text-transparent {
+    color: transparent;
+  }
+
+  .sm\:text-black {
+    color: #000;
+  }
+
+  .sm\:text-white {
+    color: #fff;
+  }
+
+  .sm\:text-gray-100 {
+    color: #f7fafc;
+  }
+
+  .sm\:text-gray-200 {
+    color: #edf2f7;
+  }
+
+  .sm\:text-gray-300 {
+    color: #e2e8f0;
+  }
+
+  .sm\:text-gray-400 {
+    color: #cbd5e0;
+  }
+
+  .sm\:text-gray-500 {
+    color: #a0aec0;
+  }
+
+  .sm\:text-gray-600 {
+    color: #718096;
+  }
+
+  .sm\:text-gray-700 {
+    color: #4a5568;
+  }
+
+  .sm\:text-gray-800 {
+    color: #2d3748;
+  }
+
+  .sm\:text-gray-900 {
+    color: #1a202c;
+  }
+
+  .sm\:text-red-100 {
+    color: #fff5f5;
+  }
+
+  .sm\:text-red-200 {
+    color: #fed7d7;
+  }
+
+  .sm\:text-red-300 {
+    color: #feb2b2;
+  }
+
+  .sm\:text-red-400 {
+    color: #fc8181;
+  }
+
+  .sm\:text-red-500 {
+    color: #f56565;
+  }
+
+  .sm\:text-red-600 {
+    color: #e53e3e;
+  }
+
+  .sm\:text-red-700 {
+    color: #c53030;
+  }
+
+  .sm\:text-red-800 {
+    color: #9b2c2c;
+  }
+
+  .sm\:text-red-900 {
+    color: #742a2a;
+  }
+
+  .sm\:text-orange-100 {
+    color: #fffaf0;
+  }
+
+  .sm\:text-orange-200 {
+    color: #feebc8;
+  }
+
+  .sm\:text-orange-300 {
+    color: #fbd38d;
+  }
+
+  .sm\:text-orange-400 {
+    color: #f6ad55;
+  }
+
+  .sm\:text-orange-500 {
+    color: #ed8936;
+  }
+
+  .sm\:text-orange-600 {
+    color: #dd6b20;
+  }
+
+  .sm\:text-orange-700 {
+    color: #c05621;
+  }
+
+  .sm\:text-orange-800 {
+    color: #9c4221;
+  }
+
+  .sm\:text-orange-900 {
+    color: #7b341e;
+  }
+
+  .sm\:text-yellow-100 {
+    color: #fffff0;
+  }
+
+  .sm\:text-yellow-200 {
+    color: #fefcbf;
+  }
+
+  .sm\:text-yellow-300 {
+    color: #faf089;
+  }
+
+  .sm\:text-yellow-400 {
+    color: #f6e05e;
+  }
+
+  .sm\:text-yellow-500 {
+    color: #ecc94b;
+  }
+
+  .sm\:text-yellow-600 {
+    color: #d69e2e;
+  }
+
+  .sm\:text-yellow-700 {
+    color: #b7791f;
+  }
+
+  .sm\:text-yellow-800 {
+    color: #975a16;
+  }
+
+  .sm\:text-yellow-900 {
+    color: #744210;
+  }
+
+  .sm\:text-green-100 {
+    color: #f0fff4;
+  }
+
+  .sm\:text-green-200 {
+    color: #c6f6d5;
+  }
+
+  .sm\:text-green-300 {
+    color: #9ae6b4;
+  }
+
+  .sm\:text-green-400 {
+    color: #68d391;
+  }
+
+  .sm\:text-green-500 {
+    color: #48bb78;
+  }
+
+  .sm\:text-green-600 {
+    color: #38a169;
+  }
+
+  .sm\:text-green-700 {
+    color: #2f855a;
+  }
+
+  .sm\:text-green-800 {
+    color: #276749;
+  }
+
+  .sm\:text-green-900 {
+    color: #22543d;
+  }
+
+  .sm\:text-teal-100 {
+    color: #e6fffa;
+  }
+
+  .sm\:text-teal-200 {
+    color: #b2f5ea;
+  }
+
+  .sm\:text-teal-300 {
+    color: #81e6d9;
+  }
+
+  .sm\:text-teal-400 {
+    color: #4fd1c5;
+  }
+
+  .sm\:text-teal-500 {
+    color: #38b2ac;
+  }
+
+  .sm\:text-teal-600 {
+    color: #319795;
+  }
+
+  .sm\:text-teal-700 {
+    color: #2c7a7b;
+  }
+
+  .sm\:text-teal-800 {
+    color: #285e61;
+  }
+
+  .sm\:text-teal-900 {
+    color: #234e52;
+  }
+
+  .sm\:text-blue-100 {
+    color: #ebf8ff;
+  }
+
+  .sm\:text-blue-200 {
+    color: #bee3f8;
+  }
+
+  .sm\:text-blue-300 {
+    color: #90cdf4;
+  }
+
+  .sm\:text-blue-400 {
+    color: #63b3ed;
+  }
+
+  .sm\:text-blue-500 {
+    color: #4299e1;
+  }
+
+  .sm\:text-blue-600 {
+    color: #3182ce;
+  }
+
+  .sm\:text-blue-700 {
+    color: #2b6cb0;
+  }
+
+  .sm\:text-blue-800 {
+    color: #2c5282;
+  }
+
+  .sm\:text-blue-900 {
+    color: #2a4365;
+  }
+
+  .sm\:text-indigo-100 {
+    color: #ebf4ff;
+  }
+
+  .sm\:text-indigo-200 {
+    color: #c3dafe;
+  }
+
+  .sm\:text-indigo-300 {
+    color: #a3bffa;
+  }
+
+  .sm\:text-indigo-400 {
+    color: #7f9cf5;
+  }
+
+  .sm\:text-indigo-500 {
+    color: #667eea;
+  }
+
+  .sm\:text-indigo-600 {
+    color: #5a67d8;
+  }
+
+  .sm\:text-indigo-700 {
+    color: #4c51bf;
+  }
+
+  .sm\:text-indigo-800 {
+    color: #434190;
+  }
+
+  .sm\:text-indigo-900 {
+    color: #3c366b;
+  }
+
+  .sm\:text-purple-100 {
+    color: #faf5ff;
+  }
+
+  .sm\:text-purple-200 {
+    color: #e9d8fd;
+  }
+
+  .sm\:text-purple-300 {
+    color: #d6bcfa;
+  }
+
+  .sm\:text-purple-400 {
+    color: #b794f4;
+  }
+
+  .sm\:text-purple-500 {
+    color: #9f7aea;
+  }
+
+  .sm\:text-purple-600 {
+    color: #805ad5;
+  }
+
+  .sm\:text-purple-700 {
+    color: #6b46c1;
+  }
+
+  .sm\:text-purple-800 {
+    color: #553c9a;
+  }
+
+  .sm\:text-purple-900 {
+    color: #44337a;
+  }
+
+  .sm\:text-pink-100 {
+    color: #fff5f7;
+  }
+
+  .sm\:text-pink-200 {
+    color: #fed7e2;
+  }
+
+  .sm\:text-pink-300 {
+    color: #fbb6ce;
+  }
+
+  .sm\:text-pink-400 {
+    color: #f687b3;
+  }
+
+  .sm\:text-pink-500 {
+    color: #ed64a6;
+  }
+
+  .sm\:text-pink-600 {
+    color: #d53f8c;
+  }
+
+  .sm\:text-pink-700 {
+    color: #b83280;
+  }
+
+  .sm\:text-pink-800 {
+    color: #97266d;
+  }
+
+  .sm\:text-pink-900 {
+    color: #702459;
+  }
+
+  .sm\:hover\:text-transparent:hover {
+    color: transparent;
+  }
+
+  .sm\:hover\:text-black:hover {
+    color: #000;
+  }
+
+  .sm\:hover\:text-white:hover {
+    color: #fff;
+  }
+
+  .sm\:hover\:text-gray-100:hover {
+    color: #f7fafc;
+  }
+
+  .sm\:hover\:text-gray-200:hover {
+    color: #edf2f7;
+  }
+
+  .sm\:hover\:text-gray-300:hover {
+    color: #e2e8f0;
+  }
+
+  .sm\:hover\:text-gray-400:hover {
+    color: #cbd5e0;
+  }
+
+  .sm\:hover\:text-gray-500:hover {
+    color: #a0aec0;
+  }
+
+  .sm\:hover\:text-gray-600:hover {
+    color: #718096;
+  }
+
+  .sm\:hover\:text-gray-700:hover {
+    color: #4a5568;
+  }
+
+  .sm\:hover\:text-gray-800:hover {
+    color: #2d3748;
+  }
+
+  .sm\:hover\:text-gray-900:hover {
+    color: #1a202c;
+  }
+
+  .sm\:hover\:text-red-100:hover {
+    color: #fff5f5;
+  }
+
+  .sm\:hover\:text-red-200:hover {
+    color: #fed7d7;
+  }
+
+  .sm\:hover\:text-red-300:hover {
+    color: #feb2b2;
+  }
+
+  .sm\:hover\:text-red-400:hover {
+    color: #fc8181;
+  }
+
+  .sm\:hover\:text-red-500:hover {
+    color: #f56565;
+  }
+
+  .sm\:hover\:text-red-600:hover {
+    color: #e53e3e;
+  }
+
+  .sm\:hover\:text-red-700:hover {
+    color: #c53030;
+  }
+
+  .sm\:hover\:text-red-800:hover {
+    color: #9b2c2c;
+  }
+
+  .sm\:hover\:text-red-900:hover {
+    color: #742a2a;
+  }
+
+  .sm\:hover\:text-orange-100:hover {
+    color: #fffaf0;
+  }
+
+  .sm\:hover\:text-orange-200:hover {
+    color: #feebc8;
+  }
+
+  .sm\:hover\:text-orange-300:hover {
+    color: #fbd38d;
+  }
+
+  .sm\:hover\:text-orange-400:hover {
+    color: #f6ad55;
+  }
+
+  .sm\:hover\:text-orange-500:hover {
+    color: #ed8936;
+  }
+
+  .sm\:hover\:text-orange-600:hover {
+    color: #dd6b20;
+  }
+
+  .sm\:hover\:text-orange-700:hover {
+    color: #c05621;
+  }
+
+  .sm\:hover\:text-orange-800:hover {
+    color: #9c4221;
+  }
+
+  .sm\:hover\:text-orange-900:hover {
+    color: #7b341e;
+  }
+
+  .sm\:hover\:text-yellow-100:hover {
+    color: #fffff0;
+  }
+
+  .sm\:hover\:text-yellow-200:hover {
+    color: #fefcbf;
+  }
+
+  .sm\:hover\:text-yellow-300:hover {
+    color: #faf089;
+  }
+
+  .sm\:hover\:text-yellow-400:hover {
+    color: #f6e05e;
+  }
+
+  .sm\:hover\:text-yellow-500:hover {
+    color: #ecc94b;
+  }
+
+  .sm\:hover\:text-yellow-600:hover {
+    color: #d69e2e;
+  }
+
+  .sm\:hover\:text-yellow-700:hover {
+    color: #b7791f;
+  }
+
+  .sm\:hover\:text-yellow-800:hover {
+    color: #975a16;
+  }
+
+  .sm\:hover\:text-yellow-900:hover {
+    color: #744210;
+  }
+
+  .sm\:hover\:text-green-100:hover {
+    color: #f0fff4;
+  }
+
+  .sm\:hover\:text-green-200:hover {
+    color: #c6f6d5;
+  }
+
+  .sm\:hover\:text-green-300:hover {
+    color: #9ae6b4;
+  }
+
+  .sm\:hover\:text-green-400:hover {
+    color: #68d391;
+  }
+
+  .sm\:hover\:text-green-500:hover {
+    color: #48bb78;
+  }
+
+  .sm\:hover\:text-green-600:hover {
+    color: #38a169;
+  }
+
+  .sm\:hover\:text-green-700:hover {
+    color: #2f855a;
+  }
+
+  .sm\:hover\:text-green-800:hover {
+    color: #276749;
+  }
+
+  .sm\:hover\:text-green-900:hover {
+    color: #22543d;
+  }
+
+  .sm\:hover\:text-teal-100:hover {
+    color: #e6fffa;
+  }
+
+  .sm\:hover\:text-teal-200:hover {
+    color: #b2f5ea;
+  }
+
+  .sm\:hover\:text-teal-300:hover {
+    color: #81e6d9;
+  }
+
+  .sm\:hover\:text-teal-400:hover {
+    color: #4fd1c5;
+  }
+
+  .sm\:hover\:text-teal-500:hover {
+    color: #38b2ac;
+  }
+
+  .sm\:hover\:text-teal-600:hover {
+    color: #319795;
+  }
+
+  .sm\:hover\:text-teal-700:hover {
+    color: #2c7a7b;
+  }
+
+  .sm\:hover\:text-teal-800:hover {
+    color: #285e61;
+  }
+
+  .sm\:hover\:text-teal-900:hover {
+    color: #234e52;
+  }
+
+  .sm\:hover\:text-blue-100:hover {
+    color: #ebf8ff;
+  }
+
+  .sm\:hover\:text-blue-200:hover {
+    color: #bee3f8;
+  }
+
+  .sm\:hover\:text-blue-300:hover {
+    color: #90cdf4;
+  }
+
+  .sm\:hover\:text-blue-400:hover {
+    color: #63b3ed;
+  }
+
+  .sm\:hover\:text-blue-500:hover {
+    color: #4299e1;
+  }
+
+  .sm\:hover\:text-blue-600:hover {
+    color: #3182ce;
+  }
+
+  .sm\:hover\:text-blue-700:hover {
+    color: #2b6cb0;
+  }
+
+  .sm\:hover\:text-blue-800:hover {
+    color: #2c5282;
+  }
+
+  .sm\:hover\:text-blue-900:hover {
+    color: #2a4365;
+  }
+
+  .sm\:hover\:text-indigo-100:hover {
+    color: #ebf4ff;
+  }
+
+  .sm\:hover\:text-indigo-200:hover {
+    color: #c3dafe;
+  }
+
+  .sm\:hover\:text-indigo-300:hover {
+    color: #a3bffa;
+  }
+
+  .sm\:hover\:text-indigo-400:hover {
+    color: #7f9cf5;
+  }
+
+  .sm\:hover\:text-indigo-500:hover {
+    color: #667eea;
+  }
+
+  .sm\:hover\:text-indigo-600:hover {
+    color: #5a67d8;
+  }
+
+  .sm\:hover\:text-indigo-700:hover {
+    color: #4c51bf;
+  }
+
+  .sm\:hover\:text-indigo-800:hover {
+    color: #434190;
+  }
+
+  .sm\:hover\:text-indigo-900:hover {
+    color: #3c366b;
+  }
+
+  .sm\:hover\:text-purple-100:hover {
+    color: #faf5ff;
+  }
+
+  .sm\:hover\:text-purple-200:hover {
+    color: #e9d8fd;
+  }
+
+  .sm\:hover\:text-purple-300:hover {
+    color: #d6bcfa;
+  }
+
+  .sm\:hover\:text-purple-400:hover {
+    color: #b794f4;
+  }
+
+  .sm\:hover\:text-purple-500:hover {
+    color: #9f7aea;
+  }
+
+  .sm\:hover\:text-purple-600:hover {
+    color: #805ad5;
+  }
+
+  .sm\:hover\:text-purple-700:hover {
+    color: #6b46c1;
+  }
+
+  .sm\:hover\:text-purple-800:hover {
+    color: #553c9a;
+  }
+
+  .sm\:hover\:text-purple-900:hover {
+    color: #44337a;
+  }
+
+  .sm\:hover\:text-pink-100:hover {
+    color: #fff5f7;
+  }
+
+  .sm\:hover\:text-pink-200:hover {
+    color: #fed7e2;
+  }
+
+  .sm\:hover\:text-pink-300:hover {
+    color: #fbb6ce;
+  }
+
+  .sm\:hover\:text-pink-400:hover {
+    color: #f687b3;
+  }
+
+  .sm\:hover\:text-pink-500:hover {
+    color: #ed64a6;
+  }
+
+  .sm\:hover\:text-pink-600:hover {
+    color: #d53f8c;
+  }
+
+  .sm\:hover\:text-pink-700:hover {
+    color: #b83280;
+  }
+
+  .sm\:hover\:text-pink-800:hover {
+    color: #97266d;
+  }
+
+  .sm\:hover\:text-pink-900:hover {
+    color: #702459;
+  }
+
+  .sm\:focus\:text-transparent:focus {
+    color: transparent;
+  }
+
+  .sm\:focus\:text-black:focus {
+    color: #000;
+  }
+
+  .sm\:focus\:text-white:focus {
+    color: #fff;
+  }
+
+  .sm\:focus\:text-gray-100:focus {
+    color: #f7fafc;
+  }
+
+  .sm\:focus\:text-gray-200:focus {
+    color: #edf2f7;
+  }
+
+  .sm\:focus\:text-gray-300:focus {
+    color: #e2e8f0;
+  }
+
+  .sm\:focus\:text-gray-400:focus {
+    color: #cbd5e0;
+  }
+
+  .sm\:focus\:text-gray-500:focus {
+    color: #a0aec0;
+  }
+
+  .sm\:focus\:text-gray-600:focus {
+    color: #718096;
+  }
+
+  .sm\:focus\:text-gray-700:focus {
+    color: #4a5568;
+  }
+
+  .sm\:focus\:text-gray-800:focus {
+    color: #2d3748;
+  }
+
+  .sm\:focus\:text-gray-900:focus {
+    color: #1a202c;
+  }
+
+  .sm\:focus\:text-red-100:focus {
+    color: #fff5f5;
+  }
+
+  .sm\:focus\:text-red-200:focus {
+    color: #fed7d7;
+  }
+
+  .sm\:focus\:text-red-300:focus {
+    color: #feb2b2;
+  }
+
+  .sm\:focus\:text-red-400:focus {
+    color: #fc8181;
+  }
+
+  .sm\:focus\:text-red-500:focus {
+    color: #f56565;
+  }
+
+  .sm\:focus\:text-red-600:focus {
+    color: #e53e3e;
+  }
+
+  .sm\:focus\:text-red-700:focus {
+    color: #c53030;
+  }
+
+  .sm\:focus\:text-red-800:focus {
+    color: #9b2c2c;
+  }
+
+  .sm\:focus\:text-red-900:focus {
+    color: #742a2a;
+  }
+
+  .sm\:focus\:text-orange-100:focus {
+    color: #fffaf0;
+  }
+
+  .sm\:focus\:text-orange-200:focus {
+    color: #feebc8;
+  }
+
+  .sm\:focus\:text-orange-300:focus {
+    color: #fbd38d;
+  }
+
+  .sm\:focus\:text-orange-400:focus {
+    color: #f6ad55;
+  }
+
+  .sm\:focus\:text-orange-500:focus {
+    color: #ed8936;
+  }
+
+  .sm\:focus\:text-orange-600:focus {
+    color: #dd6b20;
+  }
+
+  .sm\:focus\:text-orange-700:focus {
+    color: #c05621;
+  }
+
+  .sm\:focus\:text-orange-800:focus {
+    color: #9c4221;
+  }
+
+  .sm\:focus\:text-orange-900:focus {
+    color: #7b341e;
+  }
+
+  .sm\:focus\:text-yellow-100:focus {
+    color: #fffff0;
+  }
+
+  .sm\:focus\:text-yellow-200:focus {
+    color: #fefcbf;
+  }
+
+  .sm\:focus\:text-yellow-300:focus {
+    color: #faf089;
+  }
+
+  .sm\:focus\:text-yellow-400:focus {
+    color: #f6e05e;
+  }
+
+  .sm\:focus\:text-yellow-500:focus {
+    color: #ecc94b;
+  }
+
+  .sm\:focus\:text-yellow-600:focus {
+    color: #d69e2e;
+  }
+
+  .sm\:focus\:text-yellow-700:focus {
+    color: #b7791f;
+  }
+
+  .sm\:focus\:text-yellow-800:focus {
+    color: #975a16;
+  }
+
+  .sm\:focus\:text-yellow-900:focus {
+    color: #744210;
+  }
+
+  .sm\:focus\:text-green-100:focus {
+    color: #f0fff4;
+  }
+
+  .sm\:focus\:text-green-200:focus {
+    color: #c6f6d5;
+  }
+
+  .sm\:focus\:text-green-300:focus {
+    color: #9ae6b4;
+  }
+
+  .sm\:focus\:text-green-400:focus {
+    color: #68d391;
+  }
+
+  .sm\:focus\:text-green-500:focus {
+    color: #48bb78;
+  }
+
+  .sm\:focus\:text-green-600:focus {
+    color: #38a169;
+  }
+
+  .sm\:focus\:text-green-700:focus {
+    color: #2f855a;
+  }
+
+  .sm\:focus\:text-green-800:focus {
+    color: #276749;
+  }
+
+  .sm\:focus\:text-green-900:focus {
+    color: #22543d;
+  }
+
+  .sm\:focus\:text-teal-100:focus {
+    color: #e6fffa;
+  }
+
+  .sm\:focus\:text-teal-200:focus {
+    color: #b2f5ea;
+  }
+
+  .sm\:focus\:text-teal-300:focus {
+    color: #81e6d9;
+  }
+
+  .sm\:focus\:text-teal-400:focus {
+    color: #4fd1c5;
+  }
+
+  .sm\:focus\:text-teal-500:focus {
+    color: #38b2ac;
+  }
+
+  .sm\:focus\:text-teal-600:focus {
+    color: #319795;
+  }
+
+  .sm\:focus\:text-teal-700:focus {
+    color: #2c7a7b;
+  }
+
+  .sm\:focus\:text-teal-800:focus {
+    color: #285e61;
+  }
+
+  .sm\:focus\:text-teal-900:focus {
+    color: #234e52;
+  }
+
+  .sm\:focus\:text-blue-100:focus {
+    color: #ebf8ff;
+  }
+
+  .sm\:focus\:text-blue-200:focus {
+    color: #bee3f8;
+  }
+
+  .sm\:focus\:text-blue-300:focus {
+    color: #90cdf4;
+  }
+
+  .sm\:focus\:text-blue-400:focus {
+    color: #63b3ed;
+  }
+
+  .sm\:focus\:text-blue-500:focus {
+    color: #4299e1;
+  }
+
+  .sm\:focus\:text-blue-600:focus {
+    color: #3182ce;
+  }
+
+  .sm\:focus\:text-blue-700:focus {
+    color: #2b6cb0;
+  }
+
+  .sm\:focus\:text-blue-800:focus {
+    color: #2c5282;
+  }
+
+  .sm\:focus\:text-blue-900:focus {
+    color: #2a4365;
+  }
+
+  .sm\:focus\:text-indigo-100:focus {
+    color: #ebf4ff;
+  }
+
+  .sm\:focus\:text-indigo-200:focus {
+    color: #c3dafe;
+  }
+
+  .sm\:focus\:text-indigo-300:focus {
+    color: #a3bffa;
+  }
+
+  .sm\:focus\:text-indigo-400:focus {
+    color: #7f9cf5;
+  }
+
+  .sm\:focus\:text-indigo-500:focus {
+    color: #667eea;
+  }
+
+  .sm\:focus\:text-indigo-600:focus {
+    color: #5a67d8;
+  }
+
+  .sm\:focus\:text-indigo-700:focus {
+    color: #4c51bf;
+  }
+
+  .sm\:focus\:text-indigo-800:focus {
+    color: #434190;
+  }
+
+  .sm\:focus\:text-indigo-900:focus {
+    color: #3c366b;
+  }
+
+  .sm\:focus\:text-purple-100:focus {
+    color: #faf5ff;
+  }
+
+  .sm\:focus\:text-purple-200:focus {
+    color: #e9d8fd;
+  }
+
+  .sm\:focus\:text-purple-300:focus {
+    color: #d6bcfa;
+  }
+
+  .sm\:focus\:text-purple-400:focus {
+    color: #b794f4;
+  }
+
+  .sm\:focus\:text-purple-500:focus {
+    color: #9f7aea;
+  }
+
+  .sm\:focus\:text-purple-600:focus {
+    color: #805ad5;
+  }
+
+  .sm\:focus\:text-purple-700:focus {
+    color: #6b46c1;
+  }
+
+  .sm\:focus\:text-purple-800:focus {
+    color: #553c9a;
+  }
+
+  .sm\:focus\:text-purple-900:focus {
+    color: #44337a;
+  }
+
+  .sm\:focus\:text-pink-100:focus {
+    color: #fff5f7;
+  }
+
+  .sm\:focus\:text-pink-200:focus {
+    color: #fed7e2;
+  }
+
+  .sm\:focus\:text-pink-300:focus {
+    color: #fbb6ce;
+  }
+
+  .sm\:focus\:text-pink-400:focus {
+    color: #f687b3;
+  }
+
+  .sm\:focus\:text-pink-500:focus {
+    color: #ed64a6;
+  }
+
+  .sm\:focus\:text-pink-600:focus {
+    color: #d53f8c;
+  }
+
+  .sm\:focus\:text-pink-700:focus {
+    color: #b83280;
+  }
+
+  .sm\:focus\:text-pink-800:focus {
+    color: #97266d;
+  }
+
+  .sm\:focus\:text-pink-900:focus {
+    color: #702459;
+  }
+
+  .sm\:text-xs {
+    font-size: 0.75rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+  }
+
+  .sm\:text-base {
+    font-size: 1rem;
+  }
+
+  .sm\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .sm\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .sm\:text-2xl {
+    font-size: 1.5rem;
+  }
+
+  .sm\:text-3xl {
+    font-size: 1.875rem;
+  }
+
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+  }
+
+  .sm\:text-5xl {
+    font-size: 3rem;
+  }
+
+  .sm\:text-6xl {
+    font-size: 4rem;
+  }
+
+  .sm\:italic {
+    font-style: italic;
+  }
+
+  .sm\:not-italic {
+    font-style: normal;
+  }
+
+  .sm\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .sm\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .sm\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .sm\:normal-case {
+    text-transform: none;
+  }
+
+  .sm\:underline {
+    text-decoration: underline;
+  }
+
+  .sm\:line-through {
+    text-decoration: line-through;
+  }
+
+  .sm\:no-underline {
+    text-decoration: none;
+  }
+
+  .sm\:hover\:underline:hover {
+    text-decoration: underline;
+  }
+
+  .sm\:hover\:line-through:hover {
+    text-decoration: line-through;
+  }
+
+  .sm\:hover\:no-underline:hover {
+    text-decoration: none;
+  }
+
+  .sm\:focus\:underline:focus {
+    text-decoration: underline;
+  }
+
+  .sm\:focus\:line-through:focus {
+    text-decoration: line-through;
+  }
+
+  .sm\:focus\:no-underline:focus {
+    text-decoration: none;
+  }
+
+  .sm\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .sm\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  .sm\:tracking-tighter {
+    letter-spacing: -0.05em;
+  }
+
+  .sm\:tracking-tight {
+    letter-spacing: -0.025em;
+  }
+
+  .sm\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .sm\:tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .sm\:tracking-wider {
+    letter-spacing: 0.05em;
+  }
+
+  .sm\:tracking-widest {
+    letter-spacing: 0.1em;
+  }
+
+  .sm\:select-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+
+  .sm\:select-text {
+    -webkit-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
+  }
+
+  .sm\:select-all {
+    -webkit-user-select: all;
+       -moz-user-select: all;
+        -ms-user-select: all;
+            user-select: all;
+  }
+
+  .sm\:select-auto {
+    -webkit-user-select: auto;
+       -moz-user-select: auto;
+        -ms-user-select: auto;
+            user-select: auto;
+  }
+
+  .sm\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .sm\:align-top {
+    vertical-align: top;
+  }
+
+  .sm\:align-middle {
+    vertical-align: middle;
+  }
+
+  .sm\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .sm\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .sm\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
+  .sm\:visible {
+    visibility: visible;
+  }
+
+  .sm\:invisible {
+    visibility: hidden;
+  }
+
+  .sm\:whitespace-normal {
+    white-space: normal;
+  }
+
+  .sm\:whitespace-no-wrap {
+    white-space: nowrap;
+  }
+
+  .sm\:whitespace-pre {
+    white-space: pre;
+  }
+
+  .sm\:whitespace-pre-line {
+    white-space: pre-line;
+  }
+
+  .sm\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .sm\:break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+
+  .sm\:break-words {
+    overflow-wrap: break-word;
+  }
+
+  .sm\:break-all {
+    word-break: break-all;
+  }
+
+  .sm\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sm\:w-0 {
+    width: 0;
+  }
+
+  .sm\:w-1 {
+    width: 0.25rem;
+  }
+
+  .sm\:w-2 {
+    width: 0.5rem;
+  }
+
+  .sm\:w-3 {
+    width: 0.75rem;
+  }
+
+  .sm\:w-4 {
+    width: 1rem;
+  }
+
+  .sm\:w-5 {
+    width: 1.25rem;
+  }
+
+  .sm\:w-6 {
+    width: 1.5rem;
+  }
+
+  .sm\:w-8 {
+    width: 2rem;
+  }
+
+  .sm\:w-10 {
+    width: 2.5rem;
+  }
+
+  .sm\:w-12 {
+    width: 3rem;
+  }
+
+  .sm\:w-16 {
+    width: 4rem;
+  }
+
+  .sm\:w-20 {
+    width: 5rem;
+  }
+
+  .sm\:w-24 {
+    width: 6rem;
+  }
+
+  .sm\:w-32 {
+    width: 8rem;
+  }
+
+  .sm\:w-40 {
+    width: 10rem;
+  }
+
+  .sm\:w-48 {
+    width: 12rem;
+  }
+
+  .sm\:w-56 {
+    width: 14rem;
+  }
+
+  .sm\:w-64 {
+    width: 16rem;
+  }
+
+  .sm\:w-auto {
+    width: auto;
+  }
+
+  .sm\:w-px {
+    width: 1px;
+  }
+
+  .sm\:w-1\/2 {
+    width: 50%;
+  }
+
+  .sm\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .sm\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .sm\:w-1\/4 {
+    width: 25%;
+  }
+
+  .sm\:w-2\/4 {
+    width: 50%;
+  }
+
+  .sm\:w-3\/4 {
+    width: 75%;
+  }
+
+  .sm\:w-1\/5 {
+    width: 20%;
+  }
+
+  .sm\:w-2\/5 {
+    width: 40%;
+  }
+
+  .sm\:w-3\/5 {
+    width: 60%;
+  }
+
+  .sm\:w-4\/5 {
+    width: 80%;
+  }
+
+  .sm\:w-1\/6 {
+    width: 16.666667%;
+  }
+
+  .sm\:w-2\/6 {
+    width: 33.333333%;
+  }
+
+  .sm\:w-3\/6 {
+    width: 50%;
+  }
+
+  .sm\:w-4\/6 {
+    width: 66.666667%;
+  }
+
+  .sm\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .sm\:w-1\/12 {
+    width: 8.333333%;
+  }
+
+  .sm\:w-2\/12 {
+    width: 16.666667%;
+  }
+
+  .sm\:w-3\/12 {
+    width: 25%;
+  }
+
+  .sm\:w-4\/12 {
+    width: 33.333333%;
+  }
+
+  .sm\:w-5\/12 {
+    width: 41.666667%;
+  }
+
+  .sm\:w-6\/12 {
+    width: 50%;
+  }
+
+  .sm\:w-7\/12 {
+    width: 58.333333%;
+  }
+
+  .sm\:w-8\/12 {
+    width: 66.666667%;
+  }
+
+  .sm\:w-9\/12 {
+    width: 75%;
+  }
+
+  .sm\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .sm\:w-11\/12 {
+    width: 91.666667%;
+  }
+
+  .sm\:w-full {
+    width: 100%;
+  }
+
+  .sm\:w-screen {
+    width: 100vw;
+  }
+
+  .sm\:z-0 {
+    z-index: 0;
+  }
+
+  .sm\:z-10 {
+    z-index: 10;
+  }
+
+  .sm\:z-20 {
+    z-index: 20;
+  }
+
+  .sm\:z-30 {
+    z-index: 30;
+  }
+
+  .sm\:z-40 {
+    z-index: 40;
+  }
+
+  .sm\:z-50 {
+    z-index: 50;
+  }
+
+  .sm\:z-auto {
+    z-index: auto;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .md\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .md\:focus\:sr-only:focus {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .md\:focus\:not-sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .md\:appearance-none {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+  .md\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .md\:bg-local {
+    background-attachment: local;
+  }
+
+  .md\:bg-scroll {
+    background-attachment: scroll;
+  }
+
+  .md\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .md\:bg-black {
+    background-color: #000;
+  }
+
+  .md\:bg-white {
+    background-color: #fff;
+  }
+
+  .md\:bg-gray-100 {
+    background-color: #f7fafc;
+  }
+
+  .md\:bg-gray-200 {
+    background-color: #edf2f7;
+  }
+
+  .md\:bg-gray-300 {
+    background-color: #e2e8f0;
+  }
+
+  .md\:bg-gray-400 {
+    background-color: #cbd5e0;
+  }
+
+  .md\:bg-gray-500 {
+    background-color: #a0aec0;
+  }
+
+  .md\:bg-gray-600 {
+    background-color: #718096;
+  }
+
+  .md\:bg-gray-700 {
+    background-color: #4a5568;
+  }
+
+  .md\:bg-gray-800 {
+    background-color: #2d3748;
+  }
+
+  .md\:bg-gray-900 {
+    background-color: #1a202c;
+  }
+
+  .md\:bg-red-100 {
+    background-color: #fff5f5;
+  }
+
+  .md\:bg-red-200 {
+    background-color: #fed7d7;
+  }
+
+  .md\:bg-red-300 {
+    background-color: #feb2b2;
+  }
+
+  .md\:bg-red-400 {
+    background-color: #fc8181;
+  }
+
+  .md\:bg-red-500 {
+    background-color: #f56565;
+  }
+
+  .md\:bg-red-600 {
+    background-color: #e53e3e;
+  }
+
+  .md\:bg-red-700 {
+    background-color: #c53030;
+  }
+
+  .md\:bg-red-800 {
+    background-color: #9b2c2c;
+  }
+
+  .md\:bg-red-900 {
+    background-color: #742a2a;
+  }
+
+  .md\:bg-orange-100 {
+    background-color: #fffaf0;
+  }
+
+  .md\:bg-orange-200 {
+    background-color: #feebc8;
+  }
+
+  .md\:bg-orange-300 {
+    background-color: #fbd38d;
+  }
+
+  .md\:bg-orange-400 {
+    background-color: #f6ad55;
+  }
+
+  .md\:bg-orange-500 {
+    background-color: #ed8936;
+  }
+
+  .md\:bg-orange-600 {
+    background-color: #dd6b20;
+  }
+
+  .md\:bg-orange-700 {
+    background-color: #c05621;
+  }
+
+  .md\:bg-orange-800 {
+    background-color: #9c4221;
+  }
+
+  .md\:bg-orange-900 {
+    background-color: #7b341e;
+  }
+
+  .md\:bg-yellow-100 {
+    background-color: #fffff0;
+  }
+
+  .md\:bg-yellow-200 {
+    background-color: #fefcbf;
+  }
+
+  .md\:bg-yellow-300 {
+    background-color: #faf089;
+  }
+
+  .md\:bg-yellow-400 {
+    background-color: #f6e05e;
+  }
+
+  .md\:bg-yellow-500 {
+    background-color: #ecc94b;
+  }
+
+  .md\:bg-yellow-600 {
+    background-color: #d69e2e;
+  }
+
+  .md\:bg-yellow-700 {
+    background-color: #b7791f;
+  }
+
+  .md\:bg-yellow-800 {
+    background-color: #975a16;
+  }
+
+  .md\:bg-yellow-900 {
+    background-color: #744210;
+  }
+
+  .md\:bg-green-100 {
+    background-color: #f0fff4;
+  }
+
+  .md\:bg-green-200 {
+    background-color: #c6f6d5;
+  }
+
+  .md\:bg-green-300 {
+    background-color: #9ae6b4;
+  }
+
+  .md\:bg-green-400 {
+    background-color: #68d391;
+  }
+
+  .md\:bg-green-500 {
+    background-color: #48bb78;
+  }
+
+  .md\:bg-green-600 {
+    background-color: #38a169;
+  }
+
+  .md\:bg-green-700 {
+    background-color: #2f855a;
+  }
+
+  .md\:bg-green-800 {
+    background-color: #276749;
+  }
+
+  .md\:bg-green-900 {
+    background-color: #22543d;
+  }
+
+  .md\:bg-teal-100 {
+    background-color: #e6fffa;
+  }
+
+  .md\:bg-teal-200 {
+    background-color: #b2f5ea;
+  }
+
+  .md\:bg-teal-300 {
+    background-color: #81e6d9;
+  }
+
+  .md\:bg-teal-400 {
+    background-color: #4fd1c5;
+  }
+
+  .md\:bg-teal-500 {
+    background-color: #38b2ac;
+  }
+
+  .md\:bg-teal-600 {
+    background-color: #319795;
+  }
+
+  .md\:bg-teal-700 {
+    background-color: #2c7a7b;
+  }
+
+  .md\:bg-teal-800 {
+    background-color: #285e61;
+  }
+
+  .md\:bg-teal-900 {
+    background-color: #234e52;
+  }
+
+  .md\:bg-blue-100 {
+    background-color: #ebf8ff;
+  }
+
+  .md\:bg-blue-200 {
+    background-color: #bee3f8;
+  }
+
+  .md\:bg-blue-300 {
+    background-color: #90cdf4;
+  }
+
+  .md\:bg-blue-400 {
+    background-color: #63b3ed;
+  }
+
+  .md\:bg-blue-500 {
+    background-color: #4299e1;
+  }
+
+  .md\:bg-blue-600 {
+    background-color: #3182ce;
+  }
+
+  .md\:bg-blue-700 {
+    background-color: #2b6cb0;
+  }
+
+  .md\:bg-blue-800 {
+    background-color: #2c5282;
+  }
+
+  .md\:bg-blue-900 {
+    background-color: #2a4365;
+  }
+
+  .md\:bg-indigo-100 {
+    background-color: #ebf4ff;
+  }
+
+  .md\:bg-indigo-200 {
+    background-color: #c3dafe;
+  }
+
+  .md\:bg-indigo-300 {
+    background-color: #a3bffa;
+  }
+
+  .md\:bg-indigo-400 {
+    background-color: #7f9cf5;
+  }
+
+  .md\:bg-indigo-500 {
+    background-color: #667eea;
+  }
+
+  .md\:bg-indigo-600 {
+    background-color: #5a67d8;
+  }
+
+  .md\:bg-indigo-700 {
+    background-color: #4c51bf;
+  }
+
+  .md\:bg-indigo-800 {
+    background-color: #434190;
+  }
+
+  .md\:bg-indigo-900 {
+    background-color: #3c366b;
+  }
+
+  .md\:bg-purple-100 {
+    background-color: #faf5ff;
+  }
+
+  .md\:bg-purple-200 {
+    background-color: #e9d8fd;
+  }
+
+  .md\:bg-purple-300 {
+    background-color: #d6bcfa;
+  }
+
+  .md\:bg-purple-400 {
+    background-color: #b794f4;
+  }
+
+  .md\:bg-purple-500 {
+    background-color: #9f7aea;
+  }
+
+  .md\:bg-purple-600 {
+    background-color: #805ad5;
+  }
+
+  .md\:bg-purple-700 {
+    background-color: #6b46c1;
+  }
+
+  .md\:bg-purple-800 {
+    background-color: #553c9a;
+  }
+
+  .md\:bg-purple-900 {
+    background-color: #44337a;
+  }
+
+  .md\:bg-pink-100 {
+    background-color: #fff5f7;
+  }
+
+  .md\:bg-pink-200 {
+    background-color: #fed7e2;
+  }
+
+  .md\:bg-pink-300 {
+    background-color: #fbb6ce;
+  }
+
+  .md\:bg-pink-400 {
+    background-color: #f687b3;
+  }
+
+  .md\:bg-pink-500 {
+    background-color: #ed64a6;
+  }
+
+  .md\:bg-pink-600 {
+    background-color: #d53f8c;
+  }
+
+  .md\:bg-pink-700 {
+    background-color: #b83280;
+  }
+
+  .md\:bg-pink-800 {
+    background-color: #97266d;
+  }
+
+  .md\:bg-pink-900 {
+    background-color: #702459;
+  }
+
+  .md\:hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+
+  .md\:hover\:bg-black:hover {
+    background-color: #000;
+  }
+
+  .md\:hover\:bg-white:hover {
+    background-color: #fff;
+  }
+
+  .md\:hover\:bg-gray-100:hover {
+    background-color: #f7fafc;
+  }
+
+  .md\:hover\:bg-gray-200:hover {
+    background-color: #edf2f7;
+  }
+
+  .md\:hover\:bg-gray-300:hover {
+    background-color: #e2e8f0;
+  }
+
+  .md\:hover\:bg-gray-400:hover {
+    background-color: #cbd5e0;
+  }
+
+  .md\:hover\:bg-gray-500:hover {
+    background-color: #a0aec0;
+  }
+
+  .md\:hover\:bg-gray-600:hover {
+    background-color: #718096;
+  }
+
+  .md\:hover\:bg-gray-700:hover {
+    background-color: #4a5568;
+  }
+
+  .md\:hover\:bg-gray-800:hover {
+    background-color: #2d3748;
+  }
+
+  .md\:hover\:bg-gray-900:hover {
+    background-color: #1a202c;
+  }
+
+  .md\:hover\:bg-red-100:hover {
+    background-color: #fff5f5;
+  }
+
+  .md\:hover\:bg-red-200:hover {
+    background-color: #fed7d7;
+  }
+
+  .md\:hover\:bg-red-300:hover {
+    background-color: #feb2b2;
+  }
+
+  .md\:hover\:bg-red-400:hover {
+    background-color: #fc8181;
+  }
+
+  .md\:hover\:bg-red-500:hover {
+    background-color: #f56565;
+  }
+
+  .md\:hover\:bg-red-600:hover {
+    background-color: #e53e3e;
+  }
+
+  .md\:hover\:bg-red-700:hover {
+    background-color: #c53030;
+  }
+
+  .md\:hover\:bg-red-800:hover {
+    background-color: #9b2c2c;
+  }
+
+  .md\:hover\:bg-red-900:hover {
+    background-color: #742a2a;
+  }
+
+  .md\:hover\:bg-orange-100:hover {
+    background-color: #fffaf0;
+  }
+
+  .md\:hover\:bg-orange-200:hover {
+    background-color: #feebc8;
+  }
+
+  .md\:hover\:bg-orange-300:hover {
+    background-color: #fbd38d;
+  }
+
+  .md\:hover\:bg-orange-400:hover {
+    background-color: #f6ad55;
+  }
+
+  .md\:hover\:bg-orange-500:hover {
+    background-color: #ed8936;
+  }
+
+  .md\:hover\:bg-orange-600:hover {
+    background-color: #dd6b20;
+  }
+
+  .md\:hover\:bg-orange-700:hover {
+    background-color: #c05621;
+  }
+
+  .md\:hover\:bg-orange-800:hover {
+    background-color: #9c4221;
+  }
+
+  .md\:hover\:bg-orange-900:hover {
+    background-color: #7b341e;
+  }
+
+  .md\:hover\:bg-yellow-100:hover {
+    background-color: #fffff0;
+  }
+
+  .md\:hover\:bg-yellow-200:hover {
+    background-color: #fefcbf;
+  }
+
+  .md\:hover\:bg-yellow-300:hover {
+    background-color: #faf089;
+  }
+
+  .md\:hover\:bg-yellow-400:hover {
+    background-color: #f6e05e;
+  }
+
+  .md\:hover\:bg-yellow-500:hover {
+    background-color: #ecc94b;
+  }
+
+  .md\:hover\:bg-yellow-600:hover {
+    background-color: #d69e2e;
+  }
+
+  .md\:hover\:bg-yellow-700:hover {
+    background-color: #b7791f;
+  }
+
+  .md\:hover\:bg-yellow-800:hover {
+    background-color: #975a16;
+  }
+
+  .md\:hover\:bg-yellow-900:hover {
+    background-color: #744210;
+  }
+
+  .md\:hover\:bg-green-100:hover {
+    background-color: #f0fff4;
+  }
+
+  .md\:hover\:bg-green-200:hover {
+    background-color: #c6f6d5;
+  }
+
+  .md\:hover\:bg-green-300:hover {
+    background-color: #9ae6b4;
+  }
+
+  .md\:hover\:bg-green-400:hover {
+    background-color: #68d391;
+  }
+
+  .md\:hover\:bg-green-500:hover {
+    background-color: #48bb78;
+  }
+
+  .md\:hover\:bg-green-600:hover {
+    background-color: #38a169;
+  }
+
+  .md\:hover\:bg-green-700:hover {
+    background-color: #2f855a;
+  }
+
+  .md\:hover\:bg-green-800:hover {
+    background-color: #276749;
+  }
+
+  .md\:hover\:bg-green-900:hover {
+    background-color: #22543d;
+  }
+
+  .md\:hover\:bg-teal-100:hover {
+    background-color: #e6fffa;
+  }
+
+  .md\:hover\:bg-teal-200:hover {
+    background-color: #b2f5ea;
+  }
+
+  .md\:hover\:bg-teal-300:hover {
+    background-color: #81e6d9;
+  }
+
+  .md\:hover\:bg-teal-400:hover {
+    background-color: #4fd1c5;
+  }
+
+  .md\:hover\:bg-teal-500:hover {
+    background-color: #38b2ac;
+  }
+
+  .md\:hover\:bg-teal-600:hover {
+    background-color: #319795;
+  }
+
+  .md\:hover\:bg-teal-700:hover {
+    background-color: #2c7a7b;
+  }
+
+  .md\:hover\:bg-teal-800:hover {
+    background-color: #285e61;
+  }
+
+  .md\:hover\:bg-teal-900:hover {
+    background-color: #234e52;
+  }
+
+  .md\:hover\:bg-blue-100:hover {
+    background-color: #ebf8ff;
+  }
+
+  .md\:hover\:bg-blue-200:hover {
+    background-color: #bee3f8;
+  }
+
+  .md\:hover\:bg-blue-300:hover {
+    background-color: #90cdf4;
+  }
+
+  .md\:hover\:bg-blue-400:hover {
+    background-color: #63b3ed;
+  }
+
+  .md\:hover\:bg-blue-500:hover {
+    background-color: #4299e1;
+  }
+
+  .md\:hover\:bg-blue-600:hover {
+    background-color: #3182ce;
+  }
+
+  .md\:hover\:bg-blue-700:hover {
+    background-color: #2b6cb0;
+  }
+
+  .md\:hover\:bg-blue-800:hover {
+    background-color: #2c5282;
+  }
+
+  .md\:hover\:bg-blue-900:hover {
+    background-color: #2a4365;
+  }
+
+  .md\:hover\:bg-indigo-100:hover {
+    background-color: #ebf4ff;
+  }
+
+  .md\:hover\:bg-indigo-200:hover {
+    background-color: #c3dafe;
+  }
+
+  .md\:hover\:bg-indigo-300:hover {
+    background-color: #a3bffa;
+  }
+
+  .md\:hover\:bg-indigo-400:hover {
+    background-color: #7f9cf5;
+  }
+
+  .md\:hover\:bg-indigo-500:hover {
+    background-color: #667eea;
+  }
+
+  .md\:hover\:bg-indigo-600:hover {
+    background-color: #5a67d8;
+  }
+
+  .md\:hover\:bg-indigo-700:hover {
+    background-color: #4c51bf;
+  }
+
+  .md\:hover\:bg-indigo-800:hover {
+    background-color: #434190;
+  }
+
+  .md\:hover\:bg-indigo-900:hover {
+    background-color: #3c366b;
+  }
+
+  .md\:hover\:bg-purple-100:hover {
+    background-color: #faf5ff;
+  }
+
+  .md\:hover\:bg-purple-200:hover {
+    background-color: #e9d8fd;
+  }
+
+  .md\:hover\:bg-purple-300:hover {
+    background-color: #d6bcfa;
+  }
+
+  .md\:hover\:bg-purple-400:hover {
+    background-color: #b794f4;
+  }
+
+  .md\:hover\:bg-purple-500:hover {
+    background-color: #9f7aea;
+  }
+
+  .md\:hover\:bg-purple-600:hover {
+    background-color: #805ad5;
+  }
+
+  .md\:hover\:bg-purple-700:hover {
+    background-color: #6b46c1;
+  }
+
+  .md\:hover\:bg-purple-800:hover {
+    background-color: #553c9a;
+  }
+
+  .md\:hover\:bg-purple-900:hover {
+    background-color: #44337a;
+  }
+
+  .md\:hover\:bg-pink-100:hover {
+    background-color: #fff5f7;
+  }
+
+  .md\:hover\:bg-pink-200:hover {
+    background-color: #fed7e2;
+  }
+
+  .md\:hover\:bg-pink-300:hover {
+    background-color: #fbb6ce;
+  }
+
+  .md\:hover\:bg-pink-400:hover {
+    background-color: #f687b3;
+  }
+
+  .md\:hover\:bg-pink-500:hover {
+    background-color: #ed64a6;
+  }
+
+  .md\:hover\:bg-pink-600:hover {
+    background-color: #d53f8c;
+  }
+
+  .md\:hover\:bg-pink-700:hover {
+    background-color: #b83280;
+  }
+
+  .md\:hover\:bg-pink-800:hover {
+    background-color: #97266d;
+  }
+
+  .md\:hover\:bg-pink-900:hover {
+    background-color: #702459;
+  }
+
+  .md\:focus\:bg-transparent:focus {
+    background-color: transparent;
+  }
+
+  .md\:focus\:bg-black:focus {
+    background-color: #000;
+  }
+
+  .md\:focus\:bg-white:focus {
+    background-color: #fff;
+  }
+
+  .md\:focus\:bg-gray-100:focus {
+    background-color: #f7fafc;
+  }
+
+  .md\:focus\:bg-gray-200:focus {
+    background-color: #edf2f7;
+  }
+
+  .md\:focus\:bg-gray-300:focus {
+    background-color: #e2e8f0;
+  }
+
+  .md\:focus\:bg-gray-400:focus {
+    background-color: #cbd5e0;
+  }
+
+  .md\:focus\:bg-gray-500:focus {
+    background-color: #a0aec0;
+  }
+
+  .md\:focus\:bg-gray-600:focus {
+    background-color: #718096;
+  }
+
+  .md\:focus\:bg-gray-700:focus {
+    background-color: #4a5568;
+  }
+
+  .md\:focus\:bg-gray-800:focus {
+    background-color: #2d3748;
+  }
+
+  .md\:focus\:bg-gray-900:focus {
+    background-color: #1a202c;
+  }
+
+  .md\:focus\:bg-red-100:focus {
+    background-color: #fff5f5;
+  }
+
+  .md\:focus\:bg-red-200:focus {
+    background-color: #fed7d7;
+  }
+
+  .md\:focus\:bg-red-300:focus {
+    background-color: #feb2b2;
+  }
+
+  .md\:focus\:bg-red-400:focus {
+    background-color: #fc8181;
+  }
+
+  .md\:focus\:bg-red-500:focus {
+    background-color: #f56565;
+  }
+
+  .md\:focus\:bg-red-600:focus {
+    background-color: #e53e3e;
+  }
+
+  .md\:focus\:bg-red-700:focus {
+    background-color: #c53030;
+  }
+
+  .md\:focus\:bg-red-800:focus {
+    background-color: #9b2c2c;
+  }
+
+  .md\:focus\:bg-red-900:focus {
+    background-color: #742a2a;
+  }
+
+  .md\:focus\:bg-orange-100:focus {
+    background-color: #fffaf0;
+  }
+
+  .md\:focus\:bg-orange-200:focus {
+    background-color: #feebc8;
+  }
+
+  .md\:focus\:bg-orange-300:focus {
+    background-color: #fbd38d;
+  }
+
+  .md\:focus\:bg-orange-400:focus {
+    background-color: #f6ad55;
+  }
+
+  .md\:focus\:bg-orange-500:focus {
+    background-color: #ed8936;
+  }
+
+  .md\:focus\:bg-orange-600:focus {
+    background-color: #dd6b20;
+  }
+
+  .md\:focus\:bg-orange-700:focus {
+    background-color: #c05621;
+  }
+
+  .md\:focus\:bg-orange-800:focus {
+    background-color: #9c4221;
+  }
+
+  .md\:focus\:bg-orange-900:focus {
+    background-color: #7b341e;
+  }
+
+  .md\:focus\:bg-yellow-100:focus {
+    background-color: #fffff0;
+  }
+
+  .md\:focus\:bg-yellow-200:focus {
+    background-color: #fefcbf;
+  }
+
+  .md\:focus\:bg-yellow-300:focus {
+    background-color: #faf089;
+  }
+
+  .md\:focus\:bg-yellow-400:focus {
+    background-color: #f6e05e;
+  }
+
+  .md\:focus\:bg-yellow-500:focus {
+    background-color: #ecc94b;
+  }
+
+  .md\:focus\:bg-yellow-600:focus {
+    background-color: #d69e2e;
+  }
+
+  .md\:focus\:bg-yellow-700:focus {
+    background-color: #b7791f;
+  }
+
+  .md\:focus\:bg-yellow-800:focus {
+    background-color: #975a16;
+  }
+
+  .md\:focus\:bg-yellow-900:focus {
+    background-color: #744210;
+  }
+
+  .md\:focus\:bg-green-100:focus {
+    background-color: #f0fff4;
+  }
+
+  .md\:focus\:bg-green-200:focus {
+    background-color: #c6f6d5;
+  }
+
+  .md\:focus\:bg-green-300:focus {
+    background-color: #9ae6b4;
+  }
+
+  .md\:focus\:bg-green-400:focus {
+    background-color: #68d391;
+  }
+
+  .md\:focus\:bg-green-500:focus {
+    background-color: #48bb78;
+  }
+
+  .md\:focus\:bg-green-600:focus {
+    background-color: #38a169;
+  }
+
+  .md\:focus\:bg-green-700:focus {
+    background-color: #2f855a;
+  }
+
+  .md\:focus\:bg-green-800:focus {
+    background-color: #276749;
+  }
+
+  .md\:focus\:bg-green-900:focus {
+    background-color: #22543d;
+  }
+
+  .md\:focus\:bg-teal-100:focus {
+    background-color: #e6fffa;
+  }
+
+  .md\:focus\:bg-teal-200:focus {
+    background-color: #b2f5ea;
+  }
+
+  .md\:focus\:bg-teal-300:focus {
+    background-color: #81e6d9;
+  }
+
+  .md\:focus\:bg-teal-400:focus {
+    background-color: #4fd1c5;
+  }
+
+  .md\:focus\:bg-teal-500:focus {
+    background-color: #38b2ac;
+  }
+
+  .md\:focus\:bg-teal-600:focus {
+    background-color: #319795;
+  }
+
+  .md\:focus\:bg-teal-700:focus {
+    background-color: #2c7a7b;
+  }
+
+  .md\:focus\:bg-teal-800:focus {
+    background-color: #285e61;
+  }
+
+  .md\:focus\:bg-teal-900:focus {
+    background-color: #234e52;
+  }
+
+  .md\:focus\:bg-blue-100:focus {
+    background-color: #ebf8ff;
+  }
+
+  .md\:focus\:bg-blue-200:focus {
+    background-color: #bee3f8;
+  }
+
+  .md\:focus\:bg-blue-300:focus {
+    background-color: #90cdf4;
+  }
+
+  .md\:focus\:bg-blue-400:focus {
+    background-color: #63b3ed;
+  }
+
+  .md\:focus\:bg-blue-500:focus {
+    background-color: #4299e1;
+  }
+
+  .md\:focus\:bg-blue-600:focus {
+    background-color: #3182ce;
+  }
+
+  .md\:focus\:bg-blue-700:focus {
+    background-color: #2b6cb0;
+  }
+
+  .md\:focus\:bg-blue-800:focus {
+    background-color: #2c5282;
+  }
+
+  .md\:focus\:bg-blue-900:focus {
+    background-color: #2a4365;
+  }
+
+  .md\:focus\:bg-indigo-100:focus {
+    background-color: #ebf4ff;
+  }
+
+  .md\:focus\:bg-indigo-200:focus {
+    background-color: #c3dafe;
+  }
+
+  .md\:focus\:bg-indigo-300:focus {
+    background-color: #a3bffa;
+  }
+
+  .md\:focus\:bg-indigo-400:focus {
+    background-color: #7f9cf5;
+  }
+
+  .md\:focus\:bg-indigo-500:focus {
+    background-color: #667eea;
+  }
+
+  .md\:focus\:bg-indigo-600:focus {
+    background-color: #5a67d8;
+  }
+
+  .md\:focus\:bg-indigo-700:focus {
+    background-color: #4c51bf;
+  }
+
+  .md\:focus\:bg-indigo-800:focus {
+    background-color: #434190;
+  }
+
+  .md\:focus\:bg-indigo-900:focus {
+    background-color: #3c366b;
+  }
+
+  .md\:focus\:bg-purple-100:focus {
+    background-color: #faf5ff;
+  }
+
+  .md\:focus\:bg-purple-200:focus {
+    background-color: #e9d8fd;
+  }
+
+  .md\:focus\:bg-purple-300:focus {
+    background-color: #d6bcfa;
+  }
+
+  .md\:focus\:bg-purple-400:focus {
+    background-color: #b794f4;
+  }
+
+  .md\:focus\:bg-purple-500:focus {
+    background-color: #9f7aea;
+  }
+
+  .md\:focus\:bg-purple-600:focus {
+    background-color: #805ad5;
+  }
+
+  .md\:focus\:bg-purple-700:focus {
+    background-color: #6b46c1;
+  }
+
+  .md\:focus\:bg-purple-800:focus {
+    background-color: #553c9a;
+  }
+
+  .md\:focus\:bg-purple-900:focus {
+    background-color: #44337a;
+  }
+
+  .md\:focus\:bg-pink-100:focus {
+    background-color: #fff5f7;
+  }
+
+  .md\:focus\:bg-pink-200:focus {
+    background-color: #fed7e2;
+  }
+
+  .md\:focus\:bg-pink-300:focus {
+    background-color: #fbb6ce;
+  }
+
+  .md\:focus\:bg-pink-400:focus {
+    background-color: #f687b3;
+  }
+
+  .md\:focus\:bg-pink-500:focus {
+    background-color: #ed64a6;
+  }
+
+  .md\:focus\:bg-pink-600:focus {
+    background-color: #d53f8c;
+  }
+
+  .md\:focus\:bg-pink-700:focus {
+    background-color: #b83280;
+  }
+
+  .md\:focus\:bg-pink-800:focus {
+    background-color: #97266d;
+  }
+
+  .md\:focus\:bg-pink-900:focus {
+    background-color: #702459;
+  }
+
+  .md\:bg-bottom {
+    background-position: bottom;
+  }
+
+  .md\:bg-center {
+    background-position: center;
+  }
+
+  .md\:bg-left {
+    background-position: left;
+  }
+
+  .md\:bg-left-bottom {
+    background-position: left bottom;
+  }
+
+  .md\:bg-left-top {
+    background-position: left top;
+  }
+
+  .md\:bg-right {
+    background-position: right;
+  }
+
+  .md\:bg-right-bottom {
+    background-position: right bottom;
+  }
+
+  .md\:bg-right-top {
+    background-position: right top;
+  }
+
+  .md\:bg-top {
+    background-position: top;
+  }
+
+  .md\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .md\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .md\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .md\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
+  .md\:bg-repeat-round {
+    background-repeat: round;
+  }
+
+  .md\:bg-repeat-space {
+    background-repeat: space;
+  }
+
+  .md\:bg-auto {
+    background-size: auto;
+  }
+
+  .md\:bg-cover {
+    background-size: cover;
+  }
+
+  .md\:bg-contain {
+    background-size: contain;
+  }
+
+  .md\:border-collapse {
+    border-collapse: collapse;
+  }
+
+  .md\:border-separate {
+    border-collapse: separate;
+  }
+
+  .md\:border-transparent {
+    border-color: transparent;
+  }
+
+  .md\:border-black {
+    border-color: #000;
+  }
+
+  .md\:border-white {
+    border-color: #fff;
+  }
+
+  .md\:border-gray-100 {
+    border-color: #f7fafc;
+  }
+
+  .md\:border-gray-200 {
+    border-color: #edf2f7;
+  }
+
+  .md\:border-gray-300 {
+    border-color: #e2e8f0;
+  }
+
+  .md\:border-gray-400 {
+    border-color: #cbd5e0;
+  }
+
+  .md\:border-gray-500 {
+    border-color: #a0aec0;
+  }
+
+  .md\:border-gray-600 {
+    border-color: #718096;
+  }
+
+  .md\:border-gray-700 {
+    border-color: #4a5568;
+  }
+
+  .md\:border-gray-800 {
+    border-color: #2d3748;
+  }
+
+  .md\:border-gray-900 {
+    border-color: #1a202c;
+  }
+
+  .md\:border-red-100 {
+    border-color: #fff5f5;
+  }
+
+  .md\:border-red-200 {
+    border-color: #fed7d7;
+  }
+
+  .md\:border-red-300 {
+    border-color: #feb2b2;
+  }
+
+  .md\:border-red-400 {
+    border-color: #fc8181;
+  }
+
+  .md\:border-red-500 {
+    border-color: #f56565;
+  }
+
+  .md\:border-red-600 {
+    border-color: #e53e3e;
+  }
+
+  .md\:border-red-700 {
+    border-color: #c53030;
+  }
+
+  .md\:border-red-800 {
+    border-color: #9b2c2c;
+  }
+
+  .md\:border-red-900 {
+    border-color: #742a2a;
+  }
+
+  .md\:border-orange-100 {
+    border-color: #fffaf0;
+  }
+
+  .md\:border-orange-200 {
+    border-color: #feebc8;
+  }
+
+  .md\:border-orange-300 {
+    border-color: #fbd38d;
+  }
+
+  .md\:border-orange-400 {
+    border-color: #f6ad55;
+  }
+
+  .md\:border-orange-500 {
+    border-color: #ed8936;
+  }
+
+  .md\:border-orange-600 {
+    border-color: #dd6b20;
+  }
+
+  .md\:border-orange-700 {
+    border-color: #c05621;
+  }
+
+  .md\:border-orange-800 {
+    border-color: #9c4221;
+  }
+
+  .md\:border-orange-900 {
+    border-color: #7b341e;
+  }
+
+  .md\:border-yellow-100 {
+    border-color: #fffff0;
+  }
+
+  .md\:border-yellow-200 {
+    border-color: #fefcbf;
+  }
+
+  .md\:border-yellow-300 {
+    border-color: #faf089;
+  }
+
+  .md\:border-yellow-400 {
+    border-color: #f6e05e;
+  }
+
+  .md\:border-yellow-500 {
+    border-color: #ecc94b;
+  }
+
+  .md\:border-yellow-600 {
+    border-color: #d69e2e;
+  }
+
+  .md\:border-yellow-700 {
+    border-color: #b7791f;
+  }
+
+  .md\:border-yellow-800 {
+    border-color: #975a16;
+  }
+
+  .md\:border-yellow-900 {
+    border-color: #744210;
+  }
+
+  .md\:border-green-100 {
+    border-color: #f0fff4;
+  }
+
+  .md\:border-green-200 {
+    border-color: #c6f6d5;
+  }
+
+  .md\:border-green-300 {
+    border-color: #9ae6b4;
+  }
+
+  .md\:border-green-400 {
+    border-color: #68d391;
+  }
+
+  .md\:border-green-500 {
+    border-color: #48bb78;
+  }
+
+  .md\:border-green-600 {
+    border-color: #38a169;
+  }
+
+  .md\:border-green-700 {
+    border-color: #2f855a;
+  }
+
+  .md\:border-green-800 {
+    border-color: #276749;
+  }
+
+  .md\:border-green-900 {
+    border-color: #22543d;
+  }
+
+  .md\:border-teal-100 {
+    border-color: #e6fffa;
+  }
+
+  .md\:border-teal-200 {
+    border-color: #b2f5ea;
+  }
+
+  .md\:border-teal-300 {
+    border-color: #81e6d9;
+  }
+
+  .md\:border-teal-400 {
+    border-color: #4fd1c5;
+  }
+
+  .md\:border-teal-500 {
+    border-color: #38b2ac;
+  }
+
+  .md\:border-teal-600 {
+    border-color: #319795;
+  }
+
+  .md\:border-teal-700 {
+    border-color: #2c7a7b;
+  }
+
+  .md\:border-teal-800 {
+    border-color: #285e61;
+  }
+
+  .md\:border-teal-900 {
+    border-color: #234e52;
+  }
+
+  .md\:border-blue-100 {
+    border-color: #ebf8ff;
+  }
+
+  .md\:border-blue-200 {
+    border-color: #bee3f8;
+  }
+
+  .md\:border-blue-300 {
+    border-color: #90cdf4;
+  }
+
+  .md\:border-blue-400 {
+    border-color: #63b3ed;
+  }
+
+  .md\:border-blue-500 {
+    border-color: #4299e1;
+  }
+
+  .md\:border-blue-600 {
+    border-color: #3182ce;
+  }
+
+  .md\:border-blue-700 {
+    border-color: #2b6cb0;
+  }
+
+  .md\:border-blue-800 {
+    border-color: #2c5282;
+  }
+
+  .md\:border-blue-900 {
+    border-color: #2a4365;
+  }
+
+  .md\:border-indigo-100 {
+    border-color: #ebf4ff;
+  }
+
+  .md\:border-indigo-200 {
+    border-color: #c3dafe;
+  }
+
+  .md\:border-indigo-300 {
+    border-color: #a3bffa;
+  }
+
+  .md\:border-indigo-400 {
+    border-color: #7f9cf5;
+  }
+
+  .md\:border-indigo-500 {
+    border-color: #667eea;
+  }
+
+  .md\:border-indigo-600 {
+    border-color: #5a67d8;
+  }
+
+  .md\:border-indigo-700 {
+    border-color: #4c51bf;
+  }
+
+  .md\:border-indigo-800 {
+    border-color: #434190;
+  }
+
+  .md\:border-indigo-900 {
+    border-color: #3c366b;
+  }
+
+  .md\:border-purple-100 {
+    border-color: #faf5ff;
+  }
+
+  .md\:border-purple-200 {
+    border-color: #e9d8fd;
+  }
+
+  .md\:border-purple-300 {
+    border-color: #d6bcfa;
+  }
+
+  .md\:border-purple-400 {
+    border-color: #b794f4;
+  }
+
+  .md\:border-purple-500 {
+    border-color: #9f7aea;
+  }
+
+  .md\:border-purple-600 {
+    border-color: #805ad5;
+  }
+
+  .md\:border-purple-700 {
+    border-color: #6b46c1;
+  }
+
+  .md\:border-purple-800 {
+    border-color: #553c9a;
+  }
+
+  .md\:border-purple-900 {
+    border-color: #44337a;
+  }
+
+  .md\:border-pink-100 {
+    border-color: #fff5f7;
+  }
+
+  .md\:border-pink-200 {
+    border-color: #fed7e2;
+  }
+
+  .md\:border-pink-300 {
+    border-color: #fbb6ce;
+  }
+
+  .md\:border-pink-400 {
+    border-color: #f687b3;
+  }
+
+  .md\:border-pink-500 {
+    border-color: #ed64a6;
+  }
+
+  .md\:border-pink-600 {
+    border-color: #d53f8c;
+  }
+
+  .md\:border-pink-700 {
+    border-color: #b83280;
+  }
+
+  .md\:border-pink-800 {
+    border-color: #97266d;
+  }
+
+  .md\:border-pink-900 {
+    border-color: #702459;
+  }
+
+  .md\:hover\:border-transparent:hover {
+    border-color: transparent;
+  }
+
+  .md\:hover\:border-black:hover {
+    border-color: #000;
+  }
+
+  .md\:hover\:border-white:hover {
+    border-color: #fff;
+  }
+
+  .md\:hover\:border-gray-100:hover {
+    border-color: #f7fafc;
+  }
+
+  .md\:hover\:border-gray-200:hover {
+    border-color: #edf2f7;
+  }
+
+  .md\:hover\:border-gray-300:hover {
+    border-color: #e2e8f0;
+  }
+
+  .md\:hover\:border-gray-400:hover {
+    border-color: #cbd5e0;
+  }
+
+  .md\:hover\:border-gray-500:hover {
+    border-color: #a0aec0;
+  }
+
+  .md\:hover\:border-gray-600:hover {
+    border-color: #718096;
+  }
+
+  .md\:hover\:border-gray-700:hover {
+    border-color: #4a5568;
+  }
+
+  .md\:hover\:border-gray-800:hover {
+    border-color: #2d3748;
+  }
+
+  .md\:hover\:border-gray-900:hover {
+    border-color: #1a202c;
+  }
+
+  .md\:hover\:border-red-100:hover {
+    border-color: #fff5f5;
+  }
+
+  .md\:hover\:border-red-200:hover {
+    border-color: #fed7d7;
+  }
+
+  .md\:hover\:border-red-300:hover {
+    border-color: #feb2b2;
+  }
+
+  .md\:hover\:border-red-400:hover {
+    border-color: #fc8181;
+  }
+
+  .md\:hover\:border-red-500:hover {
+    border-color: #f56565;
+  }
+
+  .md\:hover\:border-red-600:hover {
+    border-color: #e53e3e;
+  }
+
+  .md\:hover\:border-red-700:hover {
+    border-color: #c53030;
+  }
+
+  .md\:hover\:border-red-800:hover {
+    border-color: #9b2c2c;
+  }
+
+  .md\:hover\:border-red-900:hover {
+    border-color: #742a2a;
+  }
+
+  .md\:hover\:border-orange-100:hover {
+    border-color: #fffaf0;
+  }
+
+  .md\:hover\:border-orange-200:hover {
+    border-color: #feebc8;
+  }
+
+  .md\:hover\:border-orange-300:hover {
+    border-color: #fbd38d;
+  }
+
+  .md\:hover\:border-orange-400:hover {
+    border-color: #f6ad55;
+  }
+
+  .md\:hover\:border-orange-500:hover {
+    border-color: #ed8936;
+  }
+
+  .md\:hover\:border-orange-600:hover {
+    border-color: #dd6b20;
+  }
+
+  .md\:hover\:border-orange-700:hover {
+    border-color: #c05621;
+  }
+
+  .md\:hover\:border-orange-800:hover {
+    border-color: #9c4221;
+  }
+
+  .md\:hover\:border-orange-900:hover {
+    border-color: #7b341e;
+  }
+
+  .md\:hover\:border-yellow-100:hover {
+    border-color: #fffff0;
+  }
+
+  .md\:hover\:border-yellow-200:hover {
+    border-color: #fefcbf;
+  }
+
+  .md\:hover\:border-yellow-300:hover {
+    border-color: #faf089;
+  }
+
+  .md\:hover\:border-yellow-400:hover {
+    border-color: #f6e05e;
+  }
+
+  .md\:hover\:border-yellow-500:hover {
+    border-color: #ecc94b;
+  }
+
+  .md\:hover\:border-yellow-600:hover {
+    border-color: #d69e2e;
+  }
+
+  .md\:hover\:border-yellow-700:hover {
+    border-color: #b7791f;
+  }
+
+  .md\:hover\:border-yellow-800:hover {
+    border-color: #975a16;
+  }
+
+  .md\:hover\:border-yellow-900:hover {
+    border-color: #744210;
+  }
+
+  .md\:hover\:border-green-100:hover {
+    border-color: #f0fff4;
+  }
+
+  .md\:hover\:border-green-200:hover {
+    border-color: #c6f6d5;
+  }
+
+  .md\:hover\:border-green-300:hover {
+    border-color: #9ae6b4;
+  }
+
+  .md\:hover\:border-green-400:hover {
+    border-color: #68d391;
+  }
+
+  .md\:hover\:border-green-500:hover {
+    border-color: #48bb78;
+  }
+
+  .md\:hover\:border-green-600:hover {
+    border-color: #38a169;
+  }
+
+  .md\:hover\:border-green-700:hover {
+    border-color: #2f855a;
+  }
+
+  .md\:hover\:border-green-800:hover {
+    border-color: #276749;
+  }
+
+  .md\:hover\:border-green-900:hover {
+    border-color: #22543d;
+  }
+
+  .md\:hover\:border-teal-100:hover {
+    border-color: #e6fffa;
+  }
+
+  .md\:hover\:border-teal-200:hover {
+    border-color: #b2f5ea;
+  }
+
+  .md\:hover\:border-teal-300:hover {
+    border-color: #81e6d9;
+  }
+
+  .md\:hover\:border-teal-400:hover {
+    border-color: #4fd1c5;
+  }
+
+  .md\:hover\:border-teal-500:hover {
+    border-color: #38b2ac;
+  }
+
+  .md\:hover\:border-teal-600:hover {
+    border-color: #319795;
+  }
+
+  .md\:hover\:border-teal-700:hover {
+    border-color: #2c7a7b;
+  }
+
+  .md\:hover\:border-teal-800:hover {
+    border-color: #285e61;
+  }
+
+  .md\:hover\:border-teal-900:hover {
+    border-color: #234e52;
+  }
+
+  .md\:hover\:border-blue-100:hover {
+    border-color: #ebf8ff;
+  }
+
+  .md\:hover\:border-blue-200:hover {
+    border-color: #bee3f8;
+  }
+
+  .md\:hover\:border-blue-300:hover {
+    border-color: #90cdf4;
+  }
+
+  .md\:hover\:border-blue-400:hover {
+    border-color: #63b3ed;
+  }
+
+  .md\:hover\:border-blue-500:hover {
+    border-color: #4299e1;
+  }
+
+  .md\:hover\:border-blue-600:hover {
+    border-color: #3182ce;
+  }
+
+  .md\:hover\:border-blue-700:hover {
+    border-color: #2b6cb0;
+  }
+
+  .md\:hover\:border-blue-800:hover {
+    border-color: #2c5282;
+  }
+
+  .md\:hover\:border-blue-900:hover {
+    border-color: #2a4365;
+  }
+
+  .md\:hover\:border-indigo-100:hover {
+    border-color: #ebf4ff;
+  }
+
+  .md\:hover\:border-indigo-200:hover {
+    border-color: #c3dafe;
+  }
+
+  .md\:hover\:border-indigo-300:hover {
+    border-color: #a3bffa;
+  }
+
+  .md\:hover\:border-indigo-400:hover {
+    border-color: #7f9cf5;
+  }
+
+  .md\:hover\:border-indigo-500:hover {
+    border-color: #667eea;
+  }
+
+  .md\:hover\:border-indigo-600:hover {
+    border-color: #5a67d8;
+  }
+
+  .md\:hover\:border-indigo-700:hover {
+    border-color: #4c51bf;
+  }
+
+  .md\:hover\:border-indigo-800:hover {
+    border-color: #434190;
+  }
+
+  .md\:hover\:border-indigo-900:hover {
+    border-color: #3c366b;
+  }
+
+  .md\:hover\:border-purple-100:hover {
+    border-color: #faf5ff;
+  }
+
+  .md\:hover\:border-purple-200:hover {
+    border-color: #e9d8fd;
+  }
+
+  .md\:hover\:border-purple-300:hover {
+    border-color: #d6bcfa;
+  }
+
+  .md\:hover\:border-purple-400:hover {
+    border-color: #b794f4;
+  }
+
+  .md\:hover\:border-purple-500:hover {
+    border-color: #9f7aea;
+  }
+
+  .md\:hover\:border-purple-600:hover {
+    border-color: #805ad5;
+  }
+
+  .md\:hover\:border-purple-700:hover {
+    border-color: #6b46c1;
+  }
+
+  .md\:hover\:border-purple-800:hover {
+    border-color: #553c9a;
+  }
+
+  .md\:hover\:border-purple-900:hover {
+    border-color: #44337a;
+  }
+
+  .md\:hover\:border-pink-100:hover {
+    border-color: #fff5f7;
+  }
+
+  .md\:hover\:border-pink-200:hover {
+    border-color: #fed7e2;
+  }
+
+  .md\:hover\:border-pink-300:hover {
+    border-color: #fbb6ce;
+  }
+
+  .md\:hover\:border-pink-400:hover {
+    border-color: #f687b3;
+  }
+
+  .md\:hover\:border-pink-500:hover {
+    border-color: #ed64a6;
+  }
+
+  .md\:hover\:border-pink-600:hover {
+    border-color: #d53f8c;
+  }
+
+  .md\:hover\:border-pink-700:hover {
+    border-color: #b83280;
+  }
+
+  .md\:hover\:border-pink-800:hover {
+    border-color: #97266d;
+  }
+
+  .md\:hover\:border-pink-900:hover {
+    border-color: #702459;
+  }
+
+  .md\:focus\:border-transparent:focus {
+    border-color: transparent;
+  }
+
+  .md\:focus\:border-black:focus {
+    border-color: #000;
+  }
+
+  .md\:focus\:border-white:focus {
+    border-color: #fff;
+  }
+
+  .md\:focus\:border-gray-100:focus {
+    border-color: #f7fafc;
+  }
+
+  .md\:focus\:border-gray-200:focus {
+    border-color: #edf2f7;
+  }
+
+  .md\:focus\:border-gray-300:focus {
+    border-color: #e2e8f0;
+  }
+
+  .md\:focus\:border-gray-400:focus {
+    border-color: #cbd5e0;
+  }
+
+  .md\:focus\:border-gray-500:focus {
+    border-color: #a0aec0;
+  }
+
+  .md\:focus\:border-gray-600:focus {
+    border-color: #718096;
+  }
+
+  .md\:focus\:border-gray-700:focus {
+    border-color: #4a5568;
+  }
+
+  .md\:focus\:border-gray-800:focus {
+    border-color: #2d3748;
+  }
+
+  .md\:focus\:border-gray-900:focus {
+    border-color: #1a202c;
+  }
+
+  .md\:focus\:border-red-100:focus {
+    border-color: #fff5f5;
+  }
+
+  .md\:focus\:border-red-200:focus {
+    border-color: #fed7d7;
+  }
+
+  .md\:focus\:border-red-300:focus {
+    border-color: #feb2b2;
+  }
+
+  .md\:focus\:border-red-400:focus {
+    border-color: #fc8181;
+  }
+
+  .md\:focus\:border-red-500:focus {
+    border-color: #f56565;
+  }
+
+  .md\:focus\:border-red-600:focus {
+    border-color: #e53e3e;
+  }
+
+  .md\:focus\:border-red-700:focus {
+    border-color: #c53030;
+  }
+
+  .md\:focus\:border-red-800:focus {
+    border-color: #9b2c2c;
+  }
+
+  .md\:focus\:border-red-900:focus {
+    border-color: #742a2a;
+  }
+
+  .md\:focus\:border-orange-100:focus {
+    border-color: #fffaf0;
+  }
+
+  .md\:focus\:border-orange-200:focus {
+    border-color: #feebc8;
+  }
+
+  .md\:focus\:border-orange-300:focus {
+    border-color: #fbd38d;
+  }
+
+  .md\:focus\:border-orange-400:focus {
+    border-color: #f6ad55;
+  }
+
+  .md\:focus\:border-orange-500:focus {
+    border-color: #ed8936;
+  }
+
+  .md\:focus\:border-orange-600:focus {
+    border-color: #dd6b20;
+  }
+
+  .md\:focus\:border-orange-700:focus {
+    border-color: #c05621;
+  }
+
+  .md\:focus\:border-orange-800:focus {
+    border-color: #9c4221;
+  }
+
+  .md\:focus\:border-orange-900:focus {
+    border-color: #7b341e;
+  }
+
+  .md\:focus\:border-yellow-100:focus {
+    border-color: #fffff0;
+  }
+
+  .md\:focus\:border-yellow-200:focus {
+    border-color: #fefcbf;
+  }
+
+  .md\:focus\:border-yellow-300:focus {
+    border-color: #faf089;
+  }
+
+  .md\:focus\:border-yellow-400:focus {
+    border-color: #f6e05e;
+  }
+
+  .md\:focus\:border-yellow-500:focus {
+    border-color: #ecc94b;
+  }
+
+  .md\:focus\:border-yellow-600:focus {
+    border-color: #d69e2e;
+  }
+
+  .md\:focus\:border-yellow-700:focus {
+    border-color: #b7791f;
+  }
+
+  .md\:focus\:border-yellow-800:focus {
+    border-color: #975a16;
+  }
+
+  .md\:focus\:border-yellow-900:focus {
+    border-color: #744210;
+  }
+
+  .md\:focus\:border-green-100:focus {
+    border-color: #f0fff4;
+  }
+
+  .md\:focus\:border-green-200:focus {
+    border-color: #c6f6d5;
+  }
+
+  .md\:focus\:border-green-300:focus {
+    border-color: #9ae6b4;
+  }
+
+  .md\:focus\:border-green-400:focus {
+    border-color: #68d391;
+  }
+
+  .md\:focus\:border-green-500:focus {
+    border-color: #48bb78;
+  }
+
+  .md\:focus\:border-green-600:focus {
+    border-color: #38a169;
+  }
+
+  .md\:focus\:border-green-700:focus {
+    border-color: #2f855a;
+  }
+
+  .md\:focus\:border-green-800:focus {
+    border-color: #276749;
+  }
+
+  .md\:focus\:border-green-900:focus {
+    border-color: #22543d;
+  }
+
+  .md\:focus\:border-teal-100:focus {
+    border-color: #e6fffa;
+  }
+
+  .md\:focus\:border-teal-200:focus {
+    border-color: #b2f5ea;
+  }
+
+  .md\:focus\:border-teal-300:focus {
+    border-color: #81e6d9;
+  }
+
+  .md\:focus\:border-teal-400:focus {
+    border-color: #4fd1c5;
+  }
+
+  .md\:focus\:border-teal-500:focus {
+    border-color: #38b2ac;
+  }
+
+  .md\:focus\:border-teal-600:focus {
+    border-color: #319795;
+  }
+
+  .md\:focus\:border-teal-700:focus {
+    border-color: #2c7a7b;
+  }
+
+  .md\:focus\:border-teal-800:focus {
+    border-color: #285e61;
+  }
+
+  .md\:focus\:border-teal-900:focus {
+    border-color: #234e52;
+  }
+
+  .md\:focus\:border-blue-100:focus {
+    border-color: #ebf8ff;
+  }
+
+  .md\:focus\:border-blue-200:focus {
+    border-color: #bee3f8;
+  }
+
+  .md\:focus\:border-blue-300:focus {
+    border-color: #90cdf4;
+  }
+
+  .md\:focus\:border-blue-400:focus {
+    border-color: #63b3ed;
+  }
+
+  .md\:focus\:border-blue-500:focus {
+    border-color: #4299e1;
+  }
+
+  .md\:focus\:border-blue-600:focus {
+    border-color: #3182ce;
+  }
+
+  .md\:focus\:border-blue-700:focus {
+    border-color: #2b6cb0;
+  }
+
+  .md\:focus\:border-blue-800:focus {
+    border-color: #2c5282;
+  }
+
+  .md\:focus\:border-blue-900:focus {
+    border-color: #2a4365;
+  }
+
+  .md\:focus\:border-indigo-100:focus {
+    border-color: #ebf4ff;
+  }
+
+  .md\:focus\:border-indigo-200:focus {
+    border-color: #c3dafe;
+  }
+
+  .md\:focus\:border-indigo-300:focus {
+    border-color: #a3bffa;
+  }
+
+  .md\:focus\:border-indigo-400:focus {
+    border-color: #7f9cf5;
+  }
+
+  .md\:focus\:border-indigo-500:focus {
+    border-color: #667eea;
+  }
+
+  .md\:focus\:border-indigo-600:focus {
+    border-color: #5a67d8;
+  }
+
+  .md\:focus\:border-indigo-700:focus {
+    border-color: #4c51bf;
+  }
+
+  .md\:focus\:border-indigo-800:focus {
+    border-color: #434190;
+  }
+
+  .md\:focus\:border-indigo-900:focus {
+    border-color: #3c366b;
+  }
+
+  .md\:focus\:border-purple-100:focus {
+    border-color: #faf5ff;
+  }
+
+  .md\:focus\:border-purple-200:focus {
+    border-color: #e9d8fd;
+  }
+
+  .md\:focus\:border-purple-300:focus {
+    border-color: #d6bcfa;
+  }
+
+  .md\:focus\:border-purple-400:focus {
+    border-color: #b794f4;
+  }
+
+  .md\:focus\:border-purple-500:focus {
+    border-color: #9f7aea;
+  }
+
+  .md\:focus\:border-purple-600:focus {
+    border-color: #805ad5;
+  }
+
+  .md\:focus\:border-purple-700:focus {
+    border-color: #6b46c1;
+  }
+
+  .md\:focus\:border-purple-800:focus {
+    border-color: #553c9a;
+  }
+
+  .md\:focus\:border-purple-900:focus {
+    border-color: #44337a;
+  }
+
+  .md\:focus\:border-pink-100:focus {
+    border-color: #fff5f7;
+  }
+
+  .md\:focus\:border-pink-200:focus {
+    border-color: #fed7e2;
+  }
+
+  .md\:focus\:border-pink-300:focus {
+    border-color: #fbb6ce;
+  }
+
+  .md\:focus\:border-pink-400:focus {
+    border-color: #f687b3;
+  }
+
+  .md\:focus\:border-pink-500:focus {
+    border-color: #ed64a6;
+  }
+
+  .md\:focus\:border-pink-600:focus {
+    border-color: #d53f8c;
+  }
+
+  .md\:focus\:border-pink-700:focus {
+    border-color: #b83280;
+  }
+
+  .md\:focus\:border-pink-800:focus {
+    border-color: #97266d;
+  }
+
+  .md\:focus\:border-pink-900:focus {
+    border-color: #702459;
+  }
+
+  .md\:rounded-none {
+    border-radius: 0;
+  }
+
+  .md\:rounded-sm {
+    border-radius: 0.125rem;
+  }
+
+  .md\:rounded {
+    border-radius: 0.25rem;
+  }
+
+  .md\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .md\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .md\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .md\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .md\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+
+  .md\:rounded-r-sm {
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .md\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .md\:rounded-l-sm {
+    border-top-left-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .md\:rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  .md\:rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .md\:rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .md\:rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .md\:rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .md\:rounded-r-lg {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .md\:rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .md\:rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .md\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .md\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .md\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .md\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .md\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .md\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .md\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .md\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-tl-sm {
+    border-top-left-radius: 0.125rem;
+  }
+
+  .md\:rounded-tr-sm {
+    border-top-right-radius: 0.125rem;
+  }
+
+  .md\:rounded-br-sm {
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .md\:rounded-bl-sm {
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .md\:rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+
+  .md\:rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+
+  .md\:rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .md\:rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .md\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem;
+  }
+
+  .md\:rounded-tr-lg {
+    border-top-right-radius: 0.5rem;
+  }
+
+  .md\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .md\:rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .md\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .md\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .md\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .md\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
+  }
+
+  .md\:border-solid {
+    border-style: solid;
+  }
+
+  .md\:border-dashed {
+    border-style: dashed;
+  }
+
+  .md\:border-dotted {
+    border-style: dotted;
+  }
+
+  .md\:border-double {
+    border-style: double;
+  }
+
+  .md\:border-none {
+    border-style: none;
+  }
+
+  .md\:border-0 {
+    border-width: 0;
+  }
+
+  .md\:border-2 {
+    border-width: 2px;
+  }
+
+  .md\:border-4 {
+    border-width: 4px;
+  }
+
+  .md\:border-8 {
+    border-width: 8px;
+  }
+
+  .md\:border {
+    border-width: 1px;
+  }
+
+  .md\:border-t-0 {
+    border-top-width: 0;
+  }
+
+  .md\:border-r-0 {
+    border-right-width: 0;
+  }
+
+  .md\:border-b-0 {
+    border-bottom-width: 0;
+  }
+
+  .md\:border-l-0 {
+    border-left-width: 0;
+  }
+
+  .md\:border-t-2 {
+    border-top-width: 2px;
+  }
+
+  .md\:border-r-2 {
+    border-right-width: 2px;
+  }
+
+  .md\:border-b-2 {
+    border-bottom-width: 2px;
+  }
+
+  .md\:border-l-2 {
+    border-left-width: 2px;
+  }
+
+  .md\:border-t-4 {
+    border-top-width: 4px;
+  }
+
+  .md\:border-r-4 {
+    border-right-width: 4px;
+  }
+
+  .md\:border-b-4 {
+    border-bottom-width: 4px;
+  }
+
+  .md\:border-l-4 {
+    border-left-width: 4px;
+  }
+
+  .md\:border-t-8 {
+    border-top-width: 8px;
+  }
+
+  .md\:border-r-8 {
+    border-right-width: 8px;
+  }
+
+  .md\:border-b-8 {
+    border-bottom-width: 8px;
+  }
+
+  .md\:border-l-8 {
+    border-left-width: 8px;
+  }
+
+  .md\:border-t {
+    border-top-width: 1px;
+  }
+
+  .md\:border-r {
+    border-right-width: 1px;
+  }
+
+  .md\:border-b {
+    border-bottom-width: 1px;
+  }
+
+  .md\:border-l {
+    border-left-width: 1px;
+  }
+
+  .md\:cursor-auto {
+    cursor: auto;
+  }
+
+  .md\:cursor-default {
+    cursor: default;
+  }
+
+  .md\:cursor-pointer {
+    cursor: pointer;
+  }
+
+  .md\:cursor-wait {
+    cursor: wait;
+  }
+
+  .md\:cursor-text {
+    cursor: text;
+  }
+
+  .md\:cursor-move {
+    cursor: move;
+  }
+
+  .md\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:inline-block {
+    display: inline-block;
+  }
+
+  .md\:inline {
+    display: inline;
+  }
+
+  .md\:flex {
+    display: -webkit-box;
+    display: flex;
+  }
+
+  .md\:inline-flex {
+    display: -webkit-inline-box;
+    display: inline-flex;
+  }
+
+  .md\:table {
+    display: table;
+  }
+
+  .md\:table-row {
+    display: table-row;
+  }
+
+  .md\:table-cell {
+    display: table-cell;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:flex-row {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+  }
+
+  .md\:flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+            flex-direction: row-reverse;
+  }
+
+  .md\:flex-col {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+  }
+
+  .md\:flex-col-reverse {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+            flex-direction: column-reverse;
+  }
+
+  .md\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .md\:flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .md\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  .md\:items-start {
+    -webkit-box-align: start;
+            align-items: flex-start;
+  }
+
+  .md\:items-end {
+    -webkit-box-align: end;
+            align-items: flex-end;
+  }
+
+  .md\:items-center {
+    -webkit-box-align: center;
+            align-items: center;
+  }
+
+  .md\:items-baseline {
+    -webkit-box-align: baseline;
+            align-items: baseline;
+  }
+
+  .md\:items-stretch {
+    -webkit-box-align: stretch;
+            align-items: stretch;
+  }
+
+  .md\:self-auto {
+    align-self: auto;
+  }
+
+  .md\:self-start {
+    align-self: flex-start;
+  }
+
+  .md\:self-end {
+    align-self: flex-end;
+  }
+
+  .md\:self-center {
+    align-self: center;
+  }
+
+  .md\:self-stretch {
+    align-self: stretch;
+  }
+
+  .md\:justify-start {
+    -webkit-box-pack: start;
+            justify-content: flex-start;
+  }
+
+  .md\:justify-end {
+    -webkit-box-pack: end;
+            justify-content: flex-end;
+  }
+
+  .md\:justify-center {
+    -webkit-box-pack: center;
+            justify-content: center;
+  }
+
+  .md\:justify-between {
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+  }
+
+  .md\:justify-around {
+    justify-content: space-around;
+  }
+
+  .md\:content-center {
+    align-content: center;
+  }
+
+  .md\:content-start {
+    align-content: flex-start;
+  }
+
+  .md\:content-end {
+    align-content: flex-end;
+  }
+
+  .md\:content-between {
+    align-content: space-between;
+  }
+
+  .md\:content-around {
+    align-content: space-around;
+  }
+
+  .md\:flex-1 {
+    -webkit-box-flex: 1;
+            flex: 1 1 0%;
+  }
+
+  .md\:flex-auto {
+    -webkit-box-flex: 1;
+            flex: 1 1 auto;
+  }
+
+  .md\:flex-initial {
+    -webkit-box-flex: 0;
+            flex: 0 1 auto;
+  }
+
+  .md\:flex-none {
+    -webkit-box-flex: 0;
+            flex: none;
+  }
+
+  .md\:flex-grow-0 {
+    -webkit-box-flex: 0;
+            flex-grow: 0;
+  }
+
+  .md\:flex-grow {
+    -webkit-box-flex: 1;
+            flex-grow: 1;
+  }
+
+  .md\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .md\:flex-shrink {
+    flex-shrink: 1;
+  }
+
+  .md\:order-1 {
+    -webkit-box-ordinal-group: 2;
+            order: 1;
+  }
+
+  .md\:order-2 {
+    -webkit-box-ordinal-group: 3;
+            order: 2;
+  }
+
+  .md\:order-3 {
+    -webkit-box-ordinal-group: 4;
+            order: 3;
+  }
+
+  .md\:order-4 {
+    -webkit-box-ordinal-group: 5;
+            order: 4;
+  }
+
+  .md\:order-5 {
+    -webkit-box-ordinal-group: 6;
+            order: 5;
+  }
+
+  .md\:order-6 {
+    -webkit-box-ordinal-group: 7;
+            order: 6;
+  }
+
+  .md\:order-7 {
+    -webkit-box-ordinal-group: 8;
+            order: 7;
+  }
+
+  .md\:order-8 {
+    -webkit-box-ordinal-group: 9;
+            order: 8;
+  }
+
+  .md\:order-9 {
+    -webkit-box-ordinal-group: 10;
+            order: 9;
+  }
+
+  .md\:order-10 {
+    -webkit-box-ordinal-group: 11;
+            order: 10;
+  }
+
+  .md\:order-11 {
+    -webkit-box-ordinal-group: 12;
+            order: 11;
+  }
+
+  .md\:order-12 {
+    -webkit-box-ordinal-group: 13;
+            order: 12;
+  }
+
+  .md\:order-first {
+    -webkit-box-ordinal-group: -9998;
+            order: -9999;
+  }
+
+  .md\:order-last {
+    -webkit-box-ordinal-group: 10000;
+            order: 9999;
+  }
+
+  .md\:order-none {
+    -webkit-box-ordinal-group: 1;
+            order: 0;
+  }
+
+  .md\:float-right {
+    float: right;
+  }
+
+  .md\:float-left {
+    float: left;
+  }
+
+  .md\:float-none {
+    float: none;
+  }
+
+  .md\:clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .md\:font-sans {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .md\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .md\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .md\:font-hairline {
+    font-weight: 100;
+  }
+
+  .md\:font-thin {
+    font-weight: 200;
+  }
+
+  .md\:font-light {
+    font-weight: 300;
+  }
+
+  .md\:font-normal {
+    font-weight: 400;
+  }
+
+  .md\:font-medium {
+    font-weight: 500;
+  }
+
+  .md\:font-semibold {
+    font-weight: 600;
+  }
+
+  .md\:font-bold {
+    font-weight: 700;
+  }
+
+  .md\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .md\:font-black {
+    font-weight: 900;
+  }
+
+  .md\:hover\:font-hairline:hover {
+    font-weight: 100;
+  }
+
+  .md\:hover\:font-thin:hover {
+    font-weight: 200;
+  }
+
+  .md\:hover\:font-light:hover {
+    font-weight: 300;
+  }
+
+  .md\:hover\:font-normal:hover {
+    font-weight: 400;
+  }
+
+  .md\:hover\:font-medium:hover {
+    font-weight: 500;
+  }
+
+  .md\:hover\:font-semibold:hover {
+    font-weight: 600;
+  }
+
+  .md\:hover\:font-bold:hover {
+    font-weight: 700;
+  }
+
+  .md\:hover\:font-extrabold:hover {
+    font-weight: 800;
+  }
+
+  .md\:hover\:font-black:hover {
+    font-weight: 900;
+  }
+
+  .md\:focus\:font-hairline:focus {
+    font-weight: 100;
+  }
+
+  .md\:focus\:font-thin:focus {
+    font-weight: 200;
+  }
+
+  .md\:focus\:font-light:focus {
+    font-weight: 300;
+  }
+
+  .md\:focus\:font-normal:focus {
+    font-weight: 400;
+  }
+
+  .md\:focus\:font-medium:focus {
+    font-weight: 500;
+  }
+
+  .md\:focus\:font-semibold:focus {
+    font-weight: 600;
+  }
+
+  .md\:focus\:font-bold:focus {
+    font-weight: 700;
+  }
+
+  .md\:focus\:font-extrabold:focus {
+    font-weight: 800;
+  }
+
+  .md\:focus\:font-black:focus {
+    font-weight: 900;
+  }
+
+  .md\:h-0 {
+    height: 0;
+  }
+
+  .md\:h-1 {
+    height: 0.25rem;
+  }
+
+  .md\:h-2 {
+    height: 0.5rem;
+  }
+
+  .md\:h-3 {
+    height: 0.75rem;
+  }
+
+  .md\:h-4 {
+    height: 1rem;
+  }
+
+  .md\:h-5 {
+    height: 1.25rem;
+  }
+
+  .md\:h-6 {
+    height: 1.5rem;
+  }
+
+  .md\:h-8 {
+    height: 2rem;
+  }
+
+  .md\:h-10 {
+    height: 2.5rem;
+  }
+
+  .md\:h-12 {
+    height: 3rem;
+  }
+
+  .md\:h-16 {
+    height: 4rem;
+  }
+
+  .md\:h-20 {
+    height: 5rem;
+  }
+
+  .md\:h-24 {
+    height: 6rem;
+  }
+
+  .md\:h-32 {
+    height: 8rem;
+  }
+
+  .md\:h-40 {
+    height: 10rem;
+  }
+
+  .md\:h-48 {
+    height: 12rem;
+  }
+
+  .md\:h-56 {
+    height: 14rem;
+  }
+
+  .md\:h-64 {
+    height: 16rem;
+  }
+
+  .md\:h-auto {
+    height: auto;
+  }
+
+  .md\:h-px {
+    height: 1px;
+  }
+
+  .md\:h-full {
+    height: 100%;
+  }
+
+  .md\:h-screen {
+    height: 100vh;
+  }
+
+  .md\:leading-none {
+    line-height: 1;
+  }
+
+  .md\:leading-tight {
+    line-height: 1.25;
+  }
+
+  .md\:leading-snug {
+    line-height: 1.375;
+  }
+
+  .md\:leading-normal {
+    line-height: 1.5;
+  }
+
+  .md\:leading-relaxed {
+    line-height: 1.625;
+  }
+
+  .md\:leading-loose {
+    line-height: 2;
+  }
+
+  .md\:list-inside {
+    list-style-position: inside;
+  }
+
+  .md\:list-outside {
+    list-style-position: outside;
+  }
+
+  .md\:list-none {
+    list-style-type: none;
+  }
+
+  .md\:list-disc {
+    list-style-type: disc;
+  }
+
+  .md\:list-decimal {
+    list-style-type: decimal;
+  }
+
+  .md\:m-0 {
+    margin: 0;
+  }
+
+  .md\:m-1 {
+    margin: 0.25rem;
+  }
+
+  .md\:m-2 {
+    margin: 0.5rem;
+  }
+
+  .md\:m-3 {
+    margin: 0.75rem;
+  }
+
+  .md\:m-4 {
+    margin: 1rem;
+  }
+
+  .md\:m-5 {
+    margin: 1.25rem;
+  }
+
+  .md\:m-6 {
+    margin: 1.5rem;
+  }
+
+  .md\:m-8 {
+    margin: 2rem;
+  }
+
+  .md\:m-10 {
+    margin: 2.5rem;
+  }
+
+  .md\:m-12 {
+    margin: 3rem;
+  }
+
+  .md\:m-16 {
+    margin: 4rem;
+  }
+
+  .md\:m-20 {
+    margin: 5rem;
+  }
+
+  .md\:m-24 {
+    margin: 6rem;
+  }
+
+  .md\:m-32 {
+    margin: 8rem;
+  }
+
+  .md\:m-40 {
+    margin: 10rem;
+  }
+
+  .md\:m-48 {
+    margin: 12rem;
+  }
+
+  .md\:m-56 {
+    margin: 14rem;
+  }
+
+  .md\:m-64 {
+    margin: 16rem;
+  }
+
+  .md\:m-auto {
+    margin: auto;
+  }
+
+  .md\:m-px {
+    margin: 1px;
+  }
+
+  .md\:-m-1 {
+    margin: -0.25rem;
+  }
+
+  .md\:-m-2 {
+    margin: -0.5rem;
+  }
+
+  .md\:-m-3 {
+    margin: -0.75rem;
+  }
+
+  .md\:-m-4 {
+    margin: -1rem;
+  }
+
+  .md\:-m-5 {
+    margin: -1.25rem;
+  }
+
+  .md\:-m-6 {
+    margin: -1.5rem;
+  }
+
+  .md\:-m-8 {
+    margin: -2rem;
+  }
+
+  .md\:-m-10 {
+    margin: -2.5rem;
+  }
+
+  .md\:-m-12 {
+    margin: -3rem;
+  }
+
+  .md\:-m-16 {
+    margin: -4rem;
+  }
+
+  .md\:-m-20 {
+    margin: -5rem;
+  }
+
+  .md\:-m-24 {
+    margin: -6rem;
+  }
+
+  .md\:-m-32 {
+    margin: -8rem;
+  }
+
+  .md\:-m-40 {
+    margin: -10rem;
+  }
+
+  .md\:-m-48 {
+    margin: -12rem;
+  }
+
+  .md\:-m-56 {
+    margin: -14rem;
+  }
+
+  .md\:-m-64 {
+    margin: -16rem;
+  }
+
+  .md\:-m-px {
+    margin: -1px;
+  }
+
+  .md\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .md\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .md\:my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .md\:mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .md\:my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .md\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .md\:my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .md\:mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+
+  .md\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .md\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .md\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .md\:mx-5 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+
+  .md\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .md\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .md\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .md\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .md\:my-10 {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .md\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
+  .md\:my-12 {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .md\:mx-12 {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  .md\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
+  .md\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+
+  .md\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  .md\:mx-20 {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+
+  .md\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
+  .md\:mx-24 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
+  .md\:my-32 {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+  }
+
+  .md\:mx-32 {
+    margin-left: 8rem;
+    margin-right: 8rem;
+  }
+
+  .md\:my-40 {
+    margin-top: 10rem;
+    margin-bottom: 10rem;
+  }
+
+  .md\:mx-40 {
+    margin-left: 10rem;
+    margin-right: 10rem;
+  }
+
+  .md\:my-48 {
+    margin-top: 12rem;
+    margin-bottom: 12rem;
+  }
+
+  .md\:mx-48 {
+    margin-left: 12rem;
+    margin-right: 12rem;
+  }
+
+  .md\:my-56 {
+    margin-top: 14rem;
+    margin-bottom: 14rem;
+  }
+
+  .md\:mx-56 {
+    margin-left: 14rem;
+    margin-right: 14rem;
+  }
+
+  .md\:my-64 {
+    margin-top: 16rem;
+    margin-bottom: 16rem;
+  }
+
+  .md\:mx-64 {
+    margin-left: 16rem;
+    margin-right: 16rem;
+  }
+
+  .md\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .md\:my-px {
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  .md\:mx-px {
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+
+  .md\:-my-1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .md\:-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+  .md\:-my-2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+
+  .md\:-mx-2 {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .md\:-my-3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+
+  .md\:-mx-3 {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+
+  .md\:-my-4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+
+  .md\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  .md\:-my-5 {
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
+  }
+
+  .md\:-mx-5 {
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+  }
+
+  .md\:-my-6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+
+  .md\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .md\:-my-8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+
+  .md\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .md\:-my-10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+
+  .md\:-mx-10 {
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+  }
+
+  .md\:-my-12 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+
+  .md\:-mx-12 {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+
+  .md\:-my-16 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+
+  .md\:-mx-16 {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+
+  .md\:-my-20 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+
+  .md\:-mx-20 {
+    margin-left: -5rem;
+    margin-right: -5rem;
+  }
+
+  .md\:-my-24 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+
+  .md\:-mx-24 {
+    margin-left: -6rem;
+    margin-right: -6rem;
+  }
+
+  .md\:-my-32 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+
+  .md\:-mx-32 {
+    margin-left: -8rem;
+    margin-right: -8rem;
+  }
+
+  .md\:-my-40 {
+    margin-top: -10rem;
+    margin-bottom: -10rem;
+  }
+
+  .md\:-mx-40 {
+    margin-left: -10rem;
+    margin-right: -10rem;
+  }
+
+  .md\:-my-48 {
+    margin-top: -12rem;
+    margin-bottom: -12rem;
+  }
+
+  .md\:-mx-48 {
+    margin-left: -12rem;
+    margin-right: -12rem;
+  }
+
+  .md\:-my-56 {
+    margin-top: -14rem;
+    margin-bottom: -14rem;
+  }
+
+  .md\:-mx-56 {
+    margin-left: -14rem;
+    margin-right: -14rem;
+  }
+
+  .md\:-my-64 {
+    margin-top: -16rem;
+    margin-bottom: -16rem;
+  }
+
+  .md\:-mx-64 {
+    margin-left: -16rem;
+    margin-right: -16rem;
+  }
+
+  .md\:-my-px {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  .md\:-mx-px {
+    margin-left: -1px;
+    margin-right: -1px;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0;
+  }
+
+  .md\:mr-0 {
+    margin-right: 0;
+  }
+
+  .md\:mb-0 {
+    margin-bottom: 0;
+  }
+
+  .md\:ml-0 {
+    margin-left: 0;
+  }
+
+  .md\:mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .md\:mr-1 {
+    margin-right: 0.25rem;
+  }
+
+  .md\:mb-1 {
+    margin-bottom: 0.25rem;
+  }
+
+  .md\:ml-1 {
+    margin-left: 0.25rem;
+  }
+
+  .md\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .md\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
+  .md\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .md\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
+  .md\:mt-3 {
+    margin-top: 0.75rem;
+  }
+
+  .md\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
+  .md\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
+  .md\:ml-3 {
+    margin-left: 0.75rem;
+  }
+
+  .md\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .md\:mr-4 {
+    margin-right: 1rem;
+  }
+
+  .md\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .md\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .md\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .md\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .md\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
+  .md\:ml-5 {
+    margin-left: 1.25rem;
+  }
+
+  .md\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .md\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
+  .md\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .md\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .md\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .md\:mr-8 {
+    margin-right: 2rem;
+  }
+
+  .md\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .md\:ml-8 {
+    margin-left: 2rem;
+  }
+
+  .md\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .md\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .md\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .md\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .md\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .md\:mr-12 {
+    margin-right: 3rem;
+  }
+
+  .md\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
+  .md\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .md\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .md\:mr-16 {
+    margin-right: 4rem;
+  }
+
+  .md\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .md\:ml-16 {
+    margin-left: 4rem;
+  }
+
+  .md\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .md\:mr-20 {
+    margin-right: 5rem;
+  }
+
+  .md\:mb-20 {
+    margin-bottom: 5rem;
+  }
+
+  .md\:ml-20 {
+    margin-left: 5rem;
+  }
+
+  .md\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .md\:mr-24 {
+    margin-right: 6rem;
+  }
+
+  .md\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .md\:ml-24 {
+    margin-left: 6rem;
+  }
+
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .md\:mr-32 {
+    margin-right: 8rem;
+  }
+
+  .md\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
+  .md\:ml-32 {
+    margin-left: 8rem;
+  }
+
+  .md\:mt-40 {
+    margin-top: 10rem;
+  }
+
+  .md\:mr-40 {
+    margin-right: 10rem;
+  }
+
+  .md\:mb-40 {
+    margin-bottom: 10rem;
+  }
+
+  .md\:ml-40 {
+    margin-left: 10rem;
+  }
+
+  .md\:mt-48 {
+    margin-top: 12rem;
+  }
+
+  .md\:mr-48 {
+    margin-right: 12rem;
+  }
+
+  .md\:mb-48 {
+    margin-bottom: 12rem;
+  }
+
+  .md\:ml-48 {
+    margin-left: 12rem;
+  }
+
+  .md\:mt-56 {
+    margin-top: 14rem;
+  }
+
+  .md\:mr-56 {
+    margin-right: 14rem;
+  }
+
+  .md\:mb-56 {
+    margin-bottom: 14rem;
+  }
+
+  .md\:ml-56 {
+    margin-left: 14rem;
+  }
+
+  .md\:mt-64 {
+    margin-top: 16rem;
+  }
+
+  .md\:mr-64 {
+    margin-right: 16rem;
+  }
+
+  .md\:mb-64 {
+    margin-bottom: 16rem;
+  }
+
+  .md\:ml-64 {
+    margin-left: 16rem;
+  }
+
+  .md\:mt-auto {
+    margin-top: auto;
+  }
+
+  .md\:mr-auto {
+    margin-right: auto;
+  }
+
+  .md\:mb-auto {
+    margin-bottom: auto;
+  }
+
+  .md\:ml-auto {
+    margin-left: auto;
+  }
+
+  .md\:mt-px {
+    margin-top: 1px;
+  }
+
+  .md\:mr-px {
+    margin-right: 1px;
+  }
+
+  .md\:mb-px {
+    margin-bottom: 1px;
+  }
+
+  .md\:ml-px {
+    margin-left: 1px;
+  }
+
+  .md\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .md\:-mr-1 {
+    margin-right: -0.25rem;
+  }
+
+  .md\:-mb-1 {
+    margin-bottom: -0.25rem;
+  }
+
+  .md\:-ml-1 {
+    margin-left: -0.25rem;
+  }
+
+  .md\:-mt-2 {
+    margin-top: -0.5rem;
+  }
+
+  .md\:-mr-2 {
+    margin-right: -0.5rem;
+  }
+
+  .md\:-mb-2 {
+    margin-bottom: -0.5rem;
+  }
+
+  .md\:-ml-2 {
+    margin-left: -0.5rem;
+  }
+
+  .md\:-mt-3 {
+    margin-top: -0.75rem;
+  }
+
+  .md\:-mr-3 {
+    margin-right: -0.75rem;
+  }
+
+  .md\:-mb-3 {
+    margin-bottom: -0.75rem;
+  }
+
+  .md\:-ml-3 {
+    margin-left: -0.75rem;
+  }
+
+  .md\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .md\:-mr-4 {
+    margin-right: -1rem;
+  }
+
+  .md\:-mb-4 {
+    margin-bottom: -1rem;
+  }
+
+  .md\:-ml-4 {
+    margin-left: -1rem;
+  }
+
+  .md\:-mt-5 {
+    margin-top: -1.25rem;
+  }
+
+  .md\:-mr-5 {
+    margin-right: -1.25rem;
+  }
+
+  .md\:-mb-5 {
+    margin-bottom: -1.25rem;
+  }
+
+  .md\:-ml-5 {
+    margin-left: -1.25rem;
+  }
+
+  .md\:-mt-6 {
+    margin-top: -1.5rem;
+  }
+
+  .md\:-mr-6 {
+    margin-right: -1.5rem;
+  }
+
+  .md\:-mb-6 {
+    margin-bottom: -1.5rem;
+  }
+
+  .md\:-ml-6 {
+    margin-left: -1.5rem;
+  }
+
+  .md\:-mt-8 {
+    margin-top: -2rem;
+  }
+
+  .md\:-mr-8 {
+    margin-right: -2rem;
+  }
+
+  .md\:-mb-8 {
+    margin-bottom: -2rem;
+  }
+
+  .md\:-ml-8 {
+    margin-left: -2rem;
+  }
+
+  .md\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .md\:-mr-10 {
+    margin-right: -2.5rem;
+  }
+
+  .md\:-mb-10 {
+    margin-bottom: -2.5rem;
+  }
+
+  .md\:-ml-10 {
+    margin-left: -2.5rem;
+  }
+
+  .md\:-mt-12 {
+    margin-top: -3rem;
+  }
+
+  .md\:-mr-12 {
+    margin-right: -3rem;
+  }
+
+  .md\:-mb-12 {
+    margin-bottom: -3rem;
+  }
+
+  .md\:-ml-12 {
+    margin-left: -3rem;
+  }
+
+  .md\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .md\:-mr-16 {
+    margin-right: -4rem;
+  }
+
+  .md\:-mb-16 {
+    margin-bottom: -4rem;
+  }
+
+  .md\:-ml-16 {
+    margin-left: -4rem;
+  }
+
+  .md\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .md\:-mr-20 {
+    margin-right: -5rem;
+  }
+
+  .md\:-mb-20 {
+    margin-bottom: -5rem;
+  }
+
+  .md\:-ml-20 {
+    margin-left: -5rem;
+  }
+
+  .md\:-mt-24 {
+    margin-top: -6rem;
+  }
+
+  .md\:-mr-24 {
+    margin-right: -6rem;
+  }
+
+  .md\:-mb-24 {
+    margin-bottom: -6rem;
+  }
+
+  .md\:-ml-24 {
+    margin-left: -6rem;
+  }
+
+  .md\:-mt-32 {
+    margin-top: -8rem;
+  }
+
+  .md\:-mr-32 {
+    margin-right: -8rem;
+  }
+
+  .md\:-mb-32 {
+    margin-bottom: -8rem;
+  }
+
+  .md\:-ml-32 {
+    margin-left: -8rem;
+  }
+
+  .md\:-mt-40 {
+    margin-top: -10rem;
+  }
+
+  .md\:-mr-40 {
+    margin-right: -10rem;
+  }
+
+  .md\:-mb-40 {
+    margin-bottom: -10rem;
+  }
+
+  .md\:-ml-40 {
+    margin-left: -10rem;
+  }
+
+  .md\:-mt-48 {
+    margin-top: -12rem;
+  }
+
+  .md\:-mr-48 {
+    margin-right: -12rem;
+  }
+
+  .md\:-mb-48 {
+    margin-bottom: -12rem;
+  }
+
+  .md\:-ml-48 {
+    margin-left: -12rem;
+  }
+
+  .md\:-mt-56 {
+    margin-top: -14rem;
+  }
+
+  .md\:-mr-56 {
+    margin-right: -14rem;
+  }
+
+  .md\:-mb-56 {
+    margin-bottom: -14rem;
+  }
+
+  .md\:-ml-56 {
+    margin-left: -14rem;
+  }
+
+  .md\:-mt-64 {
+    margin-top: -16rem;
+  }
+
+  .md\:-mr-64 {
+    margin-right: -16rem;
+  }
+
+  .md\:-mb-64 {
+    margin-bottom: -16rem;
+  }
+
+  .md\:-ml-64 {
+    margin-left: -16rem;
+  }
+
+  .md\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .md\:-mr-px {
+    margin-right: -1px;
+  }
+
+  .md\:-mb-px {
+    margin-bottom: -1px;
+  }
+
+  .md\:-ml-px {
+    margin-left: -1px;
+  }
+
+  .md\:max-h-full {
+    max-height: 100%;
+  }
+
+  .md\:max-h-screen {
+    max-height: 100vh;
+  }
+
+  .md\:max-w-xs {
+    max-width: 20rem;
+  }
+
+  .md\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .md\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .md\:max-w-lg {
+    max-width: 32rem;
+  }
+
+  .md\:max-w-xl {
+    max-width: 36rem;
+  }
+
+  .md\:max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .md\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .md\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .md\:max-w-5xl {
+    max-width: 64rem;
+  }
+
+  .md\:max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .md\:max-w-full {
+    max-width: 100%;
+  }
+
+  .md\:min-h-0 {
+    min-height: 0;
+  }
+
+  .md\:min-h-full {
+    min-height: 100%;
+  }
+
+  .md\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .md\:min-w-0 {
+    min-width: 0;
+  }
+
+  .md\:min-w-full {
+    min-width: 100%;
+  }
+
+  .md\:object-contain {
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .md\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+  .md\:object-fill {
+    -o-object-fit: fill;
+       object-fit: fill;
+  }
+
+  .md\:object-none {
+    -o-object-fit: none;
+       object-fit: none;
+  }
+
+  .md\:object-scale-down {
+    -o-object-fit: scale-down;
+       object-fit: scale-down;
+  }
+
+  .md\:object-bottom {
+    -o-object-position: bottom;
+       object-position: bottom;
+  }
+
+  .md\:object-center {
+    -o-object-position: center;
+       object-position: center;
+  }
+
+  .md\:object-left {
+    -o-object-position: left;
+       object-position: left;
+  }
+
+  .md\:object-left-bottom {
+    -o-object-position: left bottom;
+       object-position: left bottom;
+  }
+
+  .md\:object-left-top {
+    -o-object-position: left top;
+       object-position: left top;
+  }
+
+  .md\:object-right {
+    -o-object-position: right;
+       object-position: right;
+  }
+
+  .md\:object-right-bottom {
+    -o-object-position: right bottom;
+       object-position: right bottom;
+  }
+
+  .md\:object-right-top {
+    -o-object-position: right top;
+       object-position: right top;
+  }
+
+  .md\:object-top {
+    -o-object-position: top;
+       object-position: top;
+  }
+
+  .md\:opacity-0 {
+    opacity: 0;
+  }
+
+  .md\:opacity-25 {
+    opacity: 0.25;
+  }
+
+  .md\:opacity-50 {
+    opacity: 0.5;
+  }
+
+  .md\:opacity-75 {
+    opacity: 0.75;
+  }
+
+  .md\:opacity-100 {
+    opacity: 1;
+  }
+
+  .md\:hover\:opacity-0:hover {
+    opacity: 0;
+  }
+
+  .md\:hover\:opacity-25:hover {
+    opacity: 0.25;
+  }
+
+  .md\:hover\:opacity-50:hover {
+    opacity: 0.5;
+  }
+
+  .md\:hover\:opacity-75:hover {
+    opacity: 0.75;
+  }
+
+  .md\:hover\:opacity-100:hover {
+    opacity: 1;
+  }
+
+  .md\:focus\:opacity-0:focus {
+    opacity: 0;
+  }
+
+  .md\:focus\:opacity-25:focus {
+    opacity: 0.25;
+  }
+
+  .md\:focus\:opacity-50:focus {
+    opacity: 0.5;
+  }
+
+  .md\:focus\:opacity-75:focus {
+    opacity: 0.75;
+  }
+
+  .md\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
+
+  .md\:outline-none {
+    outline: 0;
+  }
+
+  .md\:focus\:outline-none:focus {
+    outline: 0;
+  }
+
+  .md\:overflow-auto {
+    overflow: auto;
+  }
+
+  .md\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .md\:overflow-visible {
+    overflow: visible;
+  }
+
+  .md\:overflow-scroll {
+    overflow: scroll;
+  }
+
+  .md\:overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .md\:overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .md\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .md\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .md\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .md\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
+  .md\:overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .md\:overflow-y-scroll {
+    overflow-y: scroll;
+  }
+
+  .md\:scrolling-touch {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .md\:scrolling-auto {
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .md\:p-0 {
+    padding: 0;
+  }
+
+  .md\:p-1 {
+    padding: 0.25rem;
+  }
+
+  .md\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .md\:p-3 {
+    padding: 0.75rem;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
+  .md\:p-5 {
+    padding: 1.25rem;
+  }
+
+  .md\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
+  .md\:p-10 {
+    padding: 2.5rem;
+  }
+
+  .md\:p-12 {
+    padding: 3rem;
+  }
+
+  .md\:p-16 {
+    padding: 4rem;
+  }
+
+  .md\:p-20 {
+    padding: 5rem;
+  }
+
+  .md\:p-24 {
+    padding: 6rem;
+  }
+
+  .md\:p-32 {
+    padding: 8rem;
+  }
+
+  .md\:p-40 {
+    padding: 10rem;
+  }
+
+  .md\:p-48 {
+    padding: 12rem;
+  }
+
+  .md\:p-56 {
+    padding: 14rem;
+  }
+
+  .md\:p-64 {
+    padding: 16rem;
+  }
+
+  .md\:p-px {
+    padding: 1px;
+  }
+
+  .md\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .md\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .md\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .md\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .md\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .md\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .md\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .md\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .md\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .md\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .md\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .md\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .md\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .md\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .md\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .md\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .md\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
+  .md\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .md\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .md\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
+  .md\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .md\:px-32 {
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+
+  .md\:py-40 {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+  }
+
+  .md\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
+  .md\:py-48 {
+    padding-top: 12rem;
+    padding-bottom: 12rem;
+  }
+
+  .md\:px-48 {
+    padding-left: 12rem;
+    padding-right: 12rem;
+  }
+
+  .md\:py-56 {
+    padding-top: 14rem;
+    padding-bottom: 14rem;
+  }
+
+  .md\:px-56 {
+    padding-left: 14rem;
+    padding-right: 14rem;
+  }
+
+  .md\:py-64 {
+    padding-top: 16rem;
+    padding-bottom: 16rem;
+  }
+
+  .md\:px-64 {
+    padding-left: 16rem;
+    padding-right: 16rem;
+  }
+
+  .md\:py-px {
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .md\:px-px {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .md\:pt-0 {
+    padding-top: 0;
+  }
+
+  .md\:pr-0 {
+    padding-right: 0;
+  }
+
+  .md\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .md\:pl-0 {
+    padding-left: 0;
+  }
+
+  .md\:pt-1 {
+    padding-top: 0.25rem;
+  }
+
+  .md\:pr-1 {
+    padding-right: 0.25rem;
+  }
+
+  .md\:pb-1 {
+    padding-bottom: 0.25rem;
+  }
+
+  .md\:pl-1 {
+    padding-left: 0.25rem;
+  }
+
+  .md\:pt-2 {
+    padding-top: 0.5rem;
+  }
+
+  .md\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .md\:pb-2 {
+    padding-bottom: 0.5rem;
+  }
+
+  .md\:pl-2 {
+    padding-left: 0.5rem;
+  }
+
+  .md\:pt-3 {
+    padding-top: 0.75rem;
+  }
+
+  .md\:pr-3 {
+    padding-right: 0.75rem;
+  }
+
+  .md\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
+  .md\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
+  .md\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .md\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .md\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .md\:pl-4 {
+    padding-left: 1rem;
+  }
+
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .md\:pr-5 {
+    padding-right: 1.25rem;
+  }
+
+  .md\:pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
+  .md\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .md\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .md\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .md\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
+  .md\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .md\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .md\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .md\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .md\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .md\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .md\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
+  .md\:pb-10 {
+    padding-bottom: 2.5rem;
+  }
+
+  .md\:pl-10 {
+    padding-left: 2.5rem;
+  }
+
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .md\:pr-12 {
+    padding-right: 3rem;
+  }
+
+  .md\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
+  .md\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .md\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .md\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .md\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .md\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .md\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .md\:pr-20 {
+    padding-right: 5rem;
+  }
+
+  .md\:pb-20 {
+    padding-bottom: 5rem;
+  }
+
+  .md\:pl-20 {
+    padding-left: 5rem;
+  }
+
+  .md\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .md\:pr-24 {
+    padding-right: 6rem;
+  }
+
+  .md\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .md\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .md\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .md\:pr-32 {
+    padding-right: 8rem;
+  }
+
+  .md\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
+  .md\:pl-32 {
+    padding-left: 8rem;
+  }
+
+  .md\:pt-40 {
+    padding-top: 10rem;
+  }
+
+  .md\:pr-40 {
+    padding-right: 10rem;
+  }
+
+  .md\:pb-40 {
+    padding-bottom: 10rem;
+  }
+
+  .md\:pl-40 {
+    padding-left: 10rem;
+  }
+
+  .md\:pt-48 {
+    padding-top: 12rem;
+  }
+
+  .md\:pr-48 {
+    padding-right: 12rem;
+  }
+
+  .md\:pb-48 {
+    padding-bottom: 12rem;
+  }
+
+  .md\:pl-48 {
+    padding-left: 12rem;
+  }
+
+  .md\:pt-56 {
+    padding-top: 14rem;
+  }
+
+  .md\:pr-56 {
+    padding-right: 14rem;
+  }
+
+  .md\:pb-56 {
+    padding-bottom: 14rem;
+  }
+
+  .md\:pl-56 {
+    padding-left: 14rem;
+  }
+
+  .md\:pt-64 {
+    padding-top: 16rem;
+  }
+
+  .md\:pr-64 {
+    padding-right: 16rem;
+  }
+
+  .md\:pb-64 {
+    padding-bottom: 16rem;
+  }
+
+  .md\:pl-64 {
+    padding-left: 16rem;
+  }
+
+  .md\:pt-px {
+    padding-top: 1px;
+  }
+
+  .md\:pr-px {
+    padding-right: 1px;
+  }
+
+  .md\:pb-px {
+    padding-bottom: 1px;
+  }
+
+  .md\:pl-px {
+    padding-left: 1px;
+  }
+
+  .md\:placeholder-transparent::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .md\:placeholder-transparent::-moz-placeholder {
+    color: transparent;
+  }
+
+  .md\:placeholder-transparent:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .md\:placeholder-transparent::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .md\:placeholder-transparent::placeholder {
+    color: transparent;
+  }
+
+  .md\:placeholder-black::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .md\:placeholder-black::-moz-placeholder {
+    color: #000;
+  }
+
+  .md\:placeholder-black:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .md\:placeholder-black::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .md\:placeholder-black::placeholder {
+    color: #000;
+  }
+
+  .md\:placeholder-white::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .md\:placeholder-white::-moz-placeholder {
+    color: #fff;
+  }
+
+  .md\:placeholder-white:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .md\:placeholder-white::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .md\:placeholder-white::placeholder {
+    color: #fff;
+  }
+
+  .md\:placeholder-gray-100::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:placeholder-gray-100::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:placeholder-gray-100:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:placeholder-gray-100::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:placeholder-gray-100::placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:placeholder-gray-200::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:placeholder-gray-200::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:placeholder-gray-200:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:placeholder-gray-200::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:placeholder-gray-200::placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:placeholder-gray-300::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:placeholder-gray-300::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:placeholder-gray-300:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:placeholder-gray-300::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:placeholder-gray-300::placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:placeholder-gray-400::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:placeholder-gray-400::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:placeholder-gray-400:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:placeholder-gray-400::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:placeholder-gray-400::placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:placeholder-gray-500::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:placeholder-gray-500::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:placeholder-gray-500:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:placeholder-gray-500::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:placeholder-gray-500::placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:placeholder-gray-600::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .md\:placeholder-gray-600::-moz-placeholder {
+    color: #718096;
+  }
+
+  .md\:placeholder-gray-600:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .md\:placeholder-gray-600::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .md\:placeholder-gray-600::placeholder {
+    color: #718096;
+  }
+
+  .md\:placeholder-gray-700::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:placeholder-gray-700::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:placeholder-gray-700:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:placeholder-gray-700::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:placeholder-gray-700::placeholder {
+    color: #4a5568;
+  }
+
+  .md\:placeholder-gray-800::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:placeholder-gray-800::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:placeholder-gray-800:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:placeholder-gray-800::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:placeholder-gray-800::placeholder {
+    color: #2d3748;
+  }
+
+  .md\:placeholder-gray-900::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:placeholder-gray-900::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:placeholder-gray-900:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:placeholder-gray-900::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:placeholder-gray-900::placeholder {
+    color: #1a202c;
+  }
+
+  .md\:placeholder-red-100::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:placeholder-red-100::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:placeholder-red-100:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:placeholder-red-100::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:placeholder-red-100::placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:placeholder-red-200::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:placeholder-red-200::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:placeholder-red-200:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:placeholder-red-200::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:placeholder-red-200::placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:placeholder-red-300::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:placeholder-red-300::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:placeholder-red-300:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:placeholder-red-300::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:placeholder-red-300::placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:placeholder-red-400::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:placeholder-red-400::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:placeholder-red-400:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:placeholder-red-400::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:placeholder-red-400::placeholder {
+    color: #fc8181;
+  }
+
+  .md\:placeholder-red-500::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .md\:placeholder-red-500::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .md\:placeholder-red-500:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .md\:placeholder-red-500::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .md\:placeholder-red-500::placeholder {
+    color: #f56565;
+  }
+
+  .md\:placeholder-red-600::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:placeholder-red-600::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:placeholder-red-600:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:placeholder-red-600::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:placeholder-red-600::placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:placeholder-red-700::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .md\:placeholder-red-700::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .md\:placeholder-red-700:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .md\:placeholder-red-700::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .md\:placeholder-red-700::placeholder {
+    color: #c53030;
+  }
+
+  .md\:placeholder-red-800::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:placeholder-red-800::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:placeholder-red-800:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:placeholder-red-800::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:placeholder-red-800::placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:placeholder-red-900::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:placeholder-red-900::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:placeholder-red-900:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:placeholder-red-900::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:placeholder-red-900::placeholder {
+    color: #742a2a;
+  }
+
+  .md\:placeholder-orange-100::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:placeholder-orange-100::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:placeholder-orange-100:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:placeholder-orange-100::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:placeholder-orange-100::placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:placeholder-orange-200::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:placeholder-orange-200::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:placeholder-orange-200:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:placeholder-orange-200::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:placeholder-orange-200::placeholder {
+    color: #feebc8;
+  }
+
+  .md\:placeholder-orange-300::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:placeholder-orange-300::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:placeholder-orange-300:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:placeholder-orange-300::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:placeholder-orange-300::placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:placeholder-orange-400::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:placeholder-orange-400::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:placeholder-orange-400:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:placeholder-orange-400::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:placeholder-orange-400::placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:placeholder-orange-500::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:placeholder-orange-500::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:placeholder-orange-500:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:placeholder-orange-500::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:placeholder-orange-500::placeholder {
+    color: #ed8936;
+  }
+
+  .md\:placeholder-orange-600::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:placeholder-orange-600::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:placeholder-orange-600:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:placeholder-orange-600::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:placeholder-orange-600::placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:placeholder-orange-700::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .md\:placeholder-orange-700::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .md\:placeholder-orange-700:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .md\:placeholder-orange-700::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .md\:placeholder-orange-700::placeholder {
+    color: #c05621;
+  }
+
+  .md\:placeholder-orange-800::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:placeholder-orange-800::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:placeholder-orange-800:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:placeholder-orange-800::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:placeholder-orange-800::placeholder {
+    color: #9c4221;
+  }
+
+  .md\:placeholder-orange-900::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:placeholder-orange-900::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:placeholder-orange-900:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:placeholder-orange-900::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:placeholder-orange-900::placeholder {
+    color: #7b341e;
+  }
+
+  .md\:placeholder-yellow-100::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:placeholder-yellow-100::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:placeholder-yellow-100:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:placeholder-yellow-100::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:placeholder-yellow-100::placeholder {
+    color: #fffff0;
+  }
+
+  .md\:placeholder-yellow-200::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:placeholder-yellow-200::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:placeholder-yellow-200:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:placeholder-yellow-200::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:placeholder-yellow-200::placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:placeholder-yellow-300::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .md\:placeholder-yellow-300::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .md\:placeholder-yellow-300:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .md\:placeholder-yellow-300::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .md\:placeholder-yellow-300::placeholder {
+    color: #faf089;
+  }
+
+  .md\:placeholder-yellow-400::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:placeholder-yellow-400::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:placeholder-yellow-400:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:placeholder-yellow-400::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:placeholder-yellow-400::placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:placeholder-yellow-500::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:placeholder-yellow-500::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:placeholder-yellow-500:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:placeholder-yellow-500::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:placeholder-yellow-500::placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:placeholder-yellow-600::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:placeholder-yellow-600::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:placeholder-yellow-600:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:placeholder-yellow-600::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:placeholder-yellow-600::placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:placeholder-yellow-700::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:placeholder-yellow-700::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:placeholder-yellow-700:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:placeholder-yellow-700::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:placeholder-yellow-700::placeholder {
+    color: #b7791f;
+  }
+
+  .md\:placeholder-yellow-800::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .md\:placeholder-yellow-800::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .md\:placeholder-yellow-800:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .md\:placeholder-yellow-800::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .md\:placeholder-yellow-800::placeholder {
+    color: #975a16;
+  }
+
+  .md\:placeholder-yellow-900::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .md\:placeholder-yellow-900::-moz-placeholder {
+    color: #744210;
+  }
+
+  .md\:placeholder-yellow-900:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .md\:placeholder-yellow-900::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .md\:placeholder-yellow-900::placeholder {
+    color: #744210;
+  }
+
+  .md\:placeholder-green-100::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:placeholder-green-100::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:placeholder-green-100:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:placeholder-green-100::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:placeholder-green-100::placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:placeholder-green-200::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:placeholder-green-200::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:placeholder-green-200:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:placeholder-green-200::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:placeholder-green-200::placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:placeholder-green-300::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:placeholder-green-300::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:placeholder-green-300:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:placeholder-green-300::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:placeholder-green-300::placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:placeholder-green-400::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .md\:placeholder-green-400::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .md\:placeholder-green-400:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .md\:placeholder-green-400::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .md\:placeholder-green-400::placeholder {
+    color: #68d391;
+  }
+
+  .md\:placeholder-green-500::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:placeholder-green-500::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:placeholder-green-500:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:placeholder-green-500::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:placeholder-green-500::placeholder {
+    color: #48bb78;
+  }
+
+  .md\:placeholder-green-600::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .md\:placeholder-green-600::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .md\:placeholder-green-600:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .md\:placeholder-green-600::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .md\:placeholder-green-600::placeholder {
+    color: #38a169;
+  }
+
+  .md\:placeholder-green-700::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:placeholder-green-700::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:placeholder-green-700:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:placeholder-green-700::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:placeholder-green-700::placeholder {
+    color: #2f855a;
+  }
+
+  .md\:placeholder-green-800::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .md\:placeholder-green-800::-moz-placeholder {
+    color: #276749;
+  }
+
+  .md\:placeholder-green-800:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .md\:placeholder-green-800::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .md\:placeholder-green-800::placeholder {
+    color: #276749;
+  }
+
+  .md\:placeholder-green-900::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .md\:placeholder-green-900::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .md\:placeholder-green-900:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .md\:placeholder-green-900::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .md\:placeholder-green-900::placeholder {
+    color: #22543d;
+  }
+
+  .md\:placeholder-teal-100::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:placeholder-teal-100::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:placeholder-teal-100:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:placeholder-teal-100::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:placeholder-teal-100::placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:placeholder-teal-200::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:placeholder-teal-200::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:placeholder-teal-200:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:placeholder-teal-200::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:placeholder-teal-200::placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:placeholder-teal-300::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:placeholder-teal-300::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:placeholder-teal-300:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:placeholder-teal-300::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:placeholder-teal-300::placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:placeholder-teal-400::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:placeholder-teal-400::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:placeholder-teal-400:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:placeholder-teal-400::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:placeholder-teal-400::placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:placeholder-teal-500::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:placeholder-teal-500::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:placeholder-teal-500:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:placeholder-teal-500::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:placeholder-teal-500::placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:placeholder-teal-600::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .md\:placeholder-teal-600::-moz-placeholder {
+    color: #319795;
+  }
+
+  .md\:placeholder-teal-600:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .md\:placeholder-teal-600::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .md\:placeholder-teal-600::placeholder {
+    color: #319795;
+  }
+
+  .md\:placeholder-teal-700::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:placeholder-teal-700::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:placeholder-teal-700:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:placeholder-teal-700::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:placeholder-teal-700::placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:placeholder-teal-800::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .md\:placeholder-teal-800::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .md\:placeholder-teal-800:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .md\:placeholder-teal-800::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .md\:placeholder-teal-800::placeholder {
+    color: #285e61;
+  }
+
+  .md\:placeholder-teal-900::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .md\:placeholder-teal-900::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .md\:placeholder-teal-900:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .md\:placeholder-teal-900::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .md\:placeholder-teal-900::placeholder {
+    color: #234e52;
+  }
+
+  .md\:placeholder-blue-100::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:placeholder-blue-100::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:placeholder-blue-100:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:placeholder-blue-100::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:placeholder-blue-100::placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:placeholder-blue-200::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:placeholder-blue-200::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:placeholder-blue-200:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:placeholder-blue-200::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:placeholder-blue-200::placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:placeholder-blue-300::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:placeholder-blue-300::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:placeholder-blue-300:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:placeholder-blue-300::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:placeholder-blue-300::placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:placeholder-blue-400::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:placeholder-blue-400::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:placeholder-blue-400:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:placeholder-blue-400::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:placeholder-blue-400::placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:placeholder-blue-500::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:placeholder-blue-500::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:placeholder-blue-500:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:placeholder-blue-500::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:placeholder-blue-500::placeholder {
+    color: #4299e1;
+  }
+
+  .md\:placeholder-blue-600::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:placeholder-blue-600::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:placeholder-blue-600:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:placeholder-blue-600::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:placeholder-blue-600::placeholder {
+    color: #3182ce;
+  }
+
+  .md\:placeholder-blue-700::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:placeholder-blue-700::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:placeholder-blue-700:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:placeholder-blue-700::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:placeholder-blue-700::placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:placeholder-blue-800::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:placeholder-blue-800::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:placeholder-blue-800:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:placeholder-blue-800::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:placeholder-blue-800::placeholder {
+    color: #2c5282;
+  }
+
+  .md\:placeholder-blue-900::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:placeholder-blue-900::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:placeholder-blue-900:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:placeholder-blue-900::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:placeholder-blue-900::placeholder {
+    color: #2a4365;
+  }
+
+  .md\:placeholder-indigo-100::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:placeholder-indigo-100::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:placeholder-indigo-100:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:placeholder-indigo-100::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:placeholder-indigo-100::placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:placeholder-indigo-200::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:placeholder-indigo-200::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:placeholder-indigo-200:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:placeholder-indigo-200::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:placeholder-indigo-200::placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:placeholder-indigo-300::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:placeholder-indigo-300::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:placeholder-indigo-300:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:placeholder-indigo-300::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:placeholder-indigo-300::placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:placeholder-indigo-400::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:placeholder-indigo-400::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:placeholder-indigo-400:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:placeholder-indigo-400::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:placeholder-indigo-400::placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:placeholder-indigo-500::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .md\:placeholder-indigo-500::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .md\:placeholder-indigo-500:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .md\:placeholder-indigo-500::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .md\:placeholder-indigo-500::placeholder {
+    color: #667eea;
+  }
+
+  .md\:placeholder-indigo-600::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:placeholder-indigo-600::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:placeholder-indigo-600:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:placeholder-indigo-600::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:placeholder-indigo-600::placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:placeholder-indigo-700::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:placeholder-indigo-700::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:placeholder-indigo-700:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:placeholder-indigo-700::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:placeholder-indigo-700::placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:placeholder-indigo-800::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .md\:placeholder-indigo-800::-moz-placeholder {
+    color: #434190;
+  }
+
+  .md\:placeholder-indigo-800:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .md\:placeholder-indigo-800::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .md\:placeholder-indigo-800::placeholder {
+    color: #434190;
+  }
+
+  .md\:placeholder-indigo-900::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:placeholder-indigo-900::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:placeholder-indigo-900:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:placeholder-indigo-900::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:placeholder-indigo-900::placeholder {
+    color: #3c366b;
+  }
+
+  .md\:placeholder-purple-100::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:placeholder-purple-100::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:placeholder-purple-100:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:placeholder-purple-100::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:placeholder-purple-100::placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:placeholder-purple-200::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:placeholder-purple-200::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:placeholder-purple-200:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:placeholder-purple-200::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:placeholder-purple-200::placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:placeholder-purple-300::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:placeholder-purple-300::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:placeholder-purple-300:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:placeholder-purple-300::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:placeholder-purple-300::placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:placeholder-purple-400::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:placeholder-purple-400::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:placeholder-purple-400:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:placeholder-purple-400::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:placeholder-purple-400::placeholder {
+    color: #b794f4;
+  }
+
+  .md\:placeholder-purple-500::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:placeholder-purple-500::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:placeholder-purple-500:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:placeholder-purple-500::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:placeholder-purple-500::placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:placeholder-purple-600::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:placeholder-purple-600::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:placeholder-purple-600:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:placeholder-purple-600::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:placeholder-purple-600::placeholder {
+    color: #805ad5;
+  }
+
+  .md\:placeholder-purple-700::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:placeholder-purple-700::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:placeholder-purple-700:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:placeholder-purple-700::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:placeholder-purple-700::placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:placeholder-purple-800::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:placeholder-purple-800::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:placeholder-purple-800:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:placeholder-purple-800::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:placeholder-purple-800::placeholder {
+    color: #553c9a;
+  }
+
+  .md\:placeholder-purple-900::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .md\:placeholder-purple-900::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .md\:placeholder-purple-900:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .md\:placeholder-purple-900::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .md\:placeholder-purple-900::placeholder {
+    color: #44337a;
+  }
+
+  .md\:placeholder-pink-100::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:placeholder-pink-100::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:placeholder-pink-100:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:placeholder-pink-100::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:placeholder-pink-100::placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:placeholder-pink-200::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:placeholder-pink-200::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:placeholder-pink-200:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:placeholder-pink-200::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:placeholder-pink-200::placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:placeholder-pink-300::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:placeholder-pink-300::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:placeholder-pink-300:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:placeholder-pink-300::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:placeholder-pink-300::placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:placeholder-pink-400::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:placeholder-pink-400::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:placeholder-pink-400:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:placeholder-pink-400::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:placeholder-pink-400::placeholder {
+    color: #f687b3;
+  }
+
+  .md\:placeholder-pink-500::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:placeholder-pink-500::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:placeholder-pink-500:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:placeholder-pink-500::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:placeholder-pink-500::placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:placeholder-pink-600::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:placeholder-pink-600::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:placeholder-pink-600:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:placeholder-pink-600::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:placeholder-pink-600::placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:placeholder-pink-700::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .md\:placeholder-pink-700::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .md\:placeholder-pink-700:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .md\:placeholder-pink-700::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .md\:placeholder-pink-700::placeholder {
+    color: #b83280;
+  }
+
+  .md\:placeholder-pink-800::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .md\:placeholder-pink-800::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .md\:placeholder-pink-800:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .md\:placeholder-pink-800::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .md\:placeholder-pink-800::placeholder {
+    color: #97266d;
+  }
+
+  .md\:placeholder-pink-900::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .md\:placeholder-pink-900::-moz-placeholder {
+    color: #702459;
+  }
+
+  .md\:placeholder-pink-900:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .md\:placeholder-pink-900::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .md\:placeholder-pink-900::placeholder {
+    color: #702459;
+  }
+
+  .md\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .md\:focus\:placeholder-transparent:focus::-moz-placeholder {
+    color: transparent;
+  }
+
+  .md\:focus\:placeholder-transparent:focus:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .md\:focus\:placeholder-transparent:focus::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .md\:focus\:placeholder-transparent:focus::placeholder {
+    color: transparent;
+  }
+
+  .md\:focus\:placeholder-black:focus::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .md\:focus\:placeholder-black:focus::-moz-placeholder {
+    color: #000;
+  }
+
+  .md\:focus\:placeholder-black:focus:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .md\:focus\:placeholder-black:focus::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .md\:focus\:placeholder-black:focus::placeholder {
+    color: #000;
+  }
+
+  .md\:focus\:placeholder-white:focus::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .md\:focus\:placeholder-white:focus::-moz-placeholder {
+    color: #fff;
+  }
+
+  .md\:focus\:placeholder-white:focus:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .md\:focus\:placeholder-white:focus::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .md\:focus\:placeholder-white:focus::placeholder {
+    color: #fff;
+  }
+
+  .md\:focus\:placeholder-gray-100:focus::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:focus\:placeholder-gray-100:focus::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:focus\:placeholder-gray-100:focus:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:focus\:placeholder-gray-100:focus::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:focus\:placeholder-gray-100:focus::placeholder {
+    color: #f7fafc;
+  }
+
+  .md\:focus\:placeholder-gray-200:focus::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:focus\:placeholder-gray-200:focus::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:focus\:placeholder-gray-200:focus:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:focus\:placeholder-gray-200:focus::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:focus\:placeholder-gray-200:focus::placeholder {
+    color: #edf2f7;
+  }
+
+  .md\:focus\:placeholder-gray-300:focus::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:focus\:placeholder-gray-300:focus::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:focus\:placeholder-gray-300:focus:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:focus\:placeholder-gray-300:focus::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:focus\:placeholder-gray-300:focus::placeholder {
+    color: #e2e8f0;
+  }
+
+  .md\:focus\:placeholder-gray-400:focus::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:focus\:placeholder-gray-400:focus::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:focus\:placeholder-gray-400:focus:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:focus\:placeholder-gray-400:focus::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:focus\:placeholder-gray-400:focus::placeholder {
+    color: #cbd5e0;
+  }
+
+  .md\:focus\:placeholder-gray-500:focus::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:focus\:placeholder-gray-500:focus::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:focus\:placeholder-gray-500:focus:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:focus\:placeholder-gray-500:focus::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:focus\:placeholder-gray-500:focus::placeholder {
+    color: #a0aec0;
+  }
+
+  .md\:focus\:placeholder-gray-600:focus::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .md\:focus\:placeholder-gray-600:focus::-moz-placeholder {
+    color: #718096;
+  }
+
+  .md\:focus\:placeholder-gray-600:focus:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .md\:focus\:placeholder-gray-600:focus::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .md\:focus\:placeholder-gray-600:focus::placeholder {
+    color: #718096;
+  }
+
+  .md\:focus\:placeholder-gray-700:focus::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:focus\:placeholder-gray-700:focus::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:focus\:placeholder-gray-700:focus:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:focus\:placeholder-gray-700:focus::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .md\:focus\:placeholder-gray-700:focus::placeholder {
+    color: #4a5568;
+  }
+
+  .md\:focus\:placeholder-gray-800:focus::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:focus\:placeholder-gray-800:focus::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:focus\:placeholder-gray-800:focus:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:focus\:placeholder-gray-800:focus::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .md\:focus\:placeholder-gray-800:focus::placeholder {
+    color: #2d3748;
+  }
+
+  .md\:focus\:placeholder-gray-900:focus::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:focus\:placeholder-gray-900:focus::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:focus\:placeholder-gray-900:focus:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:focus\:placeholder-gray-900:focus::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .md\:focus\:placeholder-gray-900:focus::placeholder {
+    color: #1a202c;
+  }
+
+  .md\:focus\:placeholder-red-100:focus::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:focus\:placeholder-red-100:focus::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:focus\:placeholder-red-100:focus:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:focus\:placeholder-red-100:focus::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:focus\:placeholder-red-100:focus::placeholder {
+    color: #fff5f5;
+  }
+
+  .md\:focus\:placeholder-red-200:focus::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:focus\:placeholder-red-200:focus::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:focus\:placeholder-red-200:focus:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:focus\:placeholder-red-200:focus::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:focus\:placeholder-red-200:focus::placeholder {
+    color: #fed7d7;
+  }
+
+  .md\:focus\:placeholder-red-300:focus::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:focus\:placeholder-red-300:focus::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:focus\:placeholder-red-300:focus:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:focus\:placeholder-red-300:focus::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:focus\:placeholder-red-300:focus::placeholder {
+    color: #feb2b2;
+  }
+
+  .md\:focus\:placeholder-red-400:focus::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:focus\:placeholder-red-400:focus::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:focus\:placeholder-red-400:focus:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:focus\:placeholder-red-400:focus::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .md\:focus\:placeholder-red-400:focus::placeholder {
+    color: #fc8181;
+  }
+
+  .md\:focus\:placeholder-red-500:focus::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .md\:focus\:placeholder-red-500:focus::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .md\:focus\:placeholder-red-500:focus:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .md\:focus\:placeholder-red-500:focus::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .md\:focus\:placeholder-red-500:focus::placeholder {
+    color: #f56565;
+  }
+
+  .md\:focus\:placeholder-red-600:focus::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:focus\:placeholder-red-600:focus::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:focus\:placeholder-red-600:focus:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:focus\:placeholder-red-600:focus::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:focus\:placeholder-red-600:focus::placeholder {
+    color: #e53e3e;
+  }
+
+  .md\:focus\:placeholder-red-700:focus::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .md\:focus\:placeholder-red-700:focus::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .md\:focus\:placeholder-red-700:focus:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .md\:focus\:placeholder-red-700:focus::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .md\:focus\:placeholder-red-700:focus::placeholder {
+    color: #c53030;
+  }
+
+  .md\:focus\:placeholder-red-800:focus::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:focus\:placeholder-red-800:focus::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:focus\:placeholder-red-800:focus:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:focus\:placeholder-red-800:focus::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:focus\:placeholder-red-800:focus::placeholder {
+    color: #9b2c2c;
+  }
+
+  .md\:focus\:placeholder-red-900:focus::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:focus\:placeholder-red-900:focus::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:focus\:placeholder-red-900:focus:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:focus\:placeholder-red-900:focus::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .md\:focus\:placeholder-red-900:focus::placeholder {
+    color: #742a2a;
+  }
+
+  .md\:focus\:placeholder-orange-100:focus::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:focus\:placeholder-orange-100:focus::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:focus\:placeholder-orange-100:focus:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:focus\:placeholder-orange-100:focus::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:focus\:placeholder-orange-100:focus::placeholder {
+    color: #fffaf0;
+  }
+
+  .md\:focus\:placeholder-orange-200:focus::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:focus\:placeholder-orange-200:focus::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:focus\:placeholder-orange-200:focus:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:focus\:placeholder-orange-200:focus::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .md\:focus\:placeholder-orange-200:focus::placeholder {
+    color: #feebc8;
+  }
+
+  .md\:focus\:placeholder-orange-300:focus::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:focus\:placeholder-orange-300:focus::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:focus\:placeholder-orange-300:focus:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:focus\:placeholder-orange-300:focus::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:focus\:placeholder-orange-300:focus::placeholder {
+    color: #fbd38d;
+  }
+
+  .md\:focus\:placeholder-orange-400:focus::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:focus\:placeholder-orange-400:focus::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:focus\:placeholder-orange-400:focus:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:focus\:placeholder-orange-400:focus::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:focus\:placeholder-orange-400:focus::placeholder {
+    color: #f6ad55;
+  }
+
+  .md\:focus\:placeholder-orange-500:focus::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:focus\:placeholder-orange-500:focus::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:focus\:placeholder-orange-500:focus:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:focus\:placeholder-orange-500:focus::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .md\:focus\:placeholder-orange-500:focus::placeholder {
+    color: #ed8936;
+  }
+
+  .md\:focus\:placeholder-orange-600:focus::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:focus\:placeholder-orange-600:focus::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:focus\:placeholder-orange-600:focus:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:focus\:placeholder-orange-600:focus::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:focus\:placeholder-orange-600:focus::placeholder {
+    color: #dd6b20;
+  }
+
+  .md\:focus\:placeholder-orange-700:focus::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .md\:focus\:placeholder-orange-700:focus::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .md\:focus\:placeholder-orange-700:focus:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .md\:focus\:placeholder-orange-700:focus::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .md\:focus\:placeholder-orange-700:focus::placeholder {
+    color: #c05621;
+  }
+
+  .md\:focus\:placeholder-orange-800:focus::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:focus\:placeholder-orange-800:focus::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:focus\:placeholder-orange-800:focus:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:focus\:placeholder-orange-800:focus::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .md\:focus\:placeholder-orange-800:focus::placeholder {
+    color: #9c4221;
+  }
+
+  .md\:focus\:placeholder-orange-900:focus::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:focus\:placeholder-orange-900:focus::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:focus\:placeholder-orange-900:focus:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:focus\:placeholder-orange-900:focus::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .md\:focus\:placeholder-orange-900:focus::placeholder {
+    color: #7b341e;
+  }
+
+  .md\:focus\:placeholder-yellow-100:focus::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:focus\:placeholder-yellow-100:focus::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:focus\:placeholder-yellow-100:focus:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:focus\:placeholder-yellow-100:focus::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .md\:focus\:placeholder-yellow-100:focus::placeholder {
+    color: #fffff0;
+  }
+
+  .md\:focus\:placeholder-yellow-200:focus::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:focus\:placeholder-yellow-200:focus::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:focus\:placeholder-yellow-200:focus:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:focus\:placeholder-yellow-200:focus::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:focus\:placeholder-yellow-200:focus::placeholder {
+    color: #fefcbf;
+  }
+
+  .md\:focus\:placeholder-yellow-300:focus::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .md\:focus\:placeholder-yellow-300:focus::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .md\:focus\:placeholder-yellow-300:focus:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .md\:focus\:placeholder-yellow-300:focus::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .md\:focus\:placeholder-yellow-300:focus::placeholder {
+    color: #faf089;
+  }
+
+  .md\:focus\:placeholder-yellow-400:focus::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:focus\:placeholder-yellow-400:focus::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:focus\:placeholder-yellow-400:focus:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:focus\:placeholder-yellow-400:focus::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:focus\:placeholder-yellow-400:focus::placeholder {
+    color: #f6e05e;
+  }
+
+  .md\:focus\:placeholder-yellow-500:focus::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:focus\:placeholder-yellow-500:focus::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:focus\:placeholder-yellow-500:focus:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:focus\:placeholder-yellow-500:focus::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:focus\:placeholder-yellow-500:focus::placeholder {
+    color: #ecc94b;
+  }
+
+  .md\:focus\:placeholder-yellow-600:focus::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:focus\:placeholder-yellow-600:focus::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:focus\:placeholder-yellow-600:focus:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:focus\:placeholder-yellow-600:focus::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:focus\:placeholder-yellow-600:focus::placeholder {
+    color: #d69e2e;
+  }
+
+  .md\:focus\:placeholder-yellow-700:focus::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:focus\:placeholder-yellow-700:focus::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:focus\:placeholder-yellow-700:focus:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:focus\:placeholder-yellow-700:focus::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .md\:focus\:placeholder-yellow-700:focus::placeholder {
+    color: #b7791f;
+  }
+
+  .md\:focus\:placeholder-yellow-800:focus::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .md\:focus\:placeholder-yellow-800:focus::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .md\:focus\:placeholder-yellow-800:focus:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .md\:focus\:placeholder-yellow-800:focus::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .md\:focus\:placeholder-yellow-800:focus::placeholder {
+    color: #975a16;
+  }
+
+  .md\:focus\:placeholder-yellow-900:focus::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .md\:focus\:placeholder-yellow-900:focus::-moz-placeholder {
+    color: #744210;
+  }
+
+  .md\:focus\:placeholder-yellow-900:focus:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .md\:focus\:placeholder-yellow-900:focus::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .md\:focus\:placeholder-yellow-900:focus::placeholder {
+    color: #744210;
+  }
+
+  .md\:focus\:placeholder-green-100:focus::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:focus\:placeholder-green-100:focus::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:focus\:placeholder-green-100:focus:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:focus\:placeholder-green-100:focus::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:focus\:placeholder-green-100:focus::placeholder {
+    color: #f0fff4;
+  }
+
+  .md\:focus\:placeholder-green-200:focus::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:focus\:placeholder-green-200:focus::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:focus\:placeholder-green-200:focus:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:focus\:placeholder-green-200:focus::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:focus\:placeholder-green-200:focus::placeholder {
+    color: #c6f6d5;
+  }
+
+  .md\:focus\:placeholder-green-300:focus::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:focus\:placeholder-green-300:focus::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:focus\:placeholder-green-300:focus:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:focus\:placeholder-green-300:focus::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:focus\:placeholder-green-300:focus::placeholder {
+    color: #9ae6b4;
+  }
+
+  .md\:focus\:placeholder-green-400:focus::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .md\:focus\:placeholder-green-400:focus::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .md\:focus\:placeholder-green-400:focus:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .md\:focus\:placeholder-green-400:focus::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .md\:focus\:placeholder-green-400:focus::placeholder {
+    color: #68d391;
+  }
+
+  .md\:focus\:placeholder-green-500:focus::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:focus\:placeholder-green-500:focus::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:focus\:placeholder-green-500:focus:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:focus\:placeholder-green-500:focus::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .md\:focus\:placeholder-green-500:focus::placeholder {
+    color: #48bb78;
+  }
+
+  .md\:focus\:placeholder-green-600:focus::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .md\:focus\:placeholder-green-600:focus::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .md\:focus\:placeholder-green-600:focus:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .md\:focus\:placeholder-green-600:focus::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .md\:focus\:placeholder-green-600:focus::placeholder {
+    color: #38a169;
+  }
+
+  .md\:focus\:placeholder-green-700:focus::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:focus\:placeholder-green-700:focus::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:focus\:placeholder-green-700:focus:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:focus\:placeholder-green-700:focus::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .md\:focus\:placeholder-green-700:focus::placeholder {
+    color: #2f855a;
+  }
+
+  .md\:focus\:placeholder-green-800:focus::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .md\:focus\:placeholder-green-800:focus::-moz-placeholder {
+    color: #276749;
+  }
+
+  .md\:focus\:placeholder-green-800:focus:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .md\:focus\:placeholder-green-800:focus::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .md\:focus\:placeholder-green-800:focus::placeholder {
+    color: #276749;
+  }
+
+  .md\:focus\:placeholder-green-900:focus::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .md\:focus\:placeholder-green-900:focus::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .md\:focus\:placeholder-green-900:focus:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .md\:focus\:placeholder-green-900:focus::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .md\:focus\:placeholder-green-900:focus::placeholder {
+    color: #22543d;
+  }
+
+  .md\:focus\:placeholder-teal-100:focus::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:focus\:placeholder-teal-100:focus::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:focus\:placeholder-teal-100:focus:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:focus\:placeholder-teal-100:focus::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:focus\:placeholder-teal-100:focus::placeholder {
+    color: #e6fffa;
+  }
+
+  .md\:focus\:placeholder-teal-200:focus::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:focus\:placeholder-teal-200:focus::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:focus\:placeholder-teal-200:focus:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:focus\:placeholder-teal-200:focus::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:focus\:placeholder-teal-200:focus::placeholder {
+    color: #b2f5ea;
+  }
+
+  .md\:focus\:placeholder-teal-300:focus::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:focus\:placeholder-teal-300:focus::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:focus\:placeholder-teal-300:focus:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:focus\:placeholder-teal-300:focus::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:focus\:placeholder-teal-300:focus::placeholder {
+    color: #81e6d9;
+  }
+
+  .md\:focus\:placeholder-teal-400:focus::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:focus\:placeholder-teal-400:focus::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:focus\:placeholder-teal-400:focus:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:focus\:placeholder-teal-400:focus::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:focus\:placeholder-teal-400:focus::placeholder {
+    color: #4fd1c5;
+  }
+
+  .md\:focus\:placeholder-teal-500:focus::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:focus\:placeholder-teal-500:focus::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:focus\:placeholder-teal-500:focus:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:focus\:placeholder-teal-500:focus::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:focus\:placeholder-teal-500:focus::placeholder {
+    color: #38b2ac;
+  }
+
+  .md\:focus\:placeholder-teal-600:focus::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .md\:focus\:placeholder-teal-600:focus::-moz-placeholder {
+    color: #319795;
+  }
+
+  .md\:focus\:placeholder-teal-600:focus:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .md\:focus\:placeholder-teal-600:focus::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .md\:focus\:placeholder-teal-600:focus::placeholder {
+    color: #319795;
+  }
+
+  .md\:focus\:placeholder-teal-700:focus::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:focus\:placeholder-teal-700:focus::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:focus\:placeholder-teal-700:focus:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:focus\:placeholder-teal-700:focus::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:focus\:placeholder-teal-700:focus::placeholder {
+    color: #2c7a7b;
+  }
+
+  .md\:focus\:placeholder-teal-800:focus::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .md\:focus\:placeholder-teal-800:focus::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .md\:focus\:placeholder-teal-800:focus:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .md\:focus\:placeholder-teal-800:focus::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .md\:focus\:placeholder-teal-800:focus::placeholder {
+    color: #285e61;
+  }
+
+  .md\:focus\:placeholder-teal-900:focus::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .md\:focus\:placeholder-teal-900:focus::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .md\:focus\:placeholder-teal-900:focus:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .md\:focus\:placeholder-teal-900:focus::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .md\:focus\:placeholder-teal-900:focus::placeholder {
+    color: #234e52;
+  }
+
+  .md\:focus\:placeholder-blue-100:focus::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:focus\:placeholder-blue-100:focus::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:focus\:placeholder-blue-100:focus:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:focus\:placeholder-blue-100:focus::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:focus\:placeholder-blue-100:focus::placeholder {
+    color: #ebf8ff;
+  }
+
+  .md\:focus\:placeholder-blue-200:focus::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:focus\:placeholder-blue-200:focus::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:focus\:placeholder-blue-200:focus:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:focus\:placeholder-blue-200:focus::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:focus\:placeholder-blue-200:focus::placeholder {
+    color: #bee3f8;
+  }
+
+  .md\:focus\:placeholder-blue-300:focus::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:focus\:placeholder-blue-300:focus::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:focus\:placeholder-blue-300:focus:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:focus\:placeholder-blue-300:focus::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:focus\:placeholder-blue-300:focus::placeholder {
+    color: #90cdf4;
+  }
+
+  .md\:focus\:placeholder-blue-400:focus::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:focus\:placeholder-blue-400:focus::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:focus\:placeholder-blue-400:focus:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:focus\:placeholder-blue-400:focus::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:focus\:placeholder-blue-400:focus::placeholder {
+    color: #63b3ed;
+  }
+
+  .md\:focus\:placeholder-blue-500:focus::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:focus\:placeholder-blue-500:focus::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:focus\:placeholder-blue-500:focus:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:focus\:placeholder-blue-500:focus::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .md\:focus\:placeholder-blue-500:focus::placeholder {
+    color: #4299e1;
+  }
+
+  .md\:focus\:placeholder-blue-600:focus::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:focus\:placeholder-blue-600:focus::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:focus\:placeholder-blue-600:focus:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:focus\:placeholder-blue-600:focus::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .md\:focus\:placeholder-blue-600:focus::placeholder {
+    color: #3182ce;
+  }
+
+  .md\:focus\:placeholder-blue-700:focus::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:focus\:placeholder-blue-700:focus::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:focus\:placeholder-blue-700:focus:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:focus\:placeholder-blue-700:focus::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:focus\:placeholder-blue-700:focus::placeholder {
+    color: #2b6cb0;
+  }
+
+  .md\:focus\:placeholder-blue-800:focus::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:focus\:placeholder-blue-800:focus::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:focus\:placeholder-blue-800:focus:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:focus\:placeholder-blue-800:focus::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .md\:focus\:placeholder-blue-800:focus::placeholder {
+    color: #2c5282;
+  }
+
+  .md\:focus\:placeholder-blue-900:focus::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:focus\:placeholder-blue-900:focus::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:focus\:placeholder-blue-900:focus:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:focus\:placeholder-blue-900:focus::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .md\:focus\:placeholder-blue-900:focus::placeholder {
+    color: #2a4365;
+  }
+
+  .md\:focus\:placeholder-indigo-100:focus::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:focus\:placeholder-indigo-100:focus::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:focus\:placeholder-indigo-100:focus:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:focus\:placeholder-indigo-100:focus::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:focus\:placeholder-indigo-100:focus::placeholder {
+    color: #ebf4ff;
+  }
+
+  .md\:focus\:placeholder-indigo-200:focus::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:focus\:placeholder-indigo-200:focus::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:focus\:placeholder-indigo-200:focus:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:focus\:placeholder-indigo-200:focus::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:focus\:placeholder-indigo-200:focus::placeholder {
+    color: #c3dafe;
+  }
+
+  .md\:focus\:placeholder-indigo-300:focus::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:focus\:placeholder-indigo-300:focus::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:focus\:placeholder-indigo-300:focus:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:focus\:placeholder-indigo-300:focus::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:focus\:placeholder-indigo-300:focus::placeholder {
+    color: #a3bffa;
+  }
+
+  .md\:focus\:placeholder-indigo-400:focus::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:focus\:placeholder-indigo-400:focus::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:focus\:placeholder-indigo-400:focus:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:focus\:placeholder-indigo-400:focus::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:focus\:placeholder-indigo-400:focus::placeholder {
+    color: #7f9cf5;
+  }
+
+  .md\:focus\:placeholder-indigo-500:focus::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .md\:focus\:placeholder-indigo-500:focus::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .md\:focus\:placeholder-indigo-500:focus:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .md\:focus\:placeholder-indigo-500:focus::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .md\:focus\:placeholder-indigo-500:focus::placeholder {
+    color: #667eea;
+  }
+
+  .md\:focus\:placeholder-indigo-600:focus::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:focus\:placeholder-indigo-600:focus::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:focus\:placeholder-indigo-600:focus:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:focus\:placeholder-indigo-600:focus::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:focus\:placeholder-indigo-600:focus::placeholder {
+    color: #5a67d8;
+  }
+
+  .md\:focus\:placeholder-indigo-700:focus::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:focus\:placeholder-indigo-700:focus::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:focus\:placeholder-indigo-700:focus:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:focus\:placeholder-indigo-700:focus::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:focus\:placeholder-indigo-700:focus::placeholder {
+    color: #4c51bf;
+  }
+
+  .md\:focus\:placeholder-indigo-800:focus::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .md\:focus\:placeholder-indigo-800:focus::-moz-placeholder {
+    color: #434190;
+  }
+
+  .md\:focus\:placeholder-indigo-800:focus:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .md\:focus\:placeholder-indigo-800:focus::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .md\:focus\:placeholder-indigo-800:focus::placeholder {
+    color: #434190;
+  }
+
+  .md\:focus\:placeholder-indigo-900:focus::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:focus\:placeholder-indigo-900:focus::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:focus\:placeholder-indigo-900:focus:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:focus\:placeholder-indigo-900:focus::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .md\:focus\:placeholder-indigo-900:focus::placeholder {
+    color: #3c366b;
+  }
+
+  .md\:focus\:placeholder-purple-100:focus::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:focus\:placeholder-purple-100:focus::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:focus\:placeholder-purple-100:focus:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:focus\:placeholder-purple-100:focus::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:focus\:placeholder-purple-100:focus::placeholder {
+    color: #faf5ff;
+  }
+
+  .md\:focus\:placeholder-purple-200:focus::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:focus\:placeholder-purple-200:focus::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:focus\:placeholder-purple-200:focus:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:focus\:placeholder-purple-200:focus::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:focus\:placeholder-purple-200:focus::placeholder {
+    color: #e9d8fd;
+  }
+
+  .md\:focus\:placeholder-purple-300:focus::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:focus\:placeholder-purple-300:focus::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:focus\:placeholder-purple-300:focus:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:focus\:placeholder-purple-300:focus::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:focus\:placeholder-purple-300:focus::placeholder {
+    color: #d6bcfa;
+  }
+
+  .md\:focus\:placeholder-purple-400:focus::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:focus\:placeholder-purple-400:focus::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:focus\:placeholder-purple-400:focus:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:focus\:placeholder-purple-400:focus::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .md\:focus\:placeholder-purple-400:focus::placeholder {
+    color: #b794f4;
+  }
+
+  .md\:focus\:placeholder-purple-500:focus::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:focus\:placeholder-purple-500:focus::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:focus\:placeholder-purple-500:focus:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:focus\:placeholder-purple-500:focus::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:focus\:placeholder-purple-500:focus::placeholder {
+    color: #9f7aea;
+  }
+
+  .md\:focus\:placeholder-purple-600:focus::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:focus\:placeholder-purple-600:focus::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:focus\:placeholder-purple-600:focus:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:focus\:placeholder-purple-600:focus::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .md\:focus\:placeholder-purple-600:focus::placeholder {
+    color: #805ad5;
+  }
+
+  .md\:focus\:placeholder-purple-700:focus::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:focus\:placeholder-purple-700:focus::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:focus\:placeholder-purple-700:focus:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:focus\:placeholder-purple-700:focus::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:focus\:placeholder-purple-700:focus::placeholder {
+    color: #6b46c1;
+  }
+
+  .md\:focus\:placeholder-purple-800:focus::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:focus\:placeholder-purple-800:focus::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:focus\:placeholder-purple-800:focus:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:focus\:placeholder-purple-800:focus::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .md\:focus\:placeholder-purple-800:focus::placeholder {
+    color: #553c9a;
+  }
+
+  .md\:focus\:placeholder-purple-900:focus::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .md\:focus\:placeholder-purple-900:focus::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .md\:focus\:placeholder-purple-900:focus:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .md\:focus\:placeholder-purple-900:focus::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .md\:focus\:placeholder-purple-900:focus::placeholder {
+    color: #44337a;
+  }
+
+  .md\:focus\:placeholder-pink-100:focus::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:focus\:placeholder-pink-100:focus::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:focus\:placeholder-pink-100:focus:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:focus\:placeholder-pink-100:focus::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:focus\:placeholder-pink-100:focus::placeholder {
+    color: #fff5f7;
+  }
+
+  .md\:focus\:placeholder-pink-200:focus::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:focus\:placeholder-pink-200:focus::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:focus\:placeholder-pink-200:focus:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:focus\:placeholder-pink-200:focus::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:focus\:placeholder-pink-200:focus::placeholder {
+    color: #fed7e2;
+  }
+
+  .md\:focus\:placeholder-pink-300:focus::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:focus\:placeholder-pink-300:focus::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:focus\:placeholder-pink-300:focus:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:focus\:placeholder-pink-300:focus::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:focus\:placeholder-pink-300:focus::placeholder {
+    color: #fbb6ce;
+  }
+
+  .md\:focus\:placeholder-pink-400:focus::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:focus\:placeholder-pink-400:focus::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:focus\:placeholder-pink-400:focus:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:focus\:placeholder-pink-400:focus::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .md\:focus\:placeholder-pink-400:focus::placeholder {
+    color: #f687b3;
+  }
+
+  .md\:focus\:placeholder-pink-500:focus::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:focus\:placeholder-pink-500:focus::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:focus\:placeholder-pink-500:focus:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:focus\:placeholder-pink-500:focus::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:focus\:placeholder-pink-500:focus::placeholder {
+    color: #ed64a6;
+  }
+
+  .md\:focus\:placeholder-pink-600:focus::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:focus\:placeholder-pink-600:focus::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:focus\:placeholder-pink-600:focus:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:focus\:placeholder-pink-600:focus::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:focus\:placeholder-pink-600:focus::placeholder {
+    color: #d53f8c;
+  }
+
+  .md\:focus\:placeholder-pink-700:focus::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .md\:focus\:placeholder-pink-700:focus::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .md\:focus\:placeholder-pink-700:focus:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .md\:focus\:placeholder-pink-700:focus::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .md\:focus\:placeholder-pink-700:focus::placeholder {
+    color: #b83280;
+  }
+
+  .md\:focus\:placeholder-pink-800:focus::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .md\:focus\:placeholder-pink-800:focus::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .md\:focus\:placeholder-pink-800:focus:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .md\:focus\:placeholder-pink-800:focus::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .md\:focus\:placeholder-pink-800:focus::placeholder {
+    color: #97266d;
+  }
+
+  .md\:focus\:placeholder-pink-900:focus::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .md\:focus\:placeholder-pink-900:focus::-moz-placeholder {
+    color: #702459;
+  }
+
+  .md\:focus\:placeholder-pink-900:focus:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .md\:focus\:placeholder-pink-900:focus::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .md\:focus\:placeholder-pink-900:focus::placeholder {
+    color: #702459;
+  }
+
+  .md\:pointer-events-none {
+    pointer-events: none;
+  }
+
+  .md\:pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  .md\:static {
+    position: static;
+  }
+
+  .md\:fixed {
+    position: fixed;
+  }
+
+  .md\:absolute {
+    position: absolute;
+  }
+
+  .md\:relative {
+    position: relative;
+  }
+
+  .md\:sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  .md\:inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .md\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .md\:inset-y-0 {
+    top: 0;
+    bottom: 0;
+  }
+
+  .md\:inset-x-0 {
+    right: 0;
+    left: 0;
+  }
+
+  .md\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .md\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
+  .md\:top-0 {
+    top: 0;
+  }
+
+  .md\:right-0 {
+    right: 0;
+  }
+
+  .md\:bottom-0 {
+    bottom: 0;
+  }
+
+  .md\:left-0 {
+    left: 0;
+  }
+
+  .md\:top-auto {
+    top: auto;
+  }
+
+  .md\:right-auto {
+    right: auto;
+  }
+
+  .md\:bottom-auto {
+    bottom: auto;
+  }
+
+  .md\:left-auto {
+    left: auto;
+  }
+
+  .md\:resize-none {
+    resize: none;
+  }
+
+  .md\:resize-y {
+    resize: vertical;
+  }
+
+  .md\:resize-x {
+    resize: horizontal;
+  }
+
+  .md\:resize {
+    resize: both;
+  }
+
+  .md\:shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:shadow-md {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:shadow-lg {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .md\:shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .md\:shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .md\:shadow-inner {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:shadow-outline {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .md\:shadow-none {
+    box-shadow: none;
+  }
+
+  .md\:hover\:shadow:hover {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:hover\:shadow-lg:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .md\:hover\:shadow-xl:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .md\:hover\:shadow-2xl:hover {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .md\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:hover\:shadow-outline:hover {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .md\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
+  .md\:focus\:shadow:focus {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:focus\:shadow-lg:focus {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .md\:focus\:shadow-xl:focus {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .md\:focus\:shadow-2xl:focus {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .md\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .md\:focus\:shadow-outline:focus {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .md\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
+  .md\:fill-current {
+    fill: currentColor;
+  }
+
+  .md\:stroke-current {
+    stroke: currentColor;
+  }
+
+  .md\:table-auto {
+    table-layout: auto;
+  }
+
+  .md\:table-fixed {
+    table-layout: fixed;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-center {
+    text-align: center;
+  }
+
+  .md\:text-right {
+    text-align: right;
+  }
+
+  .md\:text-justify {
+    text-align: justify;
+  }
+
+  .md\:text-transparent {
+    color: transparent;
+  }
+
+  .md\:text-black {
+    color: #000;
+  }
+
+  .md\:text-white {
+    color: #fff;
+  }
+
+  .md\:text-gray-100 {
+    color: #f7fafc;
+  }
+
+  .md\:text-gray-200 {
+    color: #edf2f7;
+  }
+
+  .md\:text-gray-300 {
+    color: #e2e8f0;
+  }
+
+  .md\:text-gray-400 {
+    color: #cbd5e0;
+  }
+
+  .md\:text-gray-500 {
+    color: #a0aec0;
+  }
+
+  .md\:text-gray-600 {
+    color: #718096;
+  }
+
+  .md\:text-gray-700 {
+    color: #4a5568;
+  }
+
+  .md\:text-gray-800 {
+    color: #2d3748;
+  }
+
+  .md\:text-gray-900 {
+    color: #1a202c;
+  }
+
+  .md\:text-red-100 {
+    color: #fff5f5;
+  }
+
+  .md\:text-red-200 {
+    color: #fed7d7;
+  }
+
+  .md\:text-red-300 {
+    color: #feb2b2;
+  }
+
+  .md\:text-red-400 {
+    color: #fc8181;
+  }
+
+  .md\:text-red-500 {
+    color: #f56565;
+  }
+
+  .md\:text-red-600 {
+    color: #e53e3e;
+  }
+
+  .md\:text-red-700 {
+    color: #c53030;
+  }
+
+  .md\:text-red-800 {
+    color: #9b2c2c;
+  }
+
+  .md\:text-red-900 {
+    color: #742a2a;
+  }
+
+  .md\:text-orange-100 {
+    color: #fffaf0;
+  }
+
+  .md\:text-orange-200 {
+    color: #feebc8;
+  }
+
+  .md\:text-orange-300 {
+    color: #fbd38d;
+  }
+
+  .md\:text-orange-400 {
+    color: #f6ad55;
+  }
+
+  .md\:text-orange-500 {
+    color: #ed8936;
+  }
+
+  .md\:text-orange-600 {
+    color: #dd6b20;
+  }
+
+  .md\:text-orange-700 {
+    color: #c05621;
+  }
+
+  .md\:text-orange-800 {
+    color: #9c4221;
+  }
+
+  .md\:text-orange-900 {
+    color: #7b341e;
+  }
+
+  .md\:text-yellow-100 {
+    color: #fffff0;
+  }
+
+  .md\:text-yellow-200 {
+    color: #fefcbf;
+  }
+
+  .md\:text-yellow-300 {
+    color: #faf089;
+  }
+
+  .md\:text-yellow-400 {
+    color: #f6e05e;
+  }
+
+  .md\:text-yellow-500 {
+    color: #ecc94b;
+  }
+
+  .md\:text-yellow-600 {
+    color: #d69e2e;
+  }
+
+  .md\:text-yellow-700 {
+    color: #b7791f;
+  }
+
+  .md\:text-yellow-800 {
+    color: #975a16;
+  }
+
+  .md\:text-yellow-900 {
+    color: #744210;
+  }
+
+  .md\:text-green-100 {
+    color: #f0fff4;
+  }
+
+  .md\:text-green-200 {
+    color: #c6f6d5;
+  }
+
+  .md\:text-green-300 {
+    color: #9ae6b4;
+  }
+
+  .md\:text-green-400 {
+    color: #68d391;
+  }
+
+  .md\:text-green-500 {
+    color: #48bb78;
+  }
+
+  .md\:text-green-600 {
+    color: #38a169;
+  }
+
+  .md\:text-green-700 {
+    color: #2f855a;
+  }
+
+  .md\:text-green-800 {
+    color: #276749;
+  }
+
+  .md\:text-green-900 {
+    color: #22543d;
+  }
+
+  .md\:text-teal-100 {
+    color: #e6fffa;
+  }
+
+  .md\:text-teal-200 {
+    color: #b2f5ea;
+  }
+
+  .md\:text-teal-300 {
+    color: #81e6d9;
+  }
+
+  .md\:text-teal-400 {
+    color: #4fd1c5;
+  }
+
+  .md\:text-teal-500 {
+    color: #38b2ac;
+  }
+
+  .md\:text-teal-600 {
+    color: #319795;
+  }
+
+  .md\:text-teal-700 {
+    color: #2c7a7b;
+  }
+
+  .md\:text-teal-800 {
+    color: #285e61;
+  }
+
+  .md\:text-teal-900 {
+    color: #234e52;
+  }
+
+  .md\:text-blue-100 {
+    color: #ebf8ff;
+  }
+
+  .md\:text-blue-200 {
+    color: #bee3f8;
+  }
+
+  .md\:text-blue-300 {
+    color: #90cdf4;
+  }
+
+  .md\:text-blue-400 {
+    color: #63b3ed;
+  }
+
+  .md\:text-blue-500 {
+    color: #4299e1;
+  }
+
+  .md\:text-blue-600 {
+    color: #3182ce;
+  }
+
+  .md\:text-blue-700 {
+    color: #2b6cb0;
+  }
+
+  .md\:text-blue-800 {
+    color: #2c5282;
+  }
+
+  .md\:text-blue-900 {
+    color: #2a4365;
+  }
+
+  .md\:text-indigo-100 {
+    color: #ebf4ff;
+  }
+
+  .md\:text-indigo-200 {
+    color: #c3dafe;
+  }
+
+  .md\:text-indigo-300 {
+    color: #a3bffa;
+  }
+
+  .md\:text-indigo-400 {
+    color: #7f9cf5;
+  }
+
+  .md\:text-indigo-500 {
+    color: #667eea;
+  }
+
+  .md\:text-indigo-600 {
+    color: #5a67d8;
+  }
+
+  .md\:text-indigo-700 {
+    color: #4c51bf;
+  }
+
+  .md\:text-indigo-800 {
+    color: #434190;
+  }
+
+  .md\:text-indigo-900 {
+    color: #3c366b;
+  }
+
+  .md\:text-purple-100 {
+    color: #faf5ff;
+  }
+
+  .md\:text-purple-200 {
+    color: #e9d8fd;
+  }
+
+  .md\:text-purple-300 {
+    color: #d6bcfa;
+  }
+
+  .md\:text-purple-400 {
+    color: #b794f4;
+  }
+
+  .md\:text-purple-500 {
+    color: #9f7aea;
+  }
+
+  .md\:text-purple-600 {
+    color: #805ad5;
+  }
+
+  .md\:text-purple-700 {
+    color: #6b46c1;
+  }
+
+  .md\:text-purple-800 {
+    color: #553c9a;
+  }
+
+  .md\:text-purple-900 {
+    color: #44337a;
+  }
+
+  .md\:text-pink-100 {
+    color: #fff5f7;
+  }
+
+  .md\:text-pink-200 {
+    color: #fed7e2;
+  }
+
+  .md\:text-pink-300 {
+    color: #fbb6ce;
+  }
+
+  .md\:text-pink-400 {
+    color: #f687b3;
+  }
+
+  .md\:text-pink-500 {
+    color: #ed64a6;
+  }
+
+  .md\:text-pink-600 {
+    color: #d53f8c;
+  }
+
+  .md\:text-pink-700 {
+    color: #b83280;
+  }
+
+  .md\:text-pink-800 {
+    color: #97266d;
+  }
+
+  .md\:text-pink-900 {
+    color: #702459;
+  }
+
+  .md\:hover\:text-transparent:hover {
+    color: transparent;
+  }
+
+  .md\:hover\:text-black:hover {
+    color: #000;
+  }
+
+  .md\:hover\:text-white:hover {
+    color: #fff;
+  }
+
+  .md\:hover\:text-gray-100:hover {
+    color: #f7fafc;
+  }
+
+  .md\:hover\:text-gray-200:hover {
+    color: #edf2f7;
+  }
+
+  .md\:hover\:text-gray-300:hover {
+    color: #e2e8f0;
+  }
+
+  .md\:hover\:text-gray-400:hover {
+    color: #cbd5e0;
+  }
+
+  .md\:hover\:text-gray-500:hover {
+    color: #a0aec0;
+  }
+
+  .md\:hover\:text-gray-600:hover {
+    color: #718096;
+  }
+
+  .md\:hover\:text-gray-700:hover {
+    color: #4a5568;
+  }
+
+  .md\:hover\:text-gray-800:hover {
+    color: #2d3748;
+  }
+
+  .md\:hover\:text-gray-900:hover {
+    color: #1a202c;
+  }
+
+  .md\:hover\:text-red-100:hover {
+    color: #fff5f5;
+  }
+
+  .md\:hover\:text-red-200:hover {
+    color: #fed7d7;
+  }
+
+  .md\:hover\:text-red-300:hover {
+    color: #feb2b2;
+  }
+
+  .md\:hover\:text-red-400:hover {
+    color: #fc8181;
+  }
+
+  .md\:hover\:text-red-500:hover {
+    color: #f56565;
+  }
+
+  .md\:hover\:text-red-600:hover {
+    color: #e53e3e;
+  }
+
+  .md\:hover\:text-red-700:hover {
+    color: #c53030;
+  }
+
+  .md\:hover\:text-red-800:hover {
+    color: #9b2c2c;
+  }
+
+  .md\:hover\:text-red-900:hover {
+    color: #742a2a;
+  }
+
+  .md\:hover\:text-orange-100:hover {
+    color: #fffaf0;
+  }
+
+  .md\:hover\:text-orange-200:hover {
+    color: #feebc8;
+  }
+
+  .md\:hover\:text-orange-300:hover {
+    color: #fbd38d;
+  }
+
+  .md\:hover\:text-orange-400:hover {
+    color: #f6ad55;
+  }
+
+  .md\:hover\:text-orange-500:hover {
+    color: #ed8936;
+  }
+
+  .md\:hover\:text-orange-600:hover {
+    color: #dd6b20;
+  }
+
+  .md\:hover\:text-orange-700:hover {
+    color: #c05621;
+  }
+
+  .md\:hover\:text-orange-800:hover {
+    color: #9c4221;
+  }
+
+  .md\:hover\:text-orange-900:hover {
+    color: #7b341e;
+  }
+
+  .md\:hover\:text-yellow-100:hover {
+    color: #fffff0;
+  }
+
+  .md\:hover\:text-yellow-200:hover {
+    color: #fefcbf;
+  }
+
+  .md\:hover\:text-yellow-300:hover {
+    color: #faf089;
+  }
+
+  .md\:hover\:text-yellow-400:hover {
+    color: #f6e05e;
+  }
+
+  .md\:hover\:text-yellow-500:hover {
+    color: #ecc94b;
+  }
+
+  .md\:hover\:text-yellow-600:hover {
+    color: #d69e2e;
+  }
+
+  .md\:hover\:text-yellow-700:hover {
+    color: #b7791f;
+  }
+
+  .md\:hover\:text-yellow-800:hover {
+    color: #975a16;
+  }
+
+  .md\:hover\:text-yellow-900:hover {
+    color: #744210;
+  }
+
+  .md\:hover\:text-green-100:hover {
+    color: #f0fff4;
+  }
+
+  .md\:hover\:text-green-200:hover {
+    color: #c6f6d5;
+  }
+
+  .md\:hover\:text-green-300:hover {
+    color: #9ae6b4;
+  }
+
+  .md\:hover\:text-green-400:hover {
+    color: #68d391;
+  }
+
+  .md\:hover\:text-green-500:hover {
+    color: #48bb78;
+  }
+
+  .md\:hover\:text-green-600:hover {
+    color: #38a169;
+  }
+
+  .md\:hover\:text-green-700:hover {
+    color: #2f855a;
+  }
+
+  .md\:hover\:text-green-800:hover {
+    color: #276749;
+  }
+
+  .md\:hover\:text-green-900:hover {
+    color: #22543d;
+  }
+
+  .md\:hover\:text-teal-100:hover {
+    color: #e6fffa;
+  }
+
+  .md\:hover\:text-teal-200:hover {
+    color: #b2f5ea;
+  }
+
+  .md\:hover\:text-teal-300:hover {
+    color: #81e6d9;
+  }
+
+  .md\:hover\:text-teal-400:hover {
+    color: #4fd1c5;
+  }
+
+  .md\:hover\:text-teal-500:hover {
+    color: #38b2ac;
+  }
+
+  .md\:hover\:text-teal-600:hover {
+    color: #319795;
+  }
+
+  .md\:hover\:text-teal-700:hover {
+    color: #2c7a7b;
+  }
+
+  .md\:hover\:text-teal-800:hover {
+    color: #285e61;
+  }
+
+  .md\:hover\:text-teal-900:hover {
+    color: #234e52;
+  }
+
+  .md\:hover\:text-blue-100:hover {
+    color: #ebf8ff;
+  }
+
+  .md\:hover\:text-blue-200:hover {
+    color: #bee3f8;
+  }
+
+  .md\:hover\:text-blue-300:hover {
+    color: #90cdf4;
+  }
+
+  .md\:hover\:text-blue-400:hover {
+    color: #63b3ed;
+  }
+
+  .md\:hover\:text-blue-500:hover {
+    color: #4299e1;
+  }
+
+  .md\:hover\:text-blue-600:hover {
+    color: #3182ce;
+  }
+
+  .md\:hover\:text-blue-700:hover {
+    color: #2b6cb0;
+  }
+
+  .md\:hover\:text-blue-800:hover {
+    color: #2c5282;
+  }
+
+  .md\:hover\:text-blue-900:hover {
+    color: #2a4365;
+  }
+
+  .md\:hover\:text-indigo-100:hover {
+    color: #ebf4ff;
+  }
+
+  .md\:hover\:text-indigo-200:hover {
+    color: #c3dafe;
+  }
+
+  .md\:hover\:text-indigo-300:hover {
+    color: #a3bffa;
+  }
+
+  .md\:hover\:text-indigo-400:hover {
+    color: #7f9cf5;
+  }
+
+  .md\:hover\:text-indigo-500:hover {
+    color: #667eea;
+  }
+
+  .md\:hover\:text-indigo-600:hover {
+    color: #5a67d8;
+  }
+
+  .md\:hover\:text-indigo-700:hover {
+    color: #4c51bf;
+  }
+
+  .md\:hover\:text-indigo-800:hover {
+    color: #434190;
+  }
+
+  .md\:hover\:text-indigo-900:hover {
+    color: #3c366b;
+  }
+
+  .md\:hover\:text-purple-100:hover {
+    color: #faf5ff;
+  }
+
+  .md\:hover\:text-purple-200:hover {
+    color: #e9d8fd;
+  }
+
+  .md\:hover\:text-purple-300:hover {
+    color: #d6bcfa;
+  }
+
+  .md\:hover\:text-purple-400:hover {
+    color: #b794f4;
+  }
+
+  .md\:hover\:text-purple-500:hover {
+    color: #9f7aea;
+  }
+
+  .md\:hover\:text-purple-600:hover {
+    color: #805ad5;
+  }
+
+  .md\:hover\:text-purple-700:hover {
+    color: #6b46c1;
+  }
+
+  .md\:hover\:text-purple-800:hover {
+    color: #553c9a;
+  }
+
+  .md\:hover\:text-purple-900:hover {
+    color: #44337a;
+  }
+
+  .md\:hover\:text-pink-100:hover {
+    color: #fff5f7;
+  }
+
+  .md\:hover\:text-pink-200:hover {
+    color: #fed7e2;
+  }
+
+  .md\:hover\:text-pink-300:hover {
+    color: #fbb6ce;
+  }
+
+  .md\:hover\:text-pink-400:hover {
+    color: #f687b3;
+  }
+
+  .md\:hover\:text-pink-500:hover {
+    color: #ed64a6;
+  }
+
+  .md\:hover\:text-pink-600:hover {
+    color: #d53f8c;
+  }
+
+  .md\:hover\:text-pink-700:hover {
+    color: #b83280;
+  }
+
+  .md\:hover\:text-pink-800:hover {
+    color: #97266d;
+  }
+
+  .md\:hover\:text-pink-900:hover {
+    color: #702459;
+  }
+
+  .md\:focus\:text-transparent:focus {
+    color: transparent;
+  }
+
+  .md\:focus\:text-black:focus {
+    color: #000;
+  }
+
+  .md\:focus\:text-white:focus {
+    color: #fff;
+  }
+
+  .md\:focus\:text-gray-100:focus {
+    color: #f7fafc;
+  }
+
+  .md\:focus\:text-gray-200:focus {
+    color: #edf2f7;
+  }
+
+  .md\:focus\:text-gray-300:focus {
+    color: #e2e8f0;
+  }
+
+  .md\:focus\:text-gray-400:focus {
+    color: #cbd5e0;
+  }
+
+  .md\:focus\:text-gray-500:focus {
+    color: #a0aec0;
+  }
+
+  .md\:focus\:text-gray-600:focus {
+    color: #718096;
+  }
+
+  .md\:focus\:text-gray-700:focus {
+    color: #4a5568;
+  }
+
+  .md\:focus\:text-gray-800:focus {
+    color: #2d3748;
+  }
+
+  .md\:focus\:text-gray-900:focus {
+    color: #1a202c;
+  }
+
+  .md\:focus\:text-red-100:focus {
+    color: #fff5f5;
+  }
+
+  .md\:focus\:text-red-200:focus {
+    color: #fed7d7;
+  }
+
+  .md\:focus\:text-red-300:focus {
+    color: #feb2b2;
+  }
+
+  .md\:focus\:text-red-400:focus {
+    color: #fc8181;
+  }
+
+  .md\:focus\:text-red-500:focus {
+    color: #f56565;
+  }
+
+  .md\:focus\:text-red-600:focus {
+    color: #e53e3e;
+  }
+
+  .md\:focus\:text-red-700:focus {
+    color: #c53030;
+  }
+
+  .md\:focus\:text-red-800:focus {
+    color: #9b2c2c;
+  }
+
+  .md\:focus\:text-red-900:focus {
+    color: #742a2a;
+  }
+
+  .md\:focus\:text-orange-100:focus {
+    color: #fffaf0;
+  }
+
+  .md\:focus\:text-orange-200:focus {
+    color: #feebc8;
+  }
+
+  .md\:focus\:text-orange-300:focus {
+    color: #fbd38d;
+  }
+
+  .md\:focus\:text-orange-400:focus {
+    color: #f6ad55;
+  }
+
+  .md\:focus\:text-orange-500:focus {
+    color: #ed8936;
+  }
+
+  .md\:focus\:text-orange-600:focus {
+    color: #dd6b20;
+  }
+
+  .md\:focus\:text-orange-700:focus {
+    color: #c05621;
+  }
+
+  .md\:focus\:text-orange-800:focus {
+    color: #9c4221;
+  }
+
+  .md\:focus\:text-orange-900:focus {
+    color: #7b341e;
+  }
+
+  .md\:focus\:text-yellow-100:focus {
+    color: #fffff0;
+  }
+
+  .md\:focus\:text-yellow-200:focus {
+    color: #fefcbf;
+  }
+
+  .md\:focus\:text-yellow-300:focus {
+    color: #faf089;
+  }
+
+  .md\:focus\:text-yellow-400:focus {
+    color: #f6e05e;
+  }
+
+  .md\:focus\:text-yellow-500:focus {
+    color: #ecc94b;
+  }
+
+  .md\:focus\:text-yellow-600:focus {
+    color: #d69e2e;
+  }
+
+  .md\:focus\:text-yellow-700:focus {
+    color: #b7791f;
+  }
+
+  .md\:focus\:text-yellow-800:focus {
+    color: #975a16;
+  }
+
+  .md\:focus\:text-yellow-900:focus {
+    color: #744210;
+  }
+
+  .md\:focus\:text-green-100:focus {
+    color: #f0fff4;
+  }
+
+  .md\:focus\:text-green-200:focus {
+    color: #c6f6d5;
+  }
+
+  .md\:focus\:text-green-300:focus {
+    color: #9ae6b4;
+  }
+
+  .md\:focus\:text-green-400:focus {
+    color: #68d391;
+  }
+
+  .md\:focus\:text-green-500:focus {
+    color: #48bb78;
+  }
+
+  .md\:focus\:text-green-600:focus {
+    color: #38a169;
+  }
+
+  .md\:focus\:text-green-700:focus {
+    color: #2f855a;
+  }
+
+  .md\:focus\:text-green-800:focus {
+    color: #276749;
+  }
+
+  .md\:focus\:text-green-900:focus {
+    color: #22543d;
+  }
+
+  .md\:focus\:text-teal-100:focus {
+    color: #e6fffa;
+  }
+
+  .md\:focus\:text-teal-200:focus {
+    color: #b2f5ea;
+  }
+
+  .md\:focus\:text-teal-300:focus {
+    color: #81e6d9;
+  }
+
+  .md\:focus\:text-teal-400:focus {
+    color: #4fd1c5;
+  }
+
+  .md\:focus\:text-teal-500:focus {
+    color: #38b2ac;
+  }
+
+  .md\:focus\:text-teal-600:focus {
+    color: #319795;
+  }
+
+  .md\:focus\:text-teal-700:focus {
+    color: #2c7a7b;
+  }
+
+  .md\:focus\:text-teal-800:focus {
+    color: #285e61;
+  }
+
+  .md\:focus\:text-teal-900:focus {
+    color: #234e52;
+  }
+
+  .md\:focus\:text-blue-100:focus {
+    color: #ebf8ff;
+  }
+
+  .md\:focus\:text-blue-200:focus {
+    color: #bee3f8;
+  }
+
+  .md\:focus\:text-blue-300:focus {
+    color: #90cdf4;
+  }
+
+  .md\:focus\:text-blue-400:focus {
+    color: #63b3ed;
+  }
+
+  .md\:focus\:text-blue-500:focus {
+    color: #4299e1;
+  }
+
+  .md\:focus\:text-blue-600:focus {
+    color: #3182ce;
+  }
+
+  .md\:focus\:text-blue-700:focus {
+    color: #2b6cb0;
+  }
+
+  .md\:focus\:text-blue-800:focus {
+    color: #2c5282;
+  }
+
+  .md\:focus\:text-blue-900:focus {
+    color: #2a4365;
+  }
+
+  .md\:focus\:text-indigo-100:focus {
+    color: #ebf4ff;
+  }
+
+  .md\:focus\:text-indigo-200:focus {
+    color: #c3dafe;
+  }
+
+  .md\:focus\:text-indigo-300:focus {
+    color: #a3bffa;
+  }
+
+  .md\:focus\:text-indigo-400:focus {
+    color: #7f9cf5;
+  }
+
+  .md\:focus\:text-indigo-500:focus {
+    color: #667eea;
+  }
+
+  .md\:focus\:text-indigo-600:focus {
+    color: #5a67d8;
+  }
+
+  .md\:focus\:text-indigo-700:focus {
+    color: #4c51bf;
+  }
+
+  .md\:focus\:text-indigo-800:focus {
+    color: #434190;
+  }
+
+  .md\:focus\:text-indigo-900:focus {
+    color: #3c366b;
+  }
+
+  .md\:focus\:text-purple-100:focus {
+    color: #faf5ff;
+  }
+
+  .md\:focus\:text-purple-200:focus {
+    color: #e9d8fd;
+  }
+
+  .md\:focus\:text-purple-300:focus {
+    color: #d6bcfa;
+  }
+
+  .md\:focus\:text-purple-400:focus {
+    color: #b794f4;
+  }
+
+  .md\:focus\:text-purple-500:focus {
+    color: #9f7aea;
+  }
+
+  .md\:focus\:text-purple-600:focus {
+    color: #805ad5;
+  }
+
+  .md\:focus\:text-purple-700:focus {
+    color: #6b46c1;
+  }
+
+  .md\:focus\:text-purple-800:focus {
+    color: #553c9a;
+  }
+
+  .md\:focus\:text-purple-900:focus {
+    color: #44337a;
+  }
+
+  .md\:focus\:text-pink-100:focus {
+    color: #fff5f7;
+  }
+
+  .md\:focus\:text-pink-200:focus {
+    color: #fed7e2;
+  }
+
+  .md\:focus\:text-pink-300:focus {
+    color: #fbb6ce;
+  }
+
+  .md\:focus\:text-pink-400:focus {
+    color: #f687b3;
+  }
+
+  .md\:focus\:text-pink-500:focus {
+    color: #ed64a6;
+  }
+
+  .md\:focus\:text-pink-600:focus {
+    color: #d53f8c;
+  }
+
+  .md\:focus\:text-pink-700:focus {
+    color: #b83280;
+  }
+
+  .md\:focus\:text-pink-800:focus {
+    color: #97266d;
+  }
+
+  .md\:focus\:text-pink-900:focus {
+    color: #702459;
+  }
+
+  .md\:text-xs {
+    font-size: 0.75rem;
+  }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+  }
+
+  .md\:text-6xl {
+    font-size: 4rem;
+  }
+
+  .md\:italic {
+    font-style: italic;
+  }
+
+  .md\:not-italic {
+    font-style: normal;
+  }
+
+  .md\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .md\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .md\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .md\:normal-case {
+    text-transform: none;
+  }
+
+  .md\:underline {
+    text-decoration: underline;
+  }
+
+  .md\:line-through {
+    text-decoration: line-through;
+  }
+
+  .md\:no-underline {
+    text-decoration: none;
+  }
+
+  .md\:hover\:underline:hover {
+    text-decoration: underline;
+  }
+
+  .md\:hover\:line-through:hover {
+    text-decoration: line-through;
+  }
+
+  .md\:hover\:no-underline:hover {
+    text-decoration: none;
+  }
+
+  .md\:focus\:underline:focus {
+    text-decoration: underline;
+  }
+
+  .md\:focus\:line-through:focus {
+    text-decoration: line-through;
+  }
+
+  .md\:focus\:no-underline:focus {
+    text-decoration: none;
+  }
+
+  .md\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .md\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  .md\:tracking-tighter {
+    letter-spacing: -0.05em;
+  }
+
+  .md\:tracking-tight {
+    letter-spacing: -0.025em;
+  }
+
+  .md\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .md\:tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .md\:tracking-wider {
+    letter-spacing: 0.05em;
+  }
+
+  .md\:tracking-widest {
+    letter-spacing: 0.1em;
+  }
+
+  .md\:select-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+
+  .md\:select-text {
+    -webkit-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
+  }
+
+  .md\:select-all {
+    -webkit-user-select: all;
+       -moz-user-select: all;
+        -ms-user-select: all;
+            user-select: all;
+  }
+
+  .md\:select-auto {
+    -webkit-user-select: auto;
+       -moz-user-select: auto;
+        -ms-user-select: auto;
+            user-select: auto;
+  }
+
+  .md\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .md\:align-top {
+    vertical-align: top;
+  }
+
+  .md\:align-middle {
+    vertical-align: middle;
+  }
+
+  .md\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .md\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .md\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
+  .md\:visible {
+    visibility: visible;
+  }
+
+  .md\:invisible {
+    visibility: hidden;
+  }
+
+  .md\:whitespace-normal {
+    white-space: normal;
+  }
+
+  .md\:whitespace-no-wrap {
+    white-space: nowrap;
+  }
+
+  .md\:whitespace-pre {
+    white-space: pre;
+  }
+
+  .md\:whitespace-pre-line {
+    white-space: pre-line;
+  }
+
+  .md\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .md\:break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+
+  .md\:break-words {
+    overflow-wrap: break-word;
+  }
+
+  .md\:break-all {
+    word-break: break-all;
+  }
+
+  .md\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .md\:w-0 {
+    width: 0;
+  }
+
+  .md\:w-1 {
+    width: 0.25rem;
+  }
+
+  .md\:w-2 {
+    width: 0.5rem;
+  }
+
+  .md\:w-3 {
+    width: 0.75rem;
+  }
+
+  .md\:w-4 {
+    width: 1rem;
+  }
+
+  .md\:w-5 {
+    width: 1.25rem;
+  }
+
+  .md\:w-6 {
+    width: 1.5rem;
+  }
+
+  .md\:w-8 {
+    width: 2rem;
+  }
+
+  .md\:w-10 {
+    width: 2.5rem;
+  }
+
+  .md\:w-12 {
+    width: 3rem;
+  }
+
+  .md\:w-16 {
+    width: 4rem;
+  }
+
+  .md\:w-20 {
+    width: 5rem;
+  }
+
+  .md\:w-24 {
+    width: 6rem;
+  }
+
+  .md\:w-32 {
+    width: 8rem;
+  }
+
+  .md\:w-40 {
+    width: 10rem;
+  }
+
+  .md\:w-48 {
+    width: 12rem;
+  }
+
+  .md\:w-56 {
+    width: 14rem;
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+
+  .md\:w-auto {
+    width: auto;
+  }
+
+  .md\:w-px {
+    width: 1px;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .md\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
+  .md\:w-2\/4 {
+    width: 50%;
+  }
+
+  .md\:w-3\/4 {
+    width: 75%;
+  }
+
+  .md\:w-1\/5 {
+    width: 20%;
+  }
+
+  .md\:w-2\/5 {
+    width: 40%;
+  }
+
+  .md\:w-3\/5 {
+    width: 60%;
+  }
+
+  .md\:w-4\/5 {
+    width: 80%;
+  }
+
+  .md\:w-1\/6 {
+    width: 16.666667%;
+  }
+
+  .md\:w-2\/6 {
+    width: 33.333333%;
+  }
+
+  .md\:w-3\/6 {
+    width: 50%;
+  }
+
+  .md\:w-4\/6 {
+    width: 66.666667%;
+  }
+
+  .md\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .md\:w-1\/12 {
+    width: 8.333333%;
+  }
+
+  .md\:w-2\/12 {
+    width: 16.666667%;
+  }
+
+  .md\:w-3\/12 {
+    width: 25%;
+  }
+
+  .md\:w-4\/12 {
+    width: 33.333333%;
+  }
+
+  .md\:w-5\/12 {
+    width: 41.666667%;
+  }
+
+  .md\:w-6\/12 {
+    width: 50%;
+  }
+
+  .md\:w-7\/12 {
+    width: 58.333333%;
+  }
+
+  .md\:w-8\/12 {
+    width: 66.666667%;
+  }
+
+  .md\:w-9\/12 {
+    width: 75%;
+  }
+
+  .md\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .md\:w-11\/12 {
+    width: 91.666667%;
+  }
+
+  .md\:w-full {
+    width: 100%;
+  }
+
+  .md\:w-screen {
+    width: 100vw;
+  }
+
+  .md\:z-0 {
+    z-index: 0;
+  }
+
+  .md\:z-10 {
+    z-index: 10;
+  }
+
+  .md\:z-20 {
+    z-index: 20;
+  }
+
+  .md\:z-30 {
+    z-index: 30;
+  }
+
+  .md\:z-40 {
+    z-index: 40;
+  }
+
+  .md\:z-50 {
+    z-index: 50;
+  }
+
+  .md\:z-auto {
+    z-index: auto;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .lg\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .lg\:focus\:sr-only:focus {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .lg\:focus\:not-sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .lg\:appearance-none {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+  .lg\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .lg\:bg-local {
+    background-attachment: local;
+  }
+
+  .lg\:bg-scroll {
+    background-attachment: scroll;
+  }
+
+  .lg\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .lg\:bg-black {
+    background-color: #000;
+  }
+
+  .lg\:bg-white {
+    background-color: #fff;
+  }
+
+  .lg\:bg-gray-100 {
+    background-color: #f7fafc;
+  }
+
+  .lg\:bg-gray-200 {
+    background-color: #edf2f7;
+  }
+
+  .lg\:bg-gray-300 {
+    background-color: #e2e8f0;
+  }
+
+  .lg\:bg-gray-400 {
+    background-color: #cbd5e0;
+  }
+
+  .lg\:bg-gray-500 {
+    background-color: #a0aec0;
+  }
+
+  .lg\:bg-gray-600 {
+    background-color: #718096;
+  }
+
+  .lg\:bg-gray-700 {
+    background-color: #4a5568;
+  }
+
+  .lg\:bg-gray-800 {
+    background-color: #2d3748;
+  }
+
+  .lg\:bg-gray-900 {
+    background-color: #1a202c;
+  }
+
+  .lg\:bg-red-100 {
+    background-color: #fff5f5;
+  }
+
+  .lg\:bg-red-200 {
+    background-color: #fed7d7;
+  }
+
+  .lg\:bg-red-300 {
+    background-color: #feb2b2;
+  }
+
+  .lg\:bg-red-400 {
+    background-color: #fc8181;
+  }
+
+  .lg\:bg-red-500 {
+    background-color: #f56565;
+  }
+
+  .lg\:bg-red-600 {
+    background-color: #e53e3e;
+  }
+
+  .lg\:bg-red-700 {
+    background-color: #c53030;
+  }
+
+  .lg\:bg-red-800 {
+    background-color: #9b2c2c;
+  }
+
+  .lg\:bg-red-900 {
+    background-color: #742a2a;
+  }
+
+  .lg\:bg-orange-100 {
+    background-color: #fffaf0;
+  }
+
+  .lg\:bg-orange-200 {
+    background-color: #feebc8;
+  }
+
+  .lg\:bg-orange-300 {
+    background-color: #fbd38d;
+  }
+
+  .lg\:bg-orange-400 {
+    background-color: #f6ad55;
+  }
+
+  .lg\:bg-orange-500 {
+    background-color: #ed8936;
+  }
+
+  .lg\:bg-orange-600 {
+    background-color: #dd6b20;
+  }
+
+  .lg\:bg-orange-700 {
+    background-color: #c05621;
+  }
+
+  .lg\:bg-orange-800 {
+    background-color: #9c4221;
+  }
+
+  .lg\:bg-orange-900 {
+    background-color: #7b341e;
+  }
+
+  .lg\:bg-yellow-100 {
+    background-color: #fffff0;
+  }
+
+  .lg\:bg-yellow-200 {
+    background-color: #fefcbf;
+  }
+
+  .lg\:bg-yellow-300 {
+    background-color: #faf089;
+  }
+
+  .lg\:bg-yellow-400 {
+    background-color: #f6e05e;
+  }
+
+  .lg\:bg-yellow-500 {
+    background-color: #ecc94b;
+  }
+
+  .lg\:bg-yellow-600 {
+    background-color: #d69e2e;
+  }
+
+  .lg\:bg-yellow-700 {
+    background-color: #b7791f;
+  }
+
+  .lg\:bg-yellow-800 {
+    background-color: #975a16;
+  }
+
+  .lg\:bg-yellow-900 {
+    background-color: #744210;
+  }
+
+  .lg\:bg-green-100 {
+    background-color: #f0fff4;
+  }
+
+  .lg\:bg-green-200 {
+    background-color: #c6f6d5;
+  }
+
+  .lg\:bg-green-300 {
+    background-color: #9ae6b4;
+  }
+
+  .lg\:bg-green-400 {
+    background-color: #68d391;
+  }
+
+  .lg\:bg-green-500 {
+    background-color: #48bb78;
+  }
+
+  .lg\:bg-green-600 {
+    background-color: #38a169;
+  }
+
+  .lg\:bg-green-700 {
+    background-color: #2f855a;
+  }
+
+  .lg\:bg-green-800 {
+    background-color: #276749;
+  }
+
+  .lg\:bg-green-900 {
+    background-color: #22543d;
+  }
+
+  .lg\:bg-teal-100 {
+    background-color: #e6fffa;
+  }
+
+  .lg\:bg-teal-200 {
+    background-color: #b2f5ea;
+  }
+
+  .lg\:bg-teal-300 {
+    background-color: #81e6d9;
+  }
+
+  .lg\:bg-teal-400 {
+    background-color: #4fd1c5;
+  }
+
+  .lg\:bg-teal-500 {
+    background-color: #38b2ac;
+  }
+
+  .lg\:bg-teal-600 {
+    background-color: #319795;
+  }
+
+  .lg\:bg-teal-700 {
+    background-color: #2c7a7b;
+  }
+
+  .lg\:bg-teal-800 {
+    background-color: #285e61;
+  }
+
+  .lg\:bg-teal-900 {
+    background-color: #234e52;
+  }
+
+  .lg\:bg-blue-100 {
+    background-color: #ebf8ff;
+  }
+
+  .lg\:bg-blue-200 {
+    background-color: #bee3f8;
+  }
+
+  .lg\:bg-blue-300 {
+    background-color: #90cdf4;
+  }
+
+  .lg\:bg-blue-400 {
+    background-color: #63b3ed;
+  }
+
+  .lg\:bg-blue-500 {
+    background-color: #4299e1;
+  }
+
+  .lg\:bg-blue-600 {
+    background-color: #3182ce;
+  }
+
+  .lg\:bg-blue-700 {
+    background-color: #2b6cb0;
+  }
+
+  .lg\:bg-blue-800 {
+    background-color: #2c5282;
+  }
+
+  .lg\:bg-blue-900 {
+    background-color: #2a4365;
+  }
+
+  .lg\:bg-indigo-100 {
+    background-color: #ebf4ff;
+  }
+
+  .lg\:bg-indigo-200 {
+    background-color: #c3dafe;
+  }
+
+  .lg\:bg-indigo-300 {
+    background-color: #a3bffa;
+  }
+
+  .lg\:bg-indigo-400 {
+    background-color: #7f9cf5;
+  }
+
+  .lg\:bg-indigo-500 {
+    background-color: #667eea;
+  }
+
+  .lg\:bg-indigo-600 {
+    background-color: #5a67d8;
+  }
+
+  .lg\:bg-indigo-700 {
+    background-color: #4c51bf;
+  }
+
+  .lg\:bg-indigo-800 {
+    background-color: #434190;
+  }
+
+  .lg\:bg-indigo-900 {
+    background-color: #3c366b;
+  }
+
+  .lg\:bg-purple-100 {
+    background-color: #faf5ff;
+  }
+
+  .lg\:bg-purple-200 {
+    background-color: #e9d8fd;
+  }
+
+  .lg\:bg-purple-300 {
+    background-color: #d6bcfa;
+  }
+
+  .lg\:bg-purple-400 {
+    background-color: #b794f4;
+  }
+
+  .lg\:bg-purple-500 {
+    background-color: #9f7aea;
+  }
+
+  .lg\:bg-purple-600 {
+    background-color: #805ad5;
+  }
+
+  .lg\:bg-purple-700 {
+    background-color: #6b46c1;
+  }
+
+  .lg\:bg-purple-800 {
+    background-color: #553c9a;
+  }
+
+  .lg\:bg-purple-900 {
+    background-color: #44337a;
+  }
+
+  .lg\:bg-pink-100 {
+    background-color: #fff5f7;
+  }
+
+  .lg\:bg-pink-200 {
+    background-color: #fed7e2;
+  }
+
+  .lg\:bg-pink-300 {
+    background-color: #fbb6ce;
+  }
+
+  .lg\:bg-pink-400 {
+    background-color: #f687b3;
+  }
+
+  .lg\:bg-pink-500 {
+    background-color: #ed64a6;
+  }
+
+  .lg\:bg-pink-600 {
+    background-color: #d53f8c;
+  }
+
+  .lg\:bg-pink-700 {
+    background-color: #b83280;
+  }
+
+  .lg\:bg-pink-800 {
+    background-color: #97266d;
+  }
+
+  .lg\:bg-pink-900 {
+    background-color: #702459;
+  }
+
+  .lg\:hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+
+  .lg\:hover\:bg-black:hover {
+    background-color: #000;
+  }
+
+  .lg\:hover\:bg-white:hover {
+    background-color: #fff;
+  }
+
+  .lg\:hover\:bg-gray-100:hover {
+    background-color: #f7fafc;
+  }
+
+  .lg\:hover\:bg-gray-200:hover {
+    background-color: #edf2f7;
+  }
+
+  .lg\:hover\:bg-gray-300:hover {
+    background-color: #e2e8f0;
+  }
+
+  .lg\:hover\:bg-gray-400:hover {
+    background-color: #cbd5e0;
+  }
+
+  .lg\:hover\:bg-gray-500:hover {
+    background-color: #a0aec0;
+  }
+
+  .lg\:hover\:bg-gray-600:hover {
+    background-color: #718096;
+  }
+
+  .lg\:hover\:bg-gray-700:hover {
+    background-color: #4a5568;
+  }
+
+  .lg\:hover\:bg-gray-800:hover {
+    background-color: #2d3748;
+  }
+
+  .lg\:hover\:bg-gray-900:hover {
+    background-color: #1a202c;
+  }
+
+  .lg\:hover\:bg-red-100:hover {
+    background-color: #fff5f5;
+  }
+
+  .lg\:hover\:bg-red-200:hover {
+    background-color: #fed7d7;
+  }
+
+  .lg\:hover\:bg-red-300:hover {
+    background-color: #feb2b2;
+  }
+
+  .lg\:hover\:bg-red-400:hover {
+    background-color: #fc8181;
+  }
+
+  .lg\:hover\:bg-red-500:hover {
+    background-color: #f56565;
+  }
+
+  .lg\:hover\:bg-red-600:hover {
+    background-color: #e53e3e;
+  }
+
+  .lg\:hover\:bg-red-700:hover {
+    background-color: #c53030;
+  }
+
+  .lg\:hover\:bg-red-800:hover {
+    background-color: #9b2c2c;
+  }
+
+  .lg\:hover\:bg-red-900:hover {
+    background-color: #742a2a;
+  }
+
+  .lg\:hover\:bg-orange-100:hover {
+    background-color: #fffaf0;
+  }
+
+  .lg\:hover\:bg-orange-200:hover {
+    background-color: #feebc8;
+  }
+
+  .lg\:hover\:bg-orange-300:hover {
+    background-color: #fbd38d;
+  }
+
+  .lg\:hover\:bg-orange-400:hover {
+    background-color: #f6ad55;
+  }
+
+  .lg\:hover\:bg-orange-500:hover {
+    background-color: #ed8936;
+  }
+
+  .lg\:hover\:bg-orange-600:hover {
+    background-color: #dd6b20;
+  }
+
+  .lg\:hover\:bg-orange-700:hover {
+    background-color: #c05621;
+  }
+
+  .lg\:hover\:bg-orange-800:hover {
+    background-color: #9c4221;
+  }
+
+  .lg\:hover\:bg-orange-900:hover {
+    background-color: #7b341e;
+  }
+
+  .lg\:hover\:bg-yellow-100:hover {
+    background-color: #fffff0;
+  }
+
+  .lg\:hover\:bg-yellow-200:hover {
+    background-color: #fefcbf;
+  }
+
+  .lg\:hover\:bg-yellow-300:hover {
+    background-color: #faf089;
+  }
+
+  .lg\:hover\:bg-yellow-400:hover {
+    background-color: #f6e05e;
+  }
+
+  .lg\:hover\:bg-yellow-500:hover {
+    background-color: #ecc94b;
+  }
+
+  .lg\:hover\:bg-yellow-600:hover {
+    background-color: #d69e2e;
+  }
+
+  .lg\:hover\:bg-yellow-700:hover {
+    background-color: #b7791f;
+  }
+
+  .lg\:hover\:bg-yellow-800:hover {
+    background-color: #975a16;
+  }
+
+  .lg\:hover\:bg-yellow-900:hover {
+    background-color: #744210;
+  }
+
+  .lg\:hover\:bg-green-100:hover {
+    background-color: #f0fff4;
+  }
+
+  .lg\:hover\:bg-green-200:hover {
+    background-color: #c6f6d5;
+  }
+
+  .lg\:hover\:bg-green-300:hover {
+    background-color: #9ae6b4;
+  }
+
+  .lg\:hover\:bg-green-400:hover {
+    background-color: #68d391;
+  }
+
+  .lg\:hover\:bg-green-500:hover {
+    background-color: #48bb78;
+  }
+
+  .lg\:hover\:bg-green-600:hover {
+    background-color: #38a169;
+  }
+
+  .lg\:hover\:bg-green-700:hover {
+    background-color: #2f855a;
+  }
+
+  .lg\:hover\:bg-green-800:hover {
+    background-color: #276749;
+  }
+
+  .lg\:hover\:bg-green-900:hover {
+    background-color: #22543d;
+  }
+
+  .lg\:hover\:bg-teal-100:hover {
+    background-color: #e6fffa;
+  }
+
+  .lg\:hover\:bg-teal-200:hover {
+    background-color: #b2f5ea;
+  }
+
+  .lg\:hover\:bg-teal-300:hover {
+    background-color: #81e6d9;
+  }
+
+  .lg\:hover\:bg-teal-400:hover {
+    background-color: #4fd1c5;
+  }
+
+  .lg\:hover\:bg-teal-500:hover {
+    background-color: #38b2ac;
+  }
+
+  .lg\:hover\:bg-teal-600:hover {
+    background-color: #319795;
+  }
+
+  .lg\:hover\:bg-teal-700:hover {
+    background-color: #2c7a7b;
+  }
+
+  .lg\:hover\:bg-teal-800:hover {
+    background-color: #285e61;
+  }
+
+  .lg\:hover\:bg-teal-900:hover {
+    background-color: #234e52;
+  }
+
+  .lg\:hover\:bg-blue-100:hover {
+    background-color: #ebf8ff;
+  }
+
+  .lg\:hover\:bg-blue-200:hover {
+    background-color: #bee3f8;
+  }
+
+  .lg\:hover\:bg-blue-300:hover {
+    background-color: #90cdf4;
+  }
+
+  .lg\:hover\:bg-blue-400:hover {
+    background-color: #63b3ed;
+  }
+
+  .lg\:hover\:bg-blue-500:hover {
+    background-color: #4299e1;
+  }
+
+  .lg\:hover\:bg-blue-600:hover {
+    background-color: #3182ce;
+  }
+
+  .lg\:hover\:bg-blue-700:hover {
+    background-color: #2b6cb0;
+  }
+
+  .lg\:hover\:bg-blue-800:hover {
+    background-color: #2c5282;
+  }
+
+  .lg\:hover\:bg-blue-900:hover {
+    background-color: #2a4365;
+  }
+
+  .lg\:hover\:bg-indigo-100:hover {
+    background-color: #ebf4ff;
+  }
+
+  .lg\:hover\:bg-indigo-200:hover {
+    background-color: #c3dafe;
+  }
+
+  .lg\:hover\:bg-indigo-300:hover {
+    background-color: #a3bffa;
+  }
+
+  .lg\:hover\:bg-indigo-400:hover {
+    background-color: #7f9cf5;
+  }
+
+  .lg\:hover\:bg-indigo-500:hover {
+    background-color: #667eea;
+  }
+
+  .lg\:hover\:bg-indigo-600:hover {
+    background-color: #5a67d8;
+  }
+
+  .lg\:hover\:bg-indigo-700:hover {
+    background-color: #4c51bf;
+  }
+
+  .lg\:hover\:bg-indigo-800:hover {
+    background-color: #434190;
+  }
+
+  .lg\:hover\:bg-indigo-900:hover {
+    background-color: #3c366b;
+  }
+
+  .lg\:hover\:bg-purple-100:hover {
+    background-color: #faf5ff;
+  }
+
+  .lg\:hover\:bg-purple-200:hover {
+    background-color: #e9d8fd;
+  }
+
+  .lg\:hover\:bg-purple-300:hover {
+    background-color: #d6bcfa;
+  }
+
+  .lg\:hover\:bg-purple-400:hover {
+    background-color: #b794f4;
+  }
+
+  .lg\:hover\:bg-purple-500:hover {
+    background-color: #9f7aea;
+  }
+
+  .lg\:hover\:bg-purple-600:hover {
+    background-color: #805ad5;
+  }
+
+  .lg\:hover\:bg-purple-700:hover {
+    background-color: #6b46c1;
+  }
+
+  .lg\:hover\:bg-purple-800:hover {
+    background-color: #553c9a;
+  }
+
+  .lg\:hover\:bg-purple-900:hover {
+    background-color: #44337a;
+  }
+
+  .lg\:hover\:bg-pink-100:hover {
+    background-color: #fff5f7;
+  }
+
+  .lg\:hover\:bg-pink-200:hover {
+    background-color: #fed7e2;
+  }
+
+  .lg\:hover\:bg-pink-300:hover {
+    background-color: #fbb6ce;
+  }
+
+  .lg\:hover\:bg-pink-400:hover {
+    background-color: #f687b3;
+  }
+
+  .lg\:hover\:bg-pink-500:hover {
+    background-color: #ed64a6;
+  }
+
+  .lg\:hover\:bg-pink-600:hover {
+    background-color: #d53f8c;
+  }
+
+  .lg\:hover\:bg-pink-700:hover {
+    background-color: #b83280;
+  }
+
+  .lg\:hover\:bg-pink-800:hover {
+    background-color: #97266d;
+  }
+
+  .lg\:hover\:bg-pink-900:hover {
+    background-color: #702459;
+  }
+
+  .lg\:focus\:bg-transparent:focus {
+    background-color: transparent;
+  }
+
+  .lg\:focus\:bg-black:focus {
+    background-color: #000;
+  }
+
+  .lg\:focus\:bg-white:focus {
+    background-color: #fff;
+  }
+
+  .lg\:focus\:bg-gray-100:focus {
+    background-color: #f7fafc;
+  }
+
+  .lg\:focus\:bg-gray-200:focus {
+    background-color: #edf2f7;
+  }
+
+  .lg\:focus\:bg-gray-300:focus {
+    background-color: #e2e8f0;
+  }
+
+  .lg\:focus\:bg-gray-400:focus {
+    background-color: #cbd5e0;
+  }
+
+  .lg\:focus\:bg-gray-500:focus {
+    background-color: #a0aec0;
+  }
+
+  .lg\:focus\:bg-gray-600:focus {
+    background-color: #718096;
+  }
+
+  .lg\:focus\:bg-gray-700:focus {
+    background-color: #4a5568;
+  }
+
+  .lg\:focus\:bg-gray-800:focus {
+    background-color: #2d3748;
+  }
+
+  .lg\:focus\:bg-gray-900:focus {
+    background-color: #1a202c;
+  }
+
+  .lg\:focus\:bg-red-100:focus {
+    background-color: #fff5f5;
+  }
+
+  .lg\:focus\:bg-red-200:focus {
+    background-color: #fed7d7;
+  }
+
+  .lg\:focus\:bg-red-300:focus {
+    background-color: #feb2b2;
+  }
+
+  .lg\:focus\:bg-red-400:focus {
+    background-color: #fc8181;
+  }
+
+  .lg\:focus\:bg-red-500:focus {
+    background-color: #f56565;
+  }
+
+  .lg\:focus\:bg-red-600:focus {
+    background-color: #e53e3e;
+  }
+
+  .lg\:focus\:bg-red-700:focus {
+    background-color: #c53030;
+  }
+
+  .lg\:focus\:bg-red-800:focus {
+    background-color: #9b2c2c;
+  }
+
+  .lg\:focus\:bg-red-900:focus {
+    background-color: #742a2a;
+  }
+
+  .lg\:focus\:bg-orange-100:focus {
+    background-color: #fffaf0;
+  }
+
+  .lg\:focus\:bg-orange-200:focus {
+    background-color: #feebc8;
+  }
+
+  .lg\:focus\:bg-orange-300:focus {
+    background-color: #fbd38d;
+  }
+
+  .lg\:focus\:bg-orange-400:focus {
+    background-color: #f6ad55;
+  }
+
+  .lg\:focus\:bg-orange-500:focus {
+    background-color: #ed8936;
+  }
+
+  .lg\:focus\:bg-orange-600:focus {
+    background-color: #dd6b20;
+  }
+
+  .lg\:focus\:bg-orange-700:focus {
+    background-color: #c05621;
+  }
+
+  .lg\:focus\:bg-orange-800:focus {
+    background-color: #9c4221;
+  }
+
+  .lg\:focus\:bg-orange-900:focus {
+    background-color: #7b341e;
+  }
+
+  .lg\:focus\:bg-yellow-100:focus {
+    background-color: #fffff0;
+  }
+
+  .lg\:focus\:bg-yellow-200:focus {
+    background-color: #fefcbf;
+  }
+
+  .lg\:focus\:bg-yellow-300:focus {
+    background-color: #faf089;
+  }
+
+  .lg\:focus\:bg-yellow-400:focus {
+    background-color: #f6e05e;
+  }
+
+  .lg\:focus\:bg-yellow-500:focus {
+    background-color: #ecc94b;
+  }
+
+  .lg\:focus\:bg-yellow-600:focus {
+    background-color: #d69e2e;
+  }
+
+  .lg\:focus\:bg-yellow-700:focus {
+    background-color: #b7791f;
+  }
+
+  .lg\:focus\:bg-yellow-800:focus {
+    background-color: #975a16;
+  }
+
+  .lg\:focus\:bg-yellow-900:focus {
+    background-color: #744210;
+  }
+
+  .lg\:focus\:bg-green-100:focus {
+    background-color: #f0fff4;
+  }
+
+  .lg\:focus\:bg-green-200:focus {
+    background-color: #c6f6d5;
+  }
+
+  .lg\:focus\:bg-green-300:focus {
+    background-color: #9ae6b4;
+  }
+
+  .lg\:focus\:bg-green-400:focus {
+    background-color: #68d391;
+  }
+
+  .lg\:focus\:bg-green-500:focus {
+    background-color: #48bb78;
+  }
+
+  .lg\:focus\:bg-green-600:focus {
+    background-color: #38a169;
+  }
+
+  .lg\:focus\:bg-green-700:focus {
+    background-color: #2f855a;
+  }
+
+  .lg\:focus\:bg-green-800:focus {
+    background-color: #276749;
+  }
+
+  .lg\:focus\:bg-green-900:focus {
+    background-color: #22543d;
+  }
+
+  .lg\:focus\:bg-teal-100:focus {
+    background-color: #e6fffa;
+  }
+
+  .lg\:focus\:bg-teal-200:focus {
+    background-color: #b2f5ea;
+  }
+
+  .lg\:focus\:bg-teal-300:focus {
+    background-color: #81e6d9;
+  }
+
+  .lg\:focus\:bg-teal-400:focus {
+    background-color: #4fd1c5;
+  }
+
+  .lg\:focus\:bg-teal-500:focus {
+    background-color: #38b2ac;
+  }
+
+  .lg\:focus\:bg-teal-600:focus {
+    background-color: #319795;
+  }
+
+  .lg\:focus\:bg-teal-700:focus {
+    background-color: #2c7a7b;
+  }
+
+  .lg\:focus\:bg-teal-800:focus {
+    background-color: #285e61;
+  }
+
+  .lg\:focus\:bg-teal-900:focus {
+    background-color: #234e52;
+  }
+
+  .lg\:focus\:bg-blue-100:focus {
+    background-color: #ebf8ff;
+  }
+
+  .lg\:focus\:bg-blue-200:focus {
+    background-color: #bee3f8;
+  }
+
+  .lg\:focus\:bg-blue-300:focus {
+    background-color: #90cdf4;
+  }
+
+  .lg\:focus\:bg-blue-400:focus {
+    background-color: #63b3ed;
+  }
+
+  .lg\:focus\:bg-blue-500:focus {
+    background-color: #4299e1;
+  }
+
+  .lg\:focus\:bg-blue-600:focus {
+    background-color: #3182ce;
+  }
+
+  .lg\:focus\:bg-blue-700:focus {
+    background-color: #2b6cb0;
+  }
+
+  .lg\:focus\:bg-blue-800:focus {
+    background-color: #2c5282;
+  }
+
+  .lg\:focus\:bg-blue-900:focus {
+    background-color: #2a4365;
+  }
+
+  .lg\:focus\:bg-indigo-100:focus {
+    background-color: #ebf4ff;
+  }
+
+  .lg\:focus\:bg-indigo-200:focus {
+    background-color: #c3dafe;
+  }
+
+  .lg\:focus\:bg-indigo-300:focus {
+    background-color: #a3bffa;
+  }
+
+  .lg\:focus\:bg-indigo-400:focus {
+    background-color: #7f9cf5;
+  }
+
+  .lg\:focus\:bg-indigo-500:focus {
+    background-color: #667eea;
+  }
+
+  .lg\:focus\:bg-indigo-600:focus {
+    background-color: #5a67d8;
+  }
+
+  .lg\:focus\:bg-indigo-700:focus {
+    background-color: #4c51bf;
+  }
+
+  .lg\:focus\:bg-indigo-800:focus {
+    background-color: #434190;
+  }
+
+  .lg\:focus\:bg-indigo-900:focus {
+    background-color: #3c366b;
+  }
+
+  .lg\:focus\:bg-purple-100:focus {
+    background-color: #faf5ff;
+  }
+
+  .lg\:focus\:bg-purple-200:focus {
+    background-color: #e9d8fd;
+  }
+
+  .lg\:focus\:bg-purple-300:focus {
+    background-color: #d6bcfa;
+  }
+
+  .lg\:focus\:bg-purple-400:focus {
+    background-color: #b794f4;
+  }
+
+  .lg\:focus\:bg-purple-500:focus {
+    background-color: #9f7aea;
+  }
+
+  .lg\:focus\:bg-purple-600:focus {
+    background-color: #805ad5;
+  }
+
+  .lg\:focus\:bg-purple-700:focus {
+    background-color: #6b46c1;
+  }
+
+  .lg\:focus\:bg-purple-800:focus {
+    background-color: #553c9a;
+  }
+
+  .lg\:focus\:bg-purple-900:focus {
+    background-color: #44337a;
+  }
+
+  .lg\:focus\:bg-pink-100:focus {
+    background-color: #fff5f7;
+  }
+
+  .lg\:focus\:bg-pink-200:focus {
+    background-color: #fed7e2;
+  }
+
+  .lg\:focus\:bg-pink-300:focus {
+    background-color: #fbb6ce;
+  }
+
+  .lg\:focus\:bg-pink-400:focus {
+    background-color: #f687b3;
+  }
+
+  .lg\:focus\:bg-pink-500:focus {
+    background-color: #ed64a6;
+  }
+
+  .lg\:focus\:bg-pink-600:focus {
+    background-color: #d53f8c;
+  }
+
+  .lg\:focus\:bg-pink-700:focus {
+    background-color: #b83280;
+  }
+
+  .lg\:focus\:bg-pink-800:focus {
+    background-color: #97266d;
+  }
+
+  .lg\:focus\:bg-pink-900:focus {
+    background-color: #702459;
+  }
+
+  .lg\:bg-bottom {
+    background-position: bottom;
+  }
+
+  .lg\:bg-center {
+    background-position: center;
+  }
+
+  .lg\:bg-left {
+    background-position: left;
+  }
+
+  .lg\:bg-left-bottom {
+    background-position: left bottom;
+  }
+
+  .lg\:bg-left-top {
+    background-position: left top;
+  }
+
+  .lg\:bg-right {
+    background-position: right;
+  }
+
+  .lg\:bg-right-bottom {
+    background-position: right bottom;
+  }
+
+  .lg\:bg-right-top {
+    background-position: right top;
+  }
+
+  .lg\:bg-top {
+    background-position: top;
+  }
+
+  .lg\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .lg\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .lg\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .lg\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
+  .lg\:bg-repeat-round {
+    background-repeat: round;
+  }
+
+  .lg\:bg-repeat-space {
+    background-repeat: space;
+  }
+
+  .lg\:bg-auto {
+    background-size: auto;
+  }
+
+  .lg\:bg-cover {
+    background-size: cover;
+  }
+
+  .lg\:bg-contain {
+    background-size: contain;
+  }
+
+  .lg\:border-collapse {
+    border-collapse: collapse;
+  }
+
+  .lg\:border-separate {
+    border-collapse: separate;
+  }
+
+  .lg\:border-transparent {
+    border-color: transparent;
+  }
+
+  .lg\:border-black {
+    border-color: #000;
+  }
+
+  .lg\:border-white {
+    border-color: #fff;
+  }
+
+  .lg\:border-gray-100 {
+    border-color: #f7fafc;
+  }
+
+  .lg\:border-gray-200 {
+    border-color: #edf2f7;
+  }
+
+  .lg\:border-gray-300 {
+    border-color: #e2e8f0;
+  }
+
+  .lg\:border-gray-400 {
+    border-color: #cbd5e0;
+  }
+
+  .lg\:border-gray-500 {
+    border-color: #a0aec0;
+  }
+
+  .lg\:border-gray-600 {
+    border-color: #718096;
+  }
+
+  .lg\:border-gray-700 {
+    border-color: #4a5568;
+  }
+
+  .lg\:border-gray-800 {
+    border-color: #2d3748;
+  }
+
+  .lg\:border-gray-900 {
+    border-color: #1a202c;
+  }
+
+  .lg\:border-red-100 {
+    border-color: #fff5f5;
+  }
+
+  .lg\:border-red-200 {
+    border-color: #fed7d7;
+  }
+
+  .lg\:border-red-300 {
+    border-color: #feb2b2;
+  }
+
+  .lg\:border-red-400 {
+    border-color: #fc8181;
+  }
+
+  .lg\:border-red-500 {
+    border-color: #f56565;
+  }
+
+  .lg\:border-red-600 {
+    border-color: #e53e3e;
+  }
+
+  .lg\:border-red-700 {
+    border-color: #c53030;
+  }
+
+  .lg\:border-red-800 {
+    border-color: #9b2c2c;
+  }
+
+  .lg\:border-red-900 {
+    border-color: #742a2a;
+  }
+
+  .lg\:border-orange-100 {
+    border-color: #fffaf0;
+  }
+
+  .lg\:border-orange-200 {
+    border-color: #feebc8;
+  }
+
+  .lg\:border-orange-300 {
+    border-color: #fbd38d;
+  }
+
+  .lg\:border-orange-400 {
+    border-color: #f6ad55;
+  }
+
+  .lg\:border-orange-500 {
+    border-color: #ed8936;
+  }
+
+  .lg\:border-orange-600 {
+    border-color: #dd6b20;
+  }
+
+  .lg\:border-orange-700 {
+    border-color: #c05621;
+  }
+
+  .lg\:border-orange-800 {
+    border-color: #9c4221;
+  }
+
+  .lg\:border-orange-900 {
+    border-color: #7b341e;
+  }
+
+  .lg\:border-yellow-100 {
+    border-color: #fffff0;
+  }
+
+  .lg\:border-yellow-200 {
+    border-color: #fefcbf;
+  }
+
+  .lg\:border-yellow-300 {
+    border-color: #faf089;
+  }
+
+  .lg\:border-yellow-400 {
+    border-color: #f6e05e;
+  }
+
+  .lg\:border-yellow-500 {
+    border-color: #ecc94b;
+  }
+
+  .lg\:border-yellow-600 {
+    border-color: #d69e2e;
+  }
+
+  .lg\:border-yellow-700 {
+    border-color: #b7791f;
+  }
+
+  .lg\:border-yellow-800 {
+    border-color: #975a16;
+  }
+
+  .lg\:border-yellow-900 {
+    border-color: #744210;
+  }
+
+  .lg\:border-green-100 {
+    border-color: #f0fff4;
+  }
+
+  .lg\:border-green-200 {
+    border-color: #c6f6d5;
+  }
+
+  .lg\:border-green-300 {
+    border-color: #9ae6b4;
+  }
+
+  .lg\:border-green-400 {
+    border-color: #68d391;
+  }
+
+  .lg\:border-green-500 {
+    border-color: #48bb78;
+  }
+
+  .lg\:border-green-600 {
+    border-color: #38a169;
+  }
+
+  .lg\:border-green-700 {
+    border-color: #2f855a;
+  }
+
+  .lg\:border-green-800 {
+    border-color: #276749;
+  }
+
+  .lg\:border-green-900 {
+    border-color: #22543d;
+  }
+
+  .lg\:border-teal-100 {
+    border-color: #e6fffa;
+  }
+
+  .lg\:border-teal-200 {
+    border-color: #b2f5ea;
+  }
+
+  .lg\:border-teal-300 {
+    border-color: #81e6d9;
+  }
+
+  .lg\:border-teal-400 {
+    border-color: #4fd1c5;
+  }
+
+  .lg\:border-teal-500 {
+    border-color: #38b2ac;
+  }
+
+  .lg\:border-teal-600 {
+    border-color: #319795;
+  }
+
+  .lg\:border-teal-700 {
+    border-color: #2c7a7b;
+  }
+
+  .lg\:border-teal-800 {
+    border-color: #285e61;
+  }
+
+  .lg\:border-teal-900 {
+    border-color: #234e52;
+  }
+
+  .lg\:border-blue-100 {
+    border-color: #ebf8ff;
+  }
+
+  .lg\:border-blue-200 {
+    border-color: #bee3f8;
+  }
+
+  .lg\:border-blue-300 {
+    border-color: #90cdf4;
+  }
+
+  .lg\:border-blue-400 {
+    border-color: #63b3ed;
+  }
+
+  .lg\:border-blue-500 {
+    border-color: #4299e1;
+  }
+
+  .lg\:border-blue-600 {
+    border-color: #3182ce;
+  }
+
+  .lg\:border-blue-700 {
+    border-color: #2b6cb0;
+  }
+
+  .lg\:border-blue-800 {
+    border-color: #2c5282;
+  }
+
+  .lg\:border-blue-900 {
+    border-color: #2a4365;
+  }
+
+  .lg\:border-indigo-100 {
+    border-color: #ebf4ff;
+  }
+
+  .lg\:border-indigo-200 {
+    border-color: #c3dafe;
+  }
+
+  .lg\:border-indigo-300 {
+    border-color: #a3bffa;
+  }
+
+  .lg\:border-indigo-400 {
+    border-color: #7f9cf5;
+  }
+
+  .lg\:border-indigo-500 {
+    border-color: #667eea;
+  }
+
+  .lg\:border-indigo-600 {
+    border-color: #5a67d8;
+  }
+
+  .lg\:border-indigo-700 {
+    border-color: #4c51bf;
+  }
+
+  .lg\:border-indigo-800 {
+    border-color: #434190;
+  }
+
+  .lg\:border-indigo-900 {
+    border-color: #3c366b;
+  }
+
+  .lg\:border-purple-100 {
+    border-color: #faf5ff;
+  }
+
+  .lg\:border-purple-200 {
+    border-color: #e9d8fd;
+  }
+
+  .lg\:border-purple-300 {
+    border-color: #d6bcfa;
+  }
+
+  .lg\:border-purple-400 {
+    border-color: #b794f4;
+  }
+
+  .lg\:border-purple-500 {
+    border-color: #9f7aea;
+  }
+
+  .lg\:border-purple-600 {
+    border-color: #805ad5;
+  }
+
+  .lg\:border-purple-700 {
+    border-color: #6b46c1;
+  }
+
+  .lg\:border-purple-800 {
+    border-color: #553c9a;
+  }
+
+  .lg\:border-purple-900 {
+    border-color: #44337a;
+  }
+
+  .lg\:border-pink-100 {
+    border-color: #fff5f7;
+  }
+
+  .lg\:border-pink-200 {
+    border-color: #fed7e2;
+  }
+
+  .lg\:border-pink-300 {
+    border-color: #fbb6ce;
+  }
+
+  .lg\:border-pink-400 {
+    border-color: #f687b3;
+  }
+
+  .lg\:border-pink-500 {
+    border-color: #ed64a6;
+  }
+
+  .lg\:border-pink-600 {
+    border-color: #d53f8c;
+  }
+
+  .lg\:border-pink-700 {
+    border-color: #b83280;
+  }
+
+  .lg\:border-pink-800 {
+    border-color: #97266d;
+  }
+
+  .lg\:border-pink-900 {
+    border-color: #702459;
+  }
+
+  .lg\:hover\:border-transparent:hover {
+    border-color: transparent;
+  }
+
+  .lg\:hover\:border-black:hover {
+    border-color: #000;
+  }
+
+  .lg\:hover\:border-white:hover {
+    border-color: #fff;
+  }
+
+  .lg\:hover\:border-gray-100:hover {
+    border-color: #f7fafc;
+  }
+
+  .lg\:hover\:border-gray-200:hover {
+    border-color: #edf2f7;
+  }
+
+  .lg\:hover\:border-gray-300:hover {
+    border-color: #e2e8f0;
+  }
+
+  .lg\:hover\:border-gray-400:hover {
+    border-color: #cbd5e0;
+  }
+
+  .lg\:hover\:border-gray-500:hover {
+    border-color: #a0aec0;
+  }
+
+  .lg\:hover\:border-gray-600:hover {
+    border-color: #718096;
+  }
+
+  .lg\:hover\:border-gray-700:hover {
+    border-color: #4a5568;
+  }
+
+  .lg\:hover\:border-gray-800:hover {
+    border-color: #2d3748;
+  }
+
+  .lg\:hover\:border-gray-900:hover {
+    border-color: #1a202c;
+  }
+
+  .lg\:hover\:border-red-100:hover {
+    border-color: #fff5f5;
+  }
+
+  .lg\:hover\:border-red-200:hover {
+    border-color: #fed7d7;
+  }
+
+  .lg\:hover\:border-red-300:hover {
+    border-color: #feb2b2;
+  }
+
+  .lg\:hover\:border-red-400:hover {
+    border-color: #fc8181;
+  }
+
+  .lg\:hover\:border-red-500:hover {
+    border-color: #f56565;
+  }
+
+  .lg\:hover\:border-red-600:hover {
+    border-color: #e53e3e;
+  }
+
+  .lg\:hover\:border-red-700:hover {
+    border-color: #c53030;
+  }
+
+  .lg\:hover\:border-red-800:hover {
+    border-color: #9b2c2c;
+  }
+
+  .lg\:hover\:border-red-900:hover {
+    border-color: #742a2a;
+  }
+
+  .lg\:hover\:border-orange-100:hover {
+    border-color: #fffaf0;
+  }
+
+  .lg\:hover\:border-orange-200:hover {
+    border-color: #feebc8;
+  }
+
+  .lg\:hover\:border-orange-300:hover {
+    border-color: #fbd38d;
+  }
+
+  .lg\:hover\:border-orange-400:hover {
+    border-color: #f6ad55;
+  }
+
+  .lg\:hover\:border-orange-500:hover {
+    border-color: #ed8936;
+  }
+
+  .lg\:hover\:border-orange-600:hover {
+    border-color: #dd6b20;
+  }
+
+  .lg\:hover\:border-orange-700:hover {
+    border-color: #c05621;
+  }
+
+  .lg\:hover\:border-orange-800:hover {
+    border-color: #9c4221;
+  }
+
+  .lg\:hover\:border-orange-900:hover {
+    border-color: #7b341e;
+  }
+
+  .lg\:hover\:border-yellow-100:hover {
+    border-color: #fffff0;
+  }
+
+  .lg\:hover\:border-yellow-200:hover {
+    border-color: #fefcbf;
+  }
+
+  .lg\:hover\:border-yellow-300:hover {
+    border-color: #faf089;
+  }
+
+  .lg\:hover\:border-yellow-400:hover {
+    border-color: #f6e05e;
+  }
+
+  .lg\:hover\:border-yellow-500:hover {
+    border-color: #ecc94b;
+  }
+
+  .lg\:hover\:border-yellow-600:hover {
+    border-color: #d69e2e;
+  }
+
+  .lg\:hover\:border-yellow-700:hover {
+    border-color: #b7791f;
+  }
+
+  .lg\:hover\:border-yellow-800:hover {
+    border-color: #975a16;
+  }
+
+  .lg\:hover\:border-yellow-900:hover {
+    border-color: #744210;
+  }
+
+  .lg\:hover\:border-green-100:hover {
+    border-color: #f0fff4;
+  }
+
+  .lg\:hover\:border-green-200:hover {
+    border-color: #c6f6d5;
+  }
+
+  .lg\:hover\:border-green-300:hover {
+    border-color: #9ae6b4;
+  }
+
+  .lg\:hover\:border-green-400:hover {
+    border-color: #68d391;
+  }
+
+  .lg\:hover\:border-green-500:hover {
+    border-color: #48bb78;
+  }
+
+  .lg\:hover\:border-green-600:hover {
+    border-color: #38a169;
+  }
+
+  .lg\:hover\:border-green-700:hover {
+    border-color: #2f855a;
+  }
+
+  .lg\:hover\:border-green-800:hover {
+    border-color: #276749;
+  }
+
+  .lg\:hover\:border-green-900:hover {
+    border-color: #22543d;
+  }
+
+  .lg\:hover\:border-teal-100:hover {
+    border-color: #e6fffa;
+  }
+
+  .lg\:hover\:border-teal-200:hover {
+    border-color: #b2f5ea;
+  }
+
+  .lg\:hover\:border-teal-300:hover {
+    border-color: #81e6d9;
+  }
+
+  .lg\:hover\:border-teal-400:hover {
+    border-color: #4fd1c5;
+  }
+
+  .lg\:hover\:border-teal-500:hover {
+    border-color: #38b2ac;
+  }
+
+  .lg\:hover\:border-teal-600:hover {
+    border-color: #319795;
+  }
+
+  .lg\:hover\:border-teal-700:hover {
+    border-color: #2c7a7b;
+  }
+
+  .lg\:hover\:border-teal-800:hover {
+    border-color: #285e61;
+  }
+
+  .lg\:hover\:border-teal-900:hover {
+    border-color: #234e52;
+  }
+
+  .lg\:hover\:border-blue-100:hover {
+    border-color: #ebf8ff;
+  }
+
+  .lg\:hover\:border-blue-200:hover {
+    border-color: #bee3f8;
+  }
+
+  .lg\:hover\:border-blue-300:hover {
+    border-color: #90cdf4;
+  }
+
+  .lg\:hover\:border-blue-400:hover {
+    border-color: #63b3ed;
+  }
+
+  .lg\:hover\:border-blue-500:hover {
+    border-color: #4299e1;
+  }
+
+  .lg\:hover\:border-blue-600:hover {
+    border-color: #3182ce;
+  }
+
+  .lg\:hover\:border-blue-700:hover {
+    border-color: #2b6cb0;
+  }
+
+  .lg\:hover\:border-blue-800:hover {
+    border-color: #2c5282;
+  }
+
+  .lg\:hover\:border-blue-900:hover {
+    border-color: #2a4365;
+  }
+
+  .lg\:hover\:border-indigo-100:hover {
+    border-color: #ebf4ff;
+  }
+
+  .lg\:hover\:border-indigo-200:hover {
+    border-color: #c3dafe;
+  }
+
+  .lg\:hover\:border-indigo-300:hover {
+    border-color: #a3bffa;
+  }
+
+  .lg\:hover\:border-indigo-400:hover {
+    border-color: #7f9cf5;
+  }
+
+  .lg\:hover\:border-indigo-500:hover {
+    border-color: #667eea;
+  }
+
+  .lg\:hover\:border-indigo-600:hover {
+    border-color: #5a67d8;
+  }
+
+  .lg\:hover\:border-indigo-700:hover {
+    border-color: #4c51bf;
+  }
+
+  .lg\:hover\:border-indigo-800:hover {
+    border-color: #434190;
+  }
+
+  .lg\:hover\:border-indigo-900:hover {
+    border-color: #3c366b;
+  }
+
+  .lg\:hover\:border-purple-100:hover {
+    border-color: #faf5ff;
+  }
+
+  .lg\:hover\:border-purple-200:hover {
+    border-color: #e9d8fd;
+  }
+
+  .lg\:hover\:border-purple-300:hover {
+    border-color: #d6bcfa;
+  }
+
+  .lg\:hover\:border-purple-400:hover {
+    border-color: #b794f4;
+  }
+
+  .lg\:hover\:border-purple-500:hover {
+    border-color: #9f7aea;
+  }
+
+  .lg\:hover\:border-purple-600:hover {
+    border-color: #805ad5;
+  }
+
+  .lg\:hover\:border-purple-700:hover {
+    border-color: #6b46c1;
+  }
+
+  .lg\:hover\:border-purple-800:hover {
+    border-color: #553c9a;
+  }
+
+  .lg\:hover\:border-purple-900:hover {
+    border-color: #44337a;
+  }
+
+  .lg\:hover\:border-pink-100:hover {
+    border-color: #fff5f7;
+  }
+
+  .lg\:hover\:border-pink-200:hover {
+    border-color: #fed7e2;
+  }
+
+  .lg\:hover\:border-pink-300:hover {
+    border-color: #fbb6ce;
+  }
+
+  .lg\:hover\:border-pink-400:hover {
+    border-color: #f687b3;
+  }
+
+  .lg\:hover\:border-pink-500:hover {
+    border-color: #ed64a6;
+  }
+
+  .lg\:hover\:border-pink-600:hover {
+    border-color: #d53f8c;
+  }
+
+  .lg\:hover\:border-pink-700:hover {
+    border-color: #b83280;
+  }
+
+  .lg\:hover\:border-pink-800:hover {
+    border-color: #97266d;
+  }
+
+  .lg\:hover\:border-pink-900:hover {
+    border-color: #702459;
+  }
+
+  .lg\:focus\:border-transparent:focus {
+    border-color: transparent;
+  }
+
+  .lg\:focus\:border-black:focus {
+    border-color: #000;
+  }
+
+  .lg\:focus\:border-white:focus {
+    border-color: #fff;
+  }
+
+  .lg\:focus\:border-gray-100:focus {
+    border-color: #f7fafc;
+  }
+
+  .lg\:focus\:border-gray-200:focus {
+    border-color: #edf2f7;
+  }
+
+  .lg\:focus\:border-gray-300:focus {
+    border-color: #e2e8f0;
+  }
+
+  .lg\:focus\:border-gray-400:focus {
+    border-color: #cbd5e0;
+  }
+
+  .lg\:focus\:border-gray-500:focus {
+    border-color: #a0aec0;
+  }
+
+  .lg\:focus\:border-gray-600:focus {
+    border-color: #718096;
+  }
+
+  .lg\:focus\:border-gray-700:focus {
+    border-color: #4a5568;
+  }
+
+  .lg\:focus\:border-gray-800:focus {
+    border-color: #2d3748;
+  }
+
+  .lg\:focus\:border-gray-900:focus {
+    border-color: #1a202c;
+  }
+
+  .lg\:focus\:border-red-100:focus {
+    border-color: #fff5f5;
+  }
+
+  .lg\:focus\:border-red-200:focus {
+    border-color: #fed7d7;
+  }
+
+  .lg\:focus\:border-red-300:focus {
+    border-color: #feb2b2;
+  }
+
+  .lg\:focus\:border-red-400:focus {
+    border-color: #fc8181;
+  }
+
+  .lg\:focus\:border-red-500:focus {
+    border-color: #f56565;
+  }
+
+  .lg\:focus\:border-red-600:focus {
+    border-color: #e53e3e;
+  }
+
+  .lg\:focus\:border-red-700:focus {
+    border-color: #c53030;
+  }
+
+  .lg\:focus\:border-red-800:focus {
+    border-color: #9b2c2c;
+  }
+
+  .lg\:focus\:border-red-900:focus {
+    border-color: #742a2a;
+  }
+
+  .lg\:focus\:border-orange-100:focus {
+    border-color: #fffaf0;
+  }
+
+  .lg\:focus\:border-orange-200:focus {
+    border-color: #feebc8;
+  }
+
+  .lg\:focus\:border-orange-300:focus {
+    border-color: #fbd38d;
+  }
+
+  .lg\:focus\:border-orange-400:focus {
+    border-color: #f6ad55;
+  }
+
+  .lg\:focus\:border-orange-500:focus {
+    border-color: #ed8936;
+  }
+
+  .lg\:focus\:border-orange-600:focus {
+    border-color: #dd6b20;
+  }
+
+  .lg\:focus\:border-orange-700:focus {
+    border-color: #c05621;
+  }
+
+  .lg\:focus\:border-orange-800:focus {
+    border-color: #9c4221;
+  }
+
+  .lg\:focus\:border-orange-900:focus {
+    border-color: #7b341e;
+  }
+
+  .lg\:focus\:border-yellow-100:focus {
+    border-color: #fffff0;
+  }
+
+  .lg\:focus\:border-yellow-200:focus {
+    border-color: #fefcbf;
+  }
+
+  .lg\:focus\:border-yellow-300:focus {
+    border-color: #faf089;
+  }
+
+  .lg\:focus\:border-yellow-400:focus {
+    border-color: #f6e05e;
+  }
+
+  .lg\:focus\:border-yellow-500:focus {
+    border-color: #ecc94b;
+  }
+
+  .lg\:focus\:border-yellow-600:focus {
+    border-color: #d69e2e;
+  }
+
+  .lg\:focus\:border-yellow-700:focus {
+    border-color: #b7791f;
+  }
+
+  .lg\:focus\:border-yellow-800:focus {
+    border-color: #975a16;
+  }
+
+  .lg\:focus\:border-yellow-900:focus {
+    border-color: #744210;
+  }
+
+  .lg\:focus\:border-green-100:focus {
+    border-color: #f0fff4;
+  }
+
+  .lg\:focus\:border-green-200:focus {
+    border-color: #c6f6d5;
+  }
+
+  .lg\:focus\:border-green-300:focus {
+    border-color: #9ae6b4;
+  }
+
+  .lg\:focus\:border-green-400:focus {
+    border-color: #68d391;
+  }
+
+  .lg\:focus\:border-green-500:focus {
+    border-color: #48bb78;
+  }
+
+  .lg\:focus\:border-green-600:focus {
+    border-color: #38a169;
+  }
+
+  .lg\:focus\:border-green-700:focus {
+    border-color: #2f855a;
+  }
+
+  .lg\:focus\:border-green-800:focus {
+    border-color: #276749;
+  }
+
+  .lg\:focus\:border-green-900:focus {
+    border-color: #22543d;
+  }
+
+  .lg\:focus\:border-teal-100:focus {
+    border-color: #e6fffa;
+  }
+
+  .lg\:focus\:border-teal-200:focus {
+    border-color: #b2f5ea;
+  }
+
+  .lg\:focus\:border-teal-300:focus {
+    border-color: #81e6d9;
+  }
+
+  .lg\:focus\:border-teal-400:focus {
+    border-color: #4fd1c5;
+  }
+
+  .lg\:focus\:border-teal-500:focus {
+    border-color: #38b2ac;
+  }
+
+  .lg\:focus\:border-teal-600:focus {
+    border-color: #319795;
+  }
+
+  .lg\:focus\:border-teal-700:focus {
+    border-color: #2c7a7b;
+  }
+
+  .lg\:focus\:border-teal-800:focus {
+    border-color: #285e61;
+  }
+
+  .lg\:focus\:border-teal-900:focus {
+    border-color: #234e52;
+  }
+
+  .lg\:focus\:border-blue-100:focus {
+    border-color: #ebf8ff;
+  }
+
+  .lg\:focus\:border-blue-200:focus {
+    border-color: #bee3f8;
+  }
+
+  .lg\:focus\:border-blue-300:focus {
+    border-color: #90cdf4;
+  }
+
+  .lg\:focus\:border-blue-400:focus {
+    border-color: #63b3ed;
+  }
+
+  .lg\:focus\:border-blue-500:focus {
+    border-color: #4299e1;
+  }
+
+  .lg\:focus\:border-blue-600:focus {
+    border-color: #3182ce;
+  }
+
+  .lg\:focus\:border-blue-700:focus {
+    border-color: #2b6cb0;
+  }
+
+  .lg\:focus\:border-blue-800:focus {
+    border-color: #2c5282;
+  }
+
+  .lg\:focus\:border-blue-900:focus {
+    border-color: #2a4365;
+  }
+
+  .lg\:focus\:border-indigo-100:focus {
+    border-color: #ebf4ff;
+  }
+
+  .lg\:focus\:border-indigo-200:focus {
+    border-color: #c3dafe;
+  }
+
+  .lg\:focus\:border-indigo-300:focus {
+    border-color: #a3bffa;
+  }
+
+  .lg\:focus\:border-indigo-400:focus {
+    border-color: #7f9cf5;
+  }
+
+  .lg\:focus\:border-indigo-500:focus {
+    border-color: #667eea;
+  }
+
+  .lg\:focus\:border-indigo-600:focus {
+    border-color: #5a67d8;
+  }
+
+  .lg\:focus\:border-indigo-700:focus {
+    border-color: #4c51bf;
+  }
+
+  .lg\:focus\:border-indigo-800:focus {
+    border-color: #434190;
+  }
+
+  .lg\:focus\:border-indigo-900:focus {
+    border-color: #3c366b;
+  }
+
+  .lg\:focus\:border-purple-100:focus {
+    border-color: #faf5ff;
+  }
+
+  .lg\:focus\:border-purple-200:focus {
+    border-color: #e9d8fd;
+  }
+
+  .lg\:focus\:border-purple-300:focus {
+    border-color: #d6bcfa;
+  }
+
+  .lg\:focus\:border-purple-400:focus {
+    border-color: #b794f4;
+  }
+
+  .lg\:focus\:border-purple-500:focus {
+    border-color: #9f7aea;
+  }
+
+  .lg\:focus\:border-purple-600:focus {
+    border-color: #805ad5;
+  }
+
+  .lg\:focus\:border-purple-700:focus {
+    border-color: #6b46c1;
+  }
+
+  .lg\:focus\:border-purple-800:focus {
+    border-color: #553c9a;
+  }
+
+  .lg\:focus\:border-purple-900:focus {
+    border-color: #44337a;
+  }
+
+  .lg\:focus\:border-pink-100:focus {
+    border-color: #fff5f7;
+  }
+
+  .lg\:focus\:border-pink-200:focus {
+    border-color: #fed7e2;
+  }
+
+  .lg\:focus\:border-pink-300:focus {
+    border-color: #fbb6ce;
+  }
+
+  .lg\:focus\:border-pink-400:focus {
+    border-color: #f687b3;
+  }
+
+  .lg\:focus\:border-pink-500:focus {
+    border-color: #ed64a6;
+  }
+
+  .lg\:focus\:border-pink-600:focus {
+    border-color: #d53f8c;
+  }
+
+  .lg\:focus\:border-pink-700:focus {
+    border-color: #b83280;
+  }
+
+  .lg\:focus\:border-pink-800:focus {
+    border-color: #97266d;
+  }
+
+  .lg\:focus\:border-pink-900:focus {
+    border-color: #702459;
+  }
+
+  .lg\:rounded-none {
+    border-radius: 0;
+  }
+
+  .lg\:rounded-sm {
+    border-radius: 0.125rem;
+  }
+
+  .lg\:rounded {
+    border-radius: 0.25rem;
+  }
+
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .lg\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .lg\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .lg\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .lg\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+
+  .lg\:rounded-r-sm {
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .lg\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .lg\:rounded-l-sm {
+    border-top-left-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .lg\:rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  .lg\:rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .lg\:rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .lg\:rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .lg\:rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .lg\:rounded-r-lg {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .lg\:rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .lg\:rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .lg\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .lg\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .lg\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .lg\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .lg\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .lg\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-tl-sm {
+    border-top-left-radius: 0.125rem;
+  }
+
+  .lg\:rounded-tr-sm {
+    border-top-right-radius: 0.125rem;
+  }
+
+  .lg\:rounded-br-sm {
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .lg\:rounded-bl-sm {
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .lg\:rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+
+  .lg\:rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+
+  .lg\:rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .lg\:rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .lg\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem;
+  }
+
+  .lg\:rounded-tr-lg {
+    border-top-right-radius: 0.5rem;
+  }
+
+  .lg\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .lg\:rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .lg\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .lg\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .lg\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .lg\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:border-solid {
+    border-style: solid;
+  }
+
+  .lg\:border-dashed {
+    border-style: dashed;
+  }
+
+  .lg\:border-dotted {
+    border-style: dotted;
+  }
+
+  .lg\:border-double {
+    border-style: double;
+  }
+
+  .lg\:border-none {
+    border-style: none;
+  }
+
+  .lg\:border-0 {
+    border-width: 0;
+  }
+
+  .lg\:border-2 {
+    border-width: 2px;
+  }
+
+  .lg\:border-4 {
+    border-width: 4px;
+  }
+
+  .lg\:border-8 {
+    border-width: 8px;
+  }
+
+  .lg\:border {
+    border-width: 1px;
+  }
+
+  .lg\:border-t-0 {
+    border-top-width: 0;
+  }
+
+  .lg\:border-r-0 {
+    border-right-width: 0;
+  }
+
+  .lg\:border-b-0 {
+    border-bottom-width: 0;
+  }
+
+  .lg\:border-l-0 {
+    border-left-width: 0;
+  }
+
+  .lg\:border-t-2 {
+    border-top-width: 2px;
+  }
+
+  .lg\:border-r-2 {
+    border-right-width: 2px;
+  }
+
+  .lg\:border-b-2 {
+    border-bottom-width: 2px;
+  }
+
+  .lg\:border-l-2 {
+    border-left-width: 2px;
+  }
+
+  .lg\:border-t-4 {
+    border-top-width: 4px;
+  }
+
+  .lg\:border-r-4 {
+    border-right-width: 4px;
+  }
+
+  .lg\:border-b-4 {
+    border-bottom-width: 4px;
+  }
+
+  .lg\:border-l-4 {
+    border-left-width: 4px;
+  }
+
+  .lg\:border-t-8 {
+    border-top-width: 8px;
+  }
+
+  .lg\:border-r-8 {
+    border-right-width: 8px;
+  }
+
+  .lg\:border-b-8 {
+    border-bottom-width: 8px;
+  }
+
+  .lg\:border-l-8 {
+    border-left-width: 8px;
+  }
+
+  .lg\:border-t {
+    border-top-width: 1px;
+  }
+
+  .lg\:border-r {
+    border-right-width: 1px;
+  }
+
+  .lg\:border-b {
+    border-bottom-width: 1px;
+  }
+
+  .lg\:border-l {
+    border-left-width: 1px;
+  }
+
+  .lg\:cursor-auto {
+    cursor: auto;
+  }
+
+  .lg\:cursor-default {
+    cursor: default;
+  }
+
+  .lg\:cursor-pointer {
+    cursor: pointer;
+  }
+
+  .lg\:cursor-wait {
+    cursor: wait;
+  }
+
+  .lg\:cursor-text {
+    cursor: text;
+  }
+
+  .lg\:cursor-move {
+    cursor: move;
+  }
+
+  .lg\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:inline-block {
+    display: inline-block;
+  }
+
+  .lg\:inline {
+    display: inline;
+  }
+
+  .lg\:flex {
+    display: -webkit-box;
+    display: flex;
+  }
+
+  .lg\:inline-flex {
+    display: -webkit-inline-box;
+    display: inline-flex;
+  }
+
+  .lg\:table {
+    display: table;
+  }
+
+  .lg\:table-row {
+    display: table-row;
+  }
+
+  .lg\:table-cell {
+    display: table-cell;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:flex-row {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+  }
+
+  .lg\:flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+            flex-direction: row-reverse;
+  }
+
+  .lg\:flex-col {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+  }
+
+  .lg\:flex-col-reverse {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+            flex-direction: column-reverse;
+  }
+
+  .lg\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .lg\:flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .lg\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  .lg\:items-start {
+    -webkit-box-align: start;
+            align-items: flex-start;
+  }
+
+  .lg\:items-end {
+    -webkit-box-align: end;
+            align-items: flex-end;
+  }
+
+  .lg\:items-center {
+    -webkit-box-align: center;
+            align-items: center;
+  }
+
+  .lg\:items-baseline {
+    -webkit-box-align: baseline;
+            align-items: baseline;
+  }
+
+  .lg\:items-stretch {
+    -webkit-box-align: stretch;
+            align-items: stretch;
+  }
+
+  .lg\:self-auto {
+    align-self: auto;
+  }
+
+  .lg\:self-start {
+    align-self: flex-start;
+  }
+
+  .lg\:self-end {
+    align-self: flex-end;
+  }
+
+  .lg\:self-center {
+    align-self: center;
+  }
+
+  .lg\:self-stretch {
+    align-self: stretch;
+  }
+
+  .lg\:justify-start {
+    -webkit-box-pack: start;
+            justify-content: flex-start;
+  }
+
+  .lg\:justify-end {
+    -webkit-box-pack: end;
+            justify-content: flex-end;
+  }
+
+  .lg\:justify-center {
+    -webkit-box-pack: center;
+            justify-content: center;
+  }
+
+  .lg\:justify-between {
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+  }
+
+  .lg\:justify-around {
+    justify-content: space-around;
+  }
+
+  .lg\:content-center {
+    align-content: center;
+  }
+
+  .lg\:content-start {
+    align-content: flex-start;
+  }
+
+  .lg\:content-end {
+    align-content: flex-end;
+  }
+
+  .lg\:content-between {
+    align-content: space-between;
+  }
+
+  .lg\:content-around {
+    align-content: space-around;
+  }
+
+  .lg\:flex-1 {
+    -webkit-box-flex: 1;
+            flex: 1 1 0%;
+  }
+
+  .lg\:flex-auto {
+    -webkit-box-flex: 1;
+            flex: 1 1 auto;
+  }
+
+  .lg\:flex-initial {
+    -webkit-box-flex: 0;
+            flex: 0 1 auto;
+  }
+
+  .lg\:flex-none {
+    -webkit-box-flex: 0;
+            flex: none;
+  }
+
+  .lg\:flex-grow-0 {
+    -webkit-box-flex: 0;
+            flex-grow: 0;
+  }
+
+  .lg\:flex-grow {
+    -webkit-box-flex: 1;
+            flex-grow: 1;
+  }
+
+  .lg\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .lg\:flex-shrink {
+    flex-shrink: 1;
+  }
+
+  .lg\:order-1 {
+    -webkit-box-ordinal-group: 2;
+            order: 1;
+  }
+
+  .lg\:order-2 {
+    -webkit-box-ordinal-group: 3;
+            order: 2;
+  }
+
+  .lg\:order-3 {
+    -webkit-box-ordinal-group: 4;
+            order: 3;
+  }
+
+  .lg\:order-4 {
+    -webkit-box-ordinal-group: 5;
+            order: 4;
+  }
+
+  .lg\:order-5 {
+    -webkit-box-ordinal-group: 6;
+            order: 5;
+  }
+
+  .lg\:order-6 {
+    -webkit-box-ordinal-group: 7;
+            order: 6;
+  }
+
+  .lg\:order-7 {
+    -webkit-box-ordinal-group: 8;
+            order: 7;
+  }
+
+  .lg\:order-8 {
+    -webkit-box-ordinal-group: 9;
+            order: 8;
+  }
+
+  .lg\:order-9 {
+    -webkit-box-ordinal-group: 10;
+            order: 9;
+  }
+
+  .lg\:order-10 {
+    -webkit-box-ordinal-group: 11;
+            order: 10;
+  }
+
+  .lg\:order-11 {
+    -webkit-box-ordinal-group: 12;
+            order: 11;
+  }
+
+  .lg\:order-12 {
+    -webkit-box-ordinal-group: 13;
+            order: 12;
+  }
+
+  .lg\:order-first {
+    -webkit-box-ordinal-group: -9998;
+            order: -9999;
+  }
+
+  .lg\:order-last {
+    -webkit-box-ordinal-group: 10000;
+            order: 9999;
+  }
+
+  .lg\:order-none {
+    -webkit-box-ordinal-group: 1;
+            order: 0;
+  }
+
+  .lg\:float-right {
+    float: right;
+  }
+
+  .lg\:float-left {
+    float: left;
+  }
+
+  .lg\:float-none {
+    float: none;
+  }
+
+  .lg\:clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .lg\:font-sans {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .lg\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .lg\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .lg\:font-hairline {
+    font-weight: 100;
+  }
+
+  .lg\:font-thin {
+    font-weight: 200;
+  }
+
+  .lg\:font-light {
+    font-weight: 300;
+  }
+
+  .lg\:font-normal {
+    font-weight: 400;
+  }
+
+  .lg\:font-medium {
+    font-weight: 500;
+  }
+
+  .lg\:font-semibold {
+    font-weight: 600;
+  }
+
+  .lg\:font-bold {
+    font-weight: 700;
+  }
+
+  .lg\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .lg\:font-black {
+    font-weight: 900;
+  }
+
+  .lg\:hover\:font-hairline:hover {
+    font-weight: 100;
+  }
+
+  .lg\:hover\:font-thin:hover {
+    font-weight: 200;
+  }
+
+  .lg\:hover\:font-light:hover {
+    font-weight: 300;
+  }
+
+  .lg\:hover\:font-normal:hover {
+    font-weight: 400;
+  }
+
+  .lg\:hover\:font-medium:hover {
+    font-weight: 500;
+  }
+
+  .lg\:hover\:font-semibold:hover {
+    font-weight: 600;
+  }
+
+  .lg\:hover\:font-bold:hover {
+    font-weight: 700;
+  }
+
+  .lg\:hover\:font-extrabold:hover {
+    font-weight: 800;
+  }
+
+  .lg\:hover\:font-black:hover {
+    font-weight: 900;
+  }
+
+  .lg\:focus\:font-hairline:focus {
+    font-weight: 100;
+  }
+
+  .lg\:focus\:font-thin:focus {
+    font-weight: 200;
+  }
+
+  .lg\:focus\:font-light:focus {
+    font-weight: 300;
+  }
+
+  .lg\:focus\:font-normal:focus {
+    font-weight: 400;
+  }
+
+  .lg\:focus\:font-medium:focus {
+    font-weight: 500;
+  }
+
+  .lg\:focus\:font-semibold:focus {
+    font-weight: 600;
+  }
+
+  .lg\:focus\:font-bold:focus {
+    font-weight: 700;
+  }
+
+  .lg\:focus\:font-extrabold:focus {
+    font-weight: 800;
+  }
+
+  .lg\:focus\:font-black:focus {
+    font-weight: 900;
+  }
+
+  .lg\:h-0 {
+    height: 0;
+  }
+
+  .lg\:h-1 {
+    height: 0.25rem;
+  }
+
+  .lg\:h-2 {
+    height: 0.5rem;
+  }
+
+  .lg\:h-3 {
+    height: 0.75rem;
+  }
+
+  .lg\:h-4 {
+    height: 1rem;
+  }
+
+  .lg\:h-5 {
+    height: 1.25rem;
+  }
+
+  .lg\:h-6 {
+    height: 1.5rem;
+  }
+
+  .lg\:h-8 {
+    height: 2rem;
+  }
+
+  .lg\:h-10 {
+    height: 2.5rem;
+  }
+
+  .lg\:h-12 {
+    height: 3rem;
+  }
+
+  .lg\:h-16 {
+    height: 4rem;
+  }
+
+  .lg\:h-20 {
+    height: 5rem;
+  }
+
+  .lg\:h-24 {
+    height: 6rem;
+  }
+
+  .lg\:h-32 {
+    height: 8rem;
+  }
+
+  .lg\:h-40 {
+    height: 10rem;
+  }
+
+  .lg\:h-48 {
+    height: 12rem;
+  }
+
+  .lg\:h-56 {
+    height: 14rem;
+  }
+
+  .lg\:h-64 {
+    height: 16rem;
+  }
+
+  .lg\:h-auto {
+    height: auto;
+  }
+
+  .lg\:h-px {
+    height: 1px;
+  }
+
+  .lg\:h-full {
+    height: 100%;
+  }
+
+  .lg\:h-screen {
+    height: 100vh;
+  }
+
+  .lg\:leading-none {
+    line-height: 1;
+  }
+
+  .lg\:leading-tight {
+    line-height: 1.25;
+  }
+
+  .lg\:leading-snug {
+    line-height: 1.375;
+  }
+
+  .lg\:leading-normal {
+    line-height: 1.5;
+  }
+
+  .lg\:leading-relaxed {
+    line-height: 1.625;
+  }
+
+  .lg\:leading-loose {
+    line-height: 2;
+  }
+
+  .lg\:list-inside {
+    list-style-position: inside;
+  }
+
+  .lg\:list-outside {
+    list-style-position: outside;
+  }
+
+  .lg\:list-none {
+    list-style-type: none;
+  }
+
+  .lg\:list-disc {
+    list-style-type: disc;
+  }
+
+  .lg\:list-decimal {
+    list-style-type: decimal;
+  }
+
+  .lg\:m-0 {
+    margin: 0;
+  }
+
+  .lg\:m-1 {
+    margin: 0.25rem;
+  }
+
+  .lg\:m-2 {
+    margin: 0.5rem;
+  }
+
+  .lg\:m-3 {
+    margin: 0.75rem;
+  }
+
+  .lg\:m-4 {
+    margin: 1rem;
+  }
+
+  .lg\:m-5 {
+    margin: 1.25rem;
+  }
+
+  .lg\:m-6 {
+    margin: 1.5rem;
+  }
+
+  .lg\:m-8 {
+    margin: 2rem;
+  }
+
+  .lg\:m-10 {
+    margin: 2.5rem;
+  }
+
+  .lg\:m-12 {
+    margin: 3rem;
+  }
+
+  .lg\:m-16 {
+    margin: 4rem;
+  }
+
+  .lg\:m-20 {
+    margin: 5rem;
+  }
+
+  .lg\:m-24 {
+    margin: 6rem;
+  }
+
+  .lg\:m-32 {
+    margin: 8rem;
+  }
+
+  .lg\:m-40 {
+    margin: 10rem;
+  }
+
+  .lg\:m-48 {
+    margin: 12rem;
+  }
+
+  .lg\:m-56 {
+    margin: 14rem;
+  }
+
+  .lg\:m-64 {
+    margin: 16rem;
+  }
+
+  .lg\:m-auto {
+    margin: auto;
+  }
+
+  .lg\:m-px {
+    margin: 1px;
+  }
+
+  .lg\:-m-1 {
+    margin: -0.25rem;
+  }
+
+  .lg\:-m-2 {
+    margin: -0.5rem;
+  }
+
+  .lg\:-m-3 {
+    margin: -0.75rem;
+  }
+
+  .lg\:-m-4 {
+    margin: -1rem;
+  }
+
+  .lg\:-m-5 {
+    margin: -1.25rem;
+  }
+
+  .lg\:-m-6 {
+    margin: -1.5rem;
+  }
+
+  .lg\:-m-8 {
+    margin: -2rem;
+  }
+
+  .lg\:-m-10 {
+    margin: -2.5rem;
+  }
+
+  .lg\:-m-12 {
+    margin: -3rem;
+  }
+
+  .lg\:-m-16 {
+    margin: -4rem;
+  }
+
+  .lg\:-m-20 {
+    margin: -5rem;
+  }
+
+  .lg\:-m-24 {
+    margin: -6rem;
+  }
+
+  .lg\:-m-32 {
+    margin: -8rem;
+  }
+
+  .lg\:-m-40 {
+    margin: -10rem;
+  }
+
+  .lg\:-m-48 {
+    margin: -12rem;
+  }
+
+  .lg\:-m-56 {
+    margin: -14rem;
+  }
+
+  .lg\:-m-64 {
+    margin: -16rem;
+  }
+
+  .lg\:-m-px {
+    margin: -1px;
+  }
+
+  .lg\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .lg\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .lg\:my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .lg\:mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .lg\:my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .lg\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .lg\:my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .lg\:mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+
+  .lg\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .lg\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .lg\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .lg\:mx-5 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+
+  .lg\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .lg\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .lg\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .lg\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .lg\:my-10 {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .lg\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
+  .lg\:my-12 {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .lg\:mx-12 {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  .lg\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
+  .lg\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+
+  .lg\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  .lg\:mx-20 {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+
+  .lg\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
+  .lg\:mx-24 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
+  .lg\:my-32 {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+  }
+
+  .lg\:mx-32 {
+    margin-left: 8rem;
+    margin-right: 8rem;
+  }
+
+  .lg\:my-40 {
+    margin-top: 10rem;
+    margin-bottom: 10rem;
+  }
+
+  .lg\:mx-40 {
+    margin-left: 10rem;
+    margin-right: 10rem;
+  }
+
+  .lg\:my-48 {
+    margin-top: 12rem;
+    margin-bottom: 12rem;
+  }
+
+  .lg\:mx-48 {
+    margin-left: 12rem;
+    margin-right: 12rem;
+  }
+
+  .lg\:my-56 {
+    margin-top: 14rem;
+    margin-bottom: 14rem;
+  }
+
+  .lg\:mx-56 {
+    margin-left: 14rem;
+    margin-right: 14rem;
+  }
+
+  .lg\:my-64 {
+    margin-top: 16rem;
+    margin-bottom: 16rem;
+  }
+
+  .lg\:mx-64 {
+    margin-left: 16rem;
+    margin-right: 16rem;
+  }
+
+  .lg\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .lg\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .lg\:my-px {
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  .lg\:mx-px {
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+
+  .lg\:-my-1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .lg\:-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+  .lg\:-my-2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+
+  .lg\:-mx-2 {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .lg\:-my-3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+
+  .lg\:-mx-3 {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+
+  .lg\:-my-4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+
+  .lg\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  .lg\:-my-5 {
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
+  }
+
+  .lg\:-mx-5 {
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+  }
+
+  .lg\:-my-6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+
+  .lg\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .lg\:-my-8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+
+  .lg\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .lg\:-my-10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+
+  .lg\:-mx-10 {
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+  }
+
+  .lg\:-my-12 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+
+  .lg\:-mx-12 {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+
+  .lg\:-my-16 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+
+  .lg\:-mx-16 {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+
+  .lg\:-my-20 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+
+  .lg\:-mx-20 {
+    margin-left: -5rem;
+    margin-right: -5rem;
+  }
+
+  .lg\:-my-24 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+
+  .lg\:-mx-24 {
+    margin-left: -6rem;
+    margin-right: -6rem;
+  }
+
+  .lg\:-my-32 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+
+  .lg\:-mx-32 {
+    margin-left: -8rem;
+    margin-right: -8rem;
+  }
+
+  .lg\:-my-40 {
+    margin-top: -10rem;
+    margin-bottom: -10rem;
+  }
+
+  .lg\:-mx-40 {
+    margin-left: -10rem;
+    margin-right: -10rem;
+  }
+
+  .lg\:-my-48 {
+    margin-top: -12rem;
+    margin-bottom: -12rem;
+  }
+
+  .lg\:-mx-48 {
+    margin-left: -12rem;
+    margin-right: -12rem;
+  }
+
+  .lg\:-my-56 {
+    margin-top: -14rem;
+    margin-bottom: -14rem;
+  }
+
+  .lg\:-mx-56 {
+    margin-left: -14rem;
+    margin-right: -14rem;
+  }
+
+  .lg\:-my-64 {
+    margin-top: -16rem;
+    margin-bottom: -16rem;
+  }
+
+  .lg\:-mx-64 {
+    margin-left: -16rem;
+    margin-right: -16rem;
+  }
+
+  .lg\:-my-px {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  .lg\:-mx-px {
+    margin-left: -1px;
+    margin-right: -1px;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0;
+  }
+
+  .lg\:mr-0 {
+    margin-right: 0;
+  }
+
+  .lg\:mb-0 {
+    margin-bottom: 0;
+  }
+
+  .lg\:ml-0 {
+    margin-left: 0;
+  }
+
+  .lg\:mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .lg\:mr-1 {
+    margin-right: 0.25rem;
+  }
+
+  .lg\:mb-1 {
+    margin-bottom: 0.25rem;
+  }
+
+  .lg\:ml-1 {
+    margin-left: 0.25rem;
+  }
+
+  .lg\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .lg\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
+  .lg\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .lg\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
+  .lg\:mt-3 {
+    margin-top: 0.75rem;
+  }
+
+  .lg\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
+  .lg\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
+  .lg\:ml-3 {
+    margin-left: 0.75rem;
+  }
+
+  .lg\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .lg\:mr-4 {
+    margin-right: 1rem;
+  }
+
+  .lg\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .lg\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .lg\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .lg\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .lg\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
+  .lg\:ml-5 {
+    margin-left: 1.25rem;
+  }
+
+  .lg\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .lg\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
+  .lg\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .lg\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .lg\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .lg\:mr-8 {
+    margin-right: 2rem;
+  }
+
+  .lg\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .lg\:ml-8 {
+    margin-left: 2rem;
+  }
+
+  .lg\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .lg\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .lg\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .lg\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .lg\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .lg\:mr-12 {
+    margin-right: 3rem;
+  }
+
+  .lg\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
+  .lg\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .lg\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .lg\:mr-16 {
+    margin-right: 4rem;
+  }
+
+  .lg\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .lg\:ml-16 {
+    margin-left: 4rem;
+  }
+
+  .lg\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .lg\:mr-20 {
+    margin-right: 5rem;
+  }
+
+  .lg\:mb-20 {
+    margin-bottom: 5rem;
+  }
+
+  .lg\:ml-20 {
+    margin-left: 5rem;
+  }
+
+  .lg\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .lg\:mr-24 {
+    margin-right: 6rem;
+  }
+
+  .lg\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .lg\:ml-24 {
+    margin-left: 6rem;
+  }
+
+  .lg\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .lg\:mr-32 {
+    margin-right: 8rem;
+  }
+
+  .lg\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
+  .lg\:ml-32 {
+    margin-left: 8rem;
+  }
+
+  .lg\:mt-40 {
+    margin-top: 10rem;
+  }
+
+  .lg\:mr-40 {
+    margin-right: 10rem;
+  }
+
+  .lg\:mb-40 {
+    margin-bottom: 10rem;
+  }
+
+  .lg\:ml-40 {
+    margin-left: 10rem;
+  }
+
+  .lg\:mt-48 {
+    margin-top: 12rem;
+  }
+
+  .lg\:mr-48 {
+    margin-right: 12rem;
+  }
+
+  .lg\:mb-48 {
+    margin-bottom: 12rem;
+  }
+
+  .lg\:ml-48 {
+    margin-left: 12rem;
+  }
+
+  .lg\:mt-56 {
+    margin-top: 14rem;
+  }
+
+  .lg\:mr-56 {
+    margin-right: 14rem;
+  }
+
+  .lg\:mb-56 {
+    margin-bottom: 14rem;
+  }
+
+  .lg\:ml-56 {
+    margin-left: 14rem;
+  }
+
+  .lg\:mt-64 {
+    margin-top: 16rem;
+  }
+
+  .lg\:mr-64 {
+    margin-right: 16rem;
+  }
+
+  .lg\:mb-64 {
+    margin-bottom: 16rem;
+  }
+
+  .lg\:ml-64 {
+    margin-left: 16rem;
+  }
+
+  .lg\:mt-auto {
+    margin-top: auto;
+  }
+
+  .lg\:mr-auto {
+    margin-right: auto;
+  }
+
+  .lg\:mb-auto {
+    margin-bottom: auto;
+  }
+
+  .lg\:ml-auto {
+    margin-left: auto;
+  }
+
+  .lg\:mt-px {
+    margin-top: 1px;
+  }
+
+  .lg\:mr-px {
+    margin-right: 1px;
+  }
+
+  .lg\:mb-px {
+    margin-bottom: 1px;
+  }
+
+  .lg\:ml-px {
+    margin-left: 1px;
+  }
+
+  .lg\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .lg\:-mr-1 {
+    margin-right: -0.25rem;
+  }
+
+  .lg\:-mb-1 {
+    margin-bottom: -0.25rem;
+  }
+
+  .lg\:-ml-1 {
+    margin-left: -0.25rem;
+  }
+
+  .lg\:-mt-2 {
+    margin-top: -0.5rem;
+  }
+
+  .lg\:-mr-2 {
+    margin-right: -0.5rem;
+  }
+
+  .lg\:-mb-2 {
+    margin-bottom: -0.5rem;
+  }
+
+  .lg\:-ml-2 {
+    margin-left: -0.5rem;
+  }
+
+  .lg\:-mt-3 {
+    margin-top: -0.75rem;
+  }
+
+  .lg\:-mr-3 {
+    margin-right: -0.75rem;
+  }
+
+  .lg\:-mb-3 {
+    margin-bottom: -0.75rem;
+  }
+
+  .lg\:-ml-3 {
+    margin-left: -0.75rem;
+  }
+
+  .lg\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .lg\:-mr-4 {
+    margin-right: -1rem;
+  }
+
+  .lg\:-mb-4 {
+    margin-bottom: -1rem;
+  }
+
+  .lg\:-ml-4 {
+    margin-left: -1rem;
+  }
+
+  .lg\:-mt-5 {
+    margin-top: -1.25rem;
+  }
+
+  .lg\:-mr-5 {
+    margin-right: -1.25rem;
+  }
+
+  .lg\:-mb-5 {
+    margin-bottom: -1.25rem;
+  }
+
+  .lg\:-ml-5 {
+    margin-left: -1.25rem;
+  }
+
+  .lg\:-mt-6 {
+    margin-top: -1.5rem;
+  }
+
+  .lg\:-mr-6 {
+    margin-right: -1.5rem;
+  }
+
+  .lg\:-mb-6 {
+    margin-bottom: -1.5rem;
+  }
+
+  .lg\:-ml-6 {
+    margin-left: -1.5rem;
+  }
+
+  .lg\:-mt-8 {
+    margin-top: -2rem;
+  }
+
+  .lg\:-mr-8 {
+    margin-right: -2rem;
+  }
+
+  .lg\:-mb-8 {
+    margin-bottom: -2rem;
+  }
+
+  .lg\:-ml-8 {
+    margin-left: -2rem;
+  }
+
+  .lg\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .lg\:-mr-10 {
+    margin-right: -2.5rem;
+  }
+
+  .lg\:-mb-10 {
+    margin-bottom: -2.5rem;
+  }
+
+  .lg\:-ml-10 {
+    margin-left: -2.5rem;
+  }
+
+  .lg\:-mt-12 {
+    margin-top: -3rem;
+  }
+
+  .lg\:-mr-12 {
+    margin-right: -3rem;
+  }
+
+  .lg\:-mb-12 {
+    margin-bottom: -3rem;
+  }
+
+  .lg\:-ml-12 {
+    margin-left: -3rem;
+  }
+
+  .lg\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .lg\:-mr-16 {
+    margin-right: -4rem;
+  }
+
+  .lg\:-mb-16 {
+    margin-bottom: -4rem;
+  }
+
+  .lg\:-ml-16 {
+    margin-left: -4rem;
+  }
+
+  .lg\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .lg\:-mr-20 {
+    margin-right: -5rem;
+  }
+
+  .lg\:-mb-20 {
+    margin-bottom: -5rem;
+  }
+
+  .lg\:-ml-20 {
+    margin-left: -5rem;
+  }
+
+  .lg\:-mt-24 {
+    margin-top: -6rem;
+  }
+
+  .lg\:-mr-24 {
+    margin-right: -6rem;
+  }
+
+  .lg\:-mb-24 {
+    margin-bottom: -6rem;
+  }
+
+  .lg\:-ml-24 {
+    margin-left: -6rem;
+  }
+
+  .lg\:-mt-32 {
+    margin-top: -8rem;
+  }
+
+  .lg\:-mr-32 {
+    margin-right: -8rem;
+  }
+
+  .lg\:-mb-32 {
+    margin-bottom: -8rem;
+  }
+
+  .lg\:-ml-32 {
+    margin-left: -8rem;
+  }
+
+  .lg\:-mt-40 {
+    margin-top: -10rem;
+  }
+
+  .lg\:-mr-40 {
+    margin-right: -10rem;
+  }
+
+  .lg\:-mb-40 {
+    margin-bottom: -10rem;
+  }
+
+  .lg\:-ml-40 {
+    margin-left: -10rem;
+  }
+
+  .lg\:-mt-48 {
+    margin-top: -12rem;
+  }
+
+  .lg\:-mr-48 {
+    margin-right: -12rem;
+  }
+
+  .lg\:-mb-48 {
+    margin-bottom: -12rem;
+  }
+
+  .lg\:-ml-48 {
+    margin-left: -12rem;
+  }
+
+  .lg\:-mt-56 {
+    margin-top: -14rem;
+  }
+
+  .lg\:-mr-56 {
+    margin-right: -14rem;
+  }
+
+  .lg\:-mb-56 {
+    margin-bottom: -14rem;
+  }
+
+  .lg\:-ml-56 {
+    margin-left: -14rem;
+  }
+
+  .lg\:-mt-64 {
+    margin-top: -16rem;
+  }
+
+  .lg\:-mr-64 {
+    margin-right: -16rem;
+  }
+
+  .lg\:-mb-64 {
+    margin-bottom: -16rem;
+  }
+
+  .lg\:-ml-64 {
+    margin-left: -16rem;
+  }
+
+  .lg\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .lg\:-mr-px {
+    margin-right: -1px;
+  }
+
+  .lg\:-mb-px {
+    margin-bottom: -1px;
+  }
+
+  .lg\:-ml-px {
+    margin-left: -1px;
+  }
+
+  .lg\:max-h-full {
+    max-height: 100%;
+  }
+
+  .lg\:max-h-screen {
+    max-height: 100vh;
+  }
+
+  .lg\:max-w-xs {
+    max-width: 20rem;
+  }
+
+  .lg\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .lg\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .lg\:max-w-lg {
+    max-width: 32rem;
+  }
+
+  .lg\:max-w-xl {
+    max-width: 36rem;
+  }
+
+  .lg\:max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .lg\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .lg\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .lg\:max-w-5xl {
+    max-width: 64rem;
+  }
+
+  .lg\:max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .lg\:max-w-full {
+    max-width: 100%;
+  }
+
+  .lg\:min-h-0 {
+    min-height: 0;
+  }
+
+  .lg\:min-h-full {
+    min-height: 100%;
+  }
+
+  .lg\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .lg\:min-w-0 {
+    min-width: 0;
+  }
+
+  .lg\:min-w-full {
+    min-width: 100%;
+  }
+
+  .lg\:object-contain {
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .lg\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+  .lg\:object-fill {
+    -o-object-fit: fill;
+       object-fit: fill;
+  }
+
+  .lg\:object-none {
+    -o-object-fit: none;
+       object-fit: none;
+  }
+
+  .lg\:object-scale-down {
+    -o-object-fit: scale-down;
+       object-fit: scale-down;
+  }
+
+  .lg\:object-bottom {
+    -o-object-position: bottom;
+       object-position: bottom;
+  }
+
+  .lg\:object-center {
+    -o-object-position: center;
+       object-position: center;
+  }
+
+  .lg\:object-left {
+    -o-object-position: left;
+       object-position: left;
+  }
+
+  .lg\:object-left-bottom {
+    -o-object-position: left bottom;
+       object-position: left bottom;
+  }
+
+  .lg\:object-left-top {
+    -o-object-position: left top;
+       object-position: left top;
+  }
+
+  .lg\:object-right {
+    -o-object-position: right;
+       object-position: right;
+  }
+
+  .lg\:object-right-bottom {
+    -o-object-position: right bottom;
+       object-position: right bottom;
+  }
+
+  .lg\:object-right-top {
+    -o-object-position: right top;
+       object-position: right top;
+  }
+
+  .lg\:object-top {
+    -o-object-position: top;
+       object-position: top;
+  }
+
+  .lg\:opacity-0 {
+    opacity: 0;
+  }
+
+  .lg\:opacity-25 {
+    opacity: 0.25;
+  }
+
+  .lg\:opacity-50 {
+    opacity: 0.5;
+  }
+
+  .lg\:opacity-75 {
+    opacity: 0.75;
+  }
+
+  .lg\:opacity-100 {
+    opacity: 1;
+  }
+
+  .lg\:hover\:opacity-0:hover {
+    opacity: 0;
+  }
+
+  .lg\:hover\:opacity-25:hover {
+    opacity: 0.25;
+  }
+
+  .lg\:hover\:opacity-50:hover {
+    opacity: 0.5;
+  }
+
+  .lg\:hover\:opacity-75:hover {
+    opacity: 0.75;
+  }
+
+  .lg\:hover\:opacity-100:hover {
+    opacity: 1;
+  }
+
+  .lg\:focus\:opacity-0:focus {
+    opacity: 0;
+  }
+
+  .lg\:focus\:opacity-25:focus {
+    opacity: 0.25;
+  }
+
+  .lg\:focus\:opacity-50:focus {
+    opacity: 0.5;
+  }
+
+  .lg\:focus\:opacity-75:focus {
+    opacity: 0.75;
+  }
+
+  .lg\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
+
+  .lg\:outline-none {
+    outline: 0;
+  }
+
+  .lg\:focus\:outline-none:focus {
+    outline: 0;
+  }
+
+  .lg\:overflow-auto {
+    overflow: auto;
+  }
+
+  .lg\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .lg\:overflow-visible {
+    overflow: visible;
+  }
+
+  .lg\:overflow-scroll {
+    overflow: scroll;
+  }
+
+  .lg\:overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .lg\:overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .lg\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .lg\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .lg\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .lg\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
+  .lg\:overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .lg\:overflow-y-scroll {
+    overflow-y: scroll;
+  }
+
+  .lg\:scrolling-touch {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .lg\:scrolling-auto {
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .lg\:p-0 {
+    padding: 0;
+  }
+
+  .lg\:p-1 {
+    padding: 0.25rem;
+  }
+
+  .lg\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .lg\:p-3 {
+    padding: 0.75rem;
+  }
+
+  .lg\:p-4 {
+    padding: 1rem;
+  }
+
+  .lg\:p-5 {
+    padding: 1.25rem;
+  }
+
+  .lg\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+
+  .lg\:p-10 {
+    padding: 2.5rem;
+  }
+
+  .lg\:p-12 {
+    padding: 3rem;
+  }
+
+  .lg\:p-16 {
+    padding: 4rem;
+  }
+
+  .lg\:p-20 {
+    padding: 5rem;
+  }
+
+  .lg\:p-24 {
+    padding: 6rem;
+  }
+
+  .lg\:p-32 {
+    padding: 8rem;
+  }
+
+  .lg\:p-40 {
+    padding: 10rem;
+  }
+
+  .lg\:p-48 {
+    padding: 12rem;
+  }
+
+  .lg\:p-56 {
+    padding: 14rem;
+  }
+
+  .lg\:p-64 {
+    padding: 16rem;
+  }
+
+  .lg\:p-px {
+    padding: 1px;
+  }
+
+  .lg\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .lg\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .lg\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .lg\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .lg\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .lg\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .lg\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .lg\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .lg\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .lg\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .lg\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .lg\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .lg\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .lg\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
+  .lg\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .lg\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .lg\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .lg\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .lg\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
+  .lg\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .lg\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .lg\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
+  .lg\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .lg\:px-32 {
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+
+  .lg\:py-40 {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+  }
+
+  .lg\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
+  .lg\:py-48 {
+    padding-top: 12rem;
+    padding-bottom: 12rem;
+  }
+
+  .lg\:px-48 {
+    padding-left: 12rem;
+    padding-right: 12rem;
+  }
+
+  .lg\:py-56 {
+    padding-top: 14rem;
+    padding-bottom: 14rem;
+  }
+
+  .lg\:px-56 {
+    padding-left: 14rem;
+    padding-right: 14rem;
+  }
+
+  .lg\:py-64 {
+    padding-top: 16rem;
+    padding-bottom: 16rem;
+  }
+
+  .lg\:px-64 {
+    padding-left: 16rem;
+    padding-right: 16rem;
+  }
+
+  .lg\:py-px {
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .lg\:px-px {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .lg\:pt-0 {
+    padding-top: 0;
+  }
+
+  .lg\:pr-0 {
+    padding-right: 0;
+  }
+
+  .lg\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .lg\:pl-0 {
+    padding-left: 0;
+  }
+
+  .lg\:pt-1 {
+    padding-top: 0.25rem;
+  }
+
+  .lg\:pr-1 {
+    padding-right: 0.25rem;
+  }
+
+  .lg\:pb-1 {
+    padding-bottom: 0.25rem;
+  }
+
+  .lg\:pl-1 {
+    padding-left: 0.25rem;
+  }
+
+  .lg\:pt-2 {
+    padding-top: 0.5rem;
+  }
+
+  .lg\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .lg\:pb-2 {
+    padding-bottom: 0.5rem;
+  }
+
+  .lg\:pl-2 {
+    padding-left: 0.5rem;
+  }
+
+  .lg\:pt-3 {
+    padding-top: 0.75rem;
+  }
+
+  .lg\:pr-3 {
+    padding-right: 0.75rem;
+  }
+
+  .lg\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
+  .lg\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
+  .lg\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .lg\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .lg\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .lg\:pl-4 {
+    padding-left: 1rem;
+  }
+
+  .lg\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .lg\:pr-5 {
+    padding-right: 1.25rem;
+  }
+
+  .lg\:pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
+  .lg\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .lg\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .lg\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .lg\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
+  .lg\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .lg\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .lg\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .lg\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .lg\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .lg\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .lg\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
+  .lg\:pb-10 {
+    padding-bottom: 2.5rem;
+  }
+
+  .lg\:pl-10 {
+    padding-left: 2.5rem;
+  }
+
+  .lg\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .lg\:pr-12 {
+    padding-right: 3rem;
+  }
+
+  .lg\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
+  .lg\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .lg\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .lg\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .lg\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .lg\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .lg\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .lg\:pr-20 {
+    padding-right: 5rem;
+  }
+
+  .lg\:pb-20 {
+    padding-bottom: 5rem;
+  }
+
+  .lg\:pl-20 {
+    padding-left: 5rem;
+  }
+
+  .lg\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .lg\:pr-24 {
+    padding-right: 6rem;
+  }
+
+  .lg\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .lg\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .lg\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .lg\:pr-32 {
+    padding-right: 8rem;
+  }
+
+  .lg\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
+  .lg\:pl-32 {
+    padding-left: 8rem;
+  }
+
+  .lg\:pt-40 {
+    padding-top: 10rem;
+  }
+
+  .lg\:pr-40 {
+    padding-right: 10rem;
+  }
+
+  .lg\:pb-40 {
+    padding-bottom: 10rem;
+  }
+
+  .lg\:pl-40 {
+    padding-left: 10rem;
+  }
+
+  .lg\:pt-48 {
+    padding-top: 12rem;
+  }
+
+  .lg\:pr-48 {
+    padding-right: 12rem;
+  }
+
+  .lg\:pb-48 {
+    padding-bottom: 12rem;
+  }
+
+  .lg\:pl-48 {
+    padding-left: 12rem;
+  }
+
+  .lg\:pt-56 {
+    padding-top: 14rem;
+  }
+
+  .lg\:pr-56 {
+    padding-right: 14rem;
+  }
+
+  .lg\:pb-56 {
+    padding-bottom: 14rem;
+  }
+
+  .lg\:pl-56 {
+    padding-left: 14rem;
+  }
+
+  .lg\:pt-64 {
+    padding-top: 16rem;
+  }
+
+  .lg\:pr-64 {
+    padding-right: 16rem;
+  }
+
+  .lg\:pb-64 {
+    padding-bottom: 16rem;
+  }
+
+  .lg\:pl-64 {
+    padding-left: 16rem;
+  }
+
+  .lg\:pt-px {
+    padding-top: 1px;
+  }
+
+  .lg\:pr-px {
+    padding-right: 1px;
+  }
+
+  .lg\:pb-px {
+    padding-bottom: 1px;
+  }
+
+  .lg\:pl-px {
+    padding-left: 1px;
+  }
+
+  .lg\:placeholder-transparent::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .lg\:placeholder-transparent::-moz-placeholder {
+    color: transparent;
+  }
+
+  .lg\:placeholder-transparent:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .lg\:placeholder-transparent::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .lg\:placeholder-transparent::placeholder {
+    color: transparent;
+  }
+
+  .lg\:placeholder-black::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .lg\:placeholder-black::-moz-placeholder {
+    color: #000;
+  }
+
+  .lg\:placeholder-black:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .lg\:placeholder-black::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .lg\:placeholder-black::placeholder {
+    color: #000;
+  }
+
+  .lg\:placeholder-white::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .lg\:placeholder-white::-moz-placeholder {
+    color: #fff;
+  }
+
+  .lg\:placeholder-white:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .lg\:placeholder-white::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .lg\:placeholder-white::placeholder {
+    color: #fff;
+  }
+
+  .lg\:placeholder-gray-100::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:placeholder-gray-100::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:placeholder-gray-100:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:placeholder-gray-100::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:placeholder-gray-100::placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:placeholder-gray-200::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:placeholder-gray-200::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:placeholder-gray-200:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:placeholder-gray-200::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:placeholder-gray-200::placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:placeholder-gray-300::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:placeholder-gray-300::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:placeholder-gray-300:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:placeholder-gray-300::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:placeholder-gray-300::placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:placeholder-gray-400::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:placeholder-gray-400::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:placeholder-gray-400:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:placeholder-gray-400::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:placeholder-gray-400::placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:placeholder-gray-500::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:placeholder-gray-500::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:placeholder-gray-500:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:placeholder-gray-500::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:placeholder-gray-500::placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:placeholder-gray-600::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .lg\:placeholder-gray-600::-moz-placeholder {
+    color: #718096;
+  }
+
+  .lg\:placeholder-gray-600:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .lg\:placeholder-gray-600::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .lg\:placeholder-gray-600::placeholder {
+    color: #718096;
+  }
+
+  .lg\:placeholder-gray-700::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:placeholder-gray-700::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:placeholder-gray-700:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:placeholder-gray-700::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:placeholder-gray-700::placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:placeholder-gray-800::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:placeholder-gray-800::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:placeholder-gray-800:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:placeholder-gray-800::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:placeholder-gray-800::placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:placeholder-gray-900::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:placeholder-gray-900::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:placeholder-gray-900:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:placeholder-gray-900::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:placeholder-gray-900::placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:placeholder-red-100::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:placeholder-red-100::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:placeholder-red-100:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:placeholder-red-100::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:placeholder-red-100::placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:placeholder-red-200::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:placeholder-red-200::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:placeholder-red-200:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:placeholder-red-200::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:placeholder-red-200::placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:placeholder-red-300::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:placeholder-red-300::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:placeholder-red-300:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:placeholder-red-300::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:placeholder-red-300::placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:placeholder-red-400::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:placeholder-red-400::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:placeholder-red-400:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:placeholder-red-400::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:placeholder-red-400::placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:placeholder-red-500::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:placeholder-red-500::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:placeholder-red-500:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:placeholder-red-500::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:placeholder-red-500::placeholder {
+    color: #f56565;
+  }
+
+  .lg\:placeholder-red-600::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:placeholder-red-600::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:placeholder-red-600:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:placeholder-red-600::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:placeholder-red-600::placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:placeholder-red-700::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:placeholder-red-700::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:placeholder-red-700:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:placeholder-red-700::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:placeholder-red-700::placeholder {
+    color: #c53030;
+  }
+
+  .lg\:placeholder-red-800::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:placeholder-red-800::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:placeholder-red-800:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:placeholder-red-800::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:placeholder-red-800::placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:placeholder-red-900::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:placeholder-red-900::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:placeholder-red-900:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:placeholder-red-900::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:placeholder-red-900::placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:placeholder-orange-100::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:placeholder-orange-100::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:placeholder-orange-100:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:placeholder-orange-100::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:placeholder-orange-100::placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:placeholder-orange-200::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:placeholder-orange-200::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:placeholder-orange-200:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:placeholder-orange-200::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:placeholder-orange-200::placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:placeholder-orange-300::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:placeholder-orange-300::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:placeholder-orange-300:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:placeholder-orange-300::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:placeholder-orange-300::placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:placeholder-orange-400::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:placeholder-orange-400::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:placeholder-orange-400:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:placeholder-orange-400::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:placeholder-orange-400::placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:placeholder-orange-500::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:placeholder-orange-500::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:placeholder-orange-500:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:placeholder-orange-500::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:placeholder-orange-500::placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:placeholder-orange-600::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:placeholder-orange-600::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:placeholder-orange-600:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:placeholder-orange-600::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:placeholder-orange-600::placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:placeholder-orange-700::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:placeholder-orange-700::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:placeholder-orange-700:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:placeholder-orange-700::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:placeholder-orange-700::placeholder {
+    color: #c05621;
+  }
+
+  .lg\:placeholder-orange-800::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:placeholder-orange-800::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:placeholder-orange-800:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:placeholder-orange-800::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:placeholder-orange-800::placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:placeholder-orange-900::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:placeholder-orange-900::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:placeholder-orange-900:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:placeholder-orange-900::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:placeholder-orange-900::placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:placeholder-yellow-100::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:placeholder-yellow-100::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:placeholder-yellow-100:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:placeholder-yellow-100::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:placeholder-yellow-100::placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:placeholder-yellow-200::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:placeholder-yellow-200::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:placeholder-yellow-200:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:placeholder-yellow-200::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:placeholder-yellow-200::placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:placeholder-yellow-300::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:placeholder-yellow-300::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:placeholder-yellow-300:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:placeholder-yellow-300::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:placeholder-yellow-300::placeholder {
+    color: #faf089;
+  }
+
+  .lg\:placeholder-yellow-400::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:placeholder-yellow-400::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:placeholder-yellow-400:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:placeholder-yellow-400::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:placeholder-yellow-400::placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:placeholder-yellow-500::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:placeholder-yellow-500::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:placeholder-yellow-500:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:placeholder-yellow-500::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:placeholder-yellow-500::placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:placeholder-yellow-600::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:placeholder-yellow-600::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:placeholder-yellow-600:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:placeholder-yellow-600::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:placeholder-yellow-600::placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:placeholder-yellow-700::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:placeholder-yellow-700::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:placeholder-yellow-700:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:placeholder-yellow-700::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:placeholder-yellow-700::placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:placeholder-yellow-800::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:placeholder-yellow-800::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:placeholder-yellow-800:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:placeholder-yellow-800::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:placeholder-yellow-800::placeholder {
+    color: #975a16;
+  }
+
+  .lg\:placeholder-yellow-900::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .lg\:placeholder-yellow-900::-moz-placeholder {
+    color: #744210;
+  }
+
+  .lg\:placeholder-yellow-900:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .lg\:placeholder-yellow-900::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .lg\:placeholder-yellow-900::placeholder {
+    color: #744210;
+  }
+
+  .lg\:placeholder-green-100::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:placeholder-green-100::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:placeholder-green-100:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:placeholder-green-100::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:placeholder-green-100::placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:placeholder-green-200::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:placeholder-green-200::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:placeholder-green-200:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:placeholder-green-200::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:placeholder-green-200::placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:placeholder-green-300::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:placeholder-green-300::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:placeholder-green-300:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:placeholder-green-300::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:placeholder-green-300::placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:placeholder-green-400::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:placeholder-green-400::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:placeholder-green-400:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:placeholder-green-400::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:placeholder-green-400::placeholder {
+    color: #68d391;
+  }
+
+  .lg\:placeholder-green-500::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:placeholder-green-500::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:placeholder-green-500:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:placeholder-green-500::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:placeholder-green-500::placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:placeholder-green-600::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:placeholder-green-600::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:placeholder-green-600:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:placeholder-green-600::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:placeholder-green-600::placeholder {
+    color: #38a169;
+  }
+
+  .lg\:placeholder-green-700::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:placeholder-green-700::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:placeholder-green-700:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:placeholder-green-700::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:placeholder-green-700::placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:placeholder-green-800::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .lg\:placeholder-green-800::-moz-placeholder {
+    color: #276749;
+  }
+
+  .lg\:placeholder-green-800:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .lg\:placeholder-green-800::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .lg\:placeholder-green-800::placeholder {
+    color: #276749;
+  }
+
+  .lg\:placeholder-green-900::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:placeholder-green-900::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:placeholder-green-900:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:placeholder-green-900::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:placeholder-green-900::placeholder {
+    color: #22543d;
+  }
+
+  .lg\:placeholder-teal-100::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:placeholder-teal-100::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:placeholder-teal-100:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:placeholder-teal-100::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:placeholder-teal-100::placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:placeholder-teal-200::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:placeholder-teal-200::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:placeholder-teal-200:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:placeholder-teal-200::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:placeholder-teal-200::placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:placeholder-teal-300::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:placeholder-teal-300::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:placeholder-teal-300:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:placeholder-teal-300::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:placeholder-teal-300::placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:placeholder-teal-400::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:placeholder-teal-400::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:placeholder-teal-400:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:placeholder-teal-400::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:placeholder-teal-400::placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:placeholder-teal-500::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:placeholder-teal-500::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:placeholder-teal-500:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:placeholder-teal-500::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:placeholder-teal-500::placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:placeholder-teal-600::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .lg\:placeholder-teal-600::-moz-placeholder {
+    color: #319795;
+  }
+
+  .lg\:placeholder-teal-600:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .lg\:placeholder-teal-600::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .lg\:placeholder-teal-600::placeholder {
+    color: #319795;
+  }
+
+  .lg\:placeholder-teal-700::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:placeholder-teal-700::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:placeholder-teal-700:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:placeholder-teal-700::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:placeholder-teal-700::placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:placeholder-teal-800::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:placeholder-teal-800::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:placeholder-teal-800:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:placeholder-teal-800::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:placeholder-teal-800::placeholder {
+    color: #285e61;
+  }
+
+  .lg\:placeholder-teal-900::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:placeholder-teal-900::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:placeholder-teal-900:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:placeholder-teal-900::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:placeholder-teal-900::placeholder {
+    color: #234e52;
+  }
+
+  .lg\:placeholder-blue-100::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:placeholder-blue-100::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:placeholder-blue-100:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:placeholder-blue-100::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:placeholder-blue-100::placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:placeholder-blue-200::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:placeholder-blue-200::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:placeholder-blue-200:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:placeholder-blue-200::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:placeholder-blue-200::placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:placeholder-blue-300::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:placeholder-blue-300::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:placeholder-blue-300:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:placeholder-blue-300::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:placeholder-blue-300::placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:placeholder-blue-400::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:placeholder-blue-400::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:placeholder-blue-400:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:placeholder-blue-400::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:placeholder-blue-400::placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:placeholder-blue-500::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:placeholder-blue-500::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:placeholder-blue-500:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:placeholder-blue-500::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:placeholder-blue-500::placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:placeholder-blue-600::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:placeholder-blue-600::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:placeholder-blue-600:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:placeholder-blue-600::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:placeholder-blue-600::placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:placeholder-blue-700::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:placeholder-blue-700::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:placeholder-blue-700:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:placeholder-blue-700::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:placeholder-blue-700::placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:placeholder-blue-800::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:placeholder-blue-800::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:placeholder-blue-800:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:placeholder-blue-800::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:placeholder-blue-800::placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:placeholder-blue-900::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:placeholder-blue-900::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:placeholder-blue-900:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:placeholder-blue-900::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:placeholder-blue-900::placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:placeholder-indigo-100::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:placeholder-indigo-100::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:placeholder-indigo-100:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:placeholder-indigo-100::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:placeholder-indigo-100::placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:placeholder-indigo-200::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:placeholder-indigo-200::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:placeholder-indigo-200:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:placeholder-indigo-200::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:placeholder-indigo-200::placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:placeholder-indigo-300::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:placeholder-indigo-300::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:placeholder-indigo-300:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:placeholder-indigo-300::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:placeholder-indigo-300::placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:placeholder-indigo-400::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:placeholder-indigo-400::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:placeholder-indigo-400:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:placeholder-indigo-400::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:placeholder-indigo-400::placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:placeholder-indigo-500::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:placeholder-indigo-500::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:placeholder-indigo-500:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:placeholder-indigo-500::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:placeholder-indigo-500::placeholder {
+    color: #667eea;
+  }
+
+  .lg\:placeholder-indigo-600::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:placeholder-indigo-600::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:placeholder-indigo-600:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:placeholder-indigo-600::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:placeholder-indigo-600::placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:placeholder-indigo-700::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:placeholder-indigo-700::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:placeholder-indigo-700:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:placeholder-indigo-700::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:placeholder-indigo-700::placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:placeholder-indigo-800::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .lg\:placeholder-indigo-800::-moz-placeholder {
+    color: #434190;
+  }
+
+  .lg\:placeholder-indigo-800:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .lg\:placeholder-indigo-800::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .lg\:placeholder-indigo-800::placeholder {
+    color: #434190;
+  }
+
+  .lg\:placeholder-indigo-900::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:placeholder-indigo-900::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:placeholder-indigo-900:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:placeholder-indigo-900::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:placeholder-indigo-900::placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:placeholder-purple-100::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:placeholder-purple-100::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:placeholder-purple-100:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:placeholder-purple-100::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:placeholder-purple-100::placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:placeholder-purple-200::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:placeholder-purple-200::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:placeholder-purple-200:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:placeholder-purple-200::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:placeholder-purple-200::placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:placeholder-purple-300::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:placeholder-purple-300::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:placeholder-purple-300:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:placeholder-purple-300::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:placeholder-purple-300::placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:placeholder-purple-400::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:placeholder-purple-400::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:placeholder-purple-400:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:placeholder-purple-400::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:placeholder-purple-400::placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:placeholder-purple-500::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:placeholder-purple-500::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:placeholder-purple-500:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:placeholder-purple-500::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:placeholder-purple-500::placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:placeholder-purple-600::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:placeholder-purple-600::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:placeholder-purple-600:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:placeholder-purple-600::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:placeholder-purple-600::placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:placeholder-purple-700::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:placeholder-purple-700::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:placeholder-purple-700:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:placeholder-purple-700::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:placeholder-purple-700::placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:placeholder-purple-800::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:placeholder-purple-800::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:placeholder-purple-800:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:placeholder-purple-800::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:placeholder-purple-800::placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:placeholder-purple-900::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:placeholder-purple-900::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:placeholder-purple-900:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:placeholder-purple-900::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:placeholder-purple-900::placeholder {
+    color: #44337a;
+  }
+
+  .lg\:placeholder-pink-100::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:placeholder-pink-100::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:placeholder-pink-100:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:placeholder-pink-100::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:placeholder-pink-100::placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:placeholder-pink-200::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:placeholder-pink-200::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:placeholder-pink-200:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:placeholder-pink-200::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:placeholder-pink-200::placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:placeholder-pink-300::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:placeholder-pink-300::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:placeholder-pink-300:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:placeholder-pink-300::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:placeholder-pink-300::placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:placeholder-pink-400::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:placeholder-pink-400::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:placeholder-pink-400:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:placeholder-pink-400::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:placeholder-pink-400::placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:placeholder-pink-500::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:placeholder-pink-500::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:placeholder-pink-500:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:placeholder-pink-500::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:placeholder-pink-500::placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:placeholder-pink-600::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:placeholder-pink-600::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:placeholder-pink-600:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:placeholder-pink-600::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:placeholder-pink-600::placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:placeholder-pink-700::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:placeholder-pink-700::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:placeholder-pink-700:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:placeholder-pink-700::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:placeholder-pink-700::placeholder {
+    color: #b83280;
+  }
+
+  .lg\:placeholder-pink-800::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:placeholder-pink-800::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:placeholder-pink-800:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:placeholder-pink-800::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:placeholder-pink-800::placeholder {
+    color: #97266d;
+  }
+
+  .lg\:placeholder-pink-900::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .lg\:placeholder-pink-900::-moz-placeholder {
+    color: #702459;
+  }
+
+  .lg\:placeholder-pink-900:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .lg\:placeholder-pink-900::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .lg\:placeholder-pink-900::placeholder {
+    color: #702459;
+  }
+
+  .lg\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .lg\:focus\:placeholder-transparent:focus::-moz-placeholder {
+    color: transparent;
+  }
+
+  .lg\:focus\:placeholder-transparent:focus:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .lg\:focus\:placeholder-transparent:focus::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .lg\:focus\:placeholder-transparent:focus::placeholder {
+    color: transparent;
+  }
+
+  .lg\:focus\:placeholder-black:focus::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .lg\:focus\:placeholder-black:focus::-moz-placeholder {
+    color: #000;
+  }
+
+  .lg\:focus\:placeholder-black:focus:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .lg\:focus\:placeholder-black:focus::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .lg\:focus\:placeholder-black:focus::placeholder {
+    color: #000;
+  }
+
+  .lg\:focus\:placeholder-white:focus::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .lg\:focus\:placeholder-white:focus::-moz-placeholder {
+    color: #fff;
+  }
+
+  .lg\:focus\:placeholder-white:focus:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .lg\:focus\:placeholder-white:focus::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .lg\:focus\:placeholder-white:focus::placeholder {
+    color: #fff;
+  }
+
+  .lg\:focus\:placeholder-gray-100:focus::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:focus\:placeholder-gray-100:focus::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:focus\:placeholder-gray-100:focus:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:focus\:placeholder-gray-100:focus::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:focus\:placeholder-gray-100:focus::placeholder {
+    color: #f7fafc;
+  }
+
+  .lg\:focus\:placeholder-gray-200:focus::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:focus\:placeholder-gray-200:focus::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:focus\:placeholder-gray-200:focus:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:focus\:placeholder-gray-200:focus::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:focus\:placeholder-gray-200:focus::placeholder {
+    color: #edf2f7;
+  }
+
+  .lg\:focus\:placeholder-gray-300:focus::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:focus\:placeholder-gray-300:focus::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:focus\:placeholder-gray-300:focus:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:focus\:placeholder-gray-300:focus::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:focus\:placeholder-gray-300:focus::placeholder {
+    color: #e2e8f0;
+  }
+
+  .lg\:focus\:placeholder-gray-400:focus::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:focus\:placeholder-gray-400:focus::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:focus\:placeholder-gray-400:focus:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:focus\:placeholder-gray-400:focus::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:focus\:placeholder-gray-400:focus::placeholder {
+    color: #cbd5e0;
+  }
+
+  .lg\:focus\:placeholder-gray-500:focus::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:focus\:placeholder-gray-500:focus::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:focus\:placeholder-gray-500:focus:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:focus\:placeholder-gray-500:focus::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:focus\:placeholder-gray-500:focus::placeholder {
+    color: #a0aec0;
+  }
+
+  .lg\:focus\:placeholder-gray-600:focus::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .lg\:focus\:placeholder-gray-600:focus::-moz-placeholder {
+    color: #718096;
+  }
+
+  .lg\:focus\:placeholder-gray-600:focus:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .lg\:focus\:placeholder-gray-600:focus::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .lg\:focus\:placeholder-gray-600:focus::placeholder {
+    color: #718096;
+  }
+
+  .lg\:focus\:placeholder-gray-700:focus::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:focus\:placeholder-gray-700:focus::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:focus\:placeholder-gray-700:focus:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:focus\:placeholder-gray-700:focus::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:focus\:placeholder-gray-700:focus::placeholder {
+    color: #4a5568;
+  }
+
+  .lg\:focus\:placeholder-gray-800:focus::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:focus\:placeholder-gray-800:focus::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:focus\:placeholder-gray-800:focus:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:focus\:placeholder-gray-800:focus::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:focus\:placeholder-gray-800:focus::placeholder {
+    color: #2d3748;
+  }
+
+  .lg\:focus\:placeholder-gray-900:focus::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:focus\:placeholder-gray-900:focus::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:focus\:placeholder-gray-900:focus:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:focus\:placeholder-gray-900:focus::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:focus\:placeholder-gray-900:focus::placeholder {
+    color: #1a202c;
+  }
+
+  .lg\:focus\:placeholder-red-100:focus::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:focus\:placeholder-red-100:focus::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:focus\:placeholder-red-100:focus:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:focus\:placeholder-red-100:focus::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:focus\:placeholder-red-100:focus::placeholder {
+    color: #fff5f5;
+  }
+
+  .lg\:focus\:placeholder-red-200:focus::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:focus\:placeholder-red-200:focus::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:focus\:placeholder-red-200:focus:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:focus\:placeholder-red-200:focus::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:focus\:placeholder-red-200:focus::placeholder {
+    color: #fed7d7;
+  }
+
+  .lg\:focus\:placeholder-red-300:focus::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:focus\:placeholder-red-300:focus::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:focus\:placeholder-red-300:focus:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:focus\:placeholder-red-300:focus::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:focus\:placeholder-red-300:focus::placeholder {
+    color: #feb2b2;
+  }
+
+  .lg\:focus\:placeholder-red-400:focus::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:focus\:placeholder-red-400:focus::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:focus\:placeholder-red-400:focus:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:focus\:placeholder-red-400:focus::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:focus\:placeholder-red-400:focus::placeholder {
+    color: #fc8181;
+  }
+
+  .lg\:focus\:placeholder-red-500:focus::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:focus\:placeholder-red-500:focus::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:focus\:placeholder-red-500:focus:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:focus\:placeholder-red-500:focus::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .lg\:focus\:placeholder-red-500:focus::placeholder {
+    color: #f56565;
+  }
+
+  .lg\:focus\:placeholder-red-600:focus::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:focus\:placeholder-red-600:focus::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:focus\:placeholder-red-600:focus:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:focus\:placeholder-red-600:focus::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:focus\:placeholder-red-600:focus::placeholder {
+    color: #e53e3e;
+  }
+
+  .lg\:focus\:placeholder-red-700:focus::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:focus\:placeholder-red-700:focus::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:focus\:placeholder-red-700:focus:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:focus\:placeholder-red-700:focus::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .lg\:focus\:placeholder-red-700:focus::placeholder {
+    color: #c53030;
+  }
+
+  .lg\:focus\:placeholder-red-800:focus::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:focus\:placeholder-red-800:focus::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:focus\:placeholder-red-800:focus:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:focus\:placeholder-red-800:focus::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:focus\:placeholder-red-800:focus::placeholder {
+    color: #9b2c2c;
+  }
+
+  .lg\:focus\:placeholder-red-900:focus::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:focus\:placeholder-red-900:focus::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:focus\:placeholder-red-900:focus:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:focus\:placeholder-red-900:focus::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:focus\:placeholder-red-900:focus::placeholder {
+    color: #742a2a;
+  }
+
+  .lg\:focus\:placeholder-orange-100:focus::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:focus\:placeholder-orange-100:focus::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:focus\:placeholder-orange-100:focus:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:focus\:placeholder-orange-100:focus::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:focus\:placeholder-orange-100:focus::placeholder {
+    color: #fffaf0;
+  }
+
+  .lg\:focus\:placeholder-orange-200:focus::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:focus\:placeholder-orange-200:focus::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:focus\:placeholder-orange-200:focus:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:focus\:placeholder-orange-200:focus::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:focus\:placeholder-orange-200:focus::placeholder {
+    color: #feebc8;
+  }
+
+  .lg\:focus\:placeholder-orange-300:focus::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:focus\:placeholder-orange-300:focus::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:focus\:placeholder-orange-300:focus:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:focus\:placeholder-orange-300:focus::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:focus\:placeholder-orange-300:focus::placeholder {
+    color: #fbd38d;
+  }
+
+  .lg\:focus\:placeholder-orange-400:focus::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:focus\:placeholder-orange-400:focus::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:focus\:placeholder-orange-400:focus:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:focus\:placeholder-orange-400:focus::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:focus\:placeholder-orange-400:focus::placeholder {
+    color: #f6ad55;
+  }
+
+  .lg\:focus\:placeholder-orange-500:focus::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:focus\:placeholder-orange-500:focus::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:focus\:placeholder-orange-500:focus:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:focus\:placeholder-orange-500:focus::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:focus\:placeholder-orange-500:focus::placeholder {
+    color: #ed8936;
+  }
+
+  .lg\:focus\:placeholder-orange-600:focus::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:focus\:placeholder-orange-600:focus::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:focus\:placeholder-orange-600:focus:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:focus\:placeholder-orange-600:focus::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:focus\:placeholder-orange-600:focus::placeholder {
+    color: #dd6b20;
+  }
+
+  .lg\:focus\:placeholder-orange-700:focus::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:focus\:placeholder-orange-700:focus::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:focus\:placeholder-orange-700:focus:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:focus\:placeholder-orange-700:focus::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .lg\:focus\:placeholder-orange-700:focus::placeholder {
+    color: #c05621;
+  }
+
+  .lg\:focus\:placeholder-orange-800:focus::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:focus\:placeholder-orange-800:focus::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:focus\:placeholder-orange-800:focus:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:focus\:placeholder-orange-800:focus::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:focus\:placeholder-orange-800:focus::placeholder {
+    color: #9c4221;
+  }
+
+  .lg\:focus\:placeholder-orange-900:focus::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:focus\:placeholder-orange-900:focus::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:focus\:placeholder-orange-900:focus:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:focus\:placeholder-orange-900:focus::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:focus\:placeholder-orange-900:focus::placeholder {
+    color: #7b341e;
+  }
+
+  .lg\:focus\:placeholder-yellow-100:focus::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:focus\:placeholder-yellow-100:focus::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:focus\:placeholder-yellow-100:focus:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:focus\:placeholder-yellow-100:focus::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:focus\:placeholder-yellow-100:focus::placeholder {
+    color: #fffff0;
+  }
+
+  .lg\:focus\:placeholder-yellow-200:focus::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:focus\:placeholder-yellow-200:focus::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:focus\:placeholder-yellow-200:focus:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:focus\:placeholder-yellow-200:focus::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:focus\:placeholder-yellow-200:focus::placeholder {
+    color: #fefcbf;
+  }
+
+  .lg\:focus\:placeholder-yellow-300:focus::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:focus\:placeholder-yellow-300:focus::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:focus\:placeholder-yellow-300:focus:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:focus\:placeholder-yellow-300:focus::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .lg\:focus\:placeholder-yellow-300:focus::placeholder {
+    color: #faf089;
+  }
+
+  .lg\:focus\:placeholder-yellow-400:focus::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:focus\:placeholder-yellow-400:focus::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:focus\:placeholder-yellow-400:focus:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:focus\:placeholder-yellow-400:focus::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:focus\:placeholder-yellow-400:focus::placeholder {
+    color: #f6e05e;
+  }
+
+  .lg\:focus\:placeholder-yellow-500:focus::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:focus\:placeholder-yellow-500:focus::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:focus\:placeholder-yellow-500:focus:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:focus\:placeholder-yellow-500:focus::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:focus\:placeholder-yellow-500:focus::placeholder {
+    color: #ecc94b;
+  }
+
+  .lg\:focus\:placeholder-yellow-600:focus::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:focus\:placeholder-yellow-600:focus::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:focus\:placeholder-yellow-600:focus:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:focus\:placeholder-yellow-600:focus::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:focus\:placeholder-yellow-600:focus::placeholder {
+    color: #d69e2e;
+  }
+
+  .lg\:focus\:placeholder-yellow-700:focus::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:focus\:placeholder-yellow-700:focus::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:focus\:placeholder-yellow-700:focus:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:focus\:placeholder-yellow-700:focus::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:focus\:placeholder-yellow-700:focus::placeholder {
+    color: #b7791f;
+  }
+
+  .lg\:focus\:placeholder-yellow-800:focus::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:focus\:placeholder-yellow-800:focus::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:focus\:placeholder-yellow-800:focus:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:focus\:placeholder-yellow-800:focus::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .lg\:focus\:placeholder-yellow-800:focus::placeholder {
+    color: #975a16;
+  }
+
+  .lg\:focus\:placeholder-yellow-900:focus::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .lg\:focus\:placeholder-yellow-900:focus::-moz-placeholder {
+    color: #744210;
+  }
+
+  .lg\:focus\:placeholder-yellow-900:focus:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .lg\:focus\:placeholder-yellow-900:focus::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .lg\:focus\:placeholder-yellow-900:focus::placeholder {
+    color: #744210;
+  }
+
+  .lg\:focus\:placeholder-green-100:focus::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:focus\:placeholder-green-100:focus::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:focus\:placeholder-green-100:focus:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:focus\:placeholder-green-100:focus::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:focus\:placeholder-green-100:focus::placeholder {
+    color: #f0fff4;
+  }
+
+  .lg\:focus\:placeholder-green-200:focus::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:focus\:placeholder-green-200:focus::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:focus\:placeholder-green-200:focus:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:focus\:placeholder-green-200:focus::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:focus\:placeholder-green-200:focus::placeholder {
+    color: #c6f6d5;
+  }
+
+  .lg\:focus\:placeholder-green-300:focus::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:focus\:placeholder-green-300:focus::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:focus\:placeholder-green-300:focus:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:focus\:placeholder-green-300:focus::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:focus\:placeholder-green-300:focus::placeholder {
+    color: #9ae6b4;
+  }
+
+  .lg\:focus\:placeholder-green-400:focus::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:focus\:placeholder-green-400:focus::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:focus\:placeholder-green-400:focus:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:focus\:placeholder-green-400:focus::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .lg\:focus\:placeholder-green-400:focus::placeholder {
+    color: #68d391;
+  }
+
+  .lg\:focus\:placeholder-green-500:focus::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:focus\:placeholder-green-500:focus::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:focus\:placeholder-green-500:focus:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:focus\:placeholder-green-500:focus::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:focus\:placeholder-green-500:focus::placeholder {
+    color: #48bb78;
+  }
+
+  .lg\:focus\:placeholder-green-600:focus::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:focus\:placeholder-green-600:focus::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:focus\:placeholder-green-600:focus:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:focus\:placeholder-green-600:focus::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .lg\:focus\:placeholder-green-600:focus::placeholder {
+    color: #38a169;
+  }
+
+  .lg\:focus\:placeholder-green-700:focus::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:focus\:placeholder-green-700:focus::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:focus\:placeholder-green-700:focus:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:focus\:placeholder-green-700:focus::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:focus\:placeholder-green-700:focus::placeholder {
+    color: #2f855a;
+  }
+
+  .lg\:focus\:placeholder-green-800:focus::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .lg\:focus\:placeholder-green-800:focus::-moz-placeholder {
+    color: #276749;
+  }
+
+  .lg\:focus\:placeholder-green-800:focus:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .lg\:focus\:placeholder-green-800:focus::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .lg\:focus\:placeholder-green-800:focus::placeholder {
+    color: #276749;
+  }
+
+  .lg\:focus\:placeholder-green-900:focus::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:focus\:placeholder-green-900:focus::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:focus\:placeholder-green-900:focus:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:focus\:placeholder-green-900:focus::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .lg\:focus\:placeholder-green-900:focus::placeholder {
+    color: #22543d;
+  }
+
+  .lg\:focus\:placeholder-teal-100:focus::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:focus\:placeholder-teal-100:focus::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:focus\:placeholder-teal-100:focus:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:focus\:placeholder-teal-100:focus::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:focus\:placeholder-teal-100:focus::placeholder {
+    color: #e6fffa;
+  }
+
+  .lg\:focus\:placeholder-teal-200:focus::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:focus\:placeholder-teal-200:focus::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:focus\:placeholder-teal-200:focus:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:focus\:placeholder-teal-200:focus::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:focus\:placeholder-teal-200:focus::placeholder {
+    color: #b2f5ea;
+  }
+
+  .lg\:focus\:placeholder-teal-300:focus::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:focus\:placeholder-teal-300:focus::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:focus\:placeholder-teal-300:focus:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:focus\:placeholder-teal-300:focus::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:focus\:placeholder-teal-300:focus::placeholder {
+    color: #81e6d9;
+  }
+
+  .lg\:focus\:placeholder-teal-400:focus::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:focus\:placeholder-teal-400:focus::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:focus\:placeholder-teal-400:focus:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:focus\:placeholder-teal-400:focus::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:focus\:placeholder-teal-400:focus::placeholder {
+    color: #4fd1c5;
+  }
+
+  .lg\:focus\:placeholder-teal-500:focus::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:focus\:placeholder-teal-500:focus::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:focus\:placeholder-teal-500:focus:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:focus\:placeholder-teal-500:focus::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:focus\:placeholder-teal-500:focus::placeholder {
+    color: #38b2ac;
+  }
+
+  .lg\:focus\:placeholder-teal-600:focus::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .lg\:focus\:placeholder-teal-600:focus::-moz-placeholder {
+    color: #319795;
+  }
+
+  .lg\:focus\:placeholder-teal-600:focus:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .lg\:focus\:placeholder-teal-600:focus::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .lg\:focus\:placeholder-teal-600:focus::placeholder {
+    color: #319795;
+  }
+
+  .lg\:focus\:placeholder-teal-700:focus::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:focus\:placeholder-teal-700:focus::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:focus\:placeholder-teal-700:focus:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:focus\:placeholder-teal-700:focus::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:focus\:placeholder-teal-700:focus::placeholder {
+    color: #2c7a7b;
+  }
+
+  .lg\:focus\:placeholder-teal-800:focus::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:focus\:placeholder-teal-800:focus::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:focus\:placeholder-teal-800:focus:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:focus\:placeholder-teal-800:focus::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .lg\:focus\:placeholder-teal-800:focus::placeholder {
+    color: #285e61;
+  }
+
+  .lg\:focus\:placeholder-teal-900:focus::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:focus\:placeholder-teal-900:focus::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:focus\:placeholder-teal-900:focus:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:focus\:placeholder-teal-900:focus::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .lg\:focus\:placeholder-teal-900:focus::placeholder {
+    color: #234e52;
+  }
+
+  .lg\:focus\:placeholder-blue-100:focus::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:focus\:placeholder-blue-100:focus::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:focus\:placeholder-blue-100:focus:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:focus\:placeholder-blue-100:focus::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:focus\:placeholder-blue-100:focus::placeholder {
+    color: #ebf8ff;
+  }
+
+  .lg\:focus\:placeholder-blue-200:focus::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:focus\:placeholder-blue-200:focus::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:focus\:placeholder-blue-200:focus:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:focus\:placeholder-blue-200:focus::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:focus\:placeholder-blue-200:focus::placeholder {
+    color: #bee3f8;
+  }
+
+  .lg\:focus\:placeholder-blue-300:focus::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:focus\:placeholder-blue-300:focus::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:focus\:placeholder-blue-300:focus:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:focus\:placeholder-blue-300:focus::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:focus\:placeholder-blue-300:focus::placeholder {
+    color: #90cdf4;
+  }
+
+  .lg\:focus\:placeholder-blue-400:focus::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:focus\:placeholder-blue-400:focus::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:focus\:placeholder-blue-400:focus:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:focus\:placeholder-blue-400:focus::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:focus\:placeholder-blue-400:focus::placeholder {
+    color: #63b3ed;
+  }
+
+  .lg\:focus\:placeholder-blue-500:focus::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:focus\:placeholder-blue-500:focus::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:focus\:placeholder-blue-500:focus:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:focus\:placeholder-blue-500:focus::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:focus\:placeholder-blue-500:focus::placeholder {
+    color: #4299e1;
+  }
+
+  .lg\:focus\:placeholder-blue-600:focus::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:focus\:placeholder-blue-600:focus::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:focus\:placeholder-blue-600:focus:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:focus\:placeholder-blue-600:focus::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:focus\:placeholder-blue-600:focus::placeholder {
+    color: #3182ce;
+  }
+
+  .lg\:focus\:placeholder-blue-700:focus::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:focus\:placeholder-blue-700:focus::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:focus\:placeholder-blue-700:focus:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:focus\:placeholder-blue-700:focus::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:focus\:placeholder-blue-700:focus::placeholder {
+    color: #2b6cb0;
+  }
+
+  .lg\:focus\:placeholder-blue-800:focus::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:focus\:placeholder-blue-800:focus::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:focus\:placeholder-blue-800:focus:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:focus\:placeholder-blue-800:focus::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:focus\:placeholder-blue-800:focus::placeholder {
+    color: #2c5282;
+  }
+
+  .lg\:focus\:placeholder-blue-900:focus::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:focus\:placeholder-blue-900:focus::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:focus\:placeholder-blue-900:focus:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:focus\:placeholder-blue-900:focus::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:focus\:placeholder-blue-900:focus::placeholder {
+    color: #2a4365;
+  }
+
+  .lg\:focus\:placeholder-indigo-100:focus::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:focus\:placeholder-indigo-100:focus::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:focus\:placeholder-indigo-100:focus:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:focus\:placeholder-indigo-100:focus::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:focus\:placeholder-indigo-100:focus::placeholder {
+    color: #ebf4ff;
+  }
+
+  .lg\:focus\:placeholder-indigo-200:focus::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:focus\:placeholder-indigo-200:focus::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:focus\:placeholder-indigo-200:focus:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:focus\:placeholder-indigo-200:focus::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:focus\:placeholder-indigo-200:focus::placeholder {
+    color: #c3dafe;
+  }
+
+  .lg\:focus\:placeholder-indigo-300:focus::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:focus\:placeholder-indigo-300:focus::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:focus\:placeholder-indigo-300:focus:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:focus\:placeholder-indigo-300:focus::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:focus\:placeholder-indigo-300:focus::placeholder {
+    color: #a3bffa;
+  }
+
+  .lg\:focus\:placeholder-indigo-400:focus::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:focus\:placeholder-indigo-400:focus::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:focus\:placeholder-indigo-400:focus:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:focus\:placeholder-indigo-400:focus::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:focus\:placeholder-indigo-400:focus::placeholder {
+    color: #7f9cf5;
+  }
+
+  .lg\:focus\:placeholder-indigo-500:focus::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:focus\:placeholder-indigo-500:focus::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:focus\:placeholder-indigo-500:focus:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:focus\:placeholder-indigo-500:focus::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .lg\:focus\:placeholder-indigo-500:focus::placeholder {
+    color: #667eea;
+  }
+
+  .lg\:focus\:placeholder-indigo-600:focus::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:focus\:placeholder-indigo-600:focus::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:focus\:placeholder-indigo-600:focus:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:focus\:placeholder-indigo-600:focus::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:focus\:placeholder-indigo-600:focus::placeholder {
+    color: #5a67d8;
+  }
+
+  .lg\:focus\:placeholder-indigo-700:focus::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:focus\:placeholder-indigo-700:focus::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:focus\:placeholder-indigo-700:focus:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:focus\:placeholder-indigo-700:focus::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:focus\:placeholder-indigo-700:focus::placeholder {
+    color: #4c51bf;
+  }
+
+  .lg\:focus\:placeholder-indigo-800:focus::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .lg\:focus\:placeholder-indigo-800:focus::-moz-placeholder {
+    color: #434190;
+  }
+
+  .lg\:focus\:placeholder-indigo-800:focus:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .lg\:focus\:placeholder-indigo-800:focus::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .lg\:focus\:placeholder-indigo-800:focus::placeholder {
+    color: #434190;
+  }
+
+  .lg\:focus\:placeholder-indigo-900:focus::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:focus\:placeholder-indigo-900:focus::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:focus\:placeholder-indigo-900:focus:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:focus\:placeholder-indigo-900:focus::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:focus\:placeholder-indigo-900:focus::placeholder {
+    color: #3c366b;
+  }
+
+  .lg\:focus\:placeholder-purple-100:focus::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:focus\:placeholder-purple-100:focus::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:focus\:placeholder-purple-100:focus:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:focus\:placeholder-purple-100:focus::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:focus\:placeholder-purple-100:focus::placeholder {
+    color: #faf5ff;
+  }
+
+  .lg\:focus\:placeholder-purple-200:focus::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:focus\:placeholder-purple-200:focus::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:focus\:placeholder-purple-200:focus:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:focus\:placeholder-purple-200:focus::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:focus\:placeholder-purple-200:focus::placeholder {
+    color: #e9d8fd;
+  }
+
+  .lg\:focus\:placeholder-purple-300:focus::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:focus\:placeholder-purple-300:focus::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:focus\:placeholder-purple-300:focus:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:focus\:placeholder-purple-300:focus::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:focus\:placeholder-purple-300:focus::placeholder {
+    color: #d6bcfa;
+  }
+
+  .lg\:focus\:placeholder-purple-400:focus::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:focus\:placeholder-purple-400:focus::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:focus\:placeholder-purple-400:focus:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:focus\:placeholder-purple-400:focus::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:focus\:placeholder-purple-400:focus::placeholder {
+    color: #b794f4;
+  }
+
+  .lg\:focus\:placeholder-purple-500:focus::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:focus\:placeholder-purple-500:focus::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:focus\:placeholder-purple-500:focus:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:focus\:placeholder-purple-500:focus::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:focus\:placeholder-purple-500:focus::placeholder {
+    color: #9f7aea;
+  }
+
+  .lg\:focus\:placeholder-purple-600:focus::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:focus\:placeholder-purple-600:focus::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:focus\:placeholder-purple-600:focus:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:focus\:placeholder-purple-600:focus::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:focus\:placeholder-purple-600:focus::placeholder {
+    color: #805ad5;
+  }
+
+  .lg\:focus\:placeholder-purple-700:focus::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:focus\:placeholder-purple-700:focus::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:focus\:placeholder-purple-700:focus:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:focus\:placeholder-purple-700:focus::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:focus\:placeholder-purple-700:focus::placeholder {
+    color: #6b46c1;
+  }
+
+  .lg\:focus\:placeholder-purple-800:focus::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:focus\:placeholder-purple-800:focus::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:focus\:placeholder-purple-800:focus:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:focus\:placeholder-purple-800:focus::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:focus\:placeholder-purple-800:focus::placeholder {
+    color: #553c9a;
+  }
+
+  .lg\:focus\:placeholder-purple-900:focus::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:focus\:placeholder-purple-900:focus::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:focus\:placeholder-purple-900:focus:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:focus\:placeholder-purple-900:focus::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .lg\:focus\:placeholder-purple-900:focus::placeholder {
+    color: #44337a;
+  }
+
+  .lg\:focus\:placeholder-pink-100:focus::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:focus\:placeholder-pink-100:focus::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:focus\:placeholder-pink-100:focus:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:focus\:placeholder-pink-100:focus::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:focus\:placeholder-pink-100:focus::placeholder {
+    color: #fff5f7;
+  }
+
+  .lg\:focus\:placeholder-pink-200:focus::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:focus\:placeholder-pink-200:focus::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:focus\:placeholder-pink-200:focus:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:focus\:placeholder-pink-200:focus::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:focus\:placeholder-pink-200:focus::placeholder {
+    color: #fed7e2;
+  }
+
+  .lg\:focus\:placeholder-pink-300:focus::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:focus\:placeholder-pink-300:focus::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:focus\:placeholder-pink-300:focus:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:focus\:placeholder-pink-300:focus::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:focus\:placeholder-pink-300:focus::placeholder {
+    color: #fbb6ce;
+  }
+
+  .lg\:focus\:placeholder-pink-400:focus::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:focus\:placeholder-pink-400:focus::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:focus\:placeholder-pink-400:focus:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:focus\:placeholder-pink-400:focus::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:focus\:placeholder-pink-400:focus::placeholder {
+    color: #f687b3;
+  }
+
+  .lg\:focus\:placeholder-pink-500:focus::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:focus\:placeholder-pink-500:focus::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:focus\:placeholder-pink-500:focus:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:focus\:placeholder-pink-500:focus::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:focus\:placeholder-pink-500:focus::placeholder {
+    color: #ed64a6;
+  }
+
+  .lg\:focus\:placeholder-pink-600:focus::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:focus\:placeholder-pink-600:focus::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:focus\:placeholder-pink-600:focus:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:focus\:placeholder-pink-600:focus::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:focus\:placeholder-pink-600:focus::placeholder {
+    color: #d53f8c;
+  }
+
+  .lg\:focus\:placeholder-pink-700:focus::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:focus\:placeholder-pink-700:focus::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:focus\:placeholder-pink-700:focus:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:focus\:placeholder-pink-700:focus::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .lg\:focus\:placeholder-pink-700:focus::placeholder {
+    color: #b83280;
+  }
+
+  .lg\:focus\:placeholder-pink-800:focus::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:focus\:placeholder-pink-800:focus::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:focus\:placeholder-pink-800:focus:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:focus\:placeholder-pink-800:focus::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .lg\:focus\:placeholder-pink-800:focus::placeholder {
+    color: #97266d;
+  }
+
+  .lg\:focus\:placeholder-pink-900:focus::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .lg\:focus\:placeholder-pink-900:focus::-moz-placeholder {
+    color: #702459;
+  }
+
+  .lg\:focus\:placeholder-pink-900:focus:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .lg\:focus\:placeholder-pink-900:focus::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .lg\:focus\:placeholder-pink-900:focus::placeholder {
+    color: #702459;
+  }
+
+  .lg\:pointer-events-none {
+    pointer-events: none;
+  }
+
+  .lg\:pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  .lg\:static {
+    position: static;
+  }
+
+  .lg\:fixed {
+    position: fixed;
+  }
+
+  .lg\:absolute {
+    position: absolute;
+  }
+
+  .lg\:relative {
+    position: relative;
+  }
+
+  .lg\:sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  .lg\:inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .lg\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .lg\:inset-y-0 {
+    top: 0;
+    bottom: 0;
+  }
+
+  .lg\:inset-x-0 {
+    right: 0;
+    left: 0;
+  }
+
+  .lg\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .lg\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
+  .lg\:top-0 {
+    top: 0;
+  }
+
+  .lg\:right-0 {
+    right: 0;
+  }
+
+  .lg\:bottom-0 {
+    bottom: 0;
+  }
+
+  .lg\:left-0 {
+    left: 0;
+  }
+
+  .lg\:top-auto {
+    top: auto;
+  }
+
+  .lg\:right-auto {
+    right: auto;
+  }
+
+  .lg\:bottom-auto {
+    bottom: auto;
+  }
+
+  .lg\:left-auto {
+    left: auto;
+  }
+
+  .lg\:resize-none {
+    resize: none;
+  }
+
+  .lg\:resize-y {
+    resize: vertical;
+  }
+
+  .lg\:resize-x {
+    resize: horizontal;
+  }
+
+  .lg\:resize {
+    resize: both;
+  }
+
+  .lg\:shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:shadow-md {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:shadow-lg {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .lg\:shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .lg\:shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .lg\:shadow-inner {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:shadow-outline {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .lg\:shadow-none {
+    box-shadow: none;
+  }
+
+  .lg\:hover\:shadow:hover {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:hover\:shadow-lg:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .lg\:hover\:shadow-xl:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .lg\:hover\:shadow-2xl:hover {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .lg\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:hover\:shadow-outline:hover {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .lg\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
+  .lg\:focus\:shadow:focus {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:focus\:shadow-lg:focus {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .lg\:focus\:shadow-xl:focus {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .lg\:focus\:shadow-2xl:focus {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .lg\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .lg\:focus\:shadow-outline:focus {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .lg\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
+  .lg\:fill-current {
+    fill: currentColor;
+  }
+
+  .lg\:stroke-current {
+    stroke: currentColor;
+  }
+
+  .lg\:table-auto {
+    table-layout: auto;
+  }
+
+  .lg\:table-fixed {
+    table-layout: fixed;
+  }
+
+  .lg\:text-left {
+    text-align: left;
+  }
+
+  .lg\:text-center {
+    text-align: center;
+  }
+
+  .lg\:text-right {
+    text-align: right;
+  }
+
+  .lg\:text-justify {
+    text-align: justify;
+  }
+
+  .lg\:text-transparent {
+    color: transparent;
+  }
+
+  .lg\:text-black {
+    color: #000;
+  }
+
+  .lg\:text-white {
+    color: #fff;
+  }
+
+  .lg\:text-gray-100 {
+    color: #f7fafc;
+  }
+
+  .lg\:text-gray-200 {
+    color: #edf2f7;
+  }
+
+  .lg\:text-gray-300 {
+    color: #e2e8f0;
+  }
+
+  .lg\:text-gray-400 {
+    color: #cbd5e0;
+  }
+
+  .lg\:text-gray-500 {
+    color: #a0aec0;
+  }
+
+  .lg\:text-gray-600 {
+    color: #718096;
+  }
+
+  .lg\:text-gray-700 {
+    color: #4a5568;
+  }
+
+  .lg\:text-gray-800 {
+    color: #2d3748;
+  }
+
+  .lg\:text-gray-900 {
+    color: #1a202c;
+  }
+
+  .lg\:text-red-100 {
+    color: #fff5f5;
+  }
+
+  .lg\:text-red-200 {
+    color: #fed7d7;
+  }
+
+  .lg\:text-red-300 {
+    color: #feb2b2;
+  }
+
+  .lg\:text-red-400 {
+    color: #fc8181;
+  }
+
+  .lg\:text-red-500 {
+    color: #f56565;
+  }
+
+  .lg\:text-red-600 {
+    color: #e53e3e;
+  }
+
+  .lg\:text-red-700 {
+    color: #c53030;
+  }
+
+  .lg\:text-red-800 {
+    color: #9b2c2c;
+  }
+
+  .lg\:text-red-900 {
+    color: #742a2a;
+  }
+
+  .lg\:text-orange-100 {
+    color: #fffaf0;
+  }
+
+  .lg\:text-orange-200 {
+    color: #feebc8;
+  }
+
+  .lg\:text-orange-300 {
+    color: #fbd38d;
+  }
+
+  .lg\:text-orange-400 {
+    color: #f6ad55;
+  }
+
+  .lg\:text-orange-500 {
+    color: #ed8936;
+  }
+
+  .lg\:text-orange-600 {
+    color: #dd6b20;
+  }
+
+  .lg\:text-orange-700 {
+    color: #c05621;
+  }
+
+  .lg\:text-orange-800 {
+    color: #9c4221;
+  }
+
+  .lg\:text-orange-900 {
+    color: #7b341e;
+  }
+
+  .lg\:text-yellow-100 {
+    color: #fffff0;
+  }
+
+  .lg\:text-yellow-200 {
+    color: #fefcbf;
+  }
+
+  .lg\:text-yellow-300 {
+    color: #faf089;
+  }
+
+  .lg\:text-yellow-400 {
+    color: #f6e05e;
+  }
+
+  .lg\:text-yellow-500 {
+    color: #ecc94b;
+  }
+
+  .lg\:text-yellow-600 {
+    color: #d69e2e;
+  }
+
+  .lg\:text-yellow-700 {
+    color: #b7791f;
+  }
+
+  .lg\:text-yellow-800 {
+    color: #975a16;
+  }
+
+  .lg\:text-yellow-900 {
+    color: #744210;
+  }
+
+  .lg\:text-green-100 {
+    color: #f0fff4;
+  }
+
+  .lg\:text-green-200 {
+    color: #c6f6d5;
+  }
+
+  .lg\:text-green-300 {
+    color: #9ae6b4;
+  }
+
+  .lg\:text-green-400 {
+    color: #68d391;
+  }
+
+  .lg\:text-green-500 {
+    color: #48bb78;
+  }
+
+  .lg\:text-green-600 {
+    color: #38a169;
+  }
+
+  .lg\:text-green-700 {
+    color: #2f855a;
+  }
+
+  .lg\:text-green-800 {
+    color: #276749;
+  }
+
+  .lg\:text-green-900 {
+    color: #22543d;
+  }
+
+  .lg\:text-teal-100 {
+    color: #e6fffa;
+  }
+
+  .lg\:text-teal-200 {
+    color: #b2f5ea;
+  }
+
+  .lg\:text-teal-300 {
+    color: #81e6d9;
+  }
+
+  .lg\:text-teal-400 {
+    color: #4fd1c5;
+  }
+
+  .lg\:text-teal-500 {
+    color: #38b2ac;
+  }
+
+  .lg\:text-teal-600 {
+    color: #319795;
+  }
+
+  .lg\:text-teal-700 {
+    color: #2c7a7b;
+  }
+
+  .lg\:text-teal-800 {
+    color: #285e61;
+  }
+
+  .lg\:text-teal-900 {
+    color: #234e52;
+  }
+
+  .lg\:text-blue-100 {
+    color: #ebf8ff;
+  }
+
+  .lg\:text-blue-200 {
+    color: #bee3f8;
+  }
+
+  .lg\:text-blue-300 {
+    color: #90cdf4;
+  }
+
+  .lg\:text-blue-400 {
+    color: #63b3ed;
+  }
+
+  .lg\:text-blue-500 {
+    color: #4299e1;
+  }
+
+  .lg\:text-blue-600 {
+    color: #3182ce;
+  }
+
+  .lg\:text-blue-700 {
+    color: #2b6cb0;
+  }
+
+  .lg\:text-blue-800 {
+    color: #2c5282;
+  }
+
+  .lg\:text-blue-900 {
+    color: #2a4365;
+  }
+
+  .lg\:text-indigo-100 {
+    color: #ebf4ff;
+  }
+
+  .lg\:text-indigo-200 {
+    color: #c3dafe;
+  }
+
+  .lg\:text-indigo-300 {
+    color: #a3bffa;
+  }
+
+  .lg\:text-indigo-400 {
+    color: #7f9cf5;
+  }
+
+  .lg\:text-indigo-500 {
+    color: #667eea;
+  }
+
+  .lg\:text-indigo-600 {
+    color: #5a67d8;
+  }
+
+  .lg\:text-indigo-700 {
+    color: #4c51bf;
+  }
+
+  .lg\:text-indigo-800 {
+    color: #434190;
+  }
+
+  .lg\:text-indigo-900 {
+    color: #3c366b;
+  }
+
+  .lg\:text-purple-100 {
+    color: #faf5ff;
+  }
+
+  .lg\:text-purple-200 {
+    color: #e9d8fd;
+  }
+
+  .lg\:text-purple-300 {
+    color: #d6bcfa;
+  }
+
+  .lg\:text-purple-400 {
+    color: #b794f4;
+  }
+
+  .lg\:text-purple-500 {
+    color: #9f7aea;
+  }
+
+  .lg\:text-purple-600 {
+    color: #805ad5;
+  }
+
+  .lg\:text-purple-700 {
+    color: #6b46c1;
+  }
+
+  .lg\:text-purple-800 {
+    color: #553c9a;
+  }
+
+  .lg\:text-purple-900 {
+    color: #44337a;
+  }
+
+  .lg\:text-pink-100 {
+    color: #fff5f7;
+  }
+
+  .lg\:text-pink-200 {
+    color: #fed7e2;
+  }
+
+  .lg\:text-pink-300 {
+    color: #fbb6ce;
+  }
+
+  .lg\:text-pink-400 {
+    color: #f687b3;
+  }
+
+  .lg\:text-pink-500 {
+    color: #ed64a6;
+  }
+
+  .lg\:text-pink-600 {
+    color: #d53f8c;
+  }
+
+  .lg\:text-pink-700 {
+    color: #b83280;
+  }
+
+  .lg\:text-pink-800 {
+    color: #97266d;
+  }
+
+  .lg\:text-pink-900 {
+    color: #702459;
+  }
+
+  .lg\:hover\:text-transparent:hover {
+    color: transparent;
+  }
+
+  .lg\:hover\:text-black:hover {
+    color: #000;
+  }
+
+  .lg\:hover\:text-white:hover {
+    color: #fff;
+  }
+
+  .lg\:hover\:text-gray-100:hover {
+    color: #f7fafc;
+  }
+
+  .lg\:hover\:text-gray-200:hover {
+    color: #edf2f7;
+  }
+
+  .lg\:hover\:text-gray-300:hover {
+    color: #e2e8f0;
+  }
+
+  .lg\:hover\:text-gray-400:hover {
+    color: #cbd5e0;
+  }
+
+  .lg\:hover\:text-gray-500:hover {
+    color: #a0aec0;
+  }
+
+  .lg\:hover\:text-gray-600:hover {
+    color: #718096;
+  }
+
+  .lg\:hover\:text-gray-700:hover {
+    color: #4a5568;
+  }
+
+  .lg\:hover\:text-gray-800:hover {
+    color: #2d3748;
+  }
+
+  .lg\:hover\:text-gray-900:hover {
+    color: #1a202c;
+  }
+
+  .lg\:hover\:text-red-100:hover {
+    color: #fff5f5;
+  }
+
+  .lg\:hover\:text-red-200:hover {
+    color: #fed7d7;
+  }
+
+  .lg\:hover\:text-red-300:hover {
+    color: #feb2b2;
+  }
+
+  .lg\:hover\:text-red-400:hover {
+    color: #fc8181;
+  }
+
+  .lg\:hover\:text-red-500:hover {
+    color: #f56565;
+  }
+
+  .lg\:hover\:text-red-600:hover {
+    color: #e53e3e;
+  }
+
+  .lg\:hover\:text-red-700:hover {
+    color: #c53030;
+  }
+
+  .lg\:hover\:text-red-800:hover {
+    color: #9b2c2c;
+  }
+
+  .lg\:hover\:text-red-900:hover {
+    color: #742a2a;
+  }
+
+  .lg\:hover\:text-orange-100:hover {
+    color: #fffaf0;
+  }
+
+  .lg\:hover\:text-orange-200:hover {
+    color: #feebc8;
+  }
+
+  .lg\:hover\:text-orange-300:hover {
+    color: #fbd38d;
+  }
+
+  .lg\:hover\:text-orange-400:hover {
+    color: #f6ad55;
+  }
+
+  .lg\:hover\:text-orange-500:hover {
+    color: #ed8936;
+  }
+
+  .lg\:hover\:text-orange-600:hover {
+    color: #dd6b20;
+  }
+
+  .lg\:hover\:text-orange-700:hover {
+    color: #c05621;
+  }
+
+  .lg\:hover\:text-orange-800:hover {
+    color: #9c4221;
+  }
+
+  .lg\:hover\:text-orange-900:hover {
+    color: #7b341e;
+  }
+
+  .lg\:hover\:text-yellow-100:hover {
+    color: #fffff0;
+  }
+
+  .lg\:hover\:text-yellow-200:hover {
+    color: #fefcbf;
+  }
+
+  .lg\:hover\:text-yellow-300:hover {
+    color: #faf089;
+  }
+
+  .lg\:hover\:text-yellow-400:hover {
+    color: #f6e05e;
+  }
+
+  .lg\:hover\:text-yellow-500:hover {
+    color: #ecc94b;
+  }
+
+  .lg\:hover\:text-yellow-600:hover {
+    color: #d69e2e;
+  }
+
+  .lg\:hover\:text-yellow-700:hover {
+    color: #b7791f;
+  }
+
+  .lg\:hover\:text-yellow-800:hover {
+    color: #975a16;
+  }
+
+  .lg\:hover\:text-yellow-900:hover {
+    color: #744210;
+  }
+
+  .lg\:hover\:text-green-100:hover {
+    color: #f0fff4;
+  }
+
+  .lg\:hover\:text-green-200:hover {
+    color: #c6f6d5;
+  }
+
+  .lg\:hover\:text-green-300:hover {
+    color: #9ae6b4;
+  }
+
+  .lg\:hover\:text-green-400:hover {
+    color: #68d391;
+  }
+
+  .lg\:hover\:text-green-500:hover {
+    color: #48bb78;
+  }
+
+  .lg\:hover\:text-green-600:hover {
+    color: #38a169;
+  }
+
+  .lg\:hover\:text-green-700:hover {
+    color: #2f855a;
+  }
+
+  .lg\:hover\:text-green-800:hover {
+    color: #276749;
+  }
+
+  .lg\:hover\:text-green-900:hover {
+    color: #22543d;
+  }
+
+  .lg\:hover\:text-teal-100:hover {
+    color: #e6fffa;
+  }
+
+  .lg\:hover\:text-teal-200:hover {
+    color: #b2f5ea;
+  }
+
+  .lg\:hover\:text-teal-300:hover {
+    color: #81e6d9;
+  }
+
+  .lg\:hover\:text-teal-400:hover {
+    color: #4fd1c5;
+  }
+
+  .lg\:hover\:text-teal-500:hover {
+    color: #38b2ac;
+  }
+
+  .lg\:hover\:text-teal-600:hover {
+    color: #319795;
+  }
+
+  .lg\:hover\:text-teal-700:hover {
+    color: #2c7a7b;
+  }
+
+  .lg\:hover\:text-teal-800:hover {
+    color: #285e61;
+  }
+
+  .lg\:hover\:text-teal-900:hover {
+    color: #234e52;
+  }
+
+  .lg\:hover\:text-blue-100:hover {
+    color: #ebf8ff;
+  }
+
+  .lg\:hover\:text-blue-200:hover {
+    color: #bee3f8;
+  }
+
+  .lg\:hover\:text-blue-300:hover {
+    color: #90cdf4;
+  }
+
+  .lg\:hover\:text-blue-400:hover {
+    color: #63b3ed;
+  }
+
+  .lg\:hover\:text-blue-500:hover {
+    color: #4299e1;
+  }
+
+  .lg\:hover\:text-blue-600:hover {
+    color: #3182ce;
+  }
+
+  .lg\:hover\:text-blue-700:hover {
+    color: #2b6cb0;
+  }
+
+  .lg\:hover\:text-blue-800:hover {
+    color: #2c5282;
+  }
+
+  .lg\:hover\:text-blue-900:hover {
+    color: #2a4365;
+  }
+
+  .lg\:hover\:text-indigo-100:hover {
+    color: #ebf4ff;
+  }
+
+  .lg\:hover\:text-indigo-200:hover {
+    color: #c3dafe;
+  }
+
+  .lg\:hover\:text-indigo-300:hover {
+    color: #a3bffa;
+  }
+
+  .lg\:hover\:text-indigo-400:hover {
+    color: #7f9cf5;
+  }
+
+  .lg\:hover\:text-indigo-500:hover {
+    color: #667eea;
+  }
+
+  .lg\:hover\:text-indigo-600:hover {
+    color: #5a67d8;
+  }
+
+  .lg\:hover\:text-indigo-700:hover {
+    color: #4c51bf;
+  }
+
+  .lg\:hover\:text-indigo-800:hover {
+    color: #434190;
+  }
+
+  .lg\:hover\:text-indigo-900:hover {
+    color: #3c366b;
+  }
+
+  .lg\:hover\:text-purple-100:hover {
+    color: #faf5ff;
+  }
+
+  .lg\:hover\:text-purple-200:hover {
+    color: #e9d8fd;
+  }
+
+  .lg\:hover\:text-purple-300:hover {
+    color: #d6bcfa;
+  }
+
+  .lg\:hover\:text-purple-400:hover {
+    color: #b794f4;
+  }
+
+  .lg\:hover\:text-purple-500:hover {
+    color: #9f7aea;
+  }
+
+  .lg\:hover\:text-purple-600:hover {
+    color: #805ad5;
+  }
+
+  .lg\:hover\:text-purple-700:hover {
+    color: #6b46c1;
+  }
+
+  .lg\:hover\:text-purple-800:hover {
+    color: #553c9a;
+  }
+
+  .lg\:hover\:text-purple-900:hover {
+    color: #44337a;
+  }
+
+  .lg\:hover\:text-pink-100:hover {
+    color: #fff5f7;
+  }
+
+  .lg\:hover\:text-pink-200:hover {
+    color: #fed7e2;
+  }
+
+  .lg\:hover\:text-pink-300:hover {
+    color: #fbb6ce;
+  }
+
+  .lg\:hover\:text-pink-400:hover {
+    color: #f687b3;
+  }
+
+  .lg\:hover\:text-pink-500:hover {
+    color: #ed64a6;
+  }
+
+  .lg\:hover\:text-pink-600:hover {
+    color: #d53f8c;
+  }
+
+  .lg\:hover\:text-pink-700:hover {
+    color: #b83280;
+  }
+
+  .lg\:hover\:text-pink-800:hover {
+    color: #97266d;
+  }
+
+  .lg\:hover\:text-pink-900:hover {
+    color: #702459;
+  }
+
+  .lg\:focus\:text-transparent:focus {
+    color: transparent;
+  }
+
+  .lg\:focus\:text-black:focus {
+    color: #000;
+  }
+
+  .lg\:focus\:text-white:focus {
+    color: #fff;
+  }
+
+  .lg\:focus\:text-gray-100:focus {
+    color: #f7fafc;
+  }
+
+  .lg\:focus\:text-gray-200:focus {
+    color: #edf2f7;
+  }
+
+  .lg\:focus\:text-gray-300:focus {
+    color: #e2e8f0;
+  }
+
+  .lg\:focus\:text-gray-400:focus {
+    color: #cbd5e0;
+  }
+
+  .lg\:focus\:text-gray-500:focus {
+    color: #a0aec0;
+  }
+
+  .lg\:focus\:text-gray-600:focus {
+    color: #718096;
+  }
+
+  .lg\:focus\:text-gray-700:focus {
+    color: #4a5568;
+  }
+
+  .lg\:focus\:text-gray-800:focus {
+    color: #2d3748;
+  }
+
+  .lg\:focus\:text-gray-900:focus {
+    color: #1a202c;
+  }
+
+  .lg\:focus\:text-red-100:focus {
+    color: #fff5f5;
+  }
+
+  .lg\:focus\:text-red-200:focus {
+    color: #fed7d7;
+  }
+
+  .lg\:focus\:text-red-300:focus {
+    color: #feb2b2;
+  }
+
+  .lg\:focus\:text-red-400:focus {
+    color: #fc8181;
+  }
+
+  .lg\:focus\:text-red-500:focus {
+    color: #f56565;
+  }
+
+  .lg\:focus\:text-red-600:focus {
+    color: #e53e3e;
+  }
+
+  .lg\:focus\:text-red-700:focus {
+    color: #c53030;
+  }
+
+  .lg\:focus\:text-red-800:focus {
+    color: #9b2c2c;
+  }
+
+  .lg\:focus\:text-red-900:focus {
+    color: #742a2a;
+  }
+
+  .lg\:focus\:text-orange-100:focus {
+    color: #fffaf0;
+  }
+
+  .lg\:focus\:text-orange-200:focus {
+    color: #feebc8;
+  }
+
+  .lg\:focus\:text-orange-300:focus {
+    color: #fbd38d;
+  }
+
+  .lg\:focus\:text-orange-400:focus {
+    color: #f6ad55;
+  }
+
+  .lg\:focus\:text-orange-500:focus {
+    color: #ed8936;
+  }
+
+  .lg\:focus\:text-orange-600:focus {
+    color: #dd6b20;
+  }
+
+  .lg\:focus\:text-orange-700:focus {
+    color: #c05621;
+  }
+
+  .lg\:focus\:text-orange-800:focus {
+    color: #9c4221;
+  }
+
+  .lg\:focus\:text-orange-900:focus {
+    color: #7b341e;
+  }
+
+  .lg\:focus\:text-yellow-100:focus {
+    color: #fffff0;
+  }
+
+  .lg\:focus\:text-yellow-200:focus {
+    color: #fefcbf;
+  }
+
+  .lg\:focus\:text-yellow-300:focus {
+    color: #faf089;
+  }
+
+  .lg\:focus\:text-yellow-400:focus {
+    color: #f6e05e;
+  }
+
+  .lg\:focus\:text-yellow-500:focus {
+    color: #ecc94b;
+  }
+
+  .lg\:focus\:text-yellow-600:focus {
+    color: #d69e2e;
+  }
+
+  .lg\:focus\:text-yellow-700:focus {
+    color: #b7791f;
+  }
+
+  .lg\:focus\:text-yellow-800:focus {
+    color: #975a16;
+  }
+
+  .lg\:focus\:text-yellow-900:focus {
+    color: #744210;
+  }
+
+  .lg\:focus\:text-green-100:focus {
+    color: #f0fff4;
+  }
+
+  .lg\:focus\:text-green-200:focus {
+    color: #c6f6d5;
+  }
+
+  .lg\:focus\:text-green-300:focus {
+    color: #9ae6b4;
+  }
+
+  .lg\:focus\:text-green-400:focus {
+    color: #68d391;
+  }
+
+  .lg\:focus\:text-green-500:focus {
+    color: #48bb78;
+  }
+
+  .lg\:focus\:text-green-600:focus {
+    color: #38a169;
+  }
+
+  .lg\:focus\:text-green-700:focus {
+    color: #2f855a;
+  }
+
+  .lg\:focus\:text-green-800:focus {
+    color: #276749;
+  }
+
+  .lg\:focus\:text-green-900:focus {
+    color: #22543d;
+  }
+
+  .lg\:focus\:text-teal-100:focus {
+    color: #e6fffa;
+  }
+
+  .lg\:focus\:text-teal-200:focus {
+    color: #b2f5ea;
+  }
+
+  .lg\:focus\:text-teal-300:focus {
+    color: #81e6d9;
+  }
+
+  .lg\:focus\:text-teal-400:focus {
+    color: #4fd1c5;
+  }
+
+  .lg\:focus\:text-teal-500:focus {
+    color: #38b2ac;
+  }
+
+  .lg\:focus\:text-teal-600:focus {
+    color: #319795;
+  }
+
+  .lg\:focus\:text-teal-700:focus {
+    color: #2c7a7b;
+  }
+
+  .lg\:focus\:text-teal-800:focus {
+    color: #285e61;
+  }
+
+  .lg\:focus\:text-teal-900:focus {
+    color: #234e52;
+  }
+
+  .lg\:focus\:text-blue-100:focus {
+    color: #ebf8ff;
+  }
+
+  .lg\:focus\:text-blue-200:focus {
+    color: #bee3f8;
+  }
+
+  .lg\:focus\:text-blue-300:focus {
+    color: #90cdf4;
+  }
+
+  .lg\:focus\:text-blue-400:focus {
+    color: #63b3ed;
+  }
+
+  .lg\:focus\:text-blue-500:focus {
+    color: #4299e1;
+  }
+
+  .lg\:focus\:text-blue-600:focus {
+    color: #3182ce;
+  }
+
+  .lg\:focus\:text-blue-700:focus {
+    color: #2b6cb0;
+  }
+
+  .lg\:focus\:text-blue-800:focus {
+    color: #2c5282;
+  }
+
+  .lg\:focus\:text-blue-900:focus {
+    color: #2a4365;
+  }
+
+  .lg\:focus\:text-indigo-100:focus {
+    color: #ebf4ff;
+  }
+
+  .lg\:focus\:text-indigo-200:focus {
+    color: #c3dafe;
+  }
+
+  .lg\:focus\:text-indigo-300:focus {
+    color: #a3bffa;
+  }
+
+  .lg\:focus\:text-indigo-400:focus {
+    color: #7f9cf5;
+  }
+
+  .lg\:focus\:text-indigo-500:focus {
+    color: #667eea;
+  }
+
+  .lg\:focus\:text-indigo-600:focus {
+    color: #5a67d8;
+  }
+
+  .lg\:focus\:text-indigo-700:focus {
+    color: #4c51bf;
+  }
+
+  .lg\:focus\:text-indigo-800:focus {
+    color: #434190;
+  }
+
+  .lg\:focus\:text-indigo-900:focus {
+    color: #3c366b;
+  }
+
+  .lg\:focus\:text-purple-100:focus {
+    color: #faf5ff;
+  }
+
+  .lg\:focus\:text-purple-200:focus {
+    color: #e9d8fd;
+  }
+
+  .lg\:focus\:text-purple-300:focus {
+    color: #d6bcfa;
+  }
+
+  .lg\:focus\:text-purple-400:focus {
+    color: #b794f4;
+  }
+
+  .lg\:focus\:text-purple-500:focus {
+    color: #9f7aea;
+  }
+
+  .lg\:focus\:text-purple-600:focus {
+    color: #805ad5;
+  }
+
+  .lg\:focus\:text-purple-700:focus {
+    color: #6b46c1;
+  }
+
+  .lg\:focus\:text-purple-800:focus {
+    color: #553c9a;
+  }
+
+  .lg\:focus\:text-purple-900:focus {
+    color: #44337a;
+  }
+
+  .lg\:focus\:text-pink-100:focus {
+    color: #fff5f7;
+  }
+
+  .lg\:focus\:text-pink-200:focus {
+    color: #fed7e2;
+  }
+
+  .lg\:focus\:text-pink-300:focus {
+    color: #fbb6ce;
+  }
+
+  .lg\:focus\:text-pink-400:focus {
+    color: #f687b3;
+  }
+
+  .lg\:focus\:text-pink-500:focus {
+    color: #ed64a6;
+  }
+
+  .lg\:focus\:text-pink-600:focus {
+    color: #d53f8c;
+  }
+
+  .lg\:focus\:text-pink-700:focus {
+    color: #b83280;
+  }
+
+  .lg\:focus\:text-pink-800:focus {
+    color: #97266d;
+  }
+
+  .lg\:focus\:text-pink-900:focus {
+    color: #702459;
+  }
+
+  .lg\:text-xs {
+    font-size: 0.75rem;
+  }
+
+  .lg\:text-sm {
+    font-size: 0.875rem;
+  }
+
+  .lg\:text-base {
+    font-size: 1rem;
+  }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+  }
+
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+  }
+
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+  }
+
+  .lg\:text-5xl {
+    font-size: 3rem;
+  }
+
+  .lg\:text-6xl {
+    font-size: 4rem;
+  }
+
+  .lg\:italic {
+    font-style: italic;
+  }
+
+  .lg\:not-italic {
+    font-style: normal;
+  }
+
+  .lg\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .lg\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .lg\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .lg\:normal-case {
+    text-transform: none;
+  }
+
+  .lg\:underline {
+    text-decoration: underline;
+  }
+
+  .lg\:line-through {
+    text-decoration: line-through;
+  }
+
+  .lg\:no-underline {
+    text-decoration: none;
+  }
+
+  .lg\:hover\:underline:hover {
+    text-decoration: underline;
+  }
+
+  .lg\:hover\:line-through:hover {
+    text-decoration: line-through;
+  }
+
+  .lg\:hover\:no-underline:hover {
+    text-decoration: none;
+  }
+
+  .lg\:focus\:underline:focus {
+    text-decoration: underline;
+  }
+
+  .lg\:focus\:line-through:focus {
+    text-decoration: line-through;
+  }
+
+  .lg\:focus\:no-underline:focus {
+    text-decoration: none;
+  }
+
+  .lg\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .lg\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  .lg\:tracking-tighter {
+    letter-spacing: -0.05em;
+  }
+
+  .lg\:tracking-tight {
+    letter-spacing: -0.025em;
+  }
+
+  .lg\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .lg\:tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .lg\:tracking-wider {
+    letter-spacing: 0.05em;
+  }
+
+  .lg\:tracking-widest {
+    letter-spacing: 0.1em;
+  }
+
+  .lg\:select-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+
+  .lg\:select-text {
+    -webkit-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
+  }
+
+  .lg\:select-all {
+    -webkit-user-select: all;
+       -moz-user-select: all;
+        -ms-user-select: all;
+            user-select: all;
+  }
+
+  .lg\:select-auto {
+    -webkit-user-select: auto;
+       -moz-user-select: auto;
+        -ms-user-select: auto;
+            user-select: auto;
+  }
+
+  .lg\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .lg\:align-top {
+    vertical-align: top;
+  }
+
+  .lg\:align-middle {
+    vertical-align: middle;
+  }
+
+  .lg\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .lg\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .lg\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
+  .lg\:visible {
+    visibility: visible;
+  }
+
+  .lg\:invisible {
+    visibility: hidden;
+  }
+
+  .lg\:whitespace-normal {
+    white-space: normal;
+  }
+
+  .lg\:whitespace-no-wrap {
+    white-space: nowrap;
+  }
+
+  .lg\:whitespace-pre {
+    white-space: pre;
+  }
+
+  .lg\:whitespace-pre-line {
+    white-space: pre-line;
+  }
+
+  .lg\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .lg\:break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+
+  .lg\:break-words {
+    overflow-wrap: break-word;
+  }
+
+  .lg\:break-all {
+    word-break: break-all;
+  }
+
+  .lg\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .lg\:w-0 {
+    width: 0;
+  }
+
+  .lg\:w-1 {
+    width: 0.25rem;
+  }
+
+  .lg\:w-2 {
+    width: 0.5rem;
+  }
+
+  .lg\:w-3 {
+    width: 0.75rem;
+  }
+
+  .lg\:w-4 {
+    width: 1rem;
+  }
+
+  .lg\:w-5 {
+    width: 1.25rem;
+  }
+
+  .lg\:w-6 {
+    width: 1.5rem;
+  }
+
+  .lg\:w-8 {
+    width: 2rem;
+  }
+
+  .lg\:w-10 {
+    width: 2.5rem;
+  }
+
+  .lg\:w-12 {
+    width: 3rem;
+  }
+
+  .lg\:w-16 {
+    width: 4rem;
+  }
+
+  .lg\:w-20 {
+    width: 5rem;
+  }
+
+  .lg\:w-24 {
+    width: 6rem;
+  }
+
+  .lg\:w-32 {
+    width: 8rem;
+  }
+
+  .lg\:w-40 {
+    width: 10rem;
+  }
+
+  .lg\:w-48 {
+    width: 12rem;
+  }
+
+  .lg\:w-56 {
+    width: 14rem;
+  }
+
+  .lg\:w-64 {
+    width: 16rem;
+  }
+
+  .lg\:w-auto {
+    width: auto;
+  }
+
+  .lg\:w-px {
+    width: 1px;
+  }
+
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
+
+  .lg\:w-2\/4 {
+    width: 50%;
+  }
+
+  .lg\:w-3\/4 {
+    width: 75%;
+  }
+
+  .lg\:w-1\/5 {
+    width: 20%;
+  }
+
+  .lg\:w-2\/5 {
+    width: 40%;
+  }
+
+  .lg\:w-3\/5 {
+    width: 60%;
+  }
+
+  .lg\:w-4\/5 {
+    width: 80%;
+  }
+
+  .lg\:w-1\/6 {
+    width: 16.666667%;
+  }
+
+  .lg\:w-2\/6 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-3\/6 {
+    width: 50%;
+  }
+
+  .lg\:w-4\/6 {
+    width: 66.666667%;
+  }
+
+  .lg\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .lg\:w-1\/12 {
+    width: 8.333333%;
+  }
+
+  .lg\:w-2\/12 {
+    width: 16.666667%;
+  }
+
+  .lg\:w-3\/12 {
+    width: 25%;
+  }
+
+  .lg\:w-4\/12 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-5\/12 {
+    width: 41.666667%;
+  }
+
+  .lg\:w-6\/12 {
+    width: 50%;
+  }
+
+  .lg\:w-7\/12 {
+    width: 58.333333%;
+  }
+
+  .lg\:w-8\/12 {
+    width: 66.666667%;
+  }
+
+  .lg\:w-9\/12 {
+    width: 75%;
+  }
+
+  .lg\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .lg\:w-11\/12 {
+    width: 91.666667%;
+  }
+
+  .lg\:w-full {
+    width: 100%;
+  }
+
+  .lg\:w-screen {
+    width: 100vw;
+  }
+
+  .lg\:z-0 {
+    z-index: 0;
+  }
+
+  .lg\:z-10 {
+    z-index: 10;
+  }
+
+  .lg\:z-20 {
+    z-index: 20;
+  }
+
+  .lg\:z-30 {
+    z-index: 30;
+  }
+
+  .lg\:z-40 {
+    z-index: 40;
+  }
+
+  .lg\:z-50 {
+    z-index: 50;
+  }
+
+  .lg\:z-auto {
+    z-index: auto;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .xl\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .xl\:focus\:sr-only:focus {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .xl\:focus\:not-sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .xl\:appearance-none {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+  .xl\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .xl\:bg-local {
+    background-attachment: local;
+  }
+
+  .xl\:bg-scroll {
+    background-attachment: scroll;
+  }
+
+  .xl\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .xl\:bg-black {
+    background-color: #000;
+  }
+
+  .xl\:bg-white {
+    background-color: #fff;
+  }
+
+  .xl\:bg-gray-100 {
+    background-color: #f7fafc;
+  }
+
+  .xl\:bg-gray-200 {
+    background-color: #edf2f7;
+  }
+
+  .xl\:bg-gray-300 {
+    background-color: #e2e8f0;
+  }
+
+  .xl\:bg-gray-400 {
+    background-color: #cbd5e0;
+  }
+
+  .xl\:bg-gray-500 {
+    background-color: #a0aec0;
+  }
+
+  .xl\:bg-gray-600 {
+    background-color: #718096;
+  }
+
+  .xl\:bg-gray-700 {
+    background-color: #4a5568;
+  }
+
+  .xl\:bg-gray-800 {
+    background-color: #2d3748;
+  }
+
+  .xl\:bg-gray-900 {
+    background-color: #1a202c;
+  }
+
+  .xl\:bg-red-100 {
+    background-color: #fff5f5;
+  }
+
+  .xl\:bg-red-200 {
+    background-color: #fed7d7;
+  }
+
+  .xl\:bg-red-300 {
+    background-color: #feb2b2;
+  }
+
+  .xl\:bg-red-400 {
+    background-color: #fc8181;
+  }
+
+  .xl\:bg-red-500 {
+    background-color: #f56565;
+  }
+
+  .xl\:bg-red-600 {
+    background-color: #e53e3e;
+  }
+
+  .xl\:bg-red-700 {
+    background-color: #c53030;
+  }
+
+  .xl\:bg-red-800 {
+    background-color: #9b2c2c;
+  }
+
+  .xl\:bg-red-900 {
+    background-color: #742a2a;
+  }
+
+  .xl\:bg-orange-100 {
+    background-color: #fffaf0;
+  }
+
+  .xl\:bg-orange-200 {
+    background-color: #feebc8;
+  }
+
+  .xl\:bg-orange-300 {
+    background-color: #fbd38d;
+  }
+
+  .xl\:bg-orange-400 {
+    background-color: #f6ad55;
+  }
+
+  .xl\:bg-orange-500 {
+    background-color: #ed8936;
+  }
+
+  .xl\:bg-orange-600 {
+    background-color: #dd6b20;
+  }
+
+  .xl\:bg-orange-700 {
+    background-color: #c05621;
+  }
+
+  .xl\:bg-orange-800 {
+    background-color: #9c4221;
+  }
+
+  .xl\:bg-orange-900 {
+    background-color: #7b341e;
+  }
+
+  .xl\:bg-yellow-100 {
+    background-color: #fffff0;
+  }
+
+  .xl\:bg-yellow-200 {
+    background-color: #fefcbf;
+  }
+
+  .xl\:bg-yellow-300 {
+    background-color: #faf089;
+  }
+
+  .xl\:bg-yellow-400 {
+    background-color: #f6e05e;
+  }
+
+  .xl\:bg-yellow-500 {
+    background-color: #ecc94b;
+  }
+
+  .xl\:bg-yellow-600 {
+    background-color: #d69e2e;
+  }
+
+  .xl\:bg-yellow-700 {
+    background-color: #b7791f;
+  }
+
+  .xl\:bg-yellow-800 {
+    background-color: #975a16;
+  }
+
+  .xl\:bg-yellow-900 {
+    background-color: #744210;
+  }
+
+  .xl\:bg-green-100 {
+    background-color: #f0fff4;
+  }
+
+  .xl\:bg-green-200 {
+    background-color: #c6f6d5;
+  }
+
+  .xl\:bg-green-300 {
+    background-color: #9ae6b4;
+  }
+
+  .xl\:bg-green-400 {
+    background-color: #68d391;
+  }
+
+  .xl\:bg-green-500 {
+    background-color: #48bb78;
+  }
+
+  .xl\:bg-green-600 {
+    background-color: #38a169;
+  }
+
+  .xl\:bg-green-700 {
+    background-color: #2f855a;
+  }
+
+  .xl\:bg-green-800 {
+    background-color: #276749;
+  }
+
+  .xl\:bg-green-900 {
+    background-color: #22543d;
+  }
+
+  .xl\:bg-teal-100 {
+    background-color: #e6fffa;
+  }
+
+  .xl\:bg-teal-200 {
+    background-color: #b2f5ea;
+  }
+
+  .xl\:bg-teal-300 {
+    background-color: #81e6d9;
+  }
+
+  .xl\:bg-teal-400 {
+    background-color: #4fd1c5;
+  }
+
+  .xl\:bg-teal-500 {
+    background-color: #38b2ac;
+  }
+
+  .xl\:bg-teal-600 {
+    background-color: #319795;
+  }
+
+  .xl\:bg-teal-700 {
+    background-color: #2c7a7b;
+  }
+
+  .xl\:bg-teal-800 {
+    background-color: #285e61;
+  }
+
+  .xl\:bg-teal-900 {
+    background-color: #234e52;
+  }
+
+  .xl\:bg-blue-100 {
+    background-color: #ebf8ff;
+  }
+
+  .xl\:bg-blue-200 {
+    background-color: #bee3f8;
+  }
+
+  .xl\:bg-blue-300 {
+    background-color: #90cdf4;
+  }
+
+  .xl\:bg-blue-400 {
+    background-color: #63b3ed;
+  }
+
+  .xl\:bg-blue-500 {
+    background-color: #4299e1;
+  }
+
+  .xl\:bg-blue-600 {
+    background-color: #3182ce;
+  }
+
+  .xl\:bg-blue-700 {
+    background-color: #2b6cb0;
+  }
+
+  .xl\:bg-blue-800 {
+    background-color: #2c5282;
+  }
+
+  .xl\:bg-blue-900 {
+    background-color: #2a4365;
+  }
+
+  .xl\:bg-indigo-100 {
+    background-color: #ebf4ff;
+  }
+
+  .xl\:bg-indigo-200 {
+    background-color: #c3dafe;
+  }
+
+  .xl\:bg-indigo-300 {
+    background-color: #a3bffa;
+  }
+
+  .xl\:bg-indigo-400 {
+    background-color: #7f9cf5;
+  }
+
+  .xl\:bg-indigo-500 {
+    background-color: #667eea;
+  }
+
+  .xl\:bg-indigo-600 {
+    background-color: #5a67d8;
+  }
+
+  .xl\:bg-indigo-700 {
+    background-color: #4c51bf;
+  }
+
+  .xl\:bg-indigo-800 {
+    background-color: #434190;
+  }
+
+  .xl\:bg-indigo-900 {
+    background-color: #3c366b;
+  }
+
+  .xl\:bg-purple-100 {
+    background-color: #faf5ff;
+  }
+
+  .xl\:bg-purple-200 {
+    background-color: #e9d8fd;
+  }
+
+  .xl\:bg-purple-300 {
+    background-color: #d6bcfa;
+  }
+
+  .xl\:bg-purple-400 {
+    background-color: #b794f4;
+  }
+
+  .xl\:bg-purple-500 {
+    background-color: #9f7aea;
+  }
+
+  .xl\:bg-purple-600 {
+    background-color: #805ad5;
+  }
+
+  .xl\:bg-purple-700 {
+    background-color: #6b46c1;
+  }
+
+  .xl\:bg-purple-800 {
+    background-color: #553c9a;
+  }
+
+  .xl\:bg-purple-900 {
+    background-color: #44337a;
+  }
+
+  .xl\:bg-pink-100 {
+    background-color: #fff5f7;
+  }
+
+  .xl\:bg-pink-200 {
+    background-color: #fed7e2;
+  }
+
+  .xl\:bg-pink-300 {
+    background-color: #fbb6ce;
+  }
+
+  .xl\:bg-pink-400 {
+    background-color: #f687b3;
+  }
+
+  .xl\:bg-pink-500 {
+    background-color: #ed64a6;
+  }
+
+  .xl\:bg-pink-600 {
+    background-color: #d53f8c;
+  }
+
+  .xl\:bg-pink-700 {
+    background-color: #b83280;
+  }
+
+  .xl\:bg-pink-800 {
+    background-color: #97266d;
+  }
+
+  .xl\:bg-pink-900 {
+    background-color: #702459;
+  }
+
+  .xl\:hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+
+  .xl\:hover\:bg-black:hover {
+    background-color: #000;
+  }
+
+  .xl\:hover\:bg-white:hover {
+    background-color: #fff;
+  }
+
+  .xl\:hover\:bg-gray-100:hover {
+    background-color: #f7fafc;
+  }
+
+  .xl\:hover\:bg-gray-200:hover {
+    background-color: #edf2f7;
+  }
+
+  .xl\:hover\:bg-gray-300:hover {
+    background-color: #e2e8f0;
+  }
+
+  .xl\:hover\:bg-gray-400:hover {
+    background-color: #cbd5e0;
+  }
+
+  .xl\:hover\:bg-gray-500:hover {
+    background-color: #a0aec0;
+  }
+
+  .xl\:hover\:bg-gray-600:hover {
+    background-color: #718096;
+  }
+
+  .xl\:hover\:bg-gray-700:hover {
+    background-color: #4a5568;
+  }
+
+  .xl\:hover\:bg-gray-800:hover {
+    background-color: #2d3748;
+  }
+
+  .xl\:hover\:bg-gray-900:hover {
+    background-color: #1a202c;
+  }
+
+  .xl\:hover\:bg-red-100:hover {
+    background-color: #fff5f5;
+  }
+
+  .xl\:hover\:bg-red-200:hover {
+    background-color: #fed7d7;
+  }
+
+  .xl\:hover\:bg-red-300:hover {
+    background-color: #feb2b2;
+  }
+
+  .xl\:hover\:bg-red-400:hover {
+    background-color: #fc8181;
+  }
+
+  .xl\:hover\:bg-red-500:hover {
+    background-color: #f56565;
+  }
+
+  .xl\:hover\:bg-red-600:hover {
+    background-color: #e53e3e;
+  }
+
+  .xl\:hover\:bg-red-700:hover {
+    background-color: #c53030;
+  }
+
+  .xl\:hover\:bg-red-800:hover {
+    background-color: #9b2c2c;
+  }
+
+  .xl\:hover\:bg-red-900:hover {
+    background-color: #742a2a;
+  }
+
+  .xl\:hover\:bg-orange-100:hover {
+    background-color: #fffaf0;
+  }
+
+  .xl\:hover\:bg-orange-200:hover {
+    background-color: #feebc8;
+  }
+
+  .xl\:hover\:bg-orange-300:hover {
+    background-color: #fbd38d;
+  }
+
+  .xl\:hover\:bg-orange-400:hover {
+    background-color: #f6ad55;
+  }
+
+  .xl\:hover\:bg-orange-500:hover {
+    background-color: #ed8936;
+  }
+
+  .xl\:hover\:bg-orange-600:hover {
+    background-color: #dd6b20;
+  }
+
+  .xl\:hover\:bg-orange-700:hover {
+    background-color: #c05621;
+  }
+
+  .xl\:hover\:bg-orange-800:hover {
+    background-color: #9c4221;
+  }
+
+  .xl\:hover\:bg-orange-900:hover {
+    background-color: #7b341e;
+  }
+
+  .xl\:hover\:bg-yellow-100:hover {
+    background-color: #fffff0;
+  }
+
+  .xl\:hover\:bg-yellow-200:hover {
+    background-color: #fefcbf;
+  }
+
+  .xl\:hover\:bg-yellow-300:hover {
+    background-color: #faf089;
+  }
+
+  .xl\:hover\:bg-yellow-400:hover {
+    background-color: #f6e05e;
+  }
+
+  .xl\:hover\:bg-yellow-500:hover {
+    background-color: #ecc94b;
+  }
+
+  .xl\:hover\:bg-yellow-600:hover {
+    background-color: #d69e2e;
+  }
+
+  .xl\:hover\:bg-yellow-700:hover {
+    background-color: #b7791f;
+  }
+
+  .xl\:hover\:bg-yellow-800:hover {
+    background-color: #975a16;
+  }
+
+  .xl\:hover\:bg-yellow-900:hover {
+    background-color: #744210;
+  }
+
+  .xl\:hover\:bg-green-100:hover {
+    background-color: #f0fff4;
+  }
+
+  .xl\:hover\:bg-green-200:hover {
+    background-color: #c6f6d5;
+  }
+
+  .xl\:hover\:bg-green-300:hover {
+    background-color: #9ae6b4;
+  }
+
+  .xl\:hover\:bg-green-400:hover {
+    background-color: #68d391;
+  }
+
+  .xl\:hover\:bg-green-500:hover {
+    background-color: #48bb78;
+  }
+
+  .xl\:hover\:bg-green-600:hover {
+    background-color: #38a169;
+  }
+
+  .xl\:hover\:bg-green-700:hover {
+    background-color: #2f855a;
+  }
+
+  .xl\:hover\:bg-green-800:hover {
+    background-color: #276749;
+  }
+
+  .xl\:hover\:bg-green-900:hover {
+    background-color: #22543d;
+  }
+
+  .xl\:hover\:bg-teal-100:hover {
+    background-color: #e6fffa;
+  }
+
+  .xl\:hover\:bg-teal-200:hover {
+    background-color: #b2f5ea;
+  }
+
+  .xl\:hover\:bg-teal-300:hover {
+    background-color: #81e6d9;
+  }
+
+  .xl\:hover\:bg-teal-400:hover {
+    background-color: #4fd1c5;
+  }
+
+  .xl\:hover\:bg-teal-500:hover {
+    background-color: #38b2ac;
+  }
+
+  .xl\:hover\:bg-teal-600:hover {
+    background-color: #319795;
+  }
+
+  .xl\:hover\:bg-teal-700:hover {
+    background-color: #2c7a7b;
+  }
+
+  .xl\:hover\:bg-teal-800:hover {
+    background-color: #285e61;
+  }
+
+  .xl\:hover\:bg-teal-900:hover {
+    background-color: #234e52;
+  }
+
+  .xl\:hover\:bg-blue-100:hover {
+    background-color: #ebf8ff;
+  }
+
+  .xl\:hover\:bg-blue-200:hover {
+    background-color: #bee3f8;
+  }
+
+  .xl\:hover\:bg-blue-300:hover {
+    background-color: #90cdf4;
+  }
+
+  .xl\:hover\:bg-blue-400:hover {
+    background-color: #63b3ed;
+  }
+
+  .xl\:hover\:bg-blue-500:hover {
+    background-color: #4299e1;
+  }
+
+  .xl\:hover\:bg-blue-600:hover {
+    background-color: #3182ce;
+  }
+
+  .xl\:hover\:bg-blue-700:hover {
+    background-color: #2b6cb0;
+  }
+
+  .xl\:hover\:bg-blue-800:hover {
+    background-color: #2c5282;
+  }
+
+  .xl\:hover\:bg-blue-900:hover {
+    background-color: #2a4365;
+  }
+
+  .xl\:hover\:bg-indigo-100:hover {
+    background-color: #ebf4ff;
+  }
+
+  .xl\:hover\:bg-indigo-200:hover {
+    background-color: #c3dafe;
+  }
+
+  .xl\:hover\:bg-indigo-300:hover {
+    background-color: #a3bffa;
+  }
+
+  .xl\:hover\:bg-indigo-400:hover {
+    background-color: #7f9cf5;
+  }
+
+  .xl\:hover\:bg-indigo-500:hover {
+    background-color: #667eea;
+  }
+
+  .xl\:hover\:bg-indigo-600:hover {
+    background-color: #5a67d8;
+  }
+
+  .xl\:hover\:bg-indigo-700:hover {
+    background-color: #4c51bf;
+  }
+
+  .xl\:hover\:bg-indigo-800:hover {
+    background-color: #434190;
+  }
+
+  .xl\:hover\:bg-indigo-900:hover {
+    background-color: #3c366b;
+  }
+
+  .xl\:hover\:bg-purple-100:hover {
+    background-color: #faf5ff;
+  }
+
+  .xl\:hover\:bg-purple-200:hover {
+    background-color: #e9d8fd;
+  }
+
+  .xl\:hover\:bg-purple-300:hover {
+    background-color: #d6bcfa;
+  }
+
+  .xl\:hover\:bg-purple-400:hover {
+    background-color: #b794f4;
+  }
+
+  .xl\:hover\:bg-purple-500:hover {
+    background-color: #9f7aea;
+  }
+
+  .xl\:hover\:bg-purple-600:hover {
+    background-color: #805ad5;
+  }
+
+  .xl\:hover\:bg-purple-700:hover {
+    background-color: #6b46c1;
+  }
+
+  .xl\:hover\:bg-purple-800:hover {
+    background-color: #553c9a;
+  }
+
+  .xl\:hover\:bg-purple-900:hover {
+    background-color: #44337a;
+  }
+
+  .xl\:hover\:bg-pink-100:hover {
+    background-color: #fff5f7;
+  }
+
+  .xl\:hover\:bg-pink-200:hover {
+    background-color: #fed7e2;
+  }
+
+  .xl\:hover\:bg-pink-300:hover {
+    background-color: #fbb6ce;
+  }
+
+  .xl\:hover\:bg-pink-400:hover {
+    background-color: #f687b3;
+  }
+
+  .xl\:hover\:bg-pink-500:hover {
+    background-color: #ed64a6;
+  }
+
+  .xl\:hover\:bg-pink-600:hover {
+    background-color: #d53f8c;
+  }
+
+  .xl\:hover\:bg-pink-700:hover {
+    background-color: #b83280;
+  }
+
+  .xl\:hover\:bg-pink-800:hover {
+    background-color: #97266d;
+  }
+
+  .xl\:hover\:bg-pink-900:hover {
+    background-color: #702459;
+  }
+
+  .xl\:focus\:bg-transparent:focus {
+    background-color: transparent;
+  }
+
+  .xl\:focus\:bg-black:focus {
+    background-color: #000;
+  }
+
+  .xl\:focus\:bg-white:focus {
+    background-color: #fff;
+  }
+
+  .xl\:focus\:bg-gray-100:focus {
+    background-color: #f7fafc;
+  }
+
+  .xl\:focus\:bg-gray-200:focus {
+    background-color: #edf2f7;
+  }
+
+  .xl\:focus\:bg-gray-300:focus {
+    background-color: #e2e8f0;
+  }
+
+  .xl\:focus\:bg-gray-400:focus {
+    background-color: #cbd5e0;
+  }
+
+  .xl\:focus\:bg-gray-500:focus {
+    background-color: #a0aec0;
+  }
+
+  .xl\:focus\:bg-gray-600:focus {
+    background-color: #718096;
+  }
+
+  .xl\:focus\:bg-gray-700:focus {
+    background-color: #4a5568;
+  }
+
+  .xl\:focus\:bg-gray-800:focus {
+    background-color: #2d3748;
+  }
+
+  .xl\:focus\:bg-gray-900:focus {
+    background-color: #1a202c;
+  }
+
+  .xl\:focus\:bg-red-100:focus {
+    background-color: #fff5f5;
+  }
+
+  .xl\:focus\:bg-red-200:focus {
+    background-color: #fed7d7;
+  }
+
+  .xl\:focus\:bg-red-300:focus {
+    background-color: #feb2b2;
+  }
+
+  .xl\:focus\:bg-red-400:focus {
+    background-color: #fc8181;
+  }
+
+  .xl\:focus\:bg-red-500:focus {
+    background-color: #f56565;
+  }
+
+  .xl\:focus\:bg-red-600:focus {
+    background-color: #e53e3e;
+  }
+
+  .xl\:focus\:bg-red-700:focus {
+    background-color: #c53030;
+  }
+
+  .xl\:focus\:bg-red-800:focus {
+    background-color: #9b2c2c;
+  }
+
+  .xl\:focus\:bg-red-900:focus {
+    background-color: #742a2a;
+  }
+
+  .xl\:focus\:bg-orange-100:focus {
+    background-color: #fffaf0;
+  }
+
+  .xl\:focus\:bg-orange-200:focus {
+    background-color: #feebc8;
+  }
+
+  .xl\:focus\:bg-orange-300:focus {
+    background-color: #fbd38d;
+  }
+
+  .xl\:focus\:bg-orange-400:focus {
+    background-color: #f6ad55;
+  }
+
+  .xl\:focus\:bg-orange-500:focus {
+    background-color: #ed8936;
+  }
+
+  .xl\:focus\:bg-orange-600:focus {
+    background-color: #dd6b20;
+  }
+
+  .xl\:focus\:bg-orange-700:focus {
+    background-color: #c05621;
+  }
+
+  .xl\:focus\:bg-orange-800:focus {
+    background-color: #9c4221;
+  }
+
+  .xl\:focus\:bg-orange-900:focus {
+    background-color: #7b341e;
+  }
+
+  .xl\:focus\:bg-yellow-100:focus {
+    background-color: #fffff0;
+  }
+
+  .xl\:focus\:bg-yellow-200:focus {
+    background-color: #fefcbf;
+  }
+
+  .xl\:focus\:bg-yellow-300:focus {
+    background-color: #faf089;
+  }
+
+  .xl\:focus\:bg-yellow-400:focus {
+    background-color: #f6e05e;
+  }
+
+  .xl\:focus\:bg-yellow-500:focus {
+    background-color: #ecc94b;
+  }
+
+  .xl\:focus\:bg-yellow-600:focus {
+    background-color: #d69e2e;
+  }
+
+  .xl\:focus\:bg-yellow-700:focus {
+    background-color: #b7791f;
+  }
+
+  .xl\:focus\:bg-yellow-800:focus {
+    background-color: #975a16;
+  }
+
+  .xl\:focus\:bg-yellow-900:focus {
+    background-color: #744210;
+  }
+
+  .xl\:focus\:bg-green-100:focus {
+    background-color: #f0fff4;
+  }
+
+  .xl\:focus\:bg-green-200:focus {
+    background-color: #c6f6d5;
+  }
+
+  .xl\:focus\:bg-green-300:focus {
+    background-color: #9ae6b4;
+  }
+
+  .xl\:focus\:bg-green-400:focus {
+    background-color: #68d391;
+  }
+
+  .xl\:focus\:bg-green-500:focus {
+    background-color: #48bb78;
+  }
+
+  .xl\:focus\:bg-green-600:focus {
+    background-color: #38a169;
+  }
+
+  .xl\:focus\:bg-green-700:focus {
+    background-color: #2f855a;
+  }
+
+  .xl\:focus\:bg-green-800:focus {
+    background-color: #276749;
+  }
+
+  .xl\:focus\:bg-green-900:focus {
+    background-color: #22543d;
+  }
+
+  .xl\:focus\:bg-teal-100:focus {
+    background-color: #e6fffa;
+  }
+
+  .xl\:focus\:bg-teal-200:focus {
+    background-color: #b2f5ea;
+  }
+
+  .xl\:focus\:bg-teal-300:focus {
+    background-color: #81e6d9;
+  }
+
+  .xl\:focus\:bg-teal-400:focus {
+    background-color: #4fd1c5;
+  }
+
+  .xl\:focus\:bg-teal-500:focus {
+    background-color: #38b2ac;
+  }
+
+  .xl\:focus\:bg-teal-600:focus {
+    background-color: #319795;
+  }
+
+  .xl\:focus\:bg-teal-700:focus {
+    background-color: #2c7a7b;
+  }
+
+  .xl\:focus\:bg-teal-800:focus {
+    background-color: #285e61;
+  }
+
+  .xl\:focus\:bg-teal-900:focus {
+    background-color: #234e52;
+  }
+
+  .xl\:focus\:bg-blue-100:focus {
+    background-color: #ebf8ff;
+  }
+
+  .xl\:focus\:bg-blue-200:focus {
+    background-color: #bee3f8;
+  }
+
+  .xl\:focus\:bg-blue-300:focus {
+    background-color: #90cdf4;
+  }
+
+  .xl\:focus\:bg-blue-400:focus {
+    background-color: #63b3ed;
+  }
+
+  .xl\:focus\:bg-blue-500:focus {
+    background-color: #4299e1;
+  }
+
+  .xl\:focus\:bg-blue-600:focus {
+    background-color: #3182ce;
+  }
+
+  .xl\:focus\:bg-blue-700:focus {
+    background-color: #2b6cb0;
+  }
+
+  .xl\:focus\:bg-blue-800:focus {
+    background-color: #2c5282;
+  }
+
+  .xl\:focus\:bg-blue-900:focus {
+    background-color: #2a4365;
+  }
+
+  .xl\:focus\:bg-indigo-100:focus {
+    background-color: #ebf4ff;
+  }
+
+  .xl\:focus\:bg-indigo-200:focus {
+    background-color: #c3dafe;
+  }
+
+  .xl\:focus\:bg-indigo-300:focus {
+    background-color: #a3bffa;
+  }
+
+  .xl\:focus\:bg-indigo-400:focus {
+    background-color: #7f9cf5;
+  }
+
+  .xl\:focus\:bg-indigo-500:focus {
+    background-color: #667eea;
+  }
+
+  .xl\:focus\:bg-indigo-600:focus {
+    background-color: #5a67d8;
+  }
+
+  .xl\:focus\:bg-indigo-700:focus {
+    background-color: #4c51bf;
+  }
+
+  .xl\:focus\:bg-indigo-800:focus {
+    background-color: #434190;
+  }
+
+  .xl\:focus\:bg-indigo-900:focus {
+    background-color: #3c366b;
+  }
+
+  .xl\:focus\:bg-purple-100:focus {
+    background-color: #faf5ff;
+  }
+
+  .xl\:focus\:bg-purple-200:focus {
+    background-color: #e9d8fd;
+  }
+
+  .xl\:focus\:bg-purple-300:focus {
+    background-color: #d6bcfa;
+  }
+
+  .xl\:focus\:bg-purple-400:focus {
+    background-color: #b794f4;
+  }
+
+  .xl\:focus\:bg-purple-500:focus {
+    background-color: #9f7aea;
+  }
+
+  .xl\:focus\:bg-purple-600:focus {
+    background-color: #805ad5;
+  }
+
+  .xl\:focus\:bg-purple-700:focus {
+    background-color: #6b46c1;
+  }
+
+  .xl\:focus\:bg-purple-800:focus {
+    background-color: #553c9a;
+  }
+
+  .xl\:focus\:bg-purple-900:focus {
+    background-color: #44337a;
+  }
+
+  .xl\:focus\:bg-pink-100:focus {
+    background-color: #fff5f7;
+  }
+
+  .xl\:focus\:bg-pink-200:focus {
+    background-color: #fed7e2;
+  }
+
+  .xl\:focus\:bg-pink-300:focus {
+    background-color: #fbb6ce;
+  }
+
+  .xl\:focus\:bg-pink-400:focus {
+    background-color: #f687b3;
+  }
+
+  .xl\:focus\:bg-pink-500:focus {
+    background-color: #ed64a6;
+  }
+
+  .xl\:focus\:bg-pink-600:focus {
+    background-color: #d53f8c;
+  }
+
+  .xl\:focus\:bg-pink-700:focus {
+    background-color: #b83280;
+  }
+
+  .xl\:focus\:bg-pink-800:focus {
+    background-color: #97266d;
+  }
+
+  .xl\:focus\:bg-pink-900:focus {
+    background-color: #702459;
+  }
+
+  .xl\:bg-bottom {
+    background-position: bottom;
+  }
+
+  .xl\:bg-center {
+    background-position: center;
+  }
+
+  .xl\:bg-left {
+    background-position: left;
+  }
+
+  .xl\:bg-left-bottom {
+    background-position: left bottom;
+  }
+
+  .xl\:bg-left-top {
+    background-position: left top;
+  }
+
+  .xl\:bg-right {
+    background-position: right;
+  }
+
+  .xl\:bg-right-bottom {
+    background-position: right bottom;
+  }
+
+  .xl\:bg-right-top {
+    background-position: right top;
+  }
+
+  .xl\:bg-top {
+    background-position: top;
+  }
+
+  .xl\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .xl\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .xl\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .xl\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
+  .xl\:bg-repeat-round {
+    background-repeat: round;
+  }
+
+  .xl\:bg-repeat-space {
+    background-repeat: space;
+  }
+
+  .xl\:bg-auto {
+    background-size: auto;
+  }
+
+  .xl\:bg-cover {
+    background-size: cover;
+  }
+
+  .xl\:bg-contain {
+    background-size: contain;
+  }
+
+  .xl\:border-collapse {
+    border-collapse: collapse;
+  }
+
+  .xl\:border-separate {
+    border-collapse: separate;
+  }
+
+  .xl\:border-transparent {
+    border-color: transparent;
+  }
+
+  .xl\:border-black {
+    border-color: #000;
+  }
+
+  .xl\:border-white {
+    border-color: #fff;
+  }
+
+  .xl\:border-gray-100 {
+    border-color: #f7fafc;
+  }
+
+  .xl\:border-gray-200 {
+    border-color: #edf2f7;
+  }
+
+  .xl\:border-gray-300 {
+    border-color: #e2e8f0;
+  }
+
+  .xl\:border-gray-400 {
+    border-color: #cbd5e0;
+  }
+
+  .xl\:border-gray-500 {
+    border-color: #a0aec0;
+  }
+
+  .xl\:border-gray-600 {
+    border-color: #718096;
+  }
+
+  .xl\:border-gray-700 {
+    border-color: #4a5568;
+  }
+
+  .xl\:border-gray-800 {
+    border-color: #2d3748;
+  }
+
+  .xl\:border-gray-900 {
+    border-color: #1a202c;
+  }
+
+  .xl\:border-red-100 {
+    border-color: #fff5f5;
+  }
+
+  .xl\:border-red-200 {
+    border-color: #fed7d7;
+  }
+
+  .xl\:border-red-300 {
+    border-color: #feb2b2;
+  }
+
+  .xl\:border-red-400 {
+    border-color: #fc8181;
+  }
+
+  .xl\:border-red-500 {
+    border-color: #f56565;
+  }
+
+  .xl\:border-red-600 {
+    border-color: #e53e3e;
+  }
+
+  .xl\:border-red-700 {
+    border-color: #c53030;
+  }
+
+  .xl\:border-red-800 {
+    border-color: #9b2c2c;
+  }
+
+  .xl\:border-red-900 {
+    border-color: #742a2a;
+  }
+
+  .xl\:border-orange-100 {
+    border-color: #fffaf0;
+  }
+
+  .xl\:border-orange-200 {
+    border-color: #feebc8;
+  }
+
+  .xl\:border-orange-300 {
+    border-color: #fbd38d;
+  }
+
+  .xl\:border-orange-400 {
+    border-color: #f6ad55;
+  }
+
+  .xl\:border-orange-500 {
+    border-color: #ed8936;
+  }
+
+  .xl\:border-orange-600 {
+    border-color: #dd6b20;
+  }
+
+  .xl\:border-orange-700 {
+    border-color: #c05621;
+  }
+
+  .xl\:border-orange-800 {
+    border-color: #9c4221;
+  }
+
+  .xl\:border-orange-900 {
+    border-color: #7b341e;
+  }
+
+  .xl\:border-yellow-100 {
+    border-color: #fffff0;
+  }
+
+  .xl\:border-yellow-200 {
+    border-color: #fefcbf;
+  }
+
+  .xl\:border-yellow-300 {
+    border-color: #faf089;
+  }
+
+  .xl\:border-yellow-400 {
+    border-color: #f6e05e;
+  }
+
+  .xl\:border-yellow-500 {
+    border-color: #ecc94b;
+  }
+
+  .xl\:border-yellow-600 {
+    border-color: #d69e2e;
+  }
+
+  .xl\:border-yellow-700 {
+    border-color: #b7791f;
+  }
+
+  .xl\:border-yellow-800 {
+    border-color: #975a16;
+  }
+
+  .xl\:border-yellow-900 {
+    border-color: #744210;
+  }
+
+  .xl\:border-green-100 {
+    border-color: #f0fff4;
+  }
+
+  .xl\:border-green-200 {
+    border-color: #c6f6d5;
+  }
+
+  .xl\:border-green-300 {
+    border-color: #9ae6b4;
+  }
+
+  .xl\:border-green-400 {
+    border-color: #68d391;
+  }
+
+  .xl\:border-green-500 {
+    border-color: #48bb78;
+  }
+
+  .xl\:border-green-600 {
+    border-color: #38a169;
+  }
+
+  .xl\:border-green-700 {
+    border-color: #2f855a;
+  }
+
+  .xl\:border-green-800 {
+    border-color: #276749;
+  }
+
+  .xl\:border-green-900 {
+    border-color: #22543d;
+  }
+
+  .xl\:border-teal-100 {
+    border-color: #e6fffa;
+  }
+
+  .xl\:border-teal-200 {
+    border-color: #b2f5ea;
+  }
+
+  .xl\:border-teal-300 {
+    border-color: #81e6d9;
+  }
+
+  .xl\:border-teal-400 {
+    border-color: #4fd1c5;
+  }
+
+  .xl\:border-teal-500 {
+    border-color: #38b2ac;
+  }
+
+  .xl\:border-teal-600 {
+    border-color: #319795;
+  }
+
+  .xl\:border-teal-700 {
+    border-color: #2c7a7b;
+  }
+
+  .xl\:border-teal-800 {
+    border-color: #285e61;
+  }
+
+  .xl\:border-teal-900 {
+    border-color: #234e52;
+  }
+
+  .xl\:border-blue-100 {
+    border-color: #ebf8ff;
+  }
+
+  .xl\:border-blue-200 {
+    border-color: #bee3f8;
+  }
+
+  .xl\:border-blue-300 {
+    border-color: #90cdf4;
+  }
+
+  .xl\:border-blue-400 {
+    border-color: #63b3ed;
+  }
+
+  .xl\:border-blue-500 {
+    border-color: #4299e1;
+  }
+
+  .xl\:border-blue-600 {
+    border-color: #3182ce;
+  }
+
+  .xl\:border-blue-700 {
+    border-color: #2b6cb0;
+  }
+
+  .xl\:border-blue-800 {
+    border-color: #2c5282;
+  }
+
+  .xl\:border-blue-900 {
+    border-color: #2a4365;
+  }
+
+  .xl\:border-indigo-100 {
+    border-color: #ebf4ff;
+  }
+
+  .xl\:border-indigo-200 {
+    border-color: #c3dafe;
+  }
+
+  .xl\:border-indigo-300 {
+    border-color: #a3bffa;
+  }
+
+  .xl\:border-indigo-400 {
+    border-color: #7f9cf5;
+  }
+
+  .xl\:border-indigo-500 {
+    border-color: #667eea;
+  }
+
+  .xl\:border-indigo-600 {
+    border-color: #5a67d8;
+  }
+
+  .xl\:border-indigo-700 {
+    border-color: #4c51bf;
+  }
+
+  .xl\:border-indigo-800 {
+    border-color: #434190;
+  }
+
+  .xl\:border-indigo-900 {
+    border-color: #3c366b;
+  }
+
+  .xl\:border-purple-100 {
+    border-color: #faf5ff;
+  }
+
+  .xl\:border-purple-200 {
+    border-color: #e9d8fd;
+  }
+
+  .xl\:border-purple-300 {
+    border-color: #d6bcfa;
+  }
+
+  .xl\:border-purple-400 {
+    border-color: #b794f4;
+  }
+
+  .xl\:border-purple-500 {
+    border-color: #9f7aea;
+  }
+
+  .xl\:border-purple-600 {
+    border-color: #805ad5;
+  }
+
+  .xl\:border-purple-700 {
+    border-color: #6b46c1;
+  }
+
+  .xl\:border-purple-800 {
+    border-color: #553c9a;
+  }
+
+  .xl\:border-purple-900 {
+    border-color: #44337a;
+  }
+
+  .xl\:border-pink-100 {
+    border-color: #fff5f7;
+  }
+
+  .xl\:border-pink-200 {
+    border-color: #fed7e2;
+  }
+
+  .xl\:border-pink-300 {
+    border-color: #fbb6ce;
+  }
+
+  .xl\:border-pink-400 {
+    border-color: #f687b3;
+  }
+
+  .xl\:border-pink-500 {
+    border-color: #ed64a6;
+  }
+
+  .xl\:border-pink-600 {
+    border-color: #d53f8c;
+  }
+
+  .xl\:border-pink-700 {
+    border-color: #b83280;
+  }
+
+  .xl\:border-pink-800 {
+    border-color: #97266d;
+  }
+
+  .xl\:border-pink-900 {
+    border-color: #702459;
+  }
+
+  .xl\:hover\:border-transparent:hover {
+    border-color: transparent;
+  }
+
+  .xl\:hover\:border-black:hover {
+    border-color: #000;
+  }
+
+  .xl\:hover\:border-white:hover {
+    border-color: #fff;
+  }
+
+  .xl\:hover\:border-gray-100:hover {
+    border-color: #f7fafc;
+  }
+
+  .xl\:hover\:border-gray-200:hover {
+    border-color: #edf2f7;
+  }
+
+  .xl\:hover\:border-gray-300:hover {
+    border-color: #e2e8f0;
+  }
+
+  .xl\:hover\:border-gray-400:hover {
+    border-color: #cbd5e0;
+  }
+
+  .xl\:hover\:border-gray-500:hover {
+    border-color: #a0aec0;
+  }
+
+  .xl\:hover\:border-gray-600:hover {
+    border-color: #718096;
+  }
+
+  .xl\:hover\:border-gray-700:hover {
+    border-color: #4a5568;
+  }
+
+  .xl\:hover\:border-gray-800:hover {
+    border-color: #2d3748;
+  }
+
+  .xl\:hover\:border-gray-900:hover {
+    border-color: #1a202c;
+  }
+
+  .xl\:hover\:border-red-100:hover {
+    border-color: #fff5f5;
+  }
+
+  .xl\:hover\:border-red-200:hover {
+    border-color: #fed7d7;
+  }
+
+  .xl\:hover\:border-red-300:hover {
+    border-color: #feb2b2;
+  }
+
+  .xl\:hover\:border-red-400:hover {
+    border-color: #fc8181;
+  }
+
+  .xl\:hover\:border-red-500:hover {
+    border-color: #f56565;
+  }
+
+  .xl\:hover\:border-red-600:hover {
+    border-color: #e53e3e;
+  }
+
+  .xl\:hover\:border-red-700:hover {
+    border-color: #c53030;
+  }
+
+  .xl\:hover\:border-red-800:hover {
+    border-color: #9b2c2c;
+  }
+
+  .xl\:hover\:border-red-900:hover {
+    border-color: #742a2a;
+  }
+
+  .xl\:hover\:border-orange-100:hover {
+    border-color: #fffaf0;
+  }
+
+  .xl\:hover\:border-orange-200:hover {
+    border-color: #feebc8;
+  }
+
+  .xl\:hover\:border-orange-300:hover {
+    border-color: #fbd38d;
+  }
+
+  .xl\:hover\:border-orange-400:hover {
+    border-color: #f6ad55;
+  }
+
+  .xl\:hover\:border-orange-500:hover {
+    border-color: #ed8936;
+  }
+
+  .xl\:hover\:border-orange-600:hover {
+    border-color: #dd6b20;
+  }
+
+  .xl\:hover\:border-orange-700:hover {
+    border-color: #c05621;
+  }
+
+  .xl\:hover\:border-orange-800:hover {
+    border-color: #9c4221;
+  }
+
+  .xl\:hover\:border-orange-900:hover {
+    border-color: #7b341e;
+  }
+
+  .xl\:hover\:border-yellow-100:hover {
+    border-color: #fffff0;
+  }
+
+  .xl\:hover\:border-yellow-200:hover {
+    border-color: #fefcbf;
+  }
+
+  .xl\:hover\:border-yellow-300:hover {
+    border-color: #faf089;
+  }
+
+  .xl\:hover\:border-yellow-400:hover {
+    border-color: #f6e05e;
+  }
+
+  .xl\:hover\:border-yellow-500:hover {
+    border-color: #ecc94b;
+  }
+
+  .xl\:hover\:border-yellow-600:hover {
+    border-color: #d69e2e;
+  }
+
+  .xl\:hover\:border-yellow-700:hover {
+    border-color: #b7791f;
+  }
+
+  .xl\:hover\:border-yellow-800:hover {
+    border-color: #975a16;
+  }
+
+  .xl\:hover\:border-yellow-900:hover {
+    border-color: #744210;
+  }
+
+  .xl\:hover\:border-green-100:hover {
+    border-color: #f0fff4;
+  }
+
+  .xl\:hover\:border-green-200:hover {
+    border-color: #c6f6d5;
+  }
+
+  .xl\:hover\:border-green-300:hover {
+    border-color: #9ae6b4;
+  }
+
+  .xl\:hover\:border-green-400:hover {
+    border-color: #68d391;
+  }
+
+  .xl\:hover\:border-green-500:hover {
+    border-color: #48bb78;
+  }
+
+  .xl\:hover\:border-green-600:hover {
+    border-color: #38a169;
+  }
+
+  .xl\:hover\:border-green-700:hover {
+    border-color: #2f855a;
+  }
+
+  .xl\:hover\:border-green-800:hover {
+    border-color: #276749;
+  }
+
+  .xl\:hover\:border-green-900:hover {
+    border-color: #22543d;
+  }
+
+  .xl\:hover\:border-teal-100:hover {
+    border-color: #e6fffa;
+  }
+
+  .xl\:hover\:border-teal-200:hover {
+    border-color: #b2f5ea;
+  }
+
+  .xl\:hover\:border-teal-300:hover {
+    border-color: #81e6d9;
+  }
+
+  .xl\:hover\:border-teal-400:hover {
+    border-color: #4fd1c5;
+  }
+
+  .xl\:hover\:border-teal-500:hover {
+    border-color: #38b2ac;
+  }
+
+  .xl\:hover\:border-teal-600:hover {
+    border-color: #319795;
+  }
+
+  .xl\:hover\:border-teal-700:hover {
+    border-color: #2c7a7b;
+  }
+
+  .xl\:hover\:border-teal-800:hover {
+    border-color: #285e61;
+  }
+
+  .xl\:hover\:border-teal-900:hover {
+    border-color: #234e52;
+  }
+
+  .xl\:hover\:border-blue-100:hover {
+    border-color: #ebf8ff;
+  }
+
+  .xl\:hover\:border-blue-200:hover {
+    border-color: #bee3f8;
+  }
+
+  .xl\:hover\:border-blue-300:hover {
+    border-color: #90cdf4;
+  }
+
+  .xl\:hover\:border-blue-400:hover {
+    border-color: #63b3ed;
+  }
+
+  .xl\:hover\:border-blue-500:hover {
+    border-color: #4299e1;
+  }
+
+  .xl\:hover\:border-blue-600:hover {
+    border-color: #3182ce;
+  }
+
+  .xl\:hover\:border-blue-700:hover {
+    border-color: #2b6cb0;
+  }
+
+  .xl\:hover\:border-blue-800:hover {
+    border-color: #2c5282;
+  }
+
+  .xl\:hover\:border-blue-900:hover {
+    border-color: #2a4365;
+  }
+
+  .xl\:hover\:border-indigo-100:hover {
+    border-color: #ebf4ff;
+  }
+
+  .xl\:hover\:border-indigo-200:hover {
+    border-color: #c3dafe;
+  }
+
+  .xl\:hover\:border-indigo-300:hover {
+    border-color: #a3bffa;
+  }
+
+  .xl\:hover\:border-indigo-400:hover {
+    border-color: #7f9cf5;
+  }
+
+  .xl\:hover\:border-indigo-500:hover {
+    border-color: #667eea;
+  }
+
+  .xl\:hover\:border-indigo-600:hover {
+    border-color: #5a67d8;
+  }
+
+  .xl\:hover\:border-indigo-700:hover {
+    border-color: #4c51bf;
+  }
+
+  .xl\:hover\:border-indigo-800:hover {
+    border-color: #434190;
+  }
+
+  .xl\:hover\:border-indigo-900:hover {
+    border-color: #3c366b;
+  }
+
+  .xl\:hover\:border-purple-100:hover {
+    border-color: #faf5ff;
+  }
+
+  .xl\:hover\:border-purple-200:hover {
+    border-color: #e9d8fd;
+  }
+
+  .xl\:hover\:border-purple-300:hover {
+    border-color: #d6bcfa;
+  }
+
+  .xl\:hover\:border-purple-400:hover {
+    border-color: #b794f4;
+  }
+
+  .xl\:hover\:border-purple-500:hover {
+    border-color: #9f7aea;
+  }
+
+  .xl\:hover\:border-purple-600:hover {
+    border-color: #805ad5;
+  }
+
+  .xl\:hover\:border-purple-700:hover {
+    border-color: #6b46c1;
+  }
+
+  .xl\:hover\:border-purple-800:hover {
+    border-color: #553c9a;
+  }
+
+  .xl\:hover\:border-purple-900:hover {
+    border-color: #44337a;
+  }
+
+  .xl\:hover\:border-pink-100:hover {
+    border-color: #fff5f7;
+  }
+
+  .xl\:hover\:border-pink-200:hover {
+    border-color: #fed7e2;
+  }
+
+  .xl\:hover\:border-pink-300:hover {
+    border-color: #fbb6ce;
+  }
+
+  .xl\:hover\:border-pink-400:hover {
+    border-color: #f687b3;
+  }
+
+  .xl\:hover\:border-pink-500:hover {
+    border-color: #ed64a6;
+  }
+
+  .xl\:hover\:border-pink-600:hover {
+    border-color: #d53f8c;
+  }
+
+  .xl\:hover\:border-pink-700:hover {
+    border-color: #b83280;
+  }
+
+  .xl\:hover\:border-pink-800:hover {
+    border-color: #97266d;
+  }
+
+  .xl\:hover\:border-pink-900:hover {
+    border-color: #702459;
+  }
+
+  .xl\:focus\:border-transparent:focus {
+    border-color: transparent;
+  }
+
+  .xl\:focus\:border-black:focus {
+    border-color: #000;
+  }
+
+  .xl\:focus\:border-white:focus {
+    border-color: #fff;
+  }
+
+  .xl\:focus\:border-gray-100:focus {
+    border-color: #f7fafc;
+  }
+
+  .xl\:focus\:border-gray-200:focus {
+    border-color: #edf2f7;
+  }
+
+  .xl\:focus\:border-gray-300:focus {
+    border-color: #e2e8f0;
+  }
+
+  .xl\:focus\:border-gray-400:focus {
+    border-color: #cbd5e0;
+  }
+
+  .xl\:focus\:border-gray-500:focus {
+    border-color: #a0aec0;
+  }
+
+  .xl\:focus\:border-gray-600:focus {
+    border-color: #718096;
+  }
+
+  .xl\:focus\:border-gray-700:focus {
+    border-color: #4a5568;
+  }
+
+  .xl\:focus\:border-gray-800:focus {
+    border-color: #2d3748;
+  }
+
+  .xl\:focus\:border-gray-900:focus {
+    border-color: #1a202c;
+  }
+
+  .xl\:focus\:border-red-100:focus {
+    border-color: #fff5f5;
+  }
+
+  .xl\:focus\:border-red-200:focus {
+    border-color: #fed7d7;
+  }
+
+  .xl\:focus\:border-red-300:focus {
+    border-color: #feb2b2;
+  }
+
+  .xl\:focus\:border-red-400:focus {
+    border-color: #fc8181;
+  }
+
+  .xl\:focus\:border-red-500:focus {
+    border-color: #f56565;
+  }
+
+  .xl\:focus\:border-red-600:focus {
+    border-color: #e53e3e;
+  }
+
+  .xl\:focus\:border-red-700:focus {
+    border-color: #c53030;
+  }
+
+  .xl\:focus\:border-red-800:focus {
+    border-color: #9b2c2c;
+  }
+
+  .xl\:focus\:border-red-900:focus {
+    border-color: #742a2a;
+  }
+
+  .xl\:focus\:border-orange-100:focus {
+    border-color: #fffaf0;
+  }
+
+  .xl\:focus\:border-orange-200:focus {
+    border-color: #feebc8;
+  }
+
+  .xl\:focus\:border-orange-300:focus {
+    border-color: #fbd38d;
+  }
+
+  .xl\:focus\:border-orange-400:focus {
+    border-color: #f6ad55;
+  }
+
+  .xl\:focus\:border-orange-500:focus {
+    border-color: #ed8936;
+  }
+
+  .xl\:focus\:border-orange-600:focus {
+    border-color: #dd6b20;
+  }
+
+  .xl\:focus\:border-orange-700:focus {
+    border-color: #c05621;
+  }
+
+  .xl\:focus\:border-orange-800:focus {
+    border-color: #9c4221;
+  }
+
+  .xl\:focus\:border-orange-900:focus {
+    border-color: #7b341e;
+  }
+
+  .xl\:focus\:border-yellow-100:focus {
+    border-color: #fffff0;
+  }
+
+  .xl\:focus\:border-yellow-200:focus {
+    border-color: #fefcbf;
+  }
+
+  .xl\:focus\:border-yellow-300:focus {
+    border-color: #faf089;
+  }
+
+  .xl\:focus\:border-yellow-400:focus {
+    border-color: #f6e05e;
+  }
+
+  .xl\:focus\:border-yellow-500:focus {
+    border-color: #ecc94b;
+  }
+
+  .xl\:focus\:border-yellow-600:focus {
+    border-color: #d69e2e;
+  }
+
+  .xl\:focus\:border-yellow-700:focus {
+    border-color: #b7791f;
+  }
+
+  .xl\:focus\:border-yellow-800:focus {
+    border-color: #975a16;
+  }
+
+  .xl\:focus\:border-yellow-900:focus {
+    border-color: #744210;
+  }
+
+  .xl\:focus\:border-green-100:focus {
+    border-color: #f0fff4;
+  }
+
+  .xl\:focus\:border-green-200:focus {
+    border-color: #c6f6d5;
+  }
+
+  .xl\:focus\:border-green-300:focus {
+    border-color: #9ae6b4;
+  }
+
+  .xl\:focus\:border-green-400:focus {
+    border-color: #68d391;
+  }
+
+  .xl\:focus\:border-green-500:focus {
+    border-color: #48bb78;
+  }
+
+  .xl\:focus\:border-green-600:focus {
+    border-color: #38a169;
+  }
+
+  .xl\:focus\:border-green-700:focus {
+    border-color: #2f855a;
+  }
+
+  .xl\:focus\:border-green-800:focus {
+    border-color: #276749;
+  }
+
+  .xl\:focus\:border-green-900:focus {
+    border-color: #22543d;
+  }
+
+  .xl\:focus\:border-teal-100:focus {
+    border-color: #e6fffa;
+  }
+
+  .xl\:focus\:border-teal-200:focus {
+    border-color: #b2f5ea;
+  }
+
+  .xl\:focus\:border-teal-300:focus {
+    border-color: #81e6d9;
+  }
+
+  .xl\:focus\:border-teal-400:focus {
+    border-color: #4fd1c5;
+  }
+
+  .xl\:focus\:border-teal-500:focus {
+    border-color: #38b2ac;
+  }
+
+  .xl\:focus\:border-teal-600:focus {
+    border-color: #319795;
+  }
+
+  .xl\:focus\:border-teal-700:focus {
+    border-color: #2c7a7b;
+  }
+
+  .xl\:focus\:border-teal-800:focus {
+    border-color: #285e61;
+  }
+
+  .xl\:focus\:border-teal-900:focus {
+    border-color: #234e52;
+  }
+
+  .xl\:focus\:border-blue-100:focus {
+    border-color: #ebf8ff;
+  }
+
+  .xl\:focus\:border-blue-200:focus {
+    border-color: #bee3f8;
+  }
+
+  .xl\:focus\:border-blue-300:focus {
+    border-color: #90cdf4;
+  }
+
+  .xl\:focus\:border-blue-400:focus {
+    border-color: #63b3ed;
+  }
+
+  .xl\:focus\:border-blue-500:focus {
+    border-color: #4299e1;
+  }
+
+  .xl\:focus\:border-blue-600:focus {
+    border-color: #3182ce;
+  }
+
+  .xl\:focus\:border-blue-700:focus {
+    border-color: #2b6cb0;
+  }
+
+  .xl\:focus\:border-blue-800:focus {
+    border-color: #2c5282;
+  }
+
+  .xl\:focus\:border-blue-900:focus {
+    border-color: #2a4365;
+  }
+
+  .xl\:focus\:border-indigo-100:focus {
+    border-color: #ebf4ff;
+  }
+
+  .xl\:focus\:border-indigo-200:focus {
+    border-color: #c3dafe;
+  }
+
+  .xl\:focus\:border-indigo-300:focus {
+    border-color: #a3bffa;
+  }
+
+  .xl\:focus\:border-indigo-400:focus {
+    border-color: #7f9cf5;
+  }
+
+  .xl\:focus\:border-indigo-500:focus {
+    border-color: #667eea;
+  }
+
+  .xl\:focus\:border-indigo-600:focus {
+    border-color: #5a67d8;
+  }
+
+  .xl\:focus\:border-indigo-700:focus {
+    border-color: #4c51bf;
+  }
+
+  .xl\:focus\:border-indigo-800:focus {
+    border-color: #434190;
+  }
+
+  .xl\:focus\:border-indigo-900:focus {
+    border-color: #3c366b;
+  }
+
+  .xl\:focus\:border-purple-100:focus {
+    border-color: #faf5ff;
+  }
+
+  .xl\:focus\:border-purple-200:focus {
+    border-color: #e9d8fd;
+  }
+
+  .xl\:focus\:border-purple-300:focus {
+    border-color: #d6bcfa;
+  }
+
+  .xl\:focus\:border-purple-400:focus {
+    border-color: #b794f4;
+  }
+
+  .xl\:focus\:border-purple-500:focus {
+    border-color: #9f7aea;
+  }
+
+  .xl\:focus\:border-purple-600:focus {
+    border-color: #805ad5;
+  }
+
+  .xl\:focus\:border-purple-700:focus {
+    border-color: #6b46c1;
+  }
+
+  .xl\:focus\:border-purple-800:focus {
+    border-color: #553c9a;
+  }
+
+  .xl\:focus\:border-purple-900:focus {
+    border-color: #44337a;
+  }
+
+  .xl\:focus\:border-pink-100:focus {
+    border-color: #fff5f7;
+  }
+
+  .xl\:focus\:border-pink-200:focus {
+    border-color: #fed7e2;
+  }
+
+  .xl\:focus\:border-pink-300:focus {
+    border-color: #fbb6ce;
+  }
+
+  .xl\:focus\:border-pink-400:focus {
+    border-color: #f687b3;
+  }
+
+  .xl\:focus\:border-pink-500:focus {
+    border-color: #ed64a6;
+  }
+
+  .xl\:focus\:border-pink-600:focus {
+    border-color: #d53f8c;
+  }
+
+  .xl\:focus\:border-pink-700:focus {
+    border-color: #b83280;
+  }
+
+  .xl\:focus\:border-pink-800:focus {
+    border-color: #97266d;
+  }
+
+  .xl\:focus\:border-pink-900:focus {
+    border-color: #702459;
+  }
+
+  .xl\:rounded-none {
+    border-radius: 0;
+  }
+
+  .xl\:rounded-sm {
+    border-radius: 0.125rem;
+  }
+
+  .xl\:rounded {
+    border-radius: 0.25rem;
+  }
+
+  .xl\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .xl\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .xl\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .xl\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .xl\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-t-sm {
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+  }
+
+  .xl\:rounded-r-sm {
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .xl\:rounded-b-sm {
+    border-bottom-right-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .xl\:rounded-l-sm {
+    border-top-left-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .xl\:rounded-t {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  .xl\:rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .xl\:rounded-b {
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .xl\:rounded-l {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .xl\:rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .xl\:rounded-r-lg {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .xl\:rounded-b-lg {
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .xl\:rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .xl\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .xl\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xl\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .xl\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .xl\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .xl\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-tl-sm {
+    border-top-left-radius: 0.125rem;
+  }
+
+  .xl\:rounded-tr-sm {
+    border-top-right-radius: 0.125rem;
+  }
+
+  .xl\:rounded-br-sm {
+    border-bottom-right-radius: 0.125rem;
+  }
+
+  .xl\:rounded-bl-sm {
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  .xl\:rounded-tl {
+    border-top-left-radius: 0.25rem;
+  }
+
+  .xl\:rounded-tr {
+    border-top-right-radius: 0.25rem;
+  }
+
+  .xl\:rounded-br {
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .xl\:rounded-bl {
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .xl\:rounded-tl-lg {
+    border-top-left-radius: 0.5rem;
+  }
+
+  .xl\:rounded-tr-lg {
+    border-top-right-radius: 0.5rem;
+  }
+
+  .xl\:rounded-br-lg {
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .xl\:rounded-bl-lg {
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .xl\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .xl\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .xl\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xl\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:border-solid {
+    border-style: solid;
+  }
+
+  .xl\:border-dashed {
+    border-style: dashed;
+  }
+
+  .xl\:border-dotted {
+    border-style: dotted;
+  }
+
+  .xl\:border-double {
+    border-style: double;
+  }
+
+  .xl\:border-none {
+    border-style: none;
+  }
+
+  .xl\:border-0 {
+    border-width: 0;
+  }
+
+  .xl\:border-2 {
+    border-width: 2px;
+  }
+
+  .xl\:border-4 {
+    border-width: 4px;
+  }
+
+  .xl\:border-8 {
+    border-width: 8px;
+  }
+
+  .xl\:border {
+    border-width: 1px;
+  }
+
+  .xl\:border-t-0 {
+    border-top-width: 0;
+  }
+
+  .xl\:border-r-0 {
+    border-right-width: 0;
+  }
+
+  .xl\:border-b-0 {
+    border-bottom-width: 0;
+  }
+
+  .xl\:border-l-0 {
+    border-left-width: 0;
+  }
+
+  .xl\:border-t-2 {
+    border-top-width: 2px;
+  }
+
+  .xl\:border-r-2 {
+    border-right-width: 2px;
+  }
+
+  .xl\:border-b-2 {
+    border-bottom-width: 2px;
+  }
+
+  .xl\:border-l-2 {
+    border-left-width: 2px;
+  }
+
+  .xl\:border-t-4 {
+    border-top-width: 4px;
+  }
+
+  .xl\:border-r-4 {
+    border-right-width: 4px;
+  }
+
+  .xl\:border-b-4 {
+    border-bottom-width: 4px;
+  }
+
+  .xl\:border-l-4 {
+    border-left-width: 4px;
+  }
+
+  .xl\:border-t-8 {
+    border-top-width: 8px;
+  }
+
+  .xl\:border-r-8 {
+    border-right-width: 8px;
+  }
+
+  .xl\:border-b-8 {
+    border-bottom-width: 8px;
+  }
+
+  .xl\:border-l-8 {
+    border-left-width: 8px;
+  }
+
+  .xl\:border-t {
+    border-top-width: 1px;
+  }
+
+  .xl\:border-r {
+    border-right-width: 1px;
+  }
+
+  .xl\:border-b {
+    border-bottom-width: 1px;
+  }
+
+  .xl\:border-l {
+    border-left-width: 1px;
+  }
+
+  .xl\:cursor-auto {
+    cursor: auto;
+  }
+
+  .xl\:cursor-default {
+    cursor: default;
+  }
+
+  .xl\:cursor-pointer {
+    cursor: pointer;
+  }
+
+  .xl\:cursor-wait {
+    cursor: wait;
+  }
+
+  .xl\:cursor-text {
+    cursor: text;
+  }
+
+  .xl\:cursor-move {
+    cursor: move;
+  }
+
+  .xl\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .xl\:block {
+    display: block;
+  }
+
+  .xl\:inline-block {
+    display: inline-block;
+  }
+
+  .xl\:inline {
+    display: inline;
+  }
+
+  .xl\:flex {
+    display: -webkit-box;
+    display: flex;
+  }
+
+  .xl\:inline-flex {
+    display: -webkit-inline-box;
+    display: inline-flex;
+  }
+
+  .xl\:table {
+    display: table;
+  }
+
+  .xl\:table-row {
+    display: table-row;
+  }
+
+  .xl\:table-cell {
+    display: table-cell;
+  }
+
+  .xl\:hidden {
+    display: none;
+  }
+
+  .xl\:flex-row {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+  }
+
+  .xl\:flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+            flex-direction: row-reverse;
+  }
+
+  .xl\:flex-col {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+  }
+
+  .xl\:flex-col-reverse {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+            flex-direction: column-reverse;
+  }
+
+  .xl\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .xl\:flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .xl\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  .xl\:items-start {
+    -webkit-box-align: start;
+            align-items: flex-start;
+  }
+
+  .xl\:items-end {
+    -webkit-box-align: end;
+            align-items: flex-end;
+  }
+
+  .xl\:items-center {
+    -webkit-box-align: center;
+            align-items: center;
+  }
+
+  .xl\:items-baseline {
+    -webkit-box-align: baseline;
+            align-items: baseline;
+  }
+
+  .xl\:items-stretch {
+    -webkit-box-align: stretch;
+            align-items: stretch;
+  }
+
+  .xl\:self-auto {
+    align-self: auto;
+  }
+
+  .xl\:self-start {
+    align-self: flex-start;
+  }
+
+  .xl\:self-end {
+    align-self: flex-end;
+  }
+
+  .xl\:self-center {
+    align-self: center;
+  }
+
+  .xl\:self-stretch {
+    align-self: stretch;
+  }
+
+  .xl\:justify-start {
+    -webkit-box-pack: start;
+            justify-content: flex-start;
+  }
+
+  .xl\:justify-end {
+    -webkit-box-pack: end;
+            justify-content: flex-end;
+  }
+
+  .xl\:justify-center {
+    -webkit-box-pack: center;
+            justify-content: center;
+  }
+
+  .xl\:justify-between {
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+  }
+
+  .xl\:justify-around {
+    justify-content: space-around;
+  }
+
+  .xl\:content-center {
+    align-content: center;
+  }
+
+  .xl\:content-start {
+    align-content: flex-start;
+  }
+
+  .xl\:content-end {
+    align-content: flex-end;
+  }
+
+  .xl\:content-between {
+    align-content: space-between;
+  }
+
+  .xl\:content-around {
+    align-content: space-around;
+  }
+
+  .xl\:flex-1 {
+    -webkit-box-flex: 1;
+            flex: 1 1 0%;
+  }
+
+  .xl\:flex-auto {
+    -webkit-box-flex: 1;
+            flex: 1 1 auto;
+  }
+
+  .xl\:flex-initial {
+    -webkit-box-flex: 0;
+            flex: 0 1 auto;
+  }
+
+  .xl\:flex-none {
+    -webkit-box-flex: 0;
+            flex: none;
+  }
+
+  .xl\:flex-grow-0 {
+    -webkit-box-flex: 0;
+            flex-grow: 0;
+  }
+
+  .xl\:flex-grow {
+    -webkit-box-flex: 1;
+            flex-grow: 1;
+  }
+
+  .xl\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .xl\:flex-shrink {
+    flex-shrink: 1;
+  }
+
+  .xl\:order-1 {
+    -webkit-box-ordinal-group: 2;
+            order: 1;
+  }
+
+  .xl\:order-2 {
+    -webkit-box-ordinal-group: 3;
+            order: 2;
+  }
+
+  .xl\:order-3 {
+    -webkit-box-ordinal-group: 4;
+            order: 3;
+  }
+
+  .xl\:order-4 {
+    -webkit-box-ordinal-group: 5;
+            order: 4;
+  }
+
+  .xl\:order-5 {
+    -webkit-box-ordinal-group: 6;
+            order: 5;
+  }
+
+  .xl\:order-6 {
+    -webkit-box-ordinal-group: 7;
+            order: 6;
+  }
+
+  .xl\:order-7 {
+    -webkit-box-ordinal-group: 8;
+            order: 7;
+  }
+
+  .xl\:order-8 {
+    -webkit-box-ordinal-group: 9;
+            order: 8;
+  }
+
+  .xl\:order-9 {
+    -webkit-box-ordinal-group: 10;
+            order: 9;
+  }
+
+  .xl\:order-10 {
+    -webkit-box-ordinal-group: 11;
+            order: 10;
+  }
+
+  .xl\:order-11 {
+    -webkit-box-ordinal-group: 12;
+            order: 11;
+  }
+
+  .xl\:order-12 {
+    -webkit-box-ordinal-group: 13;
+            order: 12;
+  }
+
+  .xl\:order-first {
+    -webkit-box-ordinal-group: -9998;
+            order: -9999;
+  }
+
+  .xl\:order-last {
+    -webkit-box-ordinal-group: 10000;
+            order: 9999;
+  }
+
+  .xl\:order-none {
+    -webkit-box-ordinal-group: 1;
+            order: 0;
+  }
+
+  .xl\:float-right {
+    float: right;
+  }
+
+  .xl\:float-left {
+    float: left;
+  }
+
+  .xl\:float-none {
+    float: none;
+  }
+
+  .xl\:clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .xl\:font-sans {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .xl\:font-serif {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  }
+
+  .xl\:font-mono {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .xl\:font-hairline {
+    font-weight: 100;
+  }
+
+  .xl\:font-thin {
+    font-weight: 200;
+  }
+
+  .xl\:font-light {
+    font-weight: 300;
+  }
+
+  .xl\:font-normal {
+    font-weight: 400;
+  }
+
+  .xl\:font-medium {
+    font-weight: 500;
+  }
+
+  .xl\:font-semibold {
+    font-weight: 600;
+  }
+
+  .xl\:font-bold {
+    font-weight: 700;
+  }
+
+  .xl\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .xl\:font-black {
+    font-weight: 900;
+  }
+
+  .xl\:hover\:font-hairline:hover {
+    font-weight: 100;
+  }
+
+  .xl\:hover\:font-thin:hover {
+    font-weight: 200;
+  }
+
+  .xl\:hover\:font-light:hover {
+    font-weight: 300;
+  }
+
+  .xl\:hover\:font-normal:hover {
+    font-weight: 400;
+  }
+
+  .xl\:hover\:font-medium:hover {
+    font-weight: 500;
+  }
+
+  .xl\:hover\:font-semibold:hover {
+    font-weight: 600;
+  }
+
+  .xl\:hover\:font-bold:hover {
+    font-weight: 700;
+  }
+
+  .xl\:hover\:font-extrabold:hover {
+    font-weight: 800;
+  }
+
+  .xl\:hover\:font-black:hover {
+    font-weight: 900;
+  }
+
+  .xl\:focus\:font-hairline:focus {
+    font-weight: 100;
+  }
+
+  .xl\:focus\:font-thin:focus {
+    font-weight: 200;
+  }
+
+  .xl\:focus\:font-light:focus {
+    font-weight: 300;
+  }
+
+  .xl\:focus\:font-normal:focus {
+    font-weight: 400;
+  }
+
+  .xl\:focus\:font-medium:focus {
+    font-weight: 500;
+  }
+
+  .xl\:focus\:font-semibold:focus {
+    font-weight: 600;
+  }
+
+  .xl\:focus\:font-bold:focus {
+    font-weight: 700;
+  }
+
+  .xl\:focus\:font-extrabold:focus {
+    font-weight: 800;
+  }
+
+  .xl\:focus\:font-black:focus {
+    font-weight: 900;
+  }
+
+  .xl\:h-0 {
+    height: 0;
+  }
+
+  .xl\:h-1 {
+    height: 0.25rem;
+  }
+
+  .xl\:h-2 {
+    height: 0.5rem;
+  }
+
+  .xl\:h-3 {
+    height: 0.75rem;
+  }
+
+  .xl\:h-4 {
+    height: 1rem;
+  }
+
+  .xl\:h-5 {
+    height: 1.25rem;
+  }
+
+  .xl\:h-6 {
+    height: 1.5rem;
+  }
+
+  .xl\:h-8 {
+    height: 2rem;
+  }
+
+  .xl\:h-10 {
+    height: 2.5rem;
+  }
+
+  .xl\:h-12 {
+    height: 3rem;
+  }
+
+  .xl\:h-16 {
+    height: 4rem;
+  }
+
+  .xl\:h-20 {
+    height: 5rem;
+  }
+
+  .xl\:h-24 {
+    height: 6rem;
+  }
+
+  .xl\:h-32 {
+    height: 8rem;
+  }
+
+  .xl\:h-40 {
+    height: 10rem;
+  }
+
+  .xl\:h-48 {
+    height: 12rem;
+  }
+
+  .xl\:h-56 {
+    height: 14rem;
+  }
+
+  .xl\:h-64 {
+    height: 16rem;
+  }
+
+  .xl\:h-auto {
+    height: auto;
+  }
+
+  .xl\:h-px {
+    height: 1px;
+  }
+
+  .xl\:h-full {
+    height: 100%;
+  }
+
+  .xl\:h-screen {
+    height: 100vh;
+  }
+
+  .xl\:leading-none {
+    line-height: 1;
+  }
+
+  .xl\:leading-tight {
+    line-height: 1.25;
+  }
+
+  .xl\:leading-snug {
+    line-height: 1.375;
+  }
+
+  .xl\:leading-normal {
+    line-height: 1.5;
+  }
+
+  .xl\:leading-relaxed {
+    line-height: 1.625;
+  }
+
+  .xl\:leading-loose {
+    line-height: 2;
+  }
+
+  .xl\:list-inside {
+    list-style-position: inside;
+  }
+
+  .xl\:list-outside {
+    list-style-position: outside;
+  }
+
+  .xl\:list-none {
+    list-style-type: none;
+  }
+
+  .xl\:list-disc {
+    list-style-type: disc;
+  }
+
+  .xl\:list-decimal {
+    list-style-type: decimal;
+  }
+
+  .xl\:m-0 {
+    margin: 0;
+  }
+
+  .xl\:m-1 {
+    margin: 0.25rem;
+  }
+
+  .xl\:m-2 {
+    margin: 0.5rem;
+  }
+
+  .xl\:m-3 {
+    margin: 0.75rem;
+  }
+
+  .xl\:m-4 {
+    margin: 1rem;
+  }
+
+  .xl\:m-5 {
+    margin: 1.25rem;
+  }
+
+  .xl\:m-6 {
+    margin: 1.5rem;
+  }
+
+  .xl\:m-8 {
+    margin: 2rem;
+  }
+
+  .xl\:m-10 {
+    margin: 2.5rem;
+  }
+
+  .xl\:m-12 {
+    margin: 3rem;
+  }
+
+  .xl\:m-16 {
+    margin: 4rem;
+  }
+
+  .xl\:m-20 {
+    margin: 5rem;
+  }
+
+  .xl\:m-24 {
+    margin: 6rem;
+  }
+
+  .xl\:m-32 {
+    margin: 8rem;
+  }
+
+  .xl\:m-40 {
+    margin: 10rem;
+  }
+
+  .xl\:m-48 {
+    margin: 12rem;
+  }
+
+  .xl\:m-56 {
+    margin: 14rem;
+  }
+
+  .xl\:m-64 {
+    margin: 16rem;
+  }
+
+  .xl\:m-auto {
+    margin: auto;
+  }
+
+  .xl\:m-px {
+    margin: 1px;
+  }
+
+  .xl\:-m-1 {
+    margin: -0.25rem;
+  }
+
+  .xl\:-m-2 {
+    margin: -0.5rem;
+  }
+
+  .xl\:-m-3 {
+    margin: -0.75rem;
+  }
+
+  .xl\:-m-4 {
+    margin: -1rem;
+  }
+
+  .xl\:-m-5 {
+    margin: -1.25rem;
+  }
+
+  .xl\:-m-6 {
+    margin: -1.5rem;
+  }
+
+  .xl\:-m-8 {
+    margin: -2rem;
+  }
+
+  .xl\:-m-10 {
+    margin: -2.5rem;
+  }
+
+  .xl\:-m-12 {
+    margin: -3rem;
+  }
+
+  .xl\:-m-16 {
+    margin: -4rem;
+  }
+
+  .xl\:-m-20 {
+    margin: -5rem;
+  }
+
+  .xl\:-m-24 {
+    margin: -6rem;
+  }
+
+  .xl\:-m-32 {
+    margin: -8rem;
+  }
+
+  .xl\:-m-40 {
+    margin: -10rem;
+  }
+
+  .xl\:-m-48 {
+    margin: -12rem;
+  }
+
+  .xl\:-m-56 {
+    margin: -14rem;
+  }
+
+  .xl\:-m-64 {
+    margin: -16rem;
+  }
+
+  .xl\:-m-px {
+    margin: -1px;
+  }
+
+  .xl\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .xl\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .xl\:my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .xl\:mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
+  .xl\:my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .xl\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .xl\:my-3 {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .xl\:mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+
+  .xl\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .xl\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .xl\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .xl\:mx-5 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+
+  .xl\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .xl\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .xl\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .xl\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .xl\:my-10 {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .xl\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
+  .xl\:my-12 {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .xl\:mx-12 {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  .xl\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
+  .xl\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+
+  .xl\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  .xl\:mx-20 {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+
+  .xl\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
+  .xl\:mx-24 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
+  .xl\:my-32 {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+  }
+
+  .xl\:mx-32 {
+    margin-left: 8rem;
+    margin-right: 8rem;
+  }
+
+  .xl\:my-40 {
+    margin-top: 10rem;
+    margin-bottom: 10rem;
+  }
+
+  .xl\:mx-40 {
+    margin-left: 10rem;
+    margin-right: 10rem;
+  }
+
+  .xl\:my-48 {
+    margin-top: 12rem;
+    margin-bottom: 12rem;
+  }
+
+  .xl\:mx-48 {
+    margin-left: 12rem;
+    margin-right: 12rem;
+  }
+
+  .xl\:my-56 {
+    margin-top: 14rem;
+    margin-bottom: 14rem;
+  }
+
+  .xl\:mx-56 {
+    margin-left: 14rem;
+    margin-right: 14rem;
+  }
+
+  .xl\:my-64 {
+    margin-top: 16rem;
+    margin-bottom: 16rem;
+  }
+
+  .xl\:mx-64 {
+    margin-left: 16rem;
+    margin-right: 16rem;
+  }
+
+  .xl\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .xl\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .xl\:my-px {
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  .xl\:mx-px {
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+
+  .xl\:-my-1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .xl\:-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+  .xl\:-my-2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+
+  .xl\:-mx-2 {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .xl\:-my-3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+
+  .xl\:-mx-3 {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+
+  .xl\:-my-4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+
+  .xl\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  .xl\:-my-5 {
+    margin-top: -1.25rem;
+    margin-bottom: -1.25rem;
+  }
+
+  .xl\:-mx-5 {
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+  }
+
+  .xl\:-my-6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+
+  .xl\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .xl\:-my-8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+
+  .xl\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .xl\:-my-10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+
+  .xl\:-mx-10 {
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+  }
+
+  .xl\:-my-12 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+
+  .xl\:-mx-12 {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+
+  .xl\:-my-16 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+
+  .xl\:-mx-16 {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+
+  .xl\:-my-20 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+
+  .xl\:-mx-20 {
+    margin-left: -5rem;
+    margin-right: -5rem;
+  }
+
+  .xl\:-my-24 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+
+  .xl\:-mx-24 {
+    margin-left: -6rem;
+    margin-right: -6rem;
+  }
+
+  .xl\:-my-32 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+
+  .xl\:-mx-32 {
+    margin-left: -8rem;
+    margin-right: -8rem;
+  }
+
+  .xl\:-my-40 {
+    margin-top: -10rem;
+    margin-bottom: -10rem;
+  }
+
+  .xl\:-mx-40 {
+    margin-left: -10rem;
+    margin-right: -10rem;
+  }
+
+  .xl\:-my-48 {
+    margin-top: -12rem;
+    margin-bottom: -12rem;
+  }
+
+  .xl\:-mx-48 {
+    margin-left: -12rem;
+    margin-right: -12rem;
+  }
+
+  .xl\:-my-56 {
+    margin-top: -14rem;
+    margin-bottom: -14rem;
+  }
+
+  .xl\:-mx-56 {
+    margin-left: -14rem;
+    margin-right: -14rem;
+  }
+
+  .xl\:-my-64 {
+    margin-top: -16rem;
+    margin-bottom: -16rem;
+  }
+
+  .xl\:-mx-64 {
+    margin-left: -16rem;
+    margin-right: -16rem;
+  }
+
+  .xl\:-my-px {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  .xl\:-mx-px {
+    margin-left: -1px;
+    margin-right: -1px;
+  }
+
+  .xl\:mt-0 {
+    margin-top: 0;
+  }
+
+  .xl\:mr-0 {
+    margin-right: 0;
+  }
+
+  .xl\:mb-0 {
+    margin-bottom: 0;
+  }
+
+  .xl\:ml-0 {
+    margin-left: 0;
+  }
+
+  .xl\:mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .xl\:mr-1 {
+    margin-right: 0.25rem;
+  }
+
+  .xl\:mb-1 {
+    margin-bottom: 0.25rem;
+  }
+
+  .xl\:ml-1 {
+    margin-left: 0.25rem;
+  }
+
+  .xl\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .xl\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
+  .xl\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .xl\:ml-2 {
+    margin-left: 0.5rem;
+  }
+
+  .xl\:mt-3 {
+    margin-top: 0.75rem;
+  }
+
+  .xl\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
+  .xl\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
+  .xl\:ml-3 {
+    margin-left: 0.75rem;
+  }
+
+  .xl\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .xl\:mr-4 {
+    margin-right: 1rem;
+  }
+
+  .xl\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .xl\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .xl\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .xl\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .xl\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
+  .xl\:ml-5 {
+    margin-left: 1.25rem;
+  }
+
+  .xl\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .xl\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
+  .xl\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .xl\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .xl\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .xl\:mr-8 {
+    margin-right: 2rem;
+  }
+
+  .xl\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .xl\:ml-8 {
+    margin-left: 2rem;
+  }
+
+  .xl\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .xl\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .xl\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .xl\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .xl\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .xl\:mr-12 {
+    margin-right: 3rem;
+  }
+
+  .xl\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
+  .xl\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .xl\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .xl\:mr-16 {
+    margin-right: 4rem;
+  }
+
+  .xl\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .xl\:ml-16 {
+    margin-left: 4rem;
+  }
+
+  .xl\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .xl\:mr-20 {
+    margin-right: 5rem;
+  }
+
+  .xl\:mb-20 {
+    margin-bottom: 5rem;
+  }
+
+  .xl\:ml-20 {
+    margin-left: 5rem;
+  }
+
+  .xl\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .xl\:mr-24 {
+    margin-right: 6rem;
+  }
+
+  .xl\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .xl\:ml-24 {
+    margin-left: 6rem;
+  }
+
+  .xl\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .xl\:mr-32 {
+    margin-right: 8rem;
+  }
+
+  .xl\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
+  .xl\:ml-32 {
+    margin-left: 8rem;
+  }
+
+  .xl\:mt-40 {
+    margin-top: 10rem;
+  }
+
+  .xl\:mr-40 {
+    margin-right: 10rem;
+  }
+
+  .xl\:mb-40 {
+    margin-bottom: 10rem;
+  }
+
+  .xl\:ml-40 {
+    margin-left: 10rem;
+  }
+
+  .xl\:mt-48 {
+    margin-top: 12rem;
+  }
+
+  .xl\:mr-48 {
+    margin-right: 12rem;
+  }
+
+  .xl\:mb-48 {
+    margin-bottom: 12rem;
+  }
+
+  .xl\:ml-48 {
+    margin-left: 12rem;
+  }
+
+  .xl\:mt-56 {
+    margin-top: 14rem;
+  }
+
+  .xl\:mr-56 {
+    margin-right: 14rem;
+  }
+
+  .xl\:mb-56 {
+    margin-bottom: 14rem;
+  }
+
+  .xl\:ml-56 {
+    margin-left: 14rem;
+  }
+
+  .xl\:mt-64 {
+    margin-top: 16rem;
+  }
+
+  .xl\:mr-64 {
+    margin-right: 16rem;
+  }
+
+  .xl\:mb-64 {
+    margin-bottom: 16rem;
+  }
+
+  .xl\:ml-64 {
+    margin-left: 16rem;
+  }
+
+  .xl\:mt-auto {
+    margin-top: auto;
+  }
+
+  .xl\:mr-auto {
+    margin-right: auto;
+  }
+
+  .xl\:mb-auto {
+    margin-bottom: auto;
+  }
+
+  .xl\:ml-auto {
+    margin-left: auto;
+  }
+
+  .xl\:mt-px {
+    margin-top: 1px;
+  }
+
+  .xl\:mr-px {
+    margin-right: 1px;
+  }
+
+  .xl\:mb-px {
+    margin-bottom: 1px;
+  }
+
+  .xl\:ml-px {
+    margin-left: 1px;
+  }
+
+  .xl\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .xl\:-mr-1 {
+    margin-right: -0.25rem;
+  }
+
+  .xl\:-mb-1 {
+    margin-bottom: -0.25rem;
+  }
+
+  .xl\:-ml-1 {
+    margin-left: -0.25rem;
+  }
+
+  .xl\:-mt-2 {
+    margin-top: -0.5rem;
+  }
+
+  .xl\:-mr-2 {
+    margin-right: -0.5rem;
+  }
+
+  .xl\:-mb-2 {
+    margin-bottom: -0.5rem;
+  }
+
+  .xl\:-ml-2 {
+    margin-left: -0.5rem;
+  }
+
+  .xl\:-mt-3 {
+    margin-top: -0.75rem;
+  }
+
+  .xl\:-mr-3 {
+    margin-right: -0.75rem;
+  }
+
+  .xl\:-mb-3 {
+    margin-bottom: -0.75rem;
+  }
+
+  .xl\:-ml-3 {
+    margin-left: -0.75rem;
+  }
+
+  .xl\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .xl\:-mr-4 {
+    margin-right: -1rem;
+  }
+
+  .xl\:-mb-4 {
+    margin-bottom: -1rem;
+  }
+
+  .xl\:-ml-4 {
+    margin-left: -1rem;
+  }
+
+  .xl\:-mt-5 {
+    margin-top: -1.25rem;
+  }
+
+  .xl\:-mr-5 {
+    margin-right: -1.25rem;
+  }
+
+  .xl\:-mb-5 {
+    margin-bottom: -1.25rem;
+  }
+
+  .xl\:-ml-5 {
+    margin-left: -1.25rem;
+  }
+
+  .xl\:-mt-6 {
+    margin-top: -1.5rem;
+  }
+
+  .xl\:-mr-6 {
+    margin-right: -1.5rem;
+  }
+
+  .xl\:-mb-6 {
+    margin-bottom: -1.5rem;
+  }
+
+  .xl\:-ml-6 {
+    margin-left: -1.5rem;
+  }
+
+  .xl\:-mt-8 {
+    margin-top: -2rem;
+  }
+
+  .xl\:-mr-8 {
+    margin-right: -2rem;
+  }
+
+  .xl\:-mb-8 {
+    margin-bottom: -2rem;
+  }
+
+  .xl\:-ml-8 {
+    margin-left: -2rem;
+  }
+
+  .xl\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .xl\:-mr-10 {
+    margin-right: -2.5rem;
+  }
+
+  .xl\:-mb-10 {
+    margin-bottom: -2.5rem;
+  }
+
+  .xl\:-ml-10 {
+    margin-left: -2.5rem;
+  }
+
+  .xl\:-mt-12 {
+    margin-top: -3rem;
+  }
+
+  .xl\:-mr-12 {
+    margin-right: -3rem;
+  }
+
+  .xl\:-mb-12 {
+    margin-bottom: -3rem;
+  }
+
+  .xl\:-ml-12 {
+    margin-left: -3rem;
+  }
+
+  .xl\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .xl\:-mr-16 {
+    margin-right: -4rem;
+  }
+
+  .xl\:-mb-16 {
+    margin-bottom: -4rem;
+  }
+
+  .xl\:-ml-16 {
+    margin-left: -4rem;
+  }
+
+  .xl\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .xl\:-mr-20 {
+    margin-right: -5rem;
+  }
+
+  .xl\:-mb-20 {
+    margin-bottom: -5rem;
+  }
+
+  .xl\:-ml-20 {
+    margin-left: -5rem;
+  }
+
+  .xl\:-mt-24 {
+    margin-top: -6rem;
+  }
+
+  .xl\:-mr-24 {
+    margin-right: -6rem;
+  }
+
+  .xl\:-mb-24 {
+    margin-bottom: -6rem;
+  }
+
+  .xl\:-ml-24 {
+    margin-left: -6rem;
+  }
+
+  .xl\:-mt-32 {
+    margin-top: -8rem;
+  }
+
+  .xl\:-mr-32 {
+    margin-right: -8rem;
+  }
+
+  .xl\:-mb-32 {
+    margin-bottom: -8rem;
+  }
+
+  .xl\:-ml-32 {
+    margin-left: -8rem;
+  }
+
+  .xl\:-mt-40 {
+    margin-top: -10rem;
+  }
+
+  .xl\:-mr-40 {
+    margin-right: -10rem;
+  }
+
+  .xl\:-mb-40 {
+    margin-bottom: -10rem;
+  }
+
+  .xl\:-ml-40 {
+    margin-left: -10rem;
+  }
+
+  .xl\:-mt-48 {
+    margin-top: -12rem;
+  }
+
+  .xl\:-mr-48 {
+    margin-right: -12rem;
+  }
+
+  .xl\:-mb-48 {
+    margin-bottom: -12rem;
+  }
+
+  .xl\:-ml-48 {
+    margin-left: -12rem;
+  }
+
+  .xl\:-mt-56 {
+    margin-top: -14rem;
+  }
+
+  .xl\:-mr-56 {
+    margin-right: -14rem;
+  }
+
+  .xl\:-mb-56 {
+    margin-bottom: -14rem;
+  }
+
+  .xl\:-ml-56 {
+    margin-left: -14rem;
+  }
+
+  .xl\:-mt-64 {
+    margin-top: -16rem;
+  }
+
+  .xl\:-mr-64 {
+    margin-right: -16rem;
+  }
+
+  .xl\:-mb-64 {
+    margin-bottom: -16rem;
+  }
+
+  .xl\:-ml-64 {
+    margin-left: -16rem;
+  }
+
+  .xl\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .xl\:-mr-px {
+    margin-right: -1px;
+  }
+
+  .xl\:-mb-px {
+    margin-bottom: -1px;
+  }
+
+  .xl\:-ml-px {
+    margin-left: -1px;
+  }
+
+  .xl\:max-h-full {
+    max-height: 100%;
+  }
+
+  .xl\:max-h-screen {
+    max-height: 100vh;
+  }
+
+  .xl\:max-w-xs {
+    max-width: 20rem;
+  }
+
+  .xl\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .xl\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .xl\:max-w-lg {
+    max-width: 32rem;
+  }
+
+  .xl\:max-w-xl {
+    max-width: 36rem;
+  }
+
+  .xl\:max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .xl\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .xl\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .xl\:max-w-5xl {
+    max-width: 64rem;
+  }
+
+  .xl\:max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .xl\:max-w-full {
+    max-width: 100%;
+  }
+
+  .xl\:min-h-0 {
+    min-height: 0;
+  }
+
+  .xl\:min-h-full {
+    min-height: 100%;
+  }
+
+  .xl\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .xl\:min-w-0 {
+    min-width: 0;
+  }
+
+  .xl\:min-w-full {
+    min-width: 100%;
+  }
+
+  .xl\:object-contain {
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .xl\:object-cover {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+  .xl\:object-fill {
+    -o-object-fit: fill;
+       object-fit: fill;
+  }
+
+  .xl\:object-none {
+    -o-object-fit: none;
+       object-fit: none;
+  }
+
+  .xl\:object-scale-down {
+    -o-object-fit: scale-down;
+       object-fit: scale-down;
+  }
+
+  .xl\:object-bottom {
+    -o-object-position: bottom;
+       object-position: bottom;
+  }
+
+  .xl\:object-center {
+    -o-object-position: center;
+       object-position: center;
+  }
+
+  .xl\:object-left {
+    -o-object-position: left;
+       object-position: left;
+  }
+
+  .xl\:object-left-bottom {
+    -o-object-position: left bottom;
+       object-position: left bottom;
+  }
+
+  .xl\:object-left-top {
+    -o-object-position: left top;
+       object-position: left top;
+  }
+
+  .xl\:object-right {
+    -o-object-position: right;
+       object-position: right;
+  }
+
+  .xl\:object-right-bottom {
+    -o-object-position: right bottom;
+       object-position: right bottom;
+  }
+
+  .xl\:object-right-top {
+    -o-object-position: right top;
+       object-position: right top;
+  }
+
+  .xl\:object-top {
+    -o-object-position: top;
+       object-position: top;
+  }
+
+  .xl\:opacity-0 {
+    opacity: 0;
+  }
+
+  .xl\:opacity-25 {
+    opacity: 0.25;
+  }
+
+  .xl\:opacity-50 {
+    opacity: 0.5;
+  }
+
+  .xl\:opacity-75 {
+    opacity: 0.75;
+  }
+
+  .xl\:opacity-100 {
+    opacity: 1;
+  }
+
+  .xl\:hover\:opacity-0:hover {
+    opacity: 0;
+  }
+
+  .xl\:hover\:opacity-25:hover {
+    opacity: 0.25;
+  }
+
+  .xl\:hover\:opacity-50:hover {
+    opacity: 0.5;
+  }
+
+  .xl\:hover\:opacity-75:hover {
+    opacity: 0.75;
+  }
+
+  .xl\:hover\:opacity-100:hover {
+    opacity: 1;
+  }
+
+  .xl\:focus\:opacity-0:focus {
+    opacity: 0;
+  }
+
+  .xl\:focus\:opacity-25:focus {
+    opacity: 0.25;
+  }
+
+  .xl\:focus\:opacity-50:focus {
+    opacity: 0.5;
+  }
+
+  .xl\:focus\:opacity-75:focus {
+    opacity: 0.75;
+  }
+
+  .xl\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
+
+  .xl\:outline-none {
+    outline: 0;
+  }
+
+  .xl\:focus\:outline-none:focus {
+    outline: 0;
+  }
+
+  .xl\:overflow-auto {
+    overflow: auto;
+  }
+
+  .xl\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .xl\:overflow-visible {
+    overflow: visible;
+  }
+
+  .xl\:overflow-scroll {
+    overflow: scroll;
+  }
+
+  .xl\:overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .xl\:overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .xl\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .xl\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .xl\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .xl\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
+  .xl\:overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .xl\:overflow-y-scroll {
+    overflow-y: scroll;
+  }
+
+  .xl\:scrolling-touch {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .xl\:scrolling-auto {
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .xl\:p-0 {
+    padding: 0;
+  }
+
+  .xl\:p-1 {
+    padding: 0.25rem;
+  }
+
+  .xl\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .xl\:p-3 {
+    padding: 0.75rem;
+  }
+
+  .xl\:p-4 {
+    padding: 1rem;
+  }
+
+  .xl\:p-5 {
+    padding: 1.25rem;
+  }
+
+  .xl\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .xl\:p-8 {
+    padding: 2rem;
+  }
+
+  .xl\:p-10 {
+    padding: 2.5rem;
+  }
+
+  .xl\:p-12 {
+    padding: 3rem;
+  }
+
+  .xl\:p-16 {
+    padding: 4rem;
+  }
+
+  .xl\:p-20 {
+    padding: 5rem;
+  }
+
+  .xl\:p-24 {
+    padding: 6rem;
+  }
+
+  .xl\:p-32 {
+    padding: 8rem;
+  }
+
+  .xl\:p-40 {
+    padding: 10rem;
+  }
+
+  .xl\:p-48 {
+    padding: 12rem;
+  }
+
+  .xl\:p-56 {
+    padding: 14rem;
+  }
+
+  .xl\:p-64 {
+    padding: 16rem;
+  }
+
+  .xl\:p-px {
+    padding: 1px;
+  }
+
+  .xl\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .xl\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .xl\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .xl\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .xl\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .xl\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .xl\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .xl\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .xl\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .xl\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .xl\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .xl\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .xl\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .xl\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .xl\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .xl\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .xl\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
+  .xl\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .xl\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .xl\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .xl\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .xl\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .xl\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
+  .xl\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .xl\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .xl\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
+  .xl\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .xl\:px-32 {
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+
+  .xl\:py-40 {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+  }
+
+  .xl\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
+  .xl\:py-48 {
+    padding-top: 12rem;
+    padding-bottom: 12rem;
+  }
+
+  .xl\:px-48 {
+    padding-left: 12rem;
+    padding-right: 12rem;
+  }
+
+  .xl\:py-56 {
+    padding-top: 14rem;
+    padding-bottom: 14rem;
+  }
+
+  .xl\:px-56 {
+    padding-left: 14rem;
+    padding-right: 14rem;
+  }
+
+  .xl\:py-64 {
+    padding-top: 16rem;
+    padding-bottom: 16rem;
+  }
+
+  .xl\:px-64 {
+    padding-left: 16rem;
+    padding-right: 16rem;
+  }
+
+  .xl\:py-px {
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .xl\:px-px {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .xl\:pt-0 {
+    padding-top: 0;
+  }
+
+  .xl\:pr-0 {
+    padding-right: 0;
+  }
+
+  .xl\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .xl\:pl-0 {
+    padding-left: 0;
+  }
+
+  .xl\:pt-1 {
+    padding-top: 0.25rem;
+  }
+
+  .xl\:pr-1 {
+    padding-right: 0.25rem;
+  }
+
+  .xl\:pb-1 {
+    padding-bottom: 0.25rem;
+  }
+
+  .xl\:pl-1 {
+    padding-left: 0.25rem;
+  }
+
+  .xl\:pt-2 {
+    padding-top: 0.5rem;
+  }
+
+  .xl\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .xl\:pb-2 {
+    padding-bottom: 0.5rem;
+  }
+
+  .xl\:pl-2 {
+    padding-left: 0.5rem;
+  }
+
+  .xl\:pt-3 {
+    padding-top: 0.75rem;
+  }
+
+  .xl\:pr-3 {
+    padding-right: 0.75rem;
+  }
+
+  .xl\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
+  .xl\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
+  .xl\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .xl\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .xl\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .xl\:pl-4 {
+    padding-left: 1rem;
+  }
+
+  .xl\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .xl\:pr-5 {
+    padding-right: 1.25rem;
+  }
+
+  .xl\:pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
+  .xl\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .xl\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .xl\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .xl\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
+  .xl\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .xl\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .xl\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .xl\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .xl\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .xl\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
+  .xl\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
+  .xl\:pb-10 {
+    padding-bottom: 2.5rem;
+  }
+
+  .xl\:pl-10 {
+    padding-left: 2.5rem;
+  }
+
+  .xl\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .xl\:pr-12 {
+    padding-right: 3rem;
+  }
+
+  .xl\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
+  .xl\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .xl\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .xl\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .xl\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .xl\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .xl\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .xl\:pr-20 {
+    padding-right: 5rem;
+  }
+
+  .xl\:pb-20 {
+    padding-bottom: 5rem;
+  }
+
+  .xl\:pl-20 {
+    padding-left: 5rem;
+  }
+
+  .xl\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .xl\:pr-24 {
+    padding-right: 6rem;
+  }
+
+  .xl\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .xl\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .xl\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .xl\:pr-32 {
+    padding-right: 8rem;
+  }
+
+  .xl\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
+  .xl\:pl-32 {
+    padding-left: 8rem;
+  }
+
+  .xl\:pt-40 {
+    padding-top: 10rem;
+  }
+
+  .xl\:pr-40 {
+    padding-right: 10rem;
+  }
+
+  .xl\:pb-40 {
+    padding-bottom: 10rem;
+  }
+
+  .xl\:pl-40 {
+    padding-left: 10rem;
+  }
+
+  .xl\:pt-48 {
+    padding-top: 12rem;
+  }
+
+  .xl\:pr-48 {
+    padding-right: 12rem;
+  }
+
+  .xl\:pb-48 {
+    padding-bottom: 12rem;
+  }
+
+  .xl\:pl-48 {
+    padding-left: 12rem;
+  }
+
+  .xl\:pt-56 {
+    padding-top: 14rem;
+  }
+
+  .xl\:pr-56 {
+    padding-right: 14rem;
+  }
+
+  .xl\:pb-56 {
+    padding-bottom: 14rem;
+  }
+
+  .xl\:pl-56 {
+    padding-left: 14rem;
+  }
+
+  .xl\:pt-64 {
+    padding-top: 16rem;
+  }
+
+  .xl\:pr-64 {
+    padding-right: 16rem;
+  }
+
+  .xl\:pb-64 {
+    padding-bottom: 16rem;
+  }
+
+  .xl\:pl-64 {
+    padding-left: 16rem;
+  }
+
+  .xl\:pt-px {
+    padding-top: 1px;
+  }
+
+  .xl\:pr-px {
+    padding-right: 1px;
+  }
+
+  .xl\:pb-px {
+    padding-bottom: 1px;
+  }
+
+  .xl\:pl-px {
+    padding-left: 1px;
+  }
+
+  .xl\:placeholder-transparent::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .xl\:placeholder-transparent::-moz-placeholder {
+    color: transparent;
+  }
+
+  .xl\:placeholder-transparent:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .xl\:placeholder-transparent::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .xl\:placeholder-transparent::placeholder {
+    color: transparent;
+  }
+
+  .xl\:placeholder-black::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .xl\:placeholder-black::-moz-placeholder {
+    color: #000;
+  }
+
+  .xl\:placeholder-black:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .xl\:placeholder-black::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .xl\:placeholder-black::placeholder {
+    color: #000;
+  }
+
+  .xl\:placeholder-white::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .xl\:placeholder-white::-moz-placeholder {
+    color: #fff;
+  }
+
+  .xl\:placeholder-white:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .xl\:placeholder-white::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .xl\:placeholder-white::placeholder {
+    color: #fff;
+  }
+
+  .xl\:placeholder-gray-100::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:placeholder-gray-100::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:placeholder-gray-100:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:placeholder-gray-100::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:placeholder-gray-100::placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:placeholder-gray-200::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:placeholder-gray-200::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:placeholder-gray-200:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:placeholder-gray-200::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:placeholder-gray-200::placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:placeholder-gray-300::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:placeholder-gray-300::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:placeholder-gray-300:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:placeholder-gray-300::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:placeholder-gray-300::placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:placeholder-gray-400::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:placeholder-gray-400::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:placeholder-gray-400:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:placeholder-gray-400::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:placeholder-gray-400::placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:placeholder-gray-500::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:placeholder-gray-500::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:placeholder-gray-500:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:placeholder-gray-500::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:placeholder-gray-500::placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:placeholder-gray-600::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .xl\:placeholder-gray-600::-moz-placeholder {
+    color: #718096;
+  }
+
+  .xl\:placeholder-gray-600:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .xl\:placeholder-gray-600::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .xl\:placeholder-gray-600::placeholder {
+    color: #718096;
+  }
+
+  .xl\:placeholder-gray-700::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:placeholder-gray-700::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:placeholder-gray-700:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:placeholder-gray-700::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:placeholder-gray-700::placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:placeholder-gray-800::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:placeholder-gray-800::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:placeholder-gray-800:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:placeholder-gray-800::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:placeholder-gray-800::placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:placeholder-gray-900::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:placeholder-gray-900::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:placeholder-gray-900:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:placeholder-gray-900::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:placeholder-gray-900::placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:placeholder-red-100::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:placeholder-red-100::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:placeholder-red-100:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:placeholder-red-100::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:placeholder-red-100::placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:placeholder-red-200::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:placeholder-red-200::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:placeholder-red-200:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:placeholder-red-200::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:placeholder-red-200::placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:placeholder-red-300::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:placeholder-red-300::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:placeholder-red-300:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:placeholder-red-300::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:placeholder-red-300::placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:placeholder-red-400::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:placeholder-red-400::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:placeholder-red-400:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:placeholder-red-400::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:placeholder-red-400::placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:placeholder-red-500::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:placeholder-red-500::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:placeholder-red-500:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:placeholder-red-500::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:placeholder-red-500::placeholder {
+    color: #f56565;
+  }
+
+  .xl\:placeholder-red-600::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:placeholder-red-600::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:placeholder-red-600:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:placeholder-red-600::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:placeholder-red-600::placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:placeholder-red-700::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:placeholder-red-700::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:placeholder-red-700:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:placeholder-red-700::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:placeholder-red-700::placeholder {
+    color: #c53030;
+  }
+
+  .xl\:placeholder-red-800::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:placeholder-red-800::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:placeholder-red-800:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:placeholder-red-800::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:placeholder-red-800::placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:placeholder-red-900::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:placeholder-red-900::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:placeholder-red-900:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:placeholder-red-900::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:placeholder-red-900::placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:placeholder-orange-100::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:placeholder-orange-100::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:placeholder-orange-100:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:placeholder-orange-100::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:placeholder-orange-100::placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:placeholder-orange-200::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:placeholder-orange-200::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:placeholder-orange-200:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:placeholder-orange-200::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:placeholder-orange-200::placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:placeholder-orange-300::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:placeholder-orange-300::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:placeholder-orange-300:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:placeholder-orange-300::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:placeholder-orange-300::placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:placeholder-orange-400::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:placeholder-orange-400::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:placeholder-orange-400:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:placeholder-orange-400::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:placeholder-orange-400::placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:placeholder-orange-500::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:placeholder-orange-500::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:placeholder-orange-500:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:placeholder-orange-500::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:placeholder-orange-500::placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:placeholder-orange-600::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:placeholder-orange-600::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:placeholder-orange-600:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:placeholder-orange-600::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:placeholder-orange-600::placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:placeholder-orange-700::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:placeholder-orange-700::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:placeholder-orange-700:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:placeholder-orange-700::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:placeholder-orange-700::placeholder {
+    color: #c05621;
+  }
+
+  .xl\:placeholder-orange-800::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:placeholder-orange-800::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:placeholder-orange-800:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:placeholder-orange-800::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:placeholder-orange-800::placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:placeholder-orange-900::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:placeholder-orange-900::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:placeholder-orange-900:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:placeholder-orange-900::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:placeholder-orange-900::placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:placeholder-yellow-100::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:placeholder-yellow-100::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:placeholder-yellow-100:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:placeholder-yellow-100::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:placeholder-yellow-100::placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:placeholder-yellow-200::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:placeholder-yellow-200::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:placeholder-yellow-200:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:placeholder-yellow-200::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:placeholder-yellow-200::placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:placeholder-yellow-300::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:placeholder-yellow-300::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:placeholder-yellow-300:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:placeholder-yellow-300::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:placeholder-yellow-300::placeholder {
+    color: #faf089;
+  }
+
+  .xl\:placeholder-yellow-400::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:placeholder-yellow-400::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:placeholder-yellow-400:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:placeholder-yellow-400::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:placeholder-yellow-400::placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:placeholder-yellow-500::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:placeholder-yellow-500::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:placeholder-yellow-500:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:placeholder-yellow-500::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:placeholder-yellow-500::placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:placeholder-yellow-600::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:placeholder-yellow-600::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:placeholder-yellow-600:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:placeholder-yellow-600::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:placeholder-yellow-600::placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:placeholder-yellow-700::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:placeholder-yellow-700::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:placeholder-yellow-700:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:placeholder-yellow-700::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:placeholder-yellow-700::placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:placeholder-yellow-800::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:placeholder-yellow-800::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:placeholder-yellow-800:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:placeholder-yellow-800::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:placeholder-yellow-800::placeholder {
+    color: #975a16;
+  }
+
+  .xl\:placeholder-yellow-900::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .xl\:placeholder-yellow-900::-moz-placeholder {
+    color: #744210;
+  }
+
+  .xl\:placeholder-yellow-900:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .xl\:placeholder-yellow-900::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .xl\:placeholder-yellow-900::placeholder {
+    color: #744210;
+  }
+
+  .xl\:placeholder-green-100::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:placeholder-green-100::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:placeholder-green-100:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:placeholder-green-100::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:placeholder-green-100::placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:placeholder-green-200::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:placeholder-green-200::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:placeholder-green-200:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:placeholder-green-200::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:placeholder-green-200::placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:placeholder-green-300::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:placeholder-green-300::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:placeholder-green-300:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:placeholder-green-300::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:placeholder-green-300::placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:placeholder-green-400::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:placeholder-green-400::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:placeholder-green-400:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:placeholder-green-400::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:placeholder-green-400::placeholder {
+    color: #68d391;
+  }
+
+  .xl\:placeholder-green-500::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:placeholder-green-500::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:placeholder-green-500:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:placeholder-green-500::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:placeholder-green-500::placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:placeholder-green-600::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:placeholder-green-600::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:placeholder-green-600:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:placeholder-green-600::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:placeholder-green-600::placeholder {
+    color: #38a169;
+  }
+
+  .xl\:placeholder-green-700::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:placeholder-green-700::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:placeholder-green-700:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:placeholder-green-700::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:placeholder-green-700::placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:placeholder-green-800::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .xl\:placeholder-green-800::-moz-placeholder {
+    color: #276749;
+  }
+
+  .xl\:placeholder-green-800:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .xl\:placeholder-green-800::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .xl\:placeholder-green-800::placeholder {
+    color: #276749;
+  }
+
+  .xl\:placeholder-green-900::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:placeholder-green-900::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:placeholder-green-900:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:placeholder-green-900::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:placeholder-green-900::placeholder {
+    color: #22543d;
+  }
+
+  .xl\:placeholder-teal-100::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:placeholder-teal-100::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:placeholder-teal-100:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:placeholder-teal-100::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:placeholder-teal-100::placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:placeholder-teal-200::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:placeholder-teal-200::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:placeholder-teal-200:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:placeholder-teal-200::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:placeholder-teal-200::placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:placeholder-teal-300::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:placeholder-teal-300::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:placeholder-teal-300:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:placeholder-teal-300::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:placeholder-teal-300::placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:placeholder-teal-400::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:placeholder-teal-400::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:placeholder-teal-400:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:placeholder-teal-400::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:placeholder-teal-400::placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:placeholder-teal-500::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:placeholder-teal-500::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:placeholder-teal-500:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:placeholder-teal-500::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:placeholder-teal-500::placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:placeholder-teal-600::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .xl\:placeholder-teal-600::-moz-placeholder {
+    color: #319795;
+  }
+
+  .xl\:placeholder-teal-600:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .xl\:placeholder-teal-600::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .xl\:placeholder-teal-600::placeholder {
+    color: #319795;
+  }
+
+  .xl\:placeholder-teal-700::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:placeholder-teal-700::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:placeholder-teal-700:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:placeholder-teal-700::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:placeholder-teal-700::placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:placeholder-teal-800::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:placeholder-teal-800::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:placeholder-teal-800:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:placeholder-teal-800::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:placeholder-teal-800::placeholder {
+    color: #285e61;
+  }
+
+  .xl\:placeholder-teal-900::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:placeholder-teal-900::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:placeholder-teal-900:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:placeholder-teal-900::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:placeholder-teal-900::placeholder {
+    color: #234e52;
+  }
+
+  .xl\:placeholder-blue-100::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:placeholder-blue-100::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:placeholder-blue-100:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:placeholder-blue-100::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:placeholder-blue-100::placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:placeholder-blue-200::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:placeholder-blue-200::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:placeholder-blue-200:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:placeholder-blue-200::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:placeholder-blue-200::placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:placeholder-blue-300::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:placeholder-blue-300::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:placeholder-blue-300:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:placeholder-blue-300::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:placeholder-blue-300::placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:placeholder-blue-400::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:placeholder-blue-400::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:placeholder-blue-400:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:placeholder-blue-400::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:placeholder-blue-400::placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:placeholder-blue-500::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:placeholder-blue-500::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:placeholder-blue-500:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:placeholder-blue-500::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:placeholder-blue-500::placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:placeholder-blue-600::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:placeholder-blue-600::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:placeholder-blue-600:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:placeholder-blue-600::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:placeholder-blue-600::placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:placeholder-blue-700::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:placeholder-blue-700::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:placeholder-blue-700:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:placeholder-blue-700::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:placeholder-blue-700::placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:placeholder-blue-800::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:placeholder-blue-800::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:placeholder-blue-800:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:placeholder-blue-800::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:placeholder-blue-800::placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:placeholder-blue-900::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:placeholder-blue-900::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:placeholder-blue-900:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:placeholder-blue-900::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:placeholder-blue-900::placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:placeholder-indigo-100::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:placeholder-indigo-100::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:placeholder-indigo-100:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:placeholder-indigo-100::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:placeholder-indigo-100::placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:placeholder-indigo-200::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:placeholder-indigo-200::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:placeholder-indigo-200:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:placeholder-indigo-200::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:placeholder-indigo-200::placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:placeholder-indigo-300::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:placeholder-indigo-300::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:placeholder-indigo-300:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:placeholder-indigo-300::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:placeholder-indigo-300::placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:placeholder-indigo-400::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:placeholder-indigo-400::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:placeholder-indigo-400:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:placeholder-indigo-400::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:placeholder-indigo-400::placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:placeholder-indigo-500::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:placeholder-indigo-500::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:placeholder-indigo-500:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:placeholder-indigo-500::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:placeholder-indigo-500::placeholder {
+    color: #667eea;
+  }
+
+  .xl\:placeholder-indigo-600::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:placeholder-indigo-600::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:placeholder-indigo-600:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:placeholder-indigo-600::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:placeholder-indigo-600::placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:placeholder-indigo-700::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:placeholder-indigo-700::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:placeholder-indigo-700:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:placeholder-indigo-700::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:placeholder-indigo-700::placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:placeholder-indigo-800::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .xl\:placeholder-indigo-800::-moz-placeholder {
+    color: #434190;
+  }
+
+  .xl\:placeholder-indigo-800:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .xl\:placeholder-indigo-800::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .xl\:placeholder-indigo-800::placeholder {
+    color: #434190;
+  }
+
+  .xl\:placeholder-indigo-900::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:placeholder-indigo-900::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:placeholder-indigo-900:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:placeholder-indigo-900::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:placeholder-indigo-900::placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:placeholder-purple-100::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:placeholder-purple-100::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:placeholder-purple-100:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:placeholder-purple-100::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:placeholder-purple-100::placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:placeholder-purple-200::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:placeholder-purple-200::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:placeholder-purple-200:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:placeholder-purple-200::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:placeholder-purple-200::placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:placeholder-purple-300::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:placeholder-purple-300::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:placeholder-purple-300:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:placeholder-purple-300::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:placeholder-purple-300::placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:placeholder-purple-400::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:placeholder-purple-400::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:placeholder-purple-400:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:placeholder-purple-400::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:placeholder-purple-400::placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:placeholder-purple-500::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:placeholder-purple-500::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:placeholder-purple-500:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:placeholder-purple-500::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:placeholder-purple-500::placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:placeholder-purple-600::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:placeholder-purple-600::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:placeholder-purple-600:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:placeholder-purple-600::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:placeholder-purple-600::placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:placeholder-purple-700::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:placeholder-purple-700::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:placeholder-purple-700:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:placeholder-purple-700::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:placeholder-purple-700::placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:placeholder-purple-800::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:placeholder-purple-800::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:placeholder-purple-800:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:placeholder-purple-800::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:placeholder-purple-800::placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:placeholder-purple-900::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:placeholder-purple-900::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:placeholder-purple-900:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:placeholder-purple-900::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:placeholder-purple-900::placeholder {
+    color: #44337a;
+  }
+
+  .xl\:placeholder-pink-100::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:placeholder-pink-100::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:placeholder-pink-100:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:placeholder-pink-100::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:placeholder-pink-100::placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:placeholder-pink-200::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:placeholder-pink-200::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:placeholder-pink-200:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:placeholder-pink-200::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:placeholder-pink-200::placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:placeholder-pink-300::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:placeholder-pink-300::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:placeholder-pink-300:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:placeholder-pink-300::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:placeholder-pink-300::placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:placeholder-pink-400::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:placeholder-pink-400::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:placeholder-pink-400:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:placeholder-pink-400::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:placeholder-pink-400::placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:placeholder-pink-500::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:placeholder-pink-500::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:placeholder-pink-500:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:placeholder-pink-500::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:placeholder-pink-500::placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:placeholder-pink-600::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:placeholder-pink-600::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:placeholder-pink-600:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:placeholder-pink-600::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:placeholder-pink-600::placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:placeholder-pink-700::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:placeholder-pink-700::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:placeholder-pink-700:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:placeholder-pink-700::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:placeholder-pink-700::placeholder {
+    color: #b83280;
+  }
+
+  .xl\:placeholder-pink-800::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:placeholder-pink-800::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:placeholder-pink-800:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:placeholder-pink-800::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:placeholder-pink-800::placeholder {
+    color: #97266d;
+  }
+
+  .xl\:placeholder-pink-900::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .xl\:placeholder-pink-900::-moz-placeholder {
+    color: #702459;
+  }
+
+  .xl\:placeholder-pink-900:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .xl\:placeholder-pink-900::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .xl\:placeholder-pink-900::placeholder {
+    color: #702459;
+  }
+
+  .xl\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+
+  .xl\:focus\:placeholder-transparent:focus::-moz-placeholder {
+    color: transparent;
+  }
+
+  .xl\:focus\:placeholder-transparent:focus:-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .xl\:focus\:placeholder-transparent:focus::-ms-input-placeholder {
+    color: transparent;
+  }
+
+  .xl\:focus\:placeholder-transparent:focus::placeholder {
+    color: transparent;
+  }
+
+  .xl\:focus\:placeholder-black:focus::-webkit-input-placeholder {
+    color: #000;
+  }
+
+  .xl\:focus\:placeholder-black:focus::-moz-placeholder {
+    color: #000;
+  }
+
+  .xl\:focus\:placeholder-black:focus:-ms-input-placeholder {
+    color: #000;
+  }
+
+  .xl\:focus\:placeholder-black:focus::-ms-input-placeholder {
+    color: #000;
+  }
+
+  .xl\:focus\:placeholder-black:focus::placeholder {
+    color: #000;
+  }
+
+  .xl\:focus\:placeholder-white:focus::-webkit-input-placeholder {
+    color: #fff;
+  }
+
+  .xl\:focus\:placeholder-white:focus::-moz-placeholder {
+    color: #fff;
+  }
+
+  .xl\:focus\:placeholder-white:focus:-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .xl\:focus\:placeholder-white:focus::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  .xl\:focus\:placeholder-white:focus::placeholder {
+    color: #fff;
+  }
+
+  .xl\:focus\:placeholder-gray-100:focus::-webkit-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:focus\:placeholder-gray-100:focus::-moz-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:focus\:placeholder-gray-100:focus:-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:focus\:placeholder-gray-100:focus::-ms-input-placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:focus\:placeholder-gray-100:focus::placeholder {
+    color: #f7fafc;
+  }
+
+  .xl\:focus\:placeholder-gray-200:focus::-webkit-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:focus\:placeholder-gray-200:focus::-moz-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:focus\:placeholder-gray-200:focus:-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:focus\:placeholder-gray-200:focus::-ms-input-placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:focus\:placeholder-gray-200:focus::placeholder {
+    color: #edf2f7;
+  }
+
+  .xl\:focus\:placeholder-gray-300:focus::-webkit-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:focus\:placeholder-gray-300:focus::-moz-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:focus\:placeholder-gray-300:focus:-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:focus\:placeholder-gray-300:focus::-ms-input-placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:focus\:placeholder-gray-300:focus::placeholder {
+    color: #e2e8f0;
+  }
+
+  .xl\:focus\:placeholder-gray-400:focus::-webkit-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:focus\:placeholder-gray-400:focus::-moz-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:focus\:placeholder-gray-400:focus:-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:focus\:placeholder-gray-400:focus::-ms-input-placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:focus\:placeholder-gray-400:focus::placeholder {
+    color: #cbd5e0;
+  }
+
+  .xl\:focus\:placeholder-gray-500:focus::-webkit-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:focus\:placeholder-gray-500:focus::-moz-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:focus\:placeholder-gray-500:focus:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:focus\:placeholder-gray-500:focus::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:focus\:placeholder-gray-500:focus::placeholder {
+    color: #a0aec0;
+  }
+
+  .xl\:focus\:placeholder-gray-600:focus::-webkit-input-placeholder {
+    color: #718096;
+  }
+
+  .xl\:focus\:placeholder-gray-600:focus::-moz-placeholder {
+    color: #718096;
+  }
+
+  .xl\:focus\:placeholder-gray-600:focus:-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .xl\:focus\:placeholder-gray-600:focus::-ms-input-placeholder {
+    color: #718096;
+  }
+
+  .xl\:focus\:placeholder-gray-600:focus::placeholder {
+    color: #718096;
+  }
+
+  .xl\:focus\:placeholder-gray-700:focus::-webkit-input-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:focus\:placeholder-gray-700:focus::-moz-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:focus\:placeholder-gray-700:focus:-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:focus\:placeholder-gray-700:focus::-ms-input-placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:focus\:placeholder-gray-700:focus::placeholder {
+    color: #4a5568;
+  }
+
+  .xl\:focus\:placeholder-gray-800:focus::-webkit-input-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:focus\:placeholder-gray-800:focus::-moz-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:focus\:placeholder-gray-800:focus:-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:focus\:placeholder-gray-800:focus::-ms-input-placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:focus\:placeholder-gray-800:focus::placeholder {
+    color: #2d3748;
+  }
+
+  .xl\:focus\:placeholder-gray-900:focus::-webkit-input-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:focus\:placeholder-gray-900:focus::-moz-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:focus\:placeholder-gray-900:focus:-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:focus\:placeholder-gray-900:focus::-ms-input-placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:focus\:placeholder-gray-900:focus::placeholder {
+    color: #1a202c;
+  }
+
+  .xl\:focus\:placeholder-red-100:focus::-webkit-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:focus\:placeholder-red-100:focus::-moz-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:focus\:placeholder-red-100:focus:-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:focus\:placeholder-red-100:focus::-ms-input-placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:focus\:placeholder-red-100:focus::placeholder {
+    color: #fff5f5;
+  }
+
+  .xl\:focus\:placeholder-red-200:focus::-webkit-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:focus\:placeholder-red-200:focus::-moz-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:focus\:placeholder-red-200:focus:-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:focus\:placeholder-red-200:focus::-ms-input-placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:focus\:placeholder-red-200:focus::placeholder {
+    color: #fed7d7;
+  }
+
+  .xl\:focus\:placeholder-red-300:focus::-webkit-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:focus\:placeholder-red-300:focus::-moz-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:focus\:placeholder-red-300:focus:-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:focus\:placeholder-red-300:focus::-ms-input-placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:focus\:placeholder-red-300:focus::placeholder {
+    color: #feb2b2;
+  }
+
+  .xl\:focus\:placeholder-red-400:focus::-webkit-input-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:focus\:placeholder-red-400:focus::-moz-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:focus\:placeholder-red-400:focus:-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:focus\:placeholder-red-400:focus::-ms-input-placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:focus\:placeholder-red-400:focus::placeholder {
+    color: #fc8181;
+  }
+
+  .xl\:focus\:placeholder-red-500:focus::-webkit-input-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:focus\:placeholder-red-500:focus::-moz-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:focus\:placeholder-red-500:focus:-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:focus\:placeholder-red-500:focus::-ms-input-placeholder {
+    color: #f56565;
+  }
+
+  .xl\:focus\:placeholder-red-500:focus::placeholder {
+    color: #f56565;
+  }
+
+  .xl\:focus\:placeholder-red-600:focus::-webkit-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:focus\:placeholder-red-600:focus::-moz-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:focus\:placeholder-red-600:focus:-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:focus\:placeholder-red-600:focus::-ms-input-placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:focus\:placeholder-red-600:focus::placeholder {
+    color: #e53e3e;
+  }
+
+  .xl\:focus\:placeholder-red-700:focus::-webkit-input-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:focus\:placeholder-red-700:focus::-moz-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:focus\:placeholder-red-700:focus:-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:focus\:placeholder-red-700:focus::-ms-input-placeholder {
+    color: #c53030;
+  }
+
+  .xl\:focus\:placeholder-red-700:focus::placeholder {
+    color: #c53030;
+  }
+
+  .xl\:focus\:placeholder-red-800:focus::-webkit-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:focus\:placeholder-red-800:focus::-moz-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:focus\:placeholder-red-800:focus:-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:focus\:placeholder-red-800:focus::-ms-input-placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:focus\:placeholder-red-800:focus::placeholder {
+    color: #9b2c2c;
+  }
+
+  .xl\:focus\:placeholder-red-900:focus::-webkit-input-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:focus\:placeholder-red-900:focus::-moz-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:focus\:placeholder-red-900:focus:-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:focus\:placeholder-red-900:focus::-ms-input-placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:focus\:placeholder-red-900:focus::placeholder {
+    color: #742a2a;
+  }
+
+  .xl\:focus\:placeholder-orange-100:focus::-webkit-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:focus\:placeholder-orange-100:focus::-moz-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:focus\:placeholder-orange-100:focus:-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:focus\:placeholder-orange-100:focus::-ms-input-placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:focus\:placeholder-orange-100:focus::placeholder {
+    color: #fffaf0;
+  }
+
+  .xl\:focus\:placeholder-orange-200:focus::-webkit-input-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:focus\:placeholder-orange-200:focus::-moz-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:focus\:placeholder-orange-200:focus:-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:focus\:placeholder-orange-200:focus::-ms-input-placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:focus\:placeholder-orange-200:focus::placeholder {
+    color: #feebc8;
+  }
+
+  .xl\:focus\:placeholder-orange-300:focus::-webkit-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:focus\:placeholder-orange-300:focus::-moz-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:focus\:placeholder-orange-300:focus:-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:focus\:placeholder-orange-300:focus::-ms-input-placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:focus\:placeholder-orange-300:focus::placeholder {
+    color: #fbd38d;
+  }
+
+  .xl\:focus\:placeholder-orange-400:focus::-webkit-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:focus\:placeholder-orange-400:focus::-moz-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:focus\:placeholder-orange-400:focus:-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:focus\:placeholder-orange-400:focus::-ms-input-placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:focus\:placeholder-orange-400:focus::placeholder {
+    color: #f6ad55;
+  }
+
+  .xl\:focus\:placeholder-orange-500:focus::-webkit-input-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:focus\:placeholder-orange-500:focus::-moz-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:focus\:placeholder-orange-500:focus:-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:focus\:placeholder-orange-500:focus::-ms-input-placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:focus\:placeholder-orange-500:focus::placeholder {
+    color: #ed8936;
+  }
+
+  .xl\:focus\:placeholder-orange-600:focus::-webkit-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:focus\:placeholder-orange-600:focus::-moz-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:focus\:placeholder-orange-600:focus:-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:focus\:placeholder-orange-600:focus::-ms-input-placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:focus\:placeholder-orange-600:focus::placeholder {
+    color: #dd6b20;
+  }
+
+  .xl\:focus\:placeholder-orange-700:focus::-webkit-input-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:focus\:placeholder-orange-700:focus::-moz-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:focus\:placeholder-orange-700:focus:-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:focus\:placeholder-orange-700:focus::-ms-input-placeholder {
+    color: #c05621;
+  }
+
+  .xl\:focus\:placeholder-orange-700:focus::placeholder {
+    color: #c05621;
+  }
+
+  .xl\:focus\:placeholder-orange-800:focus::-webkit-input-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:focus\:placeholder-orange-800:focus::-moz-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:focus\:placeholder-orange-800:focus:-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:focus\:placeholder-orange-800:focus::-ms-input-placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:focus\:placeholder-orange-800:focus::placeholder {
+    color: #9c4221;
+  }
+
+  .xl\:focus\:placeholder-orange-900:focus::-webkit-input-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:focus\:placeholder-orange-900:focus::-moz-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:focus\:placeholder-orange-900:focus:-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:focus\:placeholder-orange-900:focus::-ms-input-placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:focus\:placeholder-orange-900:focus::placeholder {
+    color: #7b341e;
+  }
+
+  .xl\:focus\:placeholder-yellow-100:focus::-webkit-input-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:focus\:placeholder-yellow-100:focus::-moz-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:focus\:placeholder-yellow-100:focus:-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:focus\:placeholder-yellow-100:focus::-ms-input-placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:focus\:placeholder-yellow-100:focus::placeholder {
+    color: #fffff0;
+  }
+
+  .xl\:focus\:placeholder-yellow-200:focus::-webkit-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:focus\:placeholder-yellow-200:focus::-moz-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:focus\:placeholder-yellow-200:focus:-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:focus\:placeholder-yellow-200:focus::-ms-input-placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:focus\:placeholder-yellow-200:focus::placeholder {
+    color: #fefcbf;
+  }
+
+  .xl\:focus\:placeholder-yellow-300:focus::-webkit-input-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:focus\:placeholder-yellow-300:focus::-moz-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:focus\:placeholder-yellow-300:focus:-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:focus\:placeholder-yellow-300:focus::-ms-input-placeholder {
+    color: #faf089;
+  }
+
+  .xl\:focus\:placeholder-yellow-300:focus::placeholder {
+    color: #faf089;
+  }
+
+  .xl\:focus\:placeholder-yellow-400:focus::-webkit-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:focus\:placeholder-yellow-400:focus::-moz-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:focus\:placeholder-yellow-400:focus:-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:focus\:placeholder-yellow-400:focus::-ms-input-placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:focus\:placeholder-yellow-400:focus::placeholder {
+    color: #f6e05e;
+  }
+
+  .xl\:focus\:placeholder-yellow-500:focus::-webkit-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:focus\:placeholder-yellow-500:focus::-moz-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:focus\:placeholder-yellow-500:focus:-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:focus\:placeholder-yellow-500:focus::-ms-input-placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:focus\:placeholder-yellow-500:focus::placeholder {
+    color: #ecc94b;
+  }
+
+  .xl\:focus\:placeholder-yellow-600:focus::-webkit-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:focus\:placeholder-yellow-600:focus::-moz-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:focus\:placeholder-yellow-600:focus:-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:focus\:placeholder-yellow-600:focus::-ms-input-placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:focus\:placeholder-yellow-600:focus::placeholder {
+    color: #d69e2e;
+  }
+
+  .xl\:focus\:placeholder-yellow-700:focus::-webkit-input-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:focus\:placeholder-yellow-700:focus::-moz-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:focus\:placeholder-yellow-700:focus:-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:focus\:placeholder-yellow-700:focus::-ms-input-placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:focus\:placeholder-yellow-700:focus::placeholder {
+    color: #b7791f;
+  }
+
+  .xl\:focus\:placeholder-yellow-800:focus::-webkit-input-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:focus\:placeholder-yellow-800:focus::-moz-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:focus\:placeholder-yellow-800:focus:-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:focus\:placeholder-yellow-800:focus::-ms-input-placeholder {
+    color: #975a16;
+  }
+
+  .xl\:focus\:placeholder-yellow-800:focus::placeholder {
+    color: #975a16;
+  }
+
+  .xl\:focus\:placeholder-yellow-900:focus::-webkit-input-placeholder {
+    color: #744210;
+  }
+
+  .xl\:focus\:placeholder-yellow-900:focus::-moz-placeholder {
+    color: #744210;
+  }
+
+  .xl\:focus\:placeholder-yellow-900:focus:-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .xl\:focus\:placeholder-yellow-900:focus::-ms-input-placeholder {
+    color: #744210;
+  }
+
+  .xl\:focus\:placeholder-yellow-900:focus::placeholder {
+    color: #744210;
+  }
+
+  .xl\:focus\:placeholder-green-100:focus::-webkit-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:focus\:placeholder-green-100:focus::-moz-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:focus\:placeholder-green-100:focus:-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:focus\:placeholder-green-100:focus::-ms-input-placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:focus\:placeholder-green-100:focus::placeholder {
+    color: #f0fff4;
+  }
+
+  .xl\:focus\:placeholder-green-200:focus::-webkit-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:focus\:placeholder-green-200:focus::-moz-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:focus\:placeholder-green-200:focus:-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:focus\:placeholder-green-200:focus::-ms-input-placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:focus\:placeholder-green-200:focus::placeholder {
+    color: #c6f6d5;
+  }
+
+  .xl\:focus\:placeholder-green-300:focus::-webkit-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:focus\:placeholder-green-300:focus::-moz-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:focus\:placeholder-green-300:focus:-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:focus\:placeholder-green-300:focus::-ms-input-placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:focus\:placeholder-green-300:focus::placeholder {
+    color: #9ae6b4;
+  }
+
+  .xl\:focus\:placeholder-green-400:focus::-webkit-input-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:focus\:placeholder-green-400:focus::-moz-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:focus\:placeholder-green-400:focus:-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:focus\:placeholder-green-400:focus::-ms-input-placeholder {
+    color: #68d391;
+  }
+
+  .xl\:focus\:placeholder-green-400:focus::placeholder {
+    color: #68d391;
+  }
+
+  .xl\:focus\:placeholder-green-500:focus::-webkit-input-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:focus\:placeholder-green-500:focus::-moz-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:focus\:placeholder-green-500:focus:-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:focus\:placeholder-green-500:focus::-ms-input-placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:focus\:placeholder-green-500:focus::placeholder {
+    color: #48bb78;
+  }
+
+  .xl\:focus\:placeholder-green-600:focus::-webkit-input-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:focus\:placeholder-green-600:focus::-moz-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:focus\:placeholder-green-600:focus:-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:focus\:placeholder-green-600:focus::-ms-input-placeholder {
+    color: #38a169;
+  }
+
+  .xl\:focus\:placeholder-green-600:focus::placeholder {
+    color: #38a169;
+  }
+
+  .xl\:focus\:placeholder-green-700:focus::-webkit-input-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:focus\:placeholder-green-700:focus::-moz-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:focus\:placeholder-green-700:focus:-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:focus\:placeholder-green-700:focus::-ms-input-placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:focus\:placeholder-green-700:focus::placeholder {
+    color: #2f855a;
+  }
+
+  .xl\:focus\:placeholder-green-800:focus::-webkit-input-placeholder {
+    color: #276749;
+  }
+
+  .xl\:focus\:placeholder-green-800:focus::-moz-placeholder {
+    color: #276749;
+  }
+
+  .xl\:focus\:placeholder-green-800:focus:-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .xl\:focus\:placeholder-green-800:focus::-ms-input-placeholder {
+    color: #276749;
+  }
+
+  .xl\:focus\:placeholder-green-800:focus::placeholder {
+    color: #276749;
+  }
+
+  .xl\:focus\:placeholder-green-900:focus::-webkit-input-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:focus\:placeholder-green-900:focus::-moz-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:focus\:placeholder-green-900:focus:-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:focus\:placeholder-green-900:focus::-ms-input-placeholder {
+    color: #22543d;
+  }
+
+  .xl\:focus\:placeholder-green-900:focus::placeholder {
+    color: #22543d;
+  }
+
+  .xl\:focus\:placeholder-teal-100:focus::-webkit-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:focus\:placeholder-teal-100:focus::-moz-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:focus\:placeholder-teal-100:focus:-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:focus\:placeholder-teal-100:focus::-ms-input-placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:focus\:placeholder-teal-100:focus::placeholder {
+    color: #e6fffa;
+  }
+
+  .xl\:focus\:placeholder-teal-200:focus::-webkit-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:focus\:placeholder-teal-200:focus::-moz-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:focus\:placeholder-teal-200:focus:-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:focus\:placeholder-teal-200:focus::-ms-input-placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:focus\:placeholder-teal-200:focus::placeholder {
+    color: #b2f5ea;
+  }
+
+  .xl\:focus\:placeholder-teal-300:focus::-webkit-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:focus\:placeholder-teal-300:focus::-moz-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:focus\:placeholder-teal-300:focus:-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:focus\:placeholder-teal-300:focus::-ms-input-placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:focus\:placeholder-teal-300:focus::placeholder {
+    color: #81e6d9;
+  }
+
+  .xl\:focus\:placeholder-teal-400:focus::-webkit-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:focus\:placeholder-teal-400:focus::-moz-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:focus\:placeholder-teal-400:focus:-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:focus\:placeholder-teal-400:focus::-ms-input-placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:focus\:placeholder-teal-400:focus::placeholder {
+    color: #4fd1c5;
+  }
+
+  .xl\:focus\:placeholder-teal-500:focus::-webkit-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:focus\:placeholder-teal-500:focus::-moz-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:focus\:placeholder-teal-500:focus:-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:focus\:placeholder-teal-500:focus::-ms-input-placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:focus\:placeholder-teal-500:focus::placeholder {
+    color: #38b2ac;
+  }
+
+  .xl\:focus\:placeholder-teal-600:focus::-webkit-input-placeholder {
+    color: #319795;
+  }
+
+  .xl\:focus\:placeholder-teal-600:focus::-moz-placeholder {
+    color: #319795;
+  }
+
+  .xl\:focus\:placeholder-teal-600:focus:-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .xl\:focus\:placeholder-teal-600:focus::-ms-input-placeholder {
+    color: #319795;
+  }
+
+  .xl\:focus\:placeholder-teal-600:focus::placeholder {
+    color: #319795;
+  }
+
+  .xl\:focus\:placeholder-teal-700:focus::-webkit-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:focus\:placeholder-teal-700:focus::-moz-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:focus\:placeholder-teal-700:focus:-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:focus\:placeholder-teal-700:focus::-ms-input-placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:focus\:placeholder-teal-700:focus::placeholder {
+    color: #2c7a7b;
+  }
+
+  .xl\:focus\:placeholder-teal-800:focus::-webkit-input-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:focus\:placeholder-teal-800:focus::-moz-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:focus\:placeholder-teal-800:focus:-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:focus\:placeholder-teal-800:focus::-ms-input-placeholder {
+    color: #285e61;
+  }
+
+  .xl\:focus\:placeholder-teal-800:focus::placeholder {
+    color: #285e61;
+  }
+
+  .xl\:focus\:placeholder-teal-900:focus::-webkit-input-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:focus\:placeholder-teal-900:focus::-moz-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:focus\:placeholder-teal-900:focus:-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:focus\:placeholder-teal-900:focus::-ms-input-placeholder {
+    color: #234e52;
+  }
+
+  .xl\:focus\:placeholder-teal-900:focus::placeholder {
+    color: #234e52;
+  }
+
+  .xl\:focus\:placeholder-blue-100:focus::-webkit-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:focus\:placeholder-blue-100:focus::-moz-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:focus\:placeholder-blue-100:focus:-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:focus\:placeholder-blue-100:focus::-ms-input-placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:focus\:placeholder-blue-100:focus::placeholder {
+    color: #ebf8ff;
+  }
+
+  .xl\:focus\:placeholder-blue-200:focus::-webkit-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:focus\:placeholder-blue-200:focus::-moz-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:focus\:placeholder-blue-200:focus:-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:focus\:placeholder-blue-200:focus::-ms-input-placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:focus\:placeholder-blue-200:focus::placeholder {
+    color: #bee3f8;
+  }
+
+  .xl\:focus\:placeholder-blue-300:focus::-webkit-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:focus\:placeholder-blue-300:focus::-moz-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:focus\:placeholder-blue-300:focus:-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:focus\:placeholder-blue-300:focus::-ms-input-placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:focus\:placeholder-blue-300:focus::placeholder {
+    color: #90cdf4;
+  }
+
+  .xl\:focus\:placeholder-blue-400:focus::-webkit-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:focus\:placeholder-blue-400:focus::-moz-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:focus\:placeholder-blue-400:focus:-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:focus\:placeholder-blue-400:focus::-ms-input-placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:focus\:placeholder-blue-400:focus::placeholder {
+    color: #63b3ed;
+  }
+
+  .xl\:focus\:placeholder-blue-500:focus::-webkit-input-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:focus\:placeholder-blue-500:focus::-moz-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:focus\:placeholder-blue-500:focus:-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:focus\:placeholder-blue-500:focus::-ms-input-placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:focus\:placeholder-blue-500:focus::placeholder {
+    color: #4299e1;
+  }
+
+  .xl\:focus\:placeholder-blue-600:focus::-webkit-input-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:focus\:placeholder-blue-600:focus::-moz-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:focus\:placeholder-blue-600:focus:-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:focus\:placeholder-blue-600:focus::-ms-input-placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:focus\:placeholder-blue-600:focus::placeholder {
+    color: #3182ce;
+  }
+
+  .xl\:focus\:placeholder-blue-700:focus::-webkit-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:focus\:placeholder-blue-700:focus::-moz-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:focus\:placeholder-blue-700:focus:-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:focus\:placeholder-blue-700:focus::-ms-input-placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:focus\:placeholder-blue-700:focus::placeholder {
+    color: #2b6cb0;
+  }
+
+  .xl\:focus\:placeholder-blue-800:focus::-webkit-input-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:focus\:placeholder-blue-800:focus::-moz-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:focus\:placeholder-blue-800:focus:-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:focus\:placeholder-blue-800:focus::-ms-input-placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:focus\:placeholder-blue-800:focus::placeholder {
+    color: #2c5282;
+  }
+
+  .xl\:focus\:placeholder-blue-900:focus::-webkit-input-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:focus\:placeholder-blue-900:focus::-moz-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:focus\:placeholder-blue-900:focus:-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:focus\:placeholder-blue-900:focus::-ms-input-placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:focus\:placeholder-blue-900:focus::placeholder {
+    color: #2a4365;
+  }
+
+  .xl\:focus\:placeholder-indigo-100:focus::-webkit-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:focus\:placeholder-indigo-100:focus::-moz-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:focus\:placeholder-indigo-100:focus:-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:focus\:placeholder-indigo-100:focus::-ms-input-placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:focus\:placeholder-indigo-100:focus::placeholder {
+    color: #ebf4ff;
+  }
+
+  .xl\:focus\:placeholder-indigo-200:focus::-webkit-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:focus\:placeholder-indigo-200:focus::-moz-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:focus\:placeholder-indigo-200:focus:-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:focus\:placeholder-indigo-200:focus::-ms-input-placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:focus\:placeholder-indigo-200:focus::placeholder {
+    color: #c3dafe;
+  }
+
+  .xl\:focus\:placeholder-indigo-300:focus::-webkit-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:focus\:placeholder-indigo-300:focus::-moz-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:focus\:placeholder-indigo-300:focus:-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:focus\:placeholder-indigo-300:focus::-ms-input-placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:focus\:placeholder-indigo-300:focus::placeholder {
+    color: #a3bffa;
+  }
+
+  .xl\:focus\:placeholder-indigo-400:focus::-webkit-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:focus\:placeholder-indigo-400:focus::-moz-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:focus\:placeholder-indigo-400:focus:-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:focus\:placeholder-indigo-400:focus::-ms-input-placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:focus\:placeholder-indigo-400:focus::placeholder {
+    color: #7f9cf5;
+  }
+
+  .xl\:focus\:placeholder-indigo-500:focus::-webkit-input-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:focus\:placeholder-indigo-500:focus::-moz-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:focus\:placeholder-indigo-500:focus:-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:focus\:placeholder-indigo-500:focus::-ms-input-placeholder {
+    color: #667eea;
+  }
+
+  .xl\:focus\:placeholder-indigo-500:focus::placeholder {
+    color: #667eea;
+  }
+
+  .xl\:focus\:placeholder-indigo-600:focus::-webkit-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:focus\:placeholder-indigo-600:focus::-moz-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:focus\:placeholder-indigo-600:focus:-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:focus\:placeholder-indigo-600:focus::-ms-input-placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:focus\:placeholder-indigo-600:focus::placeholder {
+    color: #5a67d8;
+  }
+
+  .xl\:focus\:placeholder-indigo-700:focus::-webkit-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:focus\:placeholder-indigo-700:focus::-moz-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:focus\:placeholder-indigo-700:focus:-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:focus\:placeholder-indigo-700:focus::-ms-input-placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:focus\:placeholder-indigo-700:focus::placeholder {
+    color: #4c51bf;
+  }
+
+  .xl\:focus\:placeholder-indigo-800:focus::-webkit-input-placeholder {
+    color: #434190;
+  }
+
+  .xl\:focus\:placeholder-indigo-800:focus::-moz-placeholder {
+    color: #434190;
+  }
+
+  .xl\:focus\:placeholder-indigo-800:focus:-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .xl\:focus\:placeholder-indigo-800:focus::-ms-input-placeholder {
+    color: #434190;
+  }
+
+  .xl\:focus\:placeholder-indigo-800:focus::placeholder {
+    color: #434190;
+  }
+
+  .xl\:focus\:placeholder-indigo-900:focus::-webkit-input-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:focus\:placeholder-indigo-900:focus::-moz-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:focus\:placeholder-indigo-900:focus:-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:focus\:placeholder-indigo-900:focus::-ms-input-placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:focus\:placeholder-indigo-900:focus::placeholder {
+    color: #3c366b;
+  }
+
+  .xl\:focus\:placeholder-purple-100:focus::-webkit-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:focus\:placeholder-purple-100:focus::-moz-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:focus\:placeholder-purple-100:focus:-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:focus\:placeholder-purple-100:focus::-ms-input-placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:focus\:placeholder-purple-100:focus::placeholder {
+    color: #faf5ff;
+  }
+
+  .xl\:focus\:placeholder-purple-200:focus::-webkit-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:focus\:placeholder-purple-200:focus::-moz-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:focus\:placeholder-purple-200:focus:-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:focus\:placeholder-purple-200:focus::-ms-input-placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:focus\:placeholder-purple-200:focus::placeholder {
+    color: #e9d8fd;
+  }
+
+  .xl\:focus\:placeholder-purple-300:focus::-webkit-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:focus\:placeholder-purple-300:focus::-moz-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:focus\:placeholder-purple-300:focus:-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:focus\:placeholder-purple-300:focus::-ms-input-placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:focus\:placeholder-purple-300:focus::placeholder {
+    color: #d6bcfa;
+  }
+
+  .xl\:focus\:placeholder-purple-400:focus::-webkit-input-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:focus\:placeholder-purple-400:focus::-moz-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:focus\:placeholder-purple-400:focus:-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:focus\:placeholder-purple-400:focus::-ms-input-placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:focus\:placeholder-purple-400:focus::placeholder {
+    color: #b794f4;
+  }
+
+  .xl\:focus\:placeholder-purple-500:focus::-webkit-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:focus\:placeholder-purple-500:focus::-moz-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:focus\:placeholder-purple-500:focus:-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:focus\:placeholder-purple-500:focus::-ms-input-placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:focus\:placeholder-purple-500:focus::placeholder {
+    color: #9f7aea;
+  }
+
+  .xl\:focus\:placeholder-purple-600:focus::-webkit-input-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:focus\:placeholder-purple-600:focus::-moz-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:focus\:placeholder-purple-600:focus:-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:focus\:placeholder-purple-600:focus::-ms-input-placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:focus\:placeholder-purple-600:focus::placeholder {
+    color: #805ad5;
+  }
+
+  .xl\:focus\:placeholder-purple-700:focus::-webkit-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:focus\:placeholder-purple-700:focus::-moz-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:focus\:placeholder-purple-700:focus:-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:focus\:placeholder-purple-700:focus::-ms-input-placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:focus\:placeholder-purple-700:focus::placeholder {
+    color: #6b46c1;
+  }
+
+  .xl\:focus\:placeholder-purple-800:focus::-webkit-input-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:focus\:placeholder-purple-800:focus::-moz-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:focus\:placeholder-purple-800:focus:-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:focus\:placeholder-purple-800:focus::-ms-input-placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:focus\:placeholder-purple-800:focus::placeholder {
+    color: #553c9a;
+  }
+
+  .xl\:focus\:placeholder-purple-900:focus::-webkit-input-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:focus\:placeholder-purple-900:focus::-moz-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:focus\:placeholder-purple-900:focus:-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:focus\:placeholder-purple-900:focus::-ms-input-placeholder {
+    color: #44337a;
+  }
+
+  .xl\:focus\:placeholder-purple-900:focus::placeholder {
+    color: #44337a;
+  }
+
+  .xl\:focus\:placeholder-pink-100:focus::-webkit-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:focus\:placeholder-pink-100:focus::-moz-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:focus\:placeholder-pink-100:focus:-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:focus\:placeholder-pink-100:focus::-ms-input-placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:focus\:placeholder-pink-100:focus::placeholder {
+    color: #fff5f7;
+  }
+
+  .xl\:focus\:placeholder-pink-200:focus::-webkit-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:focus\:placeholder-pink-200:focus::-moz-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:focus\:placeholder-pink-200:focus:-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:focus\:placeholder-pink-200:focus::-ms-input-placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:focus\:placeholder-pink-200:focus::placeholder {
+    color: #fed7e2;
+  }
+
+  .xl\:focus\:placeholder-pink-300:focus::-webkit-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:focus\:placeholder-pink-300:focus::-moz-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:focus\:placeholder-pink-300:focus:-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:focus\:placeholder-pink-300:focus::-ms-input-placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:focus\:placeholder-pink-300:focus::placeholder {
+    color: #fbb6ce;
+  }
+
+  .xl\:focus\:placeholder-pink-400:focus::-webkit-input-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:focus\:placeholder-pink-400:focus::-moz-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:focus\:placeholder-pink-400:focus:-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:focus\:placeholder-pink-400:focus::-ms-input-placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:focus\:placeholder-pink-400:focus::placeholder {
+    color: #f687b3;
+  }
+
+  .xl\:focus\:placeholder-pink-500:focus::-webkit-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:focus\:placeholder-pink-500:focus::-moz-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:focus\:placeholder-pink-500:focus:-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:focus\:placeholder-pink-500:focus::-ms-input-placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:focus\:placeholder-pink-500:focus::placeholder {
+    color: #ed64a6;
+  }
+
+  .xl\:focus\:placeholder-pink-600:focus::-webkit-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:focus\:placeholder-pink-600:focus::-moz-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:focus\:placeholder-pink-600:focus:-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:focus\:placeholder-pink-600:focus::-ms-input-placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:focus\:placeholder-pink-600:focus::placeholder {
+    color: #d53f8c;
+  }
+
+  .xl\:focus\:placeholder-pink-700:focus::-webkit-input-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:focus\:placeholder-pink-700:focus::-moz-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:focus\:placeholder-pink-700:focus:-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:focus\:placeholder-pink-700:focus::-ms-input-placeholder {
+    color: #b83280;
+  }
+
+  .xl\:focus\:placeholder-pink-700:focus::placeholder {
+    color: #b83280;
+  }
+
+  .xl\:focus\:placeholder-pink-800:focus::-webkit-input-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:focus\:placeholder-pink-800:focus::-moz-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:focus\:placeholder-pink-800:focus:-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:focus\:placeholder-pink-800:focus::-ms-input-placeholder {
+    color: #97266d;
+  }
+
+  .xl\:focus\:placeholder-pink-800:focus::placeholder {
+    color: #97266d;
+  }
+
+  .xl\:focus\:placeholder-pink-900:focus::-webkit-input-placeholder {
+    color: #702459;
+  }
+
+  .xl\:focus\:placeholder-pink-900:focus::-moz-placeholder {
+    color: #702459;
+  }
+
+  .xl\:focus\:placeholder-pink-900:focus:-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .xl\:focus\:placeholder-pink-900:focus::-ms-input-placeholder {
+    color: #702459;
+  }
+
+  .xl\:focus\:placeholder-pink-900:focus::placeholder {
+    color: #702459;
+  }
+
+  .xl\:pointer-events-none {
+    pointer-events: none;
+  }
+
+  .xl\:pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  .xl\:static {
+    position: static;
+  }
+
+  .xl\:fixed {
+    position: fixed;
+  }
+
+  .xl\:absolute {
+    position: absolute;
+  }
+
+  .xl\:relative {
+    position: relative;
+  }
+
+  .xl\:sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  .xl\:inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .xl\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .xl\:inset-y-0 {
+    top: 0;
+    bottom: 0;
+  }
+
+  .xl\:inset-x-0 {
+    right: 0;
+    left: 0;
+  }
+
+  .xl\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .xl\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
+  .xl\:top-0 {
+    top: 0;
+  }
+
+  .xl\:right-0 {
+    right: 0;
+  }
+
+  .xl\:bottom-0 {
+    bottom: 0;
+  }
+
+  .xl\:left-0 {
+    left: 0;
+  }
+
+  .xl\:top-auto {
+    top: auto;
+  }
+
+  .xl\:right-auto {
+    right: auto;
+  }
+
+  .xl\:bottom-auto {
+    bottom: auto;
+  }
+
+  .xl\:left-auto {
+    left: auto;
+  }
+
+  .xl\:resize-none {
+    resize: none;
+  }
+
+  .xl\:resize-y {
+    resize: vertical;
+  }
+
+  .xl\:resize-x {
+    resize: horizontal;
+  }
+
+  .xl\:resize {
+    resize: both;
+  }
+
+  .xl\:shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:shadow-md {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:shadow-lg {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .xl\:shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .xl\:shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .xl\:shadow-inner {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:shadow-outline {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .xl\:shadow-none {
+    box-shadow: none;
+  }
+
+  .xl\:hover\:shadow:hover {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:hover\:shadow-lg:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .xl\:hover\:shadow-xl:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .xl\:hover\:shadow-2xl:hover {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .xl\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:hover\:shadow-outline:hover {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .xl\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
+  .xl\:focus\:shadow:focus {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:focus\:shadow-md:focus {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:focus\:shadow-lg:focus {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .xl\:focus\:shadow-xl:focus {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .xl\:focus\:shadow-2xl:focus {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .xl\:focus\:shadow-inner:focus {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .xl\:focus\:shadow-outline:focus {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  }
+
+  .xl\:focus\:shadow-none:focus {
+    box-shadow: none;
+  }
+
+  .xl\:fill-current {
+    fill: currentColor;
+  }
+
+  .xl\:stroke-current {
+    stroke: currentColor;
+  }
+
+  .xl\:table-auto {
+    table-layout: auto;
+  }
+
+  .xl\:table-fixed {
+    table-layout: fixed;
+  }
+
+  .xl\:text-left {
+    text-align: left;
+  }
+
+  .xl\:text-center {
+    text-align: center;
+  }
+
+  .xl\:text-right {
+    text-align: right;
+  }
+
+  .xl\:text-justify {
+    text-align: justify;
+  }
+
+  .xl\:text-transparent {
+    color: transparent;
+  }
+
+  .xl\:text-black {
+    color: #000;
+  }
+
+  .xl\:text-white {
+    color: #fff;
+  }
+
+  .xl\:text-gray-100 {
+    color: #f7fafc;
+  }
+
+  .xl\:text-gray-200 {
+    color: #edf2f7;
+  }
+
+  .xl\:text-gray-300 {
+    color: #e2e8f0;
+  }
+
+  .xl\:text-gray-400 {
+    color: #cbd5e0;
+  }
+
+  .xl\:text-gray-500 {
+    color: #a0aec0;
+  }
+
+  .xl\:text-gray-600 {
+    color: #718096;
+  }
+
+  .xl\:text-gray-700 {
+    color: #4a5568;
+  }
+
+  .xl\:text-gray-800 {
+    color: #2d3748;
+  }
+
+  .xl\:text-gray-900 {
+    color: #1a202c;
+  }
+
+  .xl\:text-red-100 {
+    color: #fff5f5;
+  }
+
+  .xl\:text-red-200 {
+    color: #fed7d7;
+  }
+
+  .xl\:text-red-300 {
+    color: #feb2b2;
+  }
+
+  .xl\:text-red-400 {
+    color: #fc8181;
+  }
+
+  .xl\:text-red-500 {
+    color: #f56565;
+  }
+
+  .xl\:text-red-600 {
+    color: #e53e3e;
+  }
+
+  .xl\:text-red-700 {
+    color: #c53030;
+  }
+
+  .xl\:text-red-800 {
+    color: #9b2c2c;
+  }
+
+  .xl\:text-red-900 {
+    color: #742a2a;
+  }
+
+  .xl\:text-orange-100 {
+    color: #fffaf0;
+  }
+
+  .xl\:text-orange-200 {
+    color: #feebc8;
+  }
+
+  .xl\:text-orange-300 {
+    color: #fbd38d;
+  }
+
+  .xl\:text-orange-400 {
+    color: #f6ad55;
+  }
+
+  .xl\:text-orange-500 {
+    color: #ed8936;
+  }
+
+  .xl\:text-orange-600 {
+    color: #dd6b20;
+  }
+
+  .xl\:text-orange-700 {
+    color: #c05621;
+  }
+
+  .xl\:text-orange-800 {
+    color: #9c4221;
+  }
+
+  .xl\:text-orange-900 {
+    color: #7b341e;
+  }
+
+  .xl\:text-yellow-100 {
+    color: #fffff0;
+  }
+
+  .xl\:text-yellow-200 {
+    color: #fefcbf;
+  }
+
+  .xl\:text-yellow-300 {
+    color: #faf089;
+  }
+
+  .xl\:text-yellow-400 {
+    color: #f6e05e;
+  }
+
+  .xl\:text-yellow-500 {
+    color: #ecc94b;
+  }
+
+  .xl\:text-yellow-600 {
+    color: #d69e2e;
+  }
+
+  .xl\:text-yellow-700 {
+    color: #b7791f;
+  }
+
+  .xl\:text-yellow-800 {
+    color: #975a16;
+  }
+
+  .xl\:text-yellow-900 {
+    color: #744210;
+  }
+
+  .xl\:text-green-100 {
+    color: #f0fff4;
+  }
+
+  .xl\:text-green-200 {
+    color: #c6f6d5;
+  }
+
+  .xl\:text-green-300 {
+    color: #9ae6b4;
+  }
+
+  .xl\:text-green-400 {
+    color: #68d391;
+  }
+
+  .xl\:text-green-500 {
+    color: #48bb78;
+  }
+
+  .xl\:text-green-600 {
+    color: #38a169;
+  }
+
+  .xl\:text-green-700 {
+    color: #2f855a;
+  }
+
+  .xl\:text-green-800 {
+    color: #276749;
+  }
+
+  .xl\:text-green-900 {
+    color: #22543d;
+  }
+
+  .xl\:text-teal-100 {
+    color: #e6fffa;
+  }
+
+  .xl\:text-teal-200 {
+    color: #b2f5ea;
+  }
+
+  .xl\:text-teal-300 {
+    color: #81e6d9;
+  }
+
+  .xl\:text-teal-400 {
+    color: #4fd1c5;
+  }
+
+  .xl\:text-teal-500 {
+    color: #38b2ac;
+  }
+
+  .xl\:text-teal-600 {
+    color: #319795;
+  }
+
+  .xl\:text-teal-700 {
+    color: #2c7a7b;
+  }
+
+  .xl\:text-teal-800 {
+    color: #285e61;
+  }
+
+  .xl\:text-teal-900 {
+    color: #234e52;
+  }
+
+  .xl\:text-blue-100 {
+    color: #ebf8ff;
+  }
+
+  .xl\:text-blue-200 {
+    color: #bee3f8;
+  }
+
+  .xl\:text-blue-300 {
+    color: #90cdf4;
+  }
+
+  .xl\:text-blue-400 {
+    color: #63b3ed;
+  }
+
+  .xl\:text-blue-500 {
+    color: #4299e1;
+  }
+
+  .xl\:text-blue-600 {
+    color: #3182ce;
+  }
+
+  .xl\:text-blue-700 {
+    color: #2b6cb0;
+  }
+
+  .xl\:text-blue-800 {
+    color: #2c5282;
+  }
+
+  .xl\:text-blue-900 {
+    color: #2a4365;
+  }
+
+  .xl\:text-indigo-100 {
+    color: #ebf4ff;
+  }
+
+  .xl\:text-indigo-200 {
+    color: #c3dafe;
+  }
+
+  .xl\:text-indigo-300 {
+    color: #a3bffa;
+  }
+
+  .xl\:text-indigo-400 {
+    color: #7f9cf5;
+  }
+
+  .xl\:text-indigo-500 {
+    color: #667eea;
+  }
+
+  .xl\:text-indigo-600 {
+    color: #5a67d8;
+  }
+
+  .xl\:text-indigo-700 {
+    color: #4c51bf;
+  }
+
+  .xl\:text-indigo-800 {
+    color: #434190;
+  }
+
+  .xl\:text-indigo-900 {
+    color: #3c366b;
+  }
+
+  .xl\:text-purple-100 {
+    color: #faf5ff;
+  }
+
+  .xl\:text-purple-200 {
+    color: #e9d8fd;
+  }
+
+  .xl\:text-purple-300 {
+    color: #d6bcfa;
+  }
+
+  .xl\:text-purple-400 {
+    color: #b794f4;
+  }
+
+  .xl\:text-purple-500 {
+    color: #9f7aea;
+  }
+
+  .xl\:text-purple-600 {
+    color: #805ad5;
+  }
+
+  .xl\:text-purple-700 {
+    color: #6b46c1;
+  }
+
+  .xl\:text-purple-800 {
+    color: #553c9a;
+  }
+
+  .xl\:text-purple-900 {
+    color: #44337a;
+  }
+
+  .xl\:text-pink-100 {
+    color: #fff5f7;
+  }
+
+  .xl\:text-pink-200 {
+    color: #fed7e2;
+  }
+
+  .xl\:text-pink-300 {
+    color: #fbb6ce;
+  }
+
+  .xl\:text-pink-400 {
+    color: #f687b3;
+  }
+
+  .xl\:text-pink-500 {
+    color: #ed64a6;
+  }
+
+  .xl\:text-pink-600 {
+    color: #d53f8c;
+  }
+
+  .xl\:text-pink-700 {
+    color: #b83280;
+  }
+
+  .xl\:text-pink-800 {
+    color: #97266d;
+  }
+
+  .xl\:text-pink-900 {
+    color: #702459;
+  }
+
+  .xl\:hover\:text-transparent:hover {
+    color: transparent;
+  }
+
+  .xl\:hover\:text-black:hover {
+    color: #000;
+  }
+
+  .xl\:hover\:text-white:hover {
+    color: #fff;
+  }
+
+  .xl\:hover\:text-gray-100:hover {
+    color: #f7fafc;
+  }
+
+  .xl\:hover\:text-gray-200:hover {
+    color: #edf2f7;
+  }
+
+  .xl\:hover\:text-gray-300:hover {
+    color: #e2e8f0;
+  }
+
+  .xl\:hover\:text-gray-400:hover {
+    color: #cbd5e0;
+  }
+
+  .xl\:hover\:text-gray-500:hover {
+    color: #a0aec0;
+  }
+
+  .xl\:hover\:text-gray-600:hover {
+    color: #718096;
+  }
+
+  .xl\:hover\:text-gray-700:hover {
+    color: #4a5568;
+  }
+
+  .xl\:hover\:text-gray-800:hover {
+    color: #2d3748;
+  }
+
+  .xl\:hover\:text-gray-900:hover {
+    color: #1a202c;
+  }
+
+  .xl\:hover\:text-red-100:hover {
+    color: #fff5f5;
+  }
+
+  .xl\:hover\:text-red-200:hover {
+    color: #fed7d7;
+  }
+
+  .xl\:hover\:text-red-300:hover {
+    color: #feb2b2;
+  }
+
+  .xl\:hover\:text-red-400:hover {
+    color: #fc8181;
+  }
+
+  .xl\:hover\:text-red-500:hover {
+    color: #f56565;
+  }
+
+  .xl\:hover\:text-red-600:hover {
+    color: #e53e3e;
+  }
+
+  .xl\:hover\:text-red-700:hover {
+    color: #c53030;
+  }
+
+  .xl\:hover\:text-red-800:hover {
+    color: #9b2c2c;
+  }
+
+  .xl\:hover\:text-red-900:hover {
+    color: #742a2a;
+  }
+
+  .xl\:hover\:text-orange-100:hover {
+    color: #fffaf0;
+  }
+
+  .xl\:hover\:text-orange-200:hover {
+    color: #feebc8;
+  }
+
+  .xl\:hover\:text-orange-300:hover {
+    color: #fbd38d;
+  }
+
+  .xl\:hover\:text-orange-400:hover {
+    color: #f6ad55;
+  }
+
+  .xl\:hover\:text-orange-500:hover {
+    color: #ed8936;
+  }
+
+  .xl\:hover\:text-orange-600:hover {
+    color: #dd6b20;
+  }
+
+  .xl\:hover\:text-orange-700:hover {
+    color: #c05621;
+  }
+
+  .xl\:hover\:text-orange-800:hover {
+    color: #9c4221;
+  }
+
+  .xl\:hover\:text-orange-900:hover {
+    color: #7b341e;
+  }
+
+  .xl\:hover\:text-yellow-100:hover {
+    color: #fffff0;
+  }
+
+  .xl\:hover\:text-yellow-200:hover {
+    color: #fefcbf;
+  }
+
+  .xl\:hover\:text-yellow-300:hover {
+    color: #faf089;
+  }
+
+  .xl\:hover\:text-yellow-400:hover {
+    color: #f6e05e;
+  }
+
+  .xl\:hover\:text-yellow-500:hover {
+    color: #ecc94b;
+  }
+
+  .xl\:hover\:text-yellow-600:hover {
+    color: #d69e2e;
+  }
+
+  .xl\:hover\:text-yellow-700:hover {
+    color: #b7791f;
+  }
+
+  .xl\:hover\:text-yellow-800:hover {
+    color: #975a16;
+  }
+
+  .xl\:hover\:text-yellow-900:hover {
+    color: #744210;
+  }
+
+  .xl\:hover\:text-green-100:hover {
+    color: #f0fff4;
+  }
+
+  .xl\:hover\:text-green-200:hover {
+    color: #c6f6d5;
+  }
+
+  .xl\:hover\:text-green-300:hover {
+    color: #9ae6b4;
+  }
+
+  .xl\:hover\:text-green-400:hover {
+    color: #68d391;
+  }
+
+  .xl\:hover\:text-green-500:hover {
+    color: #48bb78;
+  }
+
+  .xl\:hover\:text-green-600:hover {
+    color: #38a169;
+  }
+
+  .xl\:hover\:text-green-700:hover {
+    color: #2f855a;
+  }
+
+  .xl\:hover\:text-green-800:hover {
+    color: #276749;
+  }
+
+  .xl\:hover\:text-green-900:hover {
+    color: #22543d;
+  }
+
+  .xl\:hover\:text-teal-100:hover {
+    color: #e6fffa;
+  }
+
+  .xl\:hover\:text-teal-200:hover {
+    color: #b2f5ea;
+  }
+
+  .xl\:hover\:text-teal-300:hover {
+    color: #81e6d9;
+  }
+
+  .xl\:hover\:text-teal-400:hover {
+    color: #4fd1c5;
+  }
+
+  .xl\:hover\:text-teal-500:hover {
+    color: #38b2ac;
+  }
+
+  .xl\:hover\:text-teal-600:hover {
+    color: #319795;
+  }
+
+  .xl\:hover\:text-teal-700:hover {
+    color: #2c7a7b;
+  }
+
+  .xl\:hover\:text-teal-800:hover {
+    color: #285e61;
+  }
+
+  .xl\:hover\:text-teal-900:hover {
+    color: #234e52;
+  }
+
+  .xl\:hover\:text-blue-100:hover {
+    color: #ebf8ff;
+  }
+
+  .xl\:hover\:text-blue-200:hover {
+    color: #bee3f8;
+  }
+
+  .xl\:hover\:text-blue-300:hover {
+    color: #90cdf4;
+  }
+
+  .xl\:hover\:text-blue-400:hover {
+    color: #63b3ed;
+  }
+
+  .xl\:hover\:text-blue-500:hover {
+    color: #4299e1;
+  }
+
+  .xl\:hover\:text-blue-600:hover {
+    color: #3182ce;
+  }
+
+  .xl\:hover\:text-blue-700:hover {
+    color: #2b6cb0;
+  }
+
+  .xl\:hover\:text-blue-800:hover {
+    color: #2c5282;
+  }
+
+  .xl\:hover\:text-blue-900:hover {
+    color: #2a4365;
+  }
+
+  .xl\:hover\:text-indigo-100:hover {
+    color: #ebf4ff;
+  }
+
+  .xl\:hover\:text-indigo-200:hover {
+    color: #c3dafe;
+  }
+
+  .xl\:hover\:text-indigo-300:hover {
+    color: #a3bffa;
+  }
+
+  .xl\:hover\:text-indigo-400:hover {
+    color: #7f9cf5;
+  }
+
+  .xl\:hover\:text-indigo-500:hover {
+    color: #667eea;
+  }
+
+  .xl\:hover\:text-indigo-600:hover {
+    color: #5a67d8;
+  }
+
+  .xl\:hover\:text-indigo-700:hover {
+    color: #4c51bf;
+  }
+
+  .xl\:hover\:text-indigo-800:hover {
+    color: #434190;
+  }
+
+  .xl\:hover\:text-indigo-900:hover {
+    color: #3c366b;
+  }
+
+  .xl\:hover\:text-purple-100:hover {
+    color: #faf5ff;
+  }
+
+  .xl\:hover\:text-purple-200:hover {
+    color: #e9d8fd;
+  }
+
+  .xl\:hover\:text-purple-300:hover {
+    color: #d6bcfa;
+  }
+
+  .xl\:hover\:text-purple-400:hover {
+    color: #b794f4;
+  }
+
+  .xl\:hover\:text-purple-500:hover {
+    color: #9f7aea;
+  }
+
+  .xl\:hover\:text-purple-600:hover {
+    color: #805ad5;
+  }
+
+  .xl\:hover\:text-purple-700:hover {
+    color: #6b46c1;
+  }
+
+  .xl\:hover\:text-purple-800:hover {
+    color: #553c9a;
+  }
+
+  .xl\:hover\:text-purple-900:hover {
+    color: #44337a;
+  }
+
+  .xl\:hover\:text-pink-100:hover {
+    color: #fff5f7;
+  }
+
+  .xl\:hover\:text-pink-200:hover {
+    color: #fed7e2;
+  }
+
+  .xl\:hover\:text-pink-300:hover {
+    color: #fbb6ce;
+  }
+
+  .xl\:hover\:text-pink-400:hover {
+    color: #f687b3;
+  }
+
+  .xl\:hover\:text-pink-500:hover {
+    color: #ed64a6;
+  }
+
+  .xl\:hover\:text-pink-600:hover {
+    color: #d53f8c;
+  }
+
+  .xl\:hover\:text-pink-700:hover {
+    color: #b83280;
+  }
+
+  .xl\:hover\:text-pink-800:hover {
+    color: #97266d;
+  }
+
+  .xl\:hover\:text-pink-900:hover {
+    color: #702459;
+  }
+
+  .xl\:focus\:text-transparent:focus {
+    color: transparent;
+  }
+
+  .xl\:focus\:text-black:focus {
+    color: #000;
+  }
+
+  .xl\:focus\:text-white:focus {
+    color: #fff;
+  }
+
+  .xl\:focus\:text-gray-100:focus {
+    color: #f7fafc;
+  }
+
+  .xl\:focus\:text-gray-200:focus {
+    color: #edf2f7;
+  }
+
+  .xl\:focus\:text-gray-300:focus {
+    color: #e2e8f0;
+  }
+
+  .xl\:focus\:text-gray-400:focus {
+    color: #cbd5e0;
+  }
+
+  .xl\:focus\:text-gray-500:focus {
+    color: #a0aec0;
+  }
+
+  .xl\:focus\:text-gray-600:focus {
+    color: #718096;
+  }
+
+  .xl\:focus\:text-gray-700:focus {
+    color: #4a5568;
+  }
+
+  .xl\:focus\:text-gray-800:focus {
+    color: #2d3748;
+  }
+
+  .xl\:focus\:text-gray-900:focus {
+    color: #1a202c;
+  }
+
+  .xl\:focus\:text-red-100:focus {
+    color: #fff5f5;
+  }
+
+  .xl\:focus\:text-red-200:focus {
+    color: #fed7d7;
+  }
+
+  .xl\:focus\:text-red-300:focus {
+    color: #feb2b2;
+  }
+
+  .xl\:focus\:text-red-400:focus {
+    color: #fc8181;
+  }
+
+  .xl\:focus\:text-red-500:focus {
+    color: #f56565;
+  }
+
+  .xl\:focus\:text-red-600:focus {
+    color: #e53e3e;
+  }
+
+  .xl\:focus\:text-red-700:focus {
+    color: #c53030;
+  }
+
+  .xl\:focus\:text-red-800:focus {
+    color: #9b2c2c;
+  }
+
+  .xl\:focus\:text-red-900:focus {
+    color: #742a2a;
+  }
+
+  .xl\:focus\:text-orange-100:focus {
+    color: #fffaf0;
+  }
+
+  .xl\:focus\:text-orange-200:focus {
+    color: #feebc8;
+  }
+
+  .xl\:focus\:text-orange-300:focus {
+    color: #fbd38d;
+  }
+
+  .xl\:focus\:text-orange-400:focus {
+    color: #f6ad55;
+  }
+
+  .xl\:focus\:text-orange-500:focus {
+    color: #ed8936;
+  }
+
+  .xl\:focus\:text-orange-600:focus {
+    color: #dd6b20;
+  }
+
+  .xl\:focus\:text-orange-700:focus {
+    color: #c05621;
+  }
+
+  .xl\:focus\:text-orange-800:focus {
+    color: #9c4221;
+  }
+
+  .xl\:focus\:text-orange-900:focus {
+    color: #7b341e;
+  }
+
+  .xl\:focus\:text-yellow-100:focus {
+    color: #fffff0;
+  }
+
+  .xl\:focus\:text-yellow-200:focus {
+    color: #fefcbf;
+  }
+
+  .xl\:focus\:text-yellow-300:focus {
+    color: #faf089;
+  }
+
+  .xl\:focus\:text-yellow-400:focus {
+    color: #f6e05e;
+  }
+
+  .xl\:focus\:text-yellow-500:focus {
+    color: #ecc94b;
+  }
+
+  .xl\:focus\:text-yellow-600:focus {
+    color: #d69e2e;
+  }
+
+  .xl\:focus\:text-yellow-700:focus {
+    color: #b7791f;
+  }
+
+  .xl\:focus\:text-yellow-800:focus {
+    color: #975a16;
+  }
+
+  .xl\:focus\:text-yellow-900:focus {
+    color: #744210;
+  }
+
+  .xl\:focus\:text-green-100:focus {
+    color: #f0fff4;
+  }
+
+  .xl\:focus\:text-green-200:focus {
+    color: #c6f6d5;
+  }
+
+  .xl\:focus\:text-green-300:focus {
+    color: #9ae6b4;
+  }
+
+  .xl\:focus\:text-green-400:focus {
+    color: #68d391;
+  }
+
+  .xl\:focus\:text-green-500:focus {
+    color: #48bb78;
+  }
+
+  .xl\:focus\:text-green-600:focus {
+    color: #38a169;
+  }
+
+  .xl\:focus\:text-green-700:focus {
+    color: #2f855a;
+  }
+
+  .xl\:focus\:text-green-800:focus {
+    color: #276749;
+  }
+
+  .xl\:focus\:text-green-900:focus {
+    color: #22543d;
+  }
+
+  .xl\:focus\:text-teal-100:focus {
+    color: #e6fffa;
+  }
+
+  .xl\:focus\:text-teal-200:focus {
+    color: #b2f5ea;
+  }
+
+  .xl\:focus\:text-teal-300:focus {
+    color: #81e6d9;
+  }
+
+  .xl\:focus\:text-teal-400:focus {
+    color: #4fd1c5;
+  }
+
+  .xl\:focus\:text-teal-500:focus {
+    color: #38b2ac;
+  }
+
+  .xl\:focus\:text-teal-600:focus {
+    color: #319795;
+  }
+
+  .xl\:focus\:text-teal-700:focus {
+    color: #2c7a7b;
+  }
+
+  .xl\:focus\:text-teal-800:focus {
+    color: #285e61;
+  }
+
+  .xl\:focus\:text-teal-900:focus {
+    color: #234e52;
+  }
+
+  .xl\:focus\:text-blue-100:focus {
+    color: #ebf8ff;
+  }
+
+  .xl\:focus\:text-blue-200:focus {
+    color: #bee3f8;
+  }
+
+  .xl\:focus\:text-blue-300:focus {
+    color: #90cdf4;
+  }
+
+  .xl\:focus\:text-blue-400:focus {
+    color: #63b3ed;
+  }
+
+  .xl\:focus\:text-blue-500:focus {
+    color: #4299e1;
+  }
+
+  .xl\:focus\:text-blue-600:focus {
+    color: #3182ce;
+  }
+
+  .xl\:focus\:text-blue-700:focus {
+    color: #2b6cb0;
+  }
+
+  .xl\:focus\:text-blue-800:focus {
+    color: #2c5282;
+  }
+
+  .xl\:focus\:text-blue-900:focus {
+    color: #2a4365;
+  }
+
+  .xl\:focus\:text-indigo-100:focus {
+    color: #ebf4ff;
+  }
+
+  .xl\:focus\:text-indigo-200:focus {
+    color: #c3dafe;
+  }
+
+  .xl\:focus\:text-indigo-300:focus {
+    color: #a3bffa;
+  }
+
+  .xl\:focus\:text-indigo-400:focus {
+    color: #7f9cf5;
+  }
+
+  .xl\:focus\:text-indigo-500:focus {
+    color: #667eea;
+  }
+
+  .xl\:focus\:text-indigo-600:focus {
+    color: #5a67d8;
+  }
+
+  .xl\:focus\:text-indigo-700:focus {
+    color: #4c51bf;
+  }
+
+  .xl\:focus\:text-indigo-800:focus {
+    color: #434190;
+  }
+
+  .xl\:focus\:text-indigo-900:focus {
+    color: #3c366b;
+  }
+
+  .xl\:focus\:text-purple-100:focus {
+    color: #faf5ff;
+  }
+
+  .xl\:focus\:text-purple-200:focus {
+    color: #e9d8fd;
+  }
+
+  .xl\:focus\:text-purple-300:focus {
+    color: #d6bcfa;
+  }
+
+  .xl\:focus\:text-purple-400:focus {
+    color: #b794f4;
+  }
+
+  .xl\:focus\:text-purple-500:focus {
+    color: #9f7aea;
+  }
+
+  .xl\:focus\:text-purple-600:focus {
+    color: #805ad5;
+  }
+
+  .xl\:focus\:text-purple-700:focus {
+    color: #6b46c1;
+  }
+
+  .xl\:focus\:text-purple-800:focus {
+    color: #553c9a;
+  }
+
+  .xl\:focus\:text-purple-900:focus {
+    color: #44337a;
+  }
+
+  .xl\:focus\:text-pink-100:focus {
+    color: #fff5f7;
+  }
+
+  .xl\:focus\:text-pink-200:focus {
+    color: #fed7e2;
+  }
+
+  .xl\:focus\:text-pink-300:focus {
+    color: #fbb6ce;
+  }
+
+  .xl\:focus\:text-pink-400:focus {
+    color: #f687b3;
+  }
+
+  .xl\:focus\:text-pink-500:focus {
+    color: #ed64a6;
+  }
+
+  .xl\:focus\:text-pink-600:focus {
+    color: #d53f8c;
+  }
+
+  .xl\:focus\:text-pink-700:focus {
+    color: #b83280;
+  }
+
+  .xl\:focus\:text-pink-800:focus {
+    color: #97266d;
+  }
+
+  .xl\:focus\:text-pink-900:focus {
+    color: #702459;
+  }
+
+  .xl\:text-xs {
+    font-size: 0.75rem;
+  }
+
+  .xl\:text-sm {
+    font-size: 0.875rem;
+  }
+
+  .xl\:text-base {
+    font-size: 1rem;
+  }
+
+  .xl\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .xl\:text-2xl {
+    font-size: 1.5rem;
+  }
+
+  .xl\:text-3xl {
+    font-size: 1.875rem;
+  }
+
+  .xl\:text-4xl {
+    font-size: 2.25rem;
+  }
+
+  .xl\:text-5xl {
+    font-size: 3rem;
+  }
+
+  .xl\:text-6xl {
+    font-size: 4rem;
+  }
+
+  .xl\:italic {
+    font-style: italic;
+  }
+
+  .xl\:not-italic {
+    font-style: normal;
+  }
+
+  .xl\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .xl\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .xl\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .xl\:normal-case {
+    text-transform: none;
+  }
+
+  .xl\:underline {
+    text-decoration: underline;
+  }
+
+  .xl\:line-through {
+    text-decoration: line-through;
+  }
+
+  .xl\:no-underline {
+    text-decoration: none;
+  }
+
+  .xl\:hover\:underline:hover {
+    text-decoration: underline;
+  }
+
+  .xl\:hover\:line-through:hover {
+    text-decoration: line-through;
+  }
+
+  .xl\:hover\:no-underline:hover {
+    text-decoration: none;
+  }
+
+  .xl\:focus\:underline:focus {
+    text-decoration: underline;
+  }
+
+  .xl\:focus\:line-through:focus {
+    text-decoration: line-through;
+  }
+
+  .xl\:focus\:no-underline:focus {
+    text-decoration: none;
+  }
+
+  .xl\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .xl\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  .xl\:tracking-tighter {
+    letter-spacing: -0.05em;
+  }
+
+  .xl\:tracking-tight {
+    letter-spacing: -0.025em;
+  }
+
+  .xl\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .xl\:tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .xl\:tracking-wider {
+    letter-spacing: 0.05em;
+  }
+
+  .xl\:tracking-widest {
+    letter-spacing: 0.1em;
+  }
+
+  .xl\:select-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+
+  .xl\:select-text {
+    -webkit-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
+  }
+
+  .xl\:select-all {
+    -webkit-user-select: all;
+       -moz-user-select: all;
+        -ms-user-select: all;
+            user-select: all;
+  }
+
+  .xl\:select-auto {
+    -webkit-user-select: auto;
+       -moz-user-select: auto;
+        -ms-user-select: auto;
+            user-select: auto;
+  }
+
+  .xl\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .xl\:align-top {
+    vertical-align: top;
+  }
+
+  .xl\:align-middle {
+    vertical-align: middle;
+  }
+
+  .xl\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .xl\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .xl\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
+  .xl\:visible {
+    visibility: visible;
+  }
+
+  .xl\:invisible {
+    visibility: hidden;
+  }
+
+  .xl\:whitespace-normal {
+    white-space: normal;
+  }
+
+  .xl\:whitespace-no-wrap {
+    white-space: nowrap;
+  }
+
+  .xl\:whitespace-pre {
+    white-space: pre;
+  }
+
+  .xl\:whitespace-pre-line {
+    white-space: pre-line;
+  }
+
+  .xl\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .xl\:break-normal {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+
+  .xl\:break-words {
+    overflow-wrap: break-word;
+  }
+
+  .xl\:break-all {
+    word-break: break-all;
+  }
+
+  .xl\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xl\:w-0 {
+    width: 0;
+  }
+
+  .xl\:w-1 {
+    width: 0.25rem;
+  }
+
+  .xl\:w-2 {
+    width: 0.5rem;
+  }
+
+  .xl\:w-3 {
+    width: 0.75rem;
+  }
+
+  .xl\:w-4 {
+    width: 1rem;
+  }
+
+  .xl\:w-5 {
+    width: 1.25rem;
+  }
+
+  .xl\:w-6 {
+    width: 1.5rem;
+  }
+
+  .xl\:w-8 {
+    width: 2rem;
+  }
+
+  .xl\:w-10 {
+    width: 2.5rem;
+  }
+
+  .xl\:w-12 {
+    width: 3rem;
+  }
+
+  .xl\:w-16 {
+    width: 4rem;
+  }
+
+  .xl\:w-20 {
+    width: 5rem;
+  }
+
+  .xl\:w-24 {
+    width: 6rem;
+  }
+
+  .xl\:w-32 {
+    width: 8rem;
+  }
+
+  .xl\:w-40 {
+    width: 10rem;
+  }
+
+  .xl\:w-48 {
+    width: 12rem;
+  }
+
+  .xl\:w-56 {
+    width: 14rem;
+  }
+
+  .xl\:w-64 {
+    width: 16rem;
+  }
+
+  .xl\:w-auto {
+    width: auto;
+  }
+
+  .xl\:w-px {
+    width: 1px;
+  }
+
+  .xl\:w-1\/2 {
+    width: 50%;
+  }
+
+  .xl\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .xl\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .xl\:w-1\/4 {
+    width: 25%;
+  }
+
+  .xl\:w-2\/4 {
+    width: 50%;
+  }
+
+  .xl\:w-3\/4 {
+    width: 75%;
+  }
+
+  .xl\:w-1\/5 {
+    width: 20%;
+  }
+
+  .xl\:w-2\/5 {
+    width: 40%;
+  }
+
+  .xl\:w-3\/5 {
+    width: 60%;
+  }
+
+  .xl\:w-4\/5 {
+    width: 80%;
+  }
+
+  .xl\:w-1\/6 {
+    width: 16.666667%;
+  }
+
+  .xl\:w-2\/6 {
+    width: 33.333333%;
+  }
+
+  .xl\:w-3\/6 {
+    width: 50%;
+  }
+
+  .xl\:w-4\/6 {
+    width: 66.666667%;
+  }
+
+  .xl\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .xl\:w-1\/12 {
+    width: 8.333333%;
+  }
+
+  .xl\:w-2\/12 {
+    width: 16.666667%;
+  }
+
+  .xl\:w-3\/12 {
+    width: 25%;
+  }
+
+  .xl\:w-4\/12 {
+    width: 33.333333%;
+  }
+
+  .xl\:w-5\/12 {
+    width: 41.666667%;
+  }
+
+  .xl\:w-6\/12 {
+    width: 50%;
+  }
+
+  .xl\:w-7\/12 {
+    width: 58.333333%;
+  }
+
+  .xl\:w-8\/12 {
+    width: 66.666667%;
+  }
+
+  .xl\:w-9\/12 {
+    width: 75%;
+  }
+
+  .xl\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .xl\:w-11\/12 {
+    width: 91.666667%;
+  }
+
+  .xl\:w-full {
+    width: 100%;
+  }
+
+  .xl\:w-screen {
+    width: 100vw;
+  }
+
+  .xl\:z-0 {
+    z-index: 0;
+  }
+
+  .xl\:z-10 {
+    z-index: 10;
+  }
+
+  .xl\:z-20 {
+    z-index: 20;
+  }
+
+  .xl\:z-30 {
+    z-index: 30;
+  }
+
+  .xl\:z-40 {
+    z-index: 40;
+  }
+
+  .xl\:z-50 {
+    z-index: 50;
+  }
+
+  .xl\:z-auto {
+    z-index: auto;
+  }
+}
\ No newline at end of file
diff --git a/public/css/tailwind.css b/public/css/tailwind.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/public/css/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..19505c9
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/iconmonstr-forbidden-3-48.png b/public/iconmonstr-forbidden-3-48.png
new file mode 100644
index 0000000..fa79efa
Binary files /dev/null and b/public/iconmonstr-forbidden-3-48.png differ
diff --git a/public/images/android-chrome-192x192.png b/public/images/android-chrome-192x192.png
new file mode 100644
index 0000000..5967429
Binary files /dev/null and b/public/images/android-chrome-192x192.png differ
diff --git a/public/images/android-chrome-512x512.png b/public/images/android-chrome-512x512.png
new file mode 100644
index 0000000..e2c3f22
Binary files /dev/null and b/public/images/android-chrome-512x512.png differ
diff --git a/public/images/apple-touch-icon.png b/public/images/apple-touch-icon.png
new file mode 100644
index 0000000..a893c11
Binary files /dev/null and b/public/images/apple-touch-icon.png differ
diff --git a/public/images/carousel1-960.jpg b/public/images/carousel1-960.jpg
new file mode 100644
index 0000000..8ef1154
Binary files /dev/null and b/public/images/carousel1-960.jpg differ
diff --git a/public/images/carousel1.jpg b/public/images/carousel1.jpg
new file mode 100644
index 0000000..f2edacb
Binary files /dev/null and b/public/images/carousel1.jpg differ
diff --git a/public/images/carousel2-960.jpg b/public/images/carousel2-960.jpg
new file mode 100644
index 0000000..3ec99e6
Binary files /dev/null and b/public/images/carousel2-960.jpg differ
diff --git a/public/images/carousel2.jpg b/public/images/carousel2.jpg
new file mode 100644
index 0000000..2c8e31e
Binary files /dev/null and b/public/images/carousel2.jpg differ
diff --git a/public/images/carousel3-960.jpg b/public/images/carousel3-960.jpg
new file mode 100644
index 0000000..76318b2
Binary files /dev/null and b/public/images/carousel3-960.jpg differ
diff --git a/public/images/carousel3.jpg b/public/images/carousel3.jpg
new file mode 100644
index 0000000..60be405
Binary files /dev/null and b/public/images/carousel3.jpg differ
diff --git a/public/images/favicon-16x16.png b/public/images/favicon-16x16.png
new file mode 100644
index 0000000..d952e55
Binary files /dev/null and b/public/images/favicon-16x16.png differ
diff --git a/public/images/favicon-32x32.png b/public/images/favicon-32x32.png
new file mode 100644
index 0000000..709837b
Binary files /dev/null and b/public/images/favicon-32x32.png differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
new file mode 100644
index 0000000..19505c9
Binary files /dev/null and b/public/images/favicon.ico differ
diff --git a/public/images/frame-test-1.jpg b/public/images/frame-test-1.jpg
new file mode 100644
index 0000000..e0b017a
Binary files /dev/null and b/public/images/frame-test-1.jpg differ
diff --git a/public/images/frame-test-2.jpg b/public/images/frame-test-2.jpg
new file mode 100644
index 0000000..73513af
Binary files /dev/null and b/public/images/frame-test-2.jpg differ
diff --git a/public/images/frame-test-3.jpg b/public/images/frame-test-3.jpg
new file mode 100644
index 0000000..2b1e0e6
Binary files /dev/null and b/public/images/frame-test-3.jpg differ
diff --git a/public/images/piazza-optical-logo.jpg b/public/images/piazza-optical-logo.jpg
new file mode 100644
index 0000000..ed629a4
Binary files /dev/null and b/public/images/piazza-optical-logo.jpg differ
diff --git a/public/images/placeholder-180x180.png b/public/images/placeholder-180x180.png
new file mode 100644
index 0000000..4bf5986
Binary files /dev/null and b/public/images/placeholder-180x180.png differ
diff --git a/public/images/placeholder-960x720.png b/public/images/placeholder-960x720.png
new file mode 100644
index 0000000..280b9df
Binary files /dev/null and b/public/images/placeholder-960x720.png differ
diff --git a/public/images/site.webmanifest b/public/images/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/public/images/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..3200873
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- to allow responsive CSS -->
+  <!-- <link rel="stylesheet" href="app.css" /> -->
+  <!-- <link rel="stylesheet" href="app-colors.css" /> -->
+  <!--<link rel="stylesheet" href="./fontawesome-free-5.11.2-web/css/all.css" /> -->
+  <!--<link rel="stylesheet" href="./css/tailwind.compiled.css" />-->
+  <link rel="stylesheet" href="./css/fontello/css/fontello.css" />
+  <link rel="stylesheet" href="./css/fontello/css/fontello-codes.css" />
+  <link rel="stylesheet" href="./css/spectre.min.css" />
+  <link rel="stylesheet" href="./css/spectre-exp.min.css" />
+  <link rel="stylesheet" href="./css/spectre-icons.min.css" />
+  <link rel="stylesheet" href="./css/app-supplement.css" />
+  <script src="./mithril.min.js"></script>
+</head>
+<body class="bg-gray-300">
+  <!--<script src="require1k.min.js" data-main="./app_mithril"></script>-->
+  <script src="bundle.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/mithril.min.js b/public/mithril.min.js
new file mode 100644
index 0000000..544dca2
--- /dev/null
+++ b/public/mithril.min.js
@@ -0,0 +1 @@
+!function(){"use strict";function e(e,t,n,r,o,l){return{tag:e,key:t,attrs:n,children:r,text:o,dom:l,domSize:void 0,state:void 0,events:void 0,instance:void 0}}e.normalize=function(t){return Array.isArray(t)?e("[",void 0,void 0,e.normalizeChildren(t),void 0,void 0):null==t||"boolean"==typeof t?null:"object"==typeof t?t:e("#",void 0,void 0,String(t),void 0,void 0)},e.normalizeChildren=function(t){var n=[];if(t.length){for(var r=null!=t[0]&&null!=t[0].key,o=1;o<t.length;o++)if((null!=t[o]&&null!=t[o].key)!==r)throw new TypeError("Vnodes must either always have keys or never have keys!");for(o=0;o<t.length;o++)n[o]=e.normalize(t[o])}return n};var t=function(){var t,n=arguments[this],r=this+1;if(null==n?n={}:("object"!=typeof n||null!=n.tag||Array.isArray(n))&&(n={},r=this),arguments.length===r+1)t=arguments[r],Array.isArray(t)||(t=[t]);else for(t=[];r<arguments.length;)t.push(arguments[r++]);return e("",n.key,n,t)},n=/(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g,r={},o={}.hasOwnProperty;function l(e){for(var t in e)if(o.call(e,t))return!1;return!0}function i(i){if(null==i||"string"!=typeof i&&"function"!=typeof i&&"function"!=typeof i.view)throw Error("The selector must be either a string or a component.");var a=t.apply(1,arguments);return"string"==typeof i&&(a.children=e.normalizeChildren(a.children),"["!==i)?function(t,n){var r=n.attrs,i=e.normalizeChildren(n.children),a=o.call(r,"class"),u=a?r.class:r.className;if(n.tag=t.tag,n.attrs=null,n.children=void 0,!l(t.attrs)&&!l(r)){var s={};for(var c in r)o.call(r,c)&&(s[c]=r[c]);r=s}for(var c in t.attrs)o.call(t.attrs,c)&&"className"!==c&&!o.call(r,c)&&(r[c]=t.attrs[c]);for(var c in null==u&&null==t.attrs.className||(r.className=null!=u?null!=t.attrs.className?String(t.attrs.className)+" "+String(u):u:null!=t.attrs.className?t.attrs.className:null),a&&(r.class=null),r)if(o.call(r,c)&&"key"!==c){n.attrs=r;break}return Array.isArray(i)&&1===i.length&&null!=i[0]&&"#"===i[0].tag?n.text=i[0].children:n.children=i,n}(r[i]||function(e){for(var t,o="div",l=[],i={};t=n.exec(e);){var a=t[1],u=t[2];if(""===a&&""!==u)o=u;else if("#"===a)i.id=u;else if("."===a)l.push(u);else if("["===t[3][0]){var s=t[6];s&&(s=s.replace(/\\(["'])/g,"$1").replace(/\\\\/g,"\\")),"class"===t[4]?l.push(s):i[t[4]]=""===s?s:s||!0}}return l.length>0&&(i.className=l.join(" ")),r[e]={tag:o,attrs:i}}(i),a):(a.tag=i,a)}if(i.trust=function(t){return null==t&&(t=""),e("<",void 0,void 0,t,void 0,void 0)},i.fragment=function(){var n=t.apply(0,arguments);return n.tag="[",n.children=e.normalizeChildren(n.children),n},(a=function(e){if(!(this instanceof a))throw new Error("Promise must be called with `new`");if("function"!=typeof e)throw new TypeError("executor must be a function");var t=this,n=[],r=[],o=s(n,!0),l=s(r,!1),i=t._instance={resolvers:n,rejectors:r},u="function"==typeof setImmediate?setImmediate:setTimeout;function s(e,o){return function a(s){var f;try{if(!o||null==s||"object"!=typeof s&&"function"!=typeof s||"function"!=typeof(f=s.then))u(function(){o||0!==e.length||console.error("Possible unhandled promise rejection:",s);for(var t=0;t<e.length;t++)e[t](s);n.length=0,r.length=0,i.state=o,i.retry=function(){a(s)}});else{if(s===t)throw new TypeError("Promise can't be resolved w/ itself");c(f.bind(s))}}catch(e){l(e)}}}function c(e){var t=0;function n(e){return function(n){t++>0||e(n)}}var r=n(l);try{e(n(o),r)}catch(e){r(e)}}c(e)}).prototype.then=function(e,t){var n,r,o=this._instance;function l(e,t,l,i){t.push(function(t){if("function"!=typeof e)l(t);else try{n(e(t))}catch(e){r&&r(e)}}),"function"==typeof o.retry&&i===o.state&&o.retry()}var i=new a(function(e,t){n=e,r=t});return l(e,o.resolvers,n,!0),l(t,o.rejectors,r,!1),i},a.prototype.catch=function(e){return this.then(null,e)},a.prototype.finally=function(e){return this.then(function(t){return a.resolve(e()).then(function(){return t})},function(t){return a.resolve(e()).then(function(){return a.reject(t)})})},a.resolve=function(e){return e instanceof a?e:new a(function(t){t(e)})},a.reject=function(e){return new a(function(t,n){n(e)})},a.all=function(e){return new a(function(t,n){var r=e.length,o=0,l=[];if(0===e.length)t([]);else for(var i=0;i<e.length;i++)!function(i){function a(e){o++,l[i]=e,o===r&&t(l)}null==e[i]||"object"!=typeof e[i]&&"function"!=typeof e[i]||"function"!=typeof e[i].then?a(e[i]):e[i].then(a,n)}(i)})},a.race=function(e){return new a(function(t,n){for(var r=0;r<e.length;r++)e[r].then(t,n)})},"undefined"!=typeof window){void 0===window.Promise?window.Promise=a:window.Promise.prototype.finally||(window.Promise.prototype.finally=a.prototype.finally);var a=window.Promise}else if("undefined"!=typeof global){void 0===global.Promise?global.Promise=a:global.Promise.prototype.finally||(global.Promise.prototype.finally=a.prototype.finally);a=global.Promise}var u=function(t){var n,r=t&&t.document,o={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"};function l(e){return e.attrs&&e.attrs.xmlns||o[e.tag]}function i(e,t){if(e.state!==t)throw new Error("`vnode.state` must not be modified")}function a(e){var t=e.state;try{return this.apply(t,arguments)}finally{i(e,t)}}function u(){try{return r.activeElement}catch(e){return null}}function s(e,t,n,r,o,l,i){for(var a=n;a<r;a++){var u=t[a];null!=u&&c(e,u,o,i,l)}}function c(t,n,o,i,u){var f=n.tag;if("string"==typeof f)switch(n.state={},null!=n.attrs&&R(n.attrs,n,o),f){case"#":!function(e,t,n){t.dom=r.createTextNode(t.children),w(e,t.dom,n)}(t,n,u);break;case"<":d(t,n,i,u);break;case"[":!function(e,t,n,o,l){var i=r.createDocumentFragment();if(null!=t.children){var a=t.children;s(i,a,0,a.length,n,null,o)}t.dom=i.firstChild,t.domSize=i.childNodes.length,w(e,i,l)}(t,n,o,i,u);break;default:!function(t,n,o,i,a){var u=n.tag,c=n.attrs,f=c&&c.is,d=(i=l(n)||i)?f?r.createElementNS(i,u,{is:f}):r.createElementNS(i,u):f?r.createElement(u,{is:f}):r.createElement(u);if(n.dom=d,null!=c&&function(e,t,n){for(var r in t)j(e,r,null,t[r],n)}(n,c,i),w(t,d,a),!b(n)&&(null!=n.text&&(""!==n.text?d.textContent=n.text:n.children=[e("#",void 0,void 0,n.text,void 0,void 0)]),null!=n.children)){var h=n.children;s(d,h,0,h.length,o,null,i),"select"===n.tag&&null!=c&&function(e,t){if("value"in t)if(null===t.value)-1!==e.dom.selectedIndex&&(e.dom.value=null);else{var n=""+t.value;e.dom.value===n&&-1!==e.dom.selectedIndex||(e.dom.value=n)}"selectedIndex"in t&&j(e,"selectedIndex",null,t.selectedIndex,void 0)}(n,c)}}(t,n,o,i,u)}else!function(t,n,r,o,l){(function(t,n){var r;if("function"==typeof t.tag.view){if(t.state=Object.create(t.tag),null!=(r=t.state.view).$$reentrantLock$$)return;r.$$reentrantLock$$=!0}else{if(t.state=void 0,null!=(r=t.tag).$$reentrantLock$$)return;r.$$reentrantLock$$=!0,t.state=null!=t.tag.prototype&&"function"==typeof t.tag.prototype.view?new t.tag(t):t.tag(t)}if(R(t.state,t,n),null!=t.attrs&&R(t.attrs,t,n),t.instance=e.normalize(a.call(t.state.view,t)),t.instance===t)throw Error("A view cannot return the vnode it received as argument");r.$$reentrantLock$$=null})(n,r),null!=n.instance?(c(t,n.instance,r,o,l),n.dom=n.instance.dom,n.domSize=null!=n.dom?n.instance.domSize:0):n.domSize=0}(t,n,o,i,u)}var f={caption:"table",thead:"table",tbody:"table",tfoot:"table",tr:"tbody",th:"tr",td:"tr",colgroup:"table",col:"colgroup"};function d(e,t,n,o){var l=t.children.match(/^\s*?<(\w+)/im)||[],i=r.createElement(f[l[1]]||"div");"http://www.w3.org/2000/svg"===n?(i.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+t.children+"</svg>",i=i.firstChild):i.innerHTML=t.children,t.dom=i.firstChild,t.domSize=i.childNodes.length,t.instance=[];for(var a,u=r.createDocumentFragment();a=i.firstChild;)t.instance.push(a),u.appendChild(a);w(e,u,o)}function h(e,t,n,r,o,l){if(t!==n&&(null!=t||null!=n))if(null==t||0===t.length)s(e,n,0,n.length,r,o,l);else if(null==n||0===n.length)x(e,t,0,t.length);else{var i=null!=t[0]&&null!=t[0].key,a=null!=n[0]&&null!=n[0].key,u=0,f=0;if(!i)for(;f<t.length&&null==t[f];)f++;if(!a)for(;u<n.length&&null==n[u];)u++;if(null===a&&null==i)return;if(i!==a)x(e,t,f,t.length),s(e,n,u,n.length,r,o,l);else if(a){for(var d,h,w,b,E,S=t.length-1,C=n.length-1;S>=f&&C>=u&&(w=t[S],b=n[C],w.key===b.key);)w!==b&&p(e,w,b,r,o,l),null!=b.dom&&(o=b.dom),S--,C--;for(;S>=f&&C>=u&&(d=t[f],h=n[u],d.key===h.key);)f++,u++,d!==h&&p(e,d,h,r,y(t,f,o),l);for(;S>=f&&C>=u&&u!==C&&d.key===b.key&&w.key===h.key;)g(e,w,E=y(t,f,o)),w!==h&&p(e,w,h,r,E,l),++u<=--C&&g(e,d,o),d!==b&&p(e,d,b,r,o,l),null!=b.dom&&(o=b.dom),f++,w=t[--S],b=n[C],d=t[f],h=n[u];for(;S>=f&&C>=u&&w.key===b.key;)w!==b&&p(e,w,b,r,o,l),null!=b.dom&&(o=b.dom),C--,w=t[--S],b=n[C];if(u>C)x(e,t,f,S+1);else if(f>S)s(e,n,u,C+1,r,o,l);else{var j,z,A=o,O=C-u+1,N=new Array(O),T=0,P=0,$=2147483647,I=0;for(P=0;P<O;P++)N[P]=-1;for(P=C;P>=u;P--){null==j&&(j=v(t,f,S+1));var L=j[(b=n[P]).key];null!=L&&($=L<$?L:-1,N[P-u]=L,w=t[L],t[L]=null,w!==b&&p(e,w,b,r,o,l),null!=b.dom&&(o=b.dom),I++)}if(o=A,I!==S-f+1&&x(e,t,f,S+1),0===I)s(e,n,u,C+1,r,o,l);else if(-1===$)for(T=(z=function(e){for(var t=[0],n=0,r=0,o=0,l=m.length=e.length,o=0;o<l;o++)m[o]=e[o];for(var o=0;o<l;++o)if(-1!==e[o]){var i=t[t.length-1];if(e[i]<e[o])m[o]=i,t.push(o);else{for(n=0,r=t.length-1;n<r;){var a=(n>>>1)+(r>>>1)+(n&r&1);e[t[a]]<e[o]?n=a+1:r=a}e[o]<e[t[n]]&&(n>0&&(m[o]=t[n-1]),t[n]=o)}}for(n=t.length,r=t[n-1];n-- >0;)t[n]=r,r=m[r];return m.length=0,t}(N)).length-1,P=C;P>=u;P--)h=n[P],-1===N[P-u]?c(e,h,r,l,o):z[T]===P-u?T--:g(e,h,o),null!=h.dom&&(o=n[P].dom);else for(P=C;P>=u;P--)h=n[P],-1===N[P-u]&&c(e,h,r,l,o),null!=h.dom&&(o=n[P].dom)}}else{var R=t.length<n.length?t.length:n.length;for(u=u<f?u:f;u<R;u++)(d=t[u])===(h=n[u])||null==d&&null==h||(null==d?c(e,h,r,l,y(t,u+1,o)):null==h?k(e,d):p(e,d,h,r,y(t,u+1,o),l));t.length>R&&x(e,t,u,t.length),n.length>R&&s(e,n,u,n.length,r,o,l)}}}function p(t,n,r,o,i,u){var s=n.tag;if(s===r.tag){if(r.state=n.state,r.events=n.events,function(e,t){do{if(null!=e.attrs&&"function"==typeof e.attrs.onbeforeupdate){var n=a.call(e.attrs.onbeforeupdate,e,t);if(void 0!==n&&!n)break}if("string"!=typeof e.tag&&"function"==typeof e.state.onbeforeupdate){var n=a.call(e.state.onbeforeupdate,e,t);if(void 0!==n&&!n)break}return!1}while(0);return e.dom=t.dom,e.domSize=t.domSize,e.instance=t.instance,e.attrs=t.attrs,e.children=t.children,e.text=t.text,!0}(r,n))return;if("string"==typeof s)switch(null!=r.attrs&&_(r.attrs,r,o),s){case"#":!function(e,t){e.children.toString()!==t.children.toString()&&(e.dom.nodeValue=t.children),t.dom=e.dom}(n,r);break;case"<":!function(e,t,n,r,o){t.children!==n.children?(E(e,t),d(e,n,r,o)):(n.dom=t.dom,n.domSize=t.domSize,n.instance=t.instance)}(t,n,r,u,i);break;case"[":!function(e,t,n,r,o,l){h(e,t.children,n.children,r,o,l);var i=0,a=n.children;if(n.dom=null,null!=a){for(var u=0;u<a.length;u++){var s=a[u];null!=s&&null!=s.dom&&(null==n.dom&&(n.dom=s.dom),i+=s.domSize||1)}1!==i&&(n.domSize=i)}}(t,n,r,o,i,u);break;default:!function(t,n,r,o){var i=n.dom=t.dom;o=l(n)||o,"textarea"===n.tag&&(null==n.attrs&&(n.attrs={}),null!=n.text&&(n.attrs.value=n.text,n.text=void 0)),function(e,t,n,r){if(null!=n)for(var o in n)j(e,o,t&&t[o],n[o],r);var l;if(null!=t)for(var o in t)null==(l=t[o])||null!=n&&null!=n[o]||z(e,o,l,r)}(n,t.attrs,n.attrs,o),b(n)||(null!=t.text&&null!=n.text&&""!==n.text?t.text.toString()!==n.text.toString()&&(t.dom.firstChild.nodeValue=n.text):(null!=t.text&&(t.children=[e("#",void 0,void 0,t.text,void 0,t.dom.firstChild)]),null!=n.text&&(n.children=[e("#",void 0,void 0,n.text,void 0,void 0)]),h(i,t.children,n.children,r,null,o)))}(n,r,o,u)}else!function(t,n,r,o,l,i){if(r.instance=e.normalize(a.call(r.state.view,r)),r.instance===r)throw Error("A view cannot return the vnode it received as argument");_(r.state,r,o),null!=r.attrs&&_(r.attrs,r,o),null!=r.instance?(null==n.instance?c(t,r.instance,o,i,l):p(t,n.instance,r.instance,o,l,i),r.dom=r.instance.dom,r.domSize=r.instance.domSize):null!=n.instance?(k(t,n.instance),r.dom=void 0,r.domSize=0):(r.dom=n.dom,r.domSize=n.domSize)}(t,n,r,o,i,u)}else k(t,n),c(t,r,o,u,i)}function v(e,t,n){for(var r=Object.create(null);t<n;t++){var o=e[t];if(null!=o){var l=o.key;null!=l&&(r[l]=t)}}return r}var m=[];function y(e,t,n){for(;t<e.length;t++)if(null!=e[t]&&null!=e[t].dom)return e[t].dom;return n}function g(e,t,n){var o=r.createDocumentFragment();!function e(t,n,r){for(;null!=r.dom&&r.dom.parentNode===t;){if("string"!=typeof r.tag){if(null!=(r=r.instance))continue}else if("<"===r.tag)for(var o=0;o<r.instance.length;o++)n.appendChild(r.instance[o]);else if("["!==r.tag)n.appendChild(r.dom);else if(1===r.children.length){if(null!=(r=r.children[0]))continue}else for(var o=0;o<r.children.length;o++){var l=r.children[o];null!=l&&e(t,n,l)}break}}(e,o,t),w(e,o,n)}function w(e,t,n){null!=n?e.insertBefore(t,n):e.appendChild(t)}function b(e){if(null==e.attrs||null==e.attrs.contenteditable&&null==e.attrs.contentEditable)return!1;var t=e.children;if(null!=t&&1===t.length&&"<"===t[0].tag){var n=t[0].children;e.dom.innerHTML!==n&&(e.dom.innerHTML=n)}else if(null!=e.text||null!=t&&0!==t.length)throw new Error("Child node of a contenteditable must be trusted");return!0}function x(e,t,n,r){for(var o=n;o<r;o++){var l=t[o];null!=l&&k(e,l)}}function k(e,t){var n,r,o,l=0,u=t.state;if("string"!=typeof t.tag&&"function"==typeof t.state.onbeforeremove&&null!=(o=a.call(t.state.onbeforeremove,t))&&"function"==typeof o.then&&(l=1,n=o),t.attrs&&"function"==typeof t.attrs.onbeforeremove&&null!=(o=a.call(t.attrs.onbeforeremove,t))&&"function"==typeof o.then&&(l|=2,r=o),i(t,u),l){if(null!=n){var s=function(){1&l&&((l&=2)||c())};n.then(s,s)}null!=r&&(s=function(){2&l&&((l&=1)||c())},r.then(s,s))}else C(t),S(e,t);function c(){i(t,u),C(t),S(e,t)}}function E(e,t){for(var n=0;n<t.instance.length;n++)e.removeChild(t.instance[n])}function S(e,t){for(;null!=t.dom&&t.dom.parentNode===e;){if("string"!=typeof t.tag){if(null!=(t=t.instance))continue}else if("<"===t.tag)E(e,t);else{if("["!==t.tag&&(e.removeChild(t.dom),!Array.isArray(t.children)))break;if(1===t.children.length){if(null!=(t=t.children[0]))continue}else for(var n=0;n<t.children.length;n++){var r=t.children[n];null!=r&&S(e,r)}}break}}function C(e){if("string"!=typeof e.tag&&"function"==typeof e.state.onremove&&a.call(e.state.onremove,e),e.attrs&&"function"==typeof e.attrs.onremove&&a.call(e.attrs.onremove,e),"string"!=typeof e.tag)null!=e.instance&&C(e.instance);else{var t=e.children;if(Array.isArray(t))for(var n=0;n<t.length;n++){var r=t[n];null!=r&&C(r)}}}function j(e,t,n,o,l){if("key"!==t&&"is"!==t&&null!=o&&!A(t)&&(n!==o||function(e,t){return"value"===t||"checked"===t||"selectedIndex"===t||"selected"===t&&e.dom===u()||"option"===e.tag&&e.dom.parentNode===r.activeElement}(e,t)||"object"==typeof o)){if("o"===t[0]&&"n"===t[1])return L(e,t,o);if("xlink:"===t.slice(0,6))e.dom.setAttributeNS("http://www.w3.org/1999/xlink",t.slice(6),o);else if("style"===t)$(e.dom,n,o);else if(O(e,t,l)){if("value"===t){if(("input"===e.tag||"textarea"===e.tag)&&e.dom.value===""+o&&e.dom===u())return;if("select"===e.tag&&null!==n&&e.dom.value===""+o)return;if("option"===e.tag&&null!==n&&e.dom.value===""+o)return}"input"===e.tag&&"type"===t?e.dom.setAttribute(t,o):e.dom[t]=o}else"boolean"==typeof o?o?e.dom.setAttribute(t,""):e.dom.removeAttribute(t):e.dom.setAttribute("className"===t?"class":t,o)}}function z(e,t,n,r){if("key"!==t&&"is"!==t&&null!=n&&!A(t))if("o"!==t[0]||"n"!==t[1]||A(t))if("style"===t)$(e.dom,n,null);else if(!O(e,t,r)||"className"===t||"value"===t&&("option"===e.tag||"select"===e.tag&&-1===e.dom.selectedIndex&&e.dom===u())||"input"===e.tag&&"type"===t){var o=t.indexOf(":");-1!==o&&(t=t.slice(o+1)),!1!==n&&e.dom.removeAttribute("className"===t?"class":t)}else e.dom[t]=null;else L(e,t,void 0)}function A(e){return"oninit"===e||"oncreate"===e||"onupdate"===e||"onremove"===e||"onbeforeremove"===e||"onbeforeupdate"===e}function O(e,t,n){return void 0===n&&(e.tag.indexOf("-")>-1||null!=e.attrs&&e.attrs.is||"href"!==t&&"list"!==t&&"form"!==t&&"width"!==t&&"height"!==t)&&t in e.dom}var N=/[A-Z]/g;function T(e){return"-"+e.toLowerCase()}function P(e){return"-"===e[0]&&"-"===e[1]?e:"cssFloat"===e?"float":e.replace(N,T)}function $(e,t,n){if(t===n);else if(null==n)e.style.cssText="";else if("object"!=typeof n)e.style.cssText=n;else if(null==t||"object"!=typeof t)for(var r in e.style.cssText="",n)null!=(o=n[r])&&e.style.setProperty(P(r),String(o));else{for(var r in n){var o;null!=(o=n[r])&&(o=String(o))!==String(t[r])&&e.style.setProperty(P(r),o)}for(var r in t)null!=t[r]&&null==n[r]&&e.style.removeProperty(P(r))}}function I(){this._=n}function L(e,t,n){if(null!=e.events){if(e.events[t]===n)return;null==n||"function"!=typeof n&&"object"!=typeof n?(null!=e.events[t]&&e.dom.removeEventListener(t.slice(2),e.events,!1),e.events[t]=void 0):(null==e.events[t]&&e.dom.addEventListener(t.slice(2),e.events,!1),e.events[t]=n)}else null==n||"function"!=typeof n&&"object"!=typeof n||(e.events=new I,e.dom.addEventListener(t.slice(2),e.events,!1),e.events[t]=n)}function R(e,t,n){"function"==typeof e.oninit&&a.call(e.oninit,t),"function"==typeof e.oncreate&&n.push(a.bind(e.oncreate,t))}function _(e,t,n){"function"==typeof e.onupdate&&n.push(a.bind(e.onupdate,t))}return I.prototype=Object.create(null),I.prototype.handleEvent=function(e){var t,n=this["on"+e.type];"function"==typeof n?t=n.call(e.currentTarget,e):"function"==typeof n.handleEvent&&n.handleEvent(e),this._&&!1!==e.redraw&&(0,this._)(),!1===t&&(e.preventDefault(),e.stopPropagation())},function(t,r,o){if(!t)throw new TypeError("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.");var l=[],i=u(),a=t.namespaceURI;null==t.vnodes&&(t.textContent=""),r=e.normalizeChildren(Array.isArray(r)?r:[r]);var s=n;try{n="function"==typeof o?o:void 0,h(t,t.vnodes,r,l,null,"http://www.w3.org/1999/xhtml"===a?void 0:a)}finally{n=s}t.vnodes=r,null!=i&&u()!==i&&"function"==typeof i.focus&&i.focus();for(var c=0;c<l.length;c++)l[c]()}}(window),s=function(t,n,r){var o=[],l=!1,i=!1;function a(){if(l)throw new Error("Nested m.redraw.sync() call");l=!0;for(var n=0;n<o.length;n+=2)try{t(o[n],e(o[n+1]),u)}catch(e){r.error(e)}l=!1}function u(){i||(i=!0,n(function(){i=!1,a()}))}return u.sync=a,{mount:function(n,r){if(null!=r&&null==r.view&&"function"!=typeof r)throw new TypeError("m.mount(element, component) expects a component, not a vnode");var l=o.indexOf(n);l>=0&&(o.splice(l,2),t(n,[],u)),null!=r&&(o.push(n,r),t(n,e(r),u))},redraw:u}}(u,requestAnimationFrame,console),c=function(e){if("[object Object]"!==Object.prototype.toString.call(e))return"";var t=[];for(var n in e)r(n,e[n]);return t.join("&");function r(e,n){if(Array.isArray(n))for(var o=0;o<n.length;o++)r(e+"["+o+"]",n[o]);else if("[object Object]"===Object.prototype.toString.call(n))for(var o in n)r(e+"["+o+"]",n[o]);else t.push(encodeURIComponent(e)+(null!=n&&""!==n?"="+encodeURIComponent(n):""))}},f=Object.assign||function(e,t){t&&Object.keys(t).forEach(function(n){e[n]=t[n]})},d=function(e,t){if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw new SyntaxError("Template parameter names *must* be separated");if(null==t)return e;var n=e.indexOf("?"),r=e.indexOf("#"),o=r<0?e.length:r,l=n<0?o:n,i=e.slice(0,l),a={};f(a,t);var u=i.replace(/:([^\/\.-]+)(\.{3})?/g,function(e,n,r){return delete a[n],null==t[n]?e:r?t[n]:encodeURIComponent(String(t[n]))}),s=u.indexOf("?"),d=u.indexOf("#"),h=d<0?u.length:d,p=s<0?h:s,v=u.slice(0,p);n>=0&&(v+=e.slice(n,o)),s>=0&&(v+=(n<0?"?":"&")+u.slice(s,h));var m=c(a);return m&&(v+=(n<0&&s<0?"?":"&")+m),r>=0&&(v+=e.slice(r)),d>=0&&(v+=(r<0?"":"&")+u.slice(d)),v},h=function(e,t,n){var r=0;function o(e){return new t(e)}function l(e){return function(r,l){"string"!=typeof r?(l=r,r=r.url):null==l&&(l={});var i=new t(function(t,n){e(d(r,l.params),l,function(e){if("function"==typeof l.type)if(Array.isArray(e))for(var n=0;n<e.length;n++)e[n]=new l.type(e[n]);else e=new l.type(e);t(e)},n)});if(!0===l.background)return i;var a=0;function u(){0==--a&&"function"==typeof n&&n()}return function e(t){var n=t.then;return t.constructor=o,t.then=function(){a++;var r=n.apply(t,arguments);return r.then(u,function(e){if(u(),0===a)throw e}),e(r)},t}(i)}}function i(e,t){for(var n in e.headers)if({}.hasOwnProperty.call(e.headers,n)&&t.test(n))return!0;return!1}return o.prototype=t.prototype,o.__proto__=t,{request:l(function(t,n,r,o){var l,a=null!=n.method?n.method.toUpperCase():"GET",u=n.body,s=!(null!=n.serialize&&n.serialize!==JSON.serialize||u instanceof e.FormData),c=n.responseType||("function"==typeof n.extract?"":"json"),f=new e.XMLHttpRequest,d=!1,h=f,p=f.abort;for(var v in f.abort=function(){d=!0,p.call(this)},f.open(a,t,!1!==n.async,"string"==typeof n.user?n.user:void 0,"string"==typeof n.password?n.password:void 0),s&&null!=u&&!i(n,/^content0-type1$/i)&&f.setRequestHeader("Content-Type","application/json; charset=utf-8"),"function"==typeof n.deserialize||i(n,/^accept$/i)||f.setRequestHeader("Accept","application/json, text/*"),n.withCredentials&&(f.withCredentials=n.withCredentials),n.timeout&&(f.timeout=n.timeout),f.responseType=c,n.headers)({}).hasOwnProperty.call(n.headers,v)&&f.setRequestHeader(v,n.headers[v]);f.onreadystatechange=function(e){if(!d&&4===e.target.readyState)try{var l,i=e.target.status>=200&&e.target.status<300||304===e.target.status||/^file:\/\//i.test(t),a=e.target.response;if("json"===c?e.target.responseType||"function"==typeof n.extract||(a=JSON.parse(e.target.responseText)):c&&"text"!==c||null==a&&(a=e.target.responseText),"function"==typeof n.extract?(a=n.extract(e.target,n),i=!0):"function"==typeof n.deserialize&&(a=n.deserialize(a)),i)r(a);else{try{l=e.target.responseText}catch(e){l=a}var u=new Error(l);u.code=e.target.status,u.response=a,o(u)}}catch(e){o(e)}},"function"==typeof n.config&&(f=n.config(f,n,t)||f)!==h&&(l=f.abort,f.abort=function(){d=!0,l.call(this)}),null==u?f.send():"function"==typeof n.serialize?f.send(n.serialize(u)):u instanceof e.FormData?f.send(u):f.send(JSON.stringify(u))}),jsonp:l(function(t,n,o,l){var i=n.callbackName||"_mithril_"+Math.round(1e16*Math.random())+"_"+r++,a=e.document.createElement("script");e[i]=function(t){delete e[i],a.parentNode.removeChild(a),o(t)},a.onerror=function(){delete e[i],a.parentNode.removeChild(a),l(new Error("JSONP request failed"))},a.src=t+(t.indexOf("?")<0?"?":"&")+encodeURIComponent(n.callbackKey||"callback")+"="+encodeURIComponent(i),e.document.documentElement.appendChild(a)})}}(window,a,s.redraw),p=s,v=function(){return i.apply(this,arguments)};v.m=i,v.trust=i.trust,v.fragment=i.fragment,v.mount=p.mount;var m=i,y=a,g=function(e){if(""===e||null==e)return{};"?"===e.charAt(0)&&(e=e.slice(1));for(var t=e.split("&"),n={},r={},o=0;o<t.length;o++){var l=t[o].split("="),i=decodeURIComponent(l[0]),a=2===l.length?decodeURIComponent(l[1]):"";"true"===a?a=!0:"false"===a&&(a=!1);var u=i.split(/\]\[?|\[/),s=r;i.indexOf("[")>-1&&u.pop();for(var c=0;c<u.length;c++){var f=u[c],d=u[c+1],h=""==d||!isNaN(parseInt(d,10));if(""===f)null==n[i=u.slice(0,c).join()]&&(n[i]=Array.isArray(s)?s.length:0),f=n[i]++;else if("__proto__"===f)break;if(c===u.length-1)s[f]=a;else{var p=Object.getOwnPropertyDescriptor(s,f);null!=p&&(p=p.value),null==p&&(s[f]=p=h?[]:{}),s=p}}}return r},w=function(e){var t=e.indexOf("?"),n=e.indexOf("#"),r=n<0?e.length:n,o=t<0?r:t,l=e.slice(0,o).replace(/\/{2,}/g,"/");return l?("/"!==l[0]&&(l="/"+l),l.length>1&&"/"===l[l.length-1]&&(l=l.slice(0,-1))):l="/",{path:l,params:t<0?{}:g(e.slice(t+1,r))}},b=function(e){var t=w(e),n=Object.keys(t.params),r=[],o=new RegExp("^"+t.path.replace(/:([^\/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|\[\]{}]/g,function(e,t,n){return null==t?"\\"+e:(r.push({k:t,r:"..."===n}),"..."===n?"(.*)":"."===n?"([^/]+)\\.":"([^/]+)"+(n||""))})+"$");return function(e){for(var l=0;l<n.length;l++)if(t.params[n[l]]!==e.params[n[l]])return!1;if(!r.length)return o.test(e.path);var i=o.exec(e.path);if(null==i)return!1;for(l=0;l<r.length;l++)e.params[r[l].k]=r[l].r?i[l+1]:decodeURIComponent(i[l+1]);return!0}},x={};v.route=function(t,n){var r;function o(e,n,o){if(e=d(e,n),null!=r){r();var l=o?o.state:null,i=o?o.title:null;o&&o.replace?t.history.replaceState(l,i,h.prefix+e):t.history.pushState(l,i,h.prefix+e)}else t.location.href=h.prefix+e}var l,i,a,u,s=x,c=h.SKIP={};function h(d,p,v){if(null==d)throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined");var m,g=0,k=Object.keys(v).map(function(e){if("/"!==e[0])throw new SyntaxError("Routes must start with a `/`");if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw new SyntaxError("Route parameter names must be separated with either `/`, `.`, or `-`");return{route:e,component:v[e],check:b(e)}}),E="function"==typeof setImmediate?setImmediate:setTimeout,S=y.resolve(),C=!1;if(r=null,null!=p){var j=w(p);if(!k.some(function(e){return e.check(j)}))throw new ReferenceError("Default route doesn't match any known routes")}function z(){C=!1;var e=t.location.hash;"#"!==h.prefix[0]&&(e=t.location.search+e,"?"!==h.prefix[0]&&"/"!==(e=t.location.pathname+e)[0]&&(e="/"+e));var r=e.concat().replace(/(?:%[a-f89][a-f0-9])+/gim,decodeURIComponent).slice(h.prefix.length),d=w(r);function v(){if(r===p)throw new Error("Could not resolve default route "+p);o(p,null,{replace:!0})}f(d.params,t.history.state),function e(t){for(;t<k.length;t++)if(k[t].check(d)){var o=k[t].component,f=k[t].route,h=o,p=u=function(f){if(p===u){if(f===c)return e(t+1);l=null==f||"function"!=typeof f.view&&"function"!=typeof f?"div":f,i=d.params,a=r,u=null,s=o.render?o:null,2===g?n.redraw():(g=2,n.redraw.sync())}};return void(o.view||"function"==typeof o?(o={},p(h)):o.onmatch?S.then(function(){return o.onmatch(d.params,r,f)}).then(p,v):p("div"))}v()}(0)}return r=function(){C||(C=!0,E(z))},"function"==typeof t.history.pushState?(m=function(){t.removeEventListener("popstate",r,!1)},t.addEventListener("popstate",r,!1)):"#"===h.prefix[0]&&(r=null,m=function(){t.removeEventListener("hashchange",z,!1)},t.addEventListener("hashchange",z,!1)),n.mount(d,{onbeforeupdate:function(){return!(!(g=g?2:1)||x===s)},oncreate:z,onremove:m,view:function(){if(g&&x!==s){var t=[e(l,i.key,i)];return s&&(t=s.render(t[0])),t}}})}return h.set=function(e,t,n){null!=u&&((n=n||{}).replace=!0),u=null,o(e,t,n)},h.get=function(){return a},h.prefix="#!",h.Link={view:function(e){var t,n,r=e.attrs.options,o={};f(o,e.attrs),o.selector=o.options=o.key=o.oninit=o.oncreate=o.onbeforeupdate=o.onupdate=o.onbeforeremove=o.onremove=null;var l=m(e.attrs.selector||"a",o,e.children);return(l.attrs.disabled=Boolean(l.attrs.disabled))?(l.attrs.href=null,l.attrs["aria-disabled"]="true",l.attrs.onclick=null):(t=l.attrs.onclick,n=l.attrs.href,l.attrs.href=h.prefix+n,l.attrs.onclick=function(e){var o;"function"==typeof t?o=t.call(e.currentTarget,e):null==t||"object"!=typeof t||"function"==typeof t.handleEvent&&t.handleEvent(e),!1===o||e.defaultPrevented||0!==e.button&&0!==e.which&&1!==e.which||e.currentTarget.target&&"_self"!==e.currentTarget.target||e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||(e.preventDefault(),e.redraw=!1,h.set(n,null,r))}),l}},h.param=function(e){return i&&null!=e?i[e]:i},h}(window,p),v.render=u,v.redraw=p.redraw,v.request=h.request,v.jsonp=h.jsonp,v.parseQueryString=g,v.buildQueryString=c,v.parsePathname=w,v.buildPathname=d,v.vnode=e,v.PromisePolyfill=a,"undefined"!=typeof module?module.exports=v:window.m=v}();
\ No newline at end of file
diff --git a/server/bitser b/server/bitser
new file mode 160000
index 0000000..1d3ebe0
--- /dev/null
+++ b/server/bitser
@@ -0,0 +1 @@
+Subproject commit 1d3ebe04cfd6ef2dd8ebd212a6ad06e96dfdc170
diff --git a/server/initialize-piazza-db.lua b/server/initialize-piazza-db.lua
new file mode 100644
index 0000000..840628a
--- /dev/null
+++ b/server/initialize-piazza-db.lua
@@ -0,0 +1,827 @@
+local DB = require('./piazza-lmdb')
+local db = DB.init()
+
+local user = require('./models/user')
+local item = require('./models/item')
+
+user.setdb(db)
+item.setdb(db)
+
+user.new({
+  username = 'brian',
+  password = 'buginoO1$',
+  firstname = 'Brian',
+  lastname = 'Sakal',
+  is_admin = true
+  })
+user.new({
+  username = 'guest',
+  password = 'buginoo',
+  firstname = 'Guest',
+  lastname = 'Beast'
+  })
+user.new({
+  username = 'w',
+  password = 'w',
+  firstname = 'Test',
+  lastname = 'User',
+  is_admin = true
+  })
+
+item.new({subtype='frame', brand='BubbleGum', model='BB200', color='C2', color_description='Matte Black with Red tips', size='46-16-127', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB200', color='C3', color_description='Matte Brown', size='46-16-127', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB200', color='C4', color_description='Frosted Grey', size='46-16-127', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB201', color='C1', color_description='Matte Blue', size='47-16-127', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB201', color='C2', color_description='Matte Lavender', size='47-16-127', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB202', color='C1', color_description='Matte Light Brown -Blue', size='47-16-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB202', color='C2', color_description='Matte Brown', size='47-16-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB202', color='C3', color_description='Matte Navy Blue with Blue temples', size='47-16-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB203', color='C1', color_description='Matte Blue', size='47-16-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB203', color='C2', color_description='Matte Black with Orange temple tips', size='47-16-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB203', color='C3', color_description='Matte Purple with Pink temple tips', size='47-16-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C1', color_description='Matte Burgundy', size='47-15-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C2', color_description='Matte Moss Grey with Grey temples', size='47-15-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C3', color_description='Matte Dark Grey with blue temples', size='47-15-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C4', color_description='Matte Brown', size='47-15-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C5', color_description='Matte Light Grey', size='47-15-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C6', color_description='Matte Navy Blue', size='47-15-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB204', color='C7', color_description='Matte Black with Red temples', size='47-15-125', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB205', color='C1', color_description='Matte Brown', size='49-15-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB205', color='C2', color_description='Matte Black with Orange temples', size='49-15-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB205', color='C3', color_description='Matte Navy Blue', size='49-15-128', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB206', color='C1', color_description='Matte Purple with Lavender temples', size='47-16-131', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB206', color='C2', color_description='Matte Red with Black temples', size='47-16-131', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB207', color='C1', color_description='Matte Lavender with Purple temples', size='46-16-131', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB207', color='C2', color_description='Matte Grey with Orange temples', size='46-16-131', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB207', color='C3', color_description='Matte Off White with Red temples', size='46-16-131', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='BB207', color='C4', color_description='Matte Black with Black temples', size='46-16-131', material='TR90', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC010', color='C45', color_description='Shiny Lavender/Matte Pink and Purple temples', size='46-16-125', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC010', color='C80', color_description='Shiny Blue/Matte Light Blue temples', size='46-16-125', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC010', color='C86', color_description='Shiny Black/Matte Light Blue temples', size='46-16-125', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC015', color='C31', color_description='Shiny Black/Neon Green with Green and Black temples', size='45-15-125', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC015', color='C39', color_description='Shiny Black/pink/grey with Pink and Black temples', size='45-15-125', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC015', color='C80', color_description='Shiny Blue with Blue temples', size='45-15-125', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC017', color='C53', color_description='Light Purple/Grey with Purple and Grey temples', size='49-16-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC017', color='C55', color_description='Pink with Pink temples', size='49-16-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC017', color='C80', color_description='Blue with Blue and Light Blue temples', size='49-16-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC019', color='C3', color_description='Black and Red with Black and Red temples', size='48-16-130', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC019', color='C47', color_description='Lime Green/White/Teal with White and Teal temples', size='48-16-130', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC019', color='C80', color_description='Blue/Light Blue with Blue temples', size='48-16-130', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC027', color='C22', color_description='Navy Blue/Light Blue with Blue and Grey temples', size='48-16-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC027', color='C45', color_description='Shiny Lavender/Pink with Pink and Light Purple temples', size='48-16-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC027', color='C75', color_description='Shiny Orange/Yellow with Orange and Yellow temples', size='48-16-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC028', color='C3', color_description='Black and Red', size='49-17-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC028', color='C33', color_description='Dark Hot Pink', size='49-17-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='SC028', color='C80', color_description='Shiny Blue/Lt. Blue with Blue and Light Blue temples', size='49-17-135', material='TR90 and Silicone', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR708', color='C1', color_description='Matte Black with Black temples', size='40-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR708', color='C14', color_description='Matte Powder Blue with Blue temples', size='40-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR708', color='C15', color_description='Matte Light Purple with Light Purple temples', size='40-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR819', color='C1', color_description='Matte Black with Black temples', size='45-16-120', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR819', color='C14', color_description='Matte Powder Blue with Blue temples', size='45-16-120', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR819', color='C15', color_description='Matte Lavender with Lavender temples', size='45-16-120', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR869', color='C8', color_description='Matte Red with Red temples', size='44-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR869', color='C14', color_description='Matte Baby Blue with Blue temples', size='44-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR869', color='C15', color_description='Matte Lt. Purple with Purple temples', size='44-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR911', color='C14', color_description='Matte Baby Blue with Blue temples', size='44-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR911', color='C15', color_description='Matte Lavender with Lavender temples', size='44-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR912', color='C15', color_description='Matte Lavender with Lavender temples', size='43-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR912', color='C18', color_description='Matte Grey with Grey temples', size='43-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR936', color='C15', color_description='Matte Lavender with Lavender temples', size='44-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR936', color='C16', color_description='Matte Brown with Brown temples', size='44-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='TR936', color='C18', color_description='Matte Grey with Grey temples', size='44-16-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='S3594100', color='C14', color_description='Matte Baby Blue with Blue temples', size='41-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+item.new({subtype='frame', brand='BubbleGum', model='S3594100', color='C15', color_description='Matte Lavender with Lavender temples', size='41-15-115', material='TR90 | Includes elastic adjustable holder', price_silver=15, price_gold=12, description_short='TR90 optical frame for kids in durable material', categories={'Bubble Gum','Collections Catalog','Exclusive Labels','Kids','Optical Frames','Plastic','TR90 & Silicone'}})
+
+item.new({subtype='frame', brand='Kadima', model='KD YC2035', color='C1', color_description='Black and Gold', size='51-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2035', color='C2', color_description='Demi and Gold', size='51-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2035', color='C4', color_description='Black and Silver', size='51-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2036', color='C1', color_description='Black and Silver', size='50-19-142', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate and Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2036', color='C2', color_description='Multi Blue-Brown and Silver', size='50-19-142', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate and Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2036', color='C4', color_description='Black and Gold', size='50-19-142', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate and Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2039', color='C1', color_description='Black and Silver', size='55-17-145', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Unisex optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2041', color='C1', color_description='Black', size='52-18-143', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2041', color='C3', color_description='Blue', size='52-18-143', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2041', color='C4', color_description='Crystal Red', size='52-18-143', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2105', color='C1', color_description='Black and Gold', size='53-18-140', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate and Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2105', color='C2', color_description='Demi Amber and Gold', size='53-18-140', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate and Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD YC2105', color='C3', color_description='Caramel and Silver', size='53-18-140', material='Acetate and Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate and Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4170', color='2001', color_description='Ebony and Gold | 55-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4170', color='2007', color_description='Burgundy and Gold | 55-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4170', color='2022', color_description='Violet and Gold | 55-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4170', color='2031', color_description='Copper and Gold | 55-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4181', color='2001', color_description='Ebony and Gold | 53-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4181', color='2022', color_description='Violet and Gold | 53-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4181', color='2031', color_description='Copper and Gold | 53-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4205', color='2007', color_description='Red and Gold | 53-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4205', color='2022', color_description='Violet and Gold | 53-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='BV 4205', color='2031', color_description='Copper and Gold | 53-16-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='GY 7053', color='C01', color_description='Ebony and Gold | 53-15-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='GY 7053', color='C02', color_description='Copper and Gold | 53-15-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='GY 7053', color='C03', color_description='Violet and Gold | 53-15-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='8181', color='C03',  color_description='Ebony and Silver | 53-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8181', color='C04',  color_description='Gunmetal and Silver | 53-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8181', color='C05',  color_description='Copper and Gold | 53-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8182', color='C02',  color_description='Ebony and Silver | 52-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8182', color='C05',  color_description='Copper and Gold | 52-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8184', color='C2',   color_description='Ebony and Silver | 54-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8184', color='C3',   color_description='Ebony and Gunmetal | 54-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='8184', color='C4',   color_description='Brown and Silver | 54-17-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Men’s optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='1802', color='C3',   color_description='Copper and Gold | 53-20-138', material='Monel Metal', price_silver=18, price_gold=14, description_short='Unisex optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='1802', color='C5',   color_description='Navy Blue and Silver | 53-20-138', material='Monel Metal', price_silver=18, price_gold=14, description_short='Unisex optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 6821', color='C1',color_description='Black', size='53-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 6821', color='C2',color_description='Brown Multi', size='53-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 6821', color='C5',color_description='Lavender Multi', size='53-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='P7003', color='C1',  color_description='Black and Silver details | 55-16-142', material='Acetate', price_silver=18, price_gold=14, description_short='Unisex optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='P7003', color='C2',  color_description='Havanna and Gold details | 55-16-142', material='Acetate', price_silver=18, price_gold=14, description_short='Unisex optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='TF2192', color='C1', color_description='Ebony and Gold | 53-18-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='TF2192', color='C2', color_description='Copper and Gold | 53-18-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='TF2192', color='C4', color_description='Burgundy and Gold | 53-18-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='TF2192', color='C5', color_description='Purple and Silver | 53-18-140', material='Monel Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='WD4003', color='C2', color_description='Lavender-Grey Multi', size='53-15-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='WD4003', color='C4', color_description='Pearl-Grey Multi', size='53-15-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='WD4003', color='C6', color_description='Brick-Brown Multi', size='53-15-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='RD377', color='C2',  color_description='Havanna and Gold details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='RD377', color='C3',  color_description='Grey marble and Gold details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='RD377', color='C5',  color_description='Burgundy marble and Gold details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='RD377', color='C7',  color_description='Blue marble and Gold details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 650', color='C1', color_description='Honey-Aqua and Gold details', size='54-15-145', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 650', color='C2', color_description='Olive-Caramel and Gold details', size='54-15-145', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 650', color='C3', color_description='Violet-Lavender multi and Gold details', size='54-15-145', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 651', color='C1', color_description='Honey-Aqua and Gold details', size='53-16-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 651', color='C2', color_description='Olive-Caramel and Gold details', size='53-16-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 651', color='C3', color_description='Violet-Lavender multi and Gold details', size='53-16-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 652', color='C1', color_description='Black and Gold details', size='53-15-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 652', color='C2', color_description='Purple and Gold details', size='53-15-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 652', color='C3', color_description='Beige and Gold details', size='53-15-135', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 681', color='C2', color_description='Graffite Grey and Silver | 50-19-147', material='Metal and Plastic', price_silver=18, price_gold=14, description_short='Unisex optical frame, Metal and plastic', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal and plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 681', color='C2', color_description='Light Grey and Silver | 50-19-147', material='Metal and Plastic', price_silver=18, price_gold=14, description_short='Unisex optical frame, Metal and plastic', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal and plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 681', color='C4', color_description='Matte Brown and Gold | 50-19-147', material='Metal and Plastic', price_silver=18, price_gold=14, description_short='Unisex optical frame, Metal and plastic', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal and plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 683', color='C2', color_description='Matte Copper and Gold details', size='54-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 683', color='C3', color_description='Matte Purple and Gold details', size='54-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 683', color='C4', color_description='Matte Burgundy and Gold details', size='54-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 684', color='C1', color_description='Matte Black and Gold details', size='52-16-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 684', color='C3', color_description='Matte Purple and Gold details', size='52-16-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 684', color='C4', color_description='Matte Burgundy and Gold details', size='52-16-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 685', color='C1', color_description='Matte Black and Gold details', size='53-17-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 685', color='C3', color_description='Matte Purple and Gold details', size='53-17-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 685', color='C2', color_description='Matte Copper and Gold details', size='53-17-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 686', color='C1', color_description='Matte Black and Gold details', size='53-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 686', color='C3', color_description='Matte Purple and Gold details', size='53-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 686', color='C4', color_description='Matte Burgundy and Gold details', size='53-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 687', color='C1', color_description='Matte Black and Silver details', size='53-15-140', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 687', color='C2', color_description='Matte Copper and Gold details', size='53-15-142', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 687', color='C3', color_description='Matte Purple and Gold details', size='53-15-142', material='Metal', price_silver=18, price_gold=14, description_short='Lady optical frame, Metal', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 688', color='C5', color_description='Grey marble and Gold details', size='56-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 688', color='C6', color_description='Purple marble and Gold details', size='56-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 689', color='C7', color_description='Purple marble and Gold details', size='54-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 689', color='C6', color_description='Red marble and Gold details', size='54-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 689', color='C1', color_description='Black and Gold details', size='54-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 690', color='C1', color_description='Black and Gold details', size='53-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 690', color='C4', color_description='Blue and Gold details', size='53-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 690', color='C6', color_description='Purple and Gold details', size='53-18-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 691', color='C1', color_description='Purple Multi and Gold details| Size: 52-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 691', color='C6', color_description='Caramel and Gold details| Size: 52-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 691', color='C7', color_description='Violet Crystal and Gold details| Size: 52-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 692', color='C1', color_description='Black and Gold details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Men’s optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 692', color='C2', color_description='Matte Black and Silver details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Men’s optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='KD 692', color='C1', color_description='Matte Navy and Silver details | 53-17-140', material='Acetate', price_silver=18, price_gold=14, description_short='Men’s optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kadima', model='MG6003', color='C3', color_description='Burgundy and Gunmetal details', size='54-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='MG6003', color='C4', color_description='Violet Crystal and Silver details', size='54-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Kadima', model='MG6003', color='C5', color_description='Blue/Black and Gunmetal details', size='54-16-140', material='Acetate', price_silver=18, price_gold=14, description_short='Lady optical frame, Acetate', categories={'Kadima', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+
+item.new({subtype='frame', brand='Primmera', model='1064', color='C2', color_description='Shiny Gun', size='54-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='3125', color='BUR',color_description='Shiny Burgundy', size='53-17-138', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='3125', color='PNK',color_description='Shiny Pink', size='53-17-138', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='5063', color='C3',color_description='Matte Blue /Navy', size='55-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Unisex frame, Metal', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG1731', color='C1', color_description='Black', size='53-16-140', material='Acetate', price_silver=10.50, price_gold=8.50, description_short='Acetate Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG1731', color='C2', color_description='Brown', size='53-16-140', material='Acetate', price_silver=10.50, price_gold=8.50, description_short='Acetate Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5177', color='C2', color_description='Shiny Silver-Black', size='59-15-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5177', color='C3', color_description='Shiny Gold-Brown', size='59-15-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5222', color='C1', color_description='Matte Black', size='53-17-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5222', color='C3', color_description='Matte Blue', size='53-17-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5222', color='C4', color_description='Matte Copper', size='53-17-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5239', color='C4', color_description='Matte Purple-Gold', size='51-17-135', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5242', color='C1', color_description='Gold /Black', size='52-17-135', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Lady frame with Strass detail', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5242', color='C2', color_description='Gun /Violet', size='52-17-135', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Lady frame with Strass detail', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5242', color='C4', color_description='Copper /Brown', size='52-17-135', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Lady frame with Strass detail', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5280', color='C1', color_description='Matte Black', size='54-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5280', color='C2', color_description='Shiny Black', size='54-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='HG5280', color='C3', color_description='Shiny Gun', size='54-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='M18366', color='C2', color_description='Shiny Gold', size='55-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='M18366', color='C3N', color_description='Navy Blue', size='55-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='M18366', color='C3B', color_description='Brown/orange', size='55-18-140', material='Metal', price_silver=10.50, price_gold=8.50, description_short='Metal Men’s frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8014', color='C3', color_description='Black/Blue-Gold Mosaic', size='51-17-145', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8030', color='C2', color_description='Matte Black/Blue Stripe', size='52-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8030', color='C3', color_description='Matte Black/Burg Stripe', size='52-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8030', color='C4', color_description='Matte Black/Burg Mottled', size='52-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8086', color='C2', color_description='Black/Zebra', size='53-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8086', color='C4', color_description='Brown/Caramel', size='53-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH8086', color='C5', color_description='Purple/Lavender', size='53-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH18082', color='C2009', color_description='Violet', size='54-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH18082', color='C2022', color_description='Grey/Blue', size='54-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH18082', color='C2028', color_description='Black/Wine', size='54-17-140', material='Injected', price_silver=10.50, price_gold=8.50, description_short='Injected Unisex frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH18090', color='C8', color_description='Black/Green', size='52-16-140', material='Acetate', price_silver=10.50, price_gold=8.50, description_short='Acetate Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH18090', color='C9', color_description='Tortoise Shell/Havanna', size='52-16-140', material='Acetate', price_silver=10.50, price_gold=8.50, description_short='Acetate Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Primmera', model='YH18090', color='C11',color_description='Black/Burgundy', size='52-16-140', material='Acetate', price_silver=10.50, price_gold=8.50, description_short='Acetate Lady frame', categories={'Primmera', 'Collections Catalog', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5453', color='669', color_description='Dark Demi/Gold', size='54-18-140', material='Metal and plastic', price_silver=35.00, price_gold=33.00, description_short='Lady optical frame, Metal and Plastic', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5454', color='414', color_description='Matte Navy', size='54-18-140', material='Metal', price_silver=35.00, price_gold=33.00, description_short='Men’s optical frame, Metal', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5650', color='214', color_description='Havana', size='50-17-140', material='Plastic', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5837', color='414', color_description='Crystal Cobalt Blue', size='52-16-140', material='Plastic', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5847A', color='215', color_description='Tortoise Shell', size='55-16-140', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Lady optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5886', color='278', color_description='Matte Grey/Bone/Navy', size='54-19-140', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5908', color='201', color_description='Havanna', size='51-18-140', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5909', color='201', color_description='Dark Havanna', size='51-18-140', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Lady optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5933', color='229', color_description='Black/Cobalt Blue Temples', size='51-16-140', material='Plastic', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5957', color='040', color_description='Grey', size='52-17-135', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5958', color='204', color_description='Crystal Havanna/Cobalt Blue Temples', size='52-17-135', material='Plastic', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK5974', color='214', color_description='Demi Amber', size='55-17-145', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK8522', color='239', color_description='Matte Havanna/Grey', size='51-20-140', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK8535', color='214', color_description='Tortoise Shell', size='51-17-135', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Lady optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Calvin Klein', model='CK18707', color='620',color_description='Crystal Brick Red', size='53-18-140', material='Acetate', price_silver=35.00, price_gold=33.00, description_short='Unisex optical frame, Acetate', categories={'Calvin Klein', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE079', color='0SN4', color_description='Taupe and Coral ', size='53-16-140', material='Metal', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE091', color='033M', color_description='Light Taupe-Burgundy ', size='53-16-135', material='Metal', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE091', color='0S68', color_description='Light Grey-Black ', size='53-16-135', material='Metal', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE094', color='0323', color_description='Beige, Brown, Black Multi and Gold ', size='52-17-135', material='Plastic and Metal', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE096', color='0530', color_description='Black and Red ', size='55-16-135', material='Metal', price_silver=55.00, price_gold=50.00, description_short='Unisex optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE123', color='0301', color_description='Black ', size='53-16-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE123', color='0I21', color_description='Navy Blue ', size='53-16-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE123', color='0R10', color_description='Dark Copper-Blue ', size='53-16-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE125', color='0E59', color_description='Brown-Gold ', size='54-15-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE125', color='0287', color_description='Dark Copper-Gold ', size='54-15-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE125', color='0301', color_description='Black-Red-Bone-Gold ', size='54-15-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE134', color='08FC', color_description='Brown Marble/Multi and Gold ', size='53-18-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE134', color='300Y', color_description='Wine/Multi and Gold ', size='53-18-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE134', color='0300', color_description='Black/Multi', size='53-18-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE137', color='0E59', color_description='Violet-Mauve ', size='54-16-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE137', color='0301', color_description='Dark Brown-Red ', size='54-16-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE137', color='0320', color_description='Marble Brown-Gold ', size='54-16-135', material='Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE146', color='0300', color_description='Brown Stripe and Gold ', size='51-19-145', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE146', color='0579', color_description='Black and Silver', size='51-19-145', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE146', color='0581', color_description='Marble Frosted Blue and Matte Silver', size='51-19-145', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE660', color='0G96', color_description='Rust and Demi', size='52-17-135', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE672', color='0M65', color_description='Multi Brown and Beige', size='54-15-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE673', color='06HN', color_description='Demi Stipe and Taupe', size='53-17-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE679', color='01GQ', color_description='Brown and Mauve Multi', size='53-15-135', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE729N', color='096N',color_description='Black/Grey Multi and Taupe', size='53-16-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE730N', color='0700',color_description='Black and Red', size='53-17-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE738', color='01GQ', color_description='Brown and Coral Multi', size='52-16-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE738', color='0700', color_description='Black and Rose Taupe', size='52-16-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE738', color='0752', color_description='Marble Brown', size='52-16-140', material='Plastic', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE799', color='06DQ', color_description='Black and Blue Multi', size='53-15-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE799', color='0752', color_description='Marble Brown and Red', size='53-15-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE800', color='0ADQ', color_description='Rust Brown-Bone-Coral', size='52-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE800', color='09RV', color_description='Red Wine', size='52-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE800', color='07C4', color_description='Black and Blue', size='52-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE801', color='0971', color_description='Violet and Blue', size='53-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE801', color='09P2', color_description='Black and Red', size='53-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE801', color='09RV', color_description='Red Wine', size='53-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE804', color='05AH', color_description='Burgundy Multi', size='54-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE804', color='0APK', color_description='Tortoise Shell', size='54-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE804', color='0U75', color_description='Black', size='54-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE806L', color='06YZ', color_description='Light Havanna Beige & Grey| Size: 54-15-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE806L', color='0752', color_description='Marble Brown-Beige-Black', size='54-15-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE812', color='09H7', color_description='Black-Red-Gun', size='51-20-145', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE812', color='1GZY', color_description='Demi-Navy-Gun', size='51-20-145', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE813', color='096X', color_description='Multi Brown-Purple', size='54-15-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE813', color='0D78', color_description='Purple Crystal', size='54-15-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE814', color='0722', color_description='Demi ', size='54-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE814', color='0AR3', color_description='Wine ', size='54-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE814', color='0700', color_description='Black ', size='54-16-135', material='Plastic', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE816', color='0752', color_description='Marble Brown-Powder Pink-Gold', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE816', color='0AFG', color_description='Reddish Brown ', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE816', color='0700', color_description='Black ', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE817', color='0GEN', color_description='Brown Stripe and Aqua-Gold ', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE817', color='06YH', color_description='Brown Marble', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE817', color='0AFG', color_description='Red Wine-Brown-Gold', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE817', color='0700', color_description='Black', size='53-16-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE818', color='0713', color_description='Rust Brown ', size='54-15-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Carolina Herrera', model='VHE818', color='0752', color_description='Marble Brown-Red-Gold ', size='54-15-135', material='Plastic and Metal', price_silver=75.00, price_gold=70.00, description_short='Lady optical frame, Acetate and Metal', categories={'Carolina Herrera', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0058Q', color='06L5', color_description='Light Fuschia and Crystal', size='53-17-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Lady’s, Adult, Teens, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0058Q', color='06PF', color_description='Crystalline Lilac ', size='53-17-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Lady’s, Adult, Teens, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0058Q', color='OT31', color_description='Violet/Powder Blue Temples', size='53-17-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Lady’s, Adult, Teens, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0060Q', color='0741', color_description='DemiAmber/Blue Temples', size='52-17-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0060Q', color='0W60', color_description='Navy Blue/Crystal light blue', size='52-17-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0063Q', color='0840M', color_description='Frosted Grey/Neon Green', size='51-19-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Lightweight, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0065Q', color='0F94', color_description='Matte Cobalt Blue/Silver', size='55-17-145', material='Metal (Stainless Steel)', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Lightweight, Metal (Stainless Steel)', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal (Stainless Steel)'}})
+item.new({subtype='frame', brand='Converse', model='VCO0065Q', color='0K07', color_description='Matte Black/Silver', size='55-17-145', material='Metal (Stainless Steel)', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Lightweight, Metal (Stainless Steel)', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal (Stainless Steel)'}})
+item.new({subtype='frame', brand='Converse', model='VCO0065Q', color='0539', color_description='Matte Taupe/Silver', size='55-17-145', material='Metal (Stainless Steel)', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Lightweight, Metal (Stainless Steel)', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal (Stainless Steel)'}})
+item.new({subtype='frame', brand='Converse', model='VCO0071Q', color='09GU', color_description='Navy dark Blue/Silver ', size='52-17-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0075Q', color='0W74', color_description='Matte Navy/Red Twist and Turn Temples', size='54-15-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0124Q', color='0627', color_description='Dark Crystal Grey/Matte Gun/Red', size='50-20-145', material='Metal and Plastic', price_silver=50.00, price_gold=48.00, description_short='Unisex frame, Lightweight, Metal and Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic and Metal'}})
+item.new({subtype='frame', brand='Converse', model='VCO0133Q', color='0568', color_description='Shiny Gun/Red Twist and Turn Temples ', size='55-17-145', material='Metal', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Metal', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal'}})
+item.new({subtype='frame', brand='Converse', model='VCO0174Q', color='0892', color_description='Crystalline Grey', size='54-18-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0174Q', color='0703Y', color_description='Matte Black/Blue Temples', size='54-18-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0176Q', color='01AY', color_description='Brown', size='54-17-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0176Q', color='7NSM', color_description='Matte Navy Blue', size='54-17-145', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0184Q', color='0700', color_description='Black/Grey Twist and Turn Temples', size='53-16-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0184Q', color='0738', color_description='Frosted Demi/Twist and Turn Olive temples', size='53-16-140', material='Plastic', price_silver=50.00, price_gold=48.00, description_short='Men’s frame, Plastic', categories={'Converse', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Gant', model='GW102', color='BLKTO', color_description='Black/Tortoise Temples', size='53-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA3030', color='BLK', color_description='Black/Demi and Gold Temples', size='54-16-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA3054', color='009', color_description='Matte Gunmetal/Navy and Red Temples', size='53-17-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Unisex frame, Metal (Stainless Steel)', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Gant', model='GA3099', color='002', color_description='Matte Black', size='54-16-140', material='Plastic', price_silver=20.00, price_gold=18.00, description_short='Unisex frame, Plastic', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Gant', model='GA3116', color='052', color_description='Tortoise Shell/Silver', size='50-19-140', material='Acetate and Metal ', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate and Metal', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Gant', model='GA3163', color='002', color_description='Matte Black/Houndstooth print Temples', size='51-19-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Unisex frame, Metal (Stainless Steel)', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4055', color='002', color_description='Matte Black/Tortoise Shell Temples', size='51-16-135', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Metal (Stainless Steel)', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4055', color='049', color_description='Matte Copper/Tortoise Shell Temples', size='51-16-135', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Metal (Stainless Steel)', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4055', color='070', color_description='Matte Burgundy/MaroonTemples', size='51-16-135', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Metal (Stainless Steel)', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4056', color='001', color_description='Black/Tortoise Shell Temples', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4056', color='052', color_description='Tortoise Shell', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4058', color='001', color_description='Black', size='50-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4058', color='056', color_description='Demi Amber', size='50-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4058', color='092', color_description='Navy Blue/Crystal Blue', size='52-18-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4065', color='001', color_description='Black', size='49-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4065', color='045', color_description='Almond Milk with Brown Temples', size='52-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4065', color='052', color_description='Tortoise Shell', size='49-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4069', color='069', color_description='Burgundy and Honey', size='50-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Petite Fit, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GA4070', color='001', color_description='Black', size='53-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s frame, Acetate', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Gant', model='GR105', color='MBLKGN', color_description='Matte Black/Shiny Gun/Matte Tortoise Temples', size='47-21-145', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Unisex frame, Rugger, Metal ', categories={'Gant', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', Metal}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1482ST', color='BLKGRY', color_description='Matte Black-Grey with rhinestones', size='50-19-135', material='Metal', price_silver=17.00, price_gold=15.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1482ST', color='BRNPK', color_description='Matte Brown-Pink with rhinestones', size='50-19-135', material='Metal', price_silver=17.00, price_gold=15.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1562', color='BRNOL', color_description='Shiny Copper/Gold', size='50-17-135', material='Metal', price_silver=17.00, price_gold=15.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1652', color='BLK', color_description='Shiny Black/ Grey', size='52-17-135', material='Metal', price_silver=17.00, price_gold=15.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1736', color='BLK', color_description='Matte Black-Gold with caramel temples', size='53-18-140', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1803', color='MGRN', color_description='Matte Camouflage', size='53-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1811', color='MBRN', color_description='Frosted Caramel', size='53-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1827', color='BLK', color_description='Black with Matte Black Reptile Temples', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1827', color='BL', color_description='Matte Blueish Grey with Matte Black Reptile Temples', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1844', color='BL', color_description='Frosted Light Blue with Grey Temples', size='53-18-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1846', color='LBRN', color_description='Tree Bark with Capuccino', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1866F', color='052', color_description='Havanna marble with Brown and orangeTemples', size='55-18-145', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1869', color='052', color_description='Frosted Tortoise Shell with Matte Brown Temples', size='53-17-145', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1872', color='002', color_description='Matte Black with Black and Red Temples', size='53-17-145', material='Plastic', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Plastic', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1876', color='049', color_description='Matte Brown with Matte Brown-Matte Gold temples ', size='53-17-140', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1879', color='049', color_description='Matte Copper with Matte Brown temples', size='56-17-140', material='Metal ', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', Metal }, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1886', color='052', color_description='Matte Copper and Tortoise w/matte copper temples ', size='53-16-140', material='Metal and plastic', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Metal and plastic', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', Metal and plastic}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1889', color='092', color_description='Matte Navy Blue with Blue and Red temples ', size='53-16-145', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Metal (Stainless Steel)', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1889', color='009', color_description='Matte Gunmetal with Taupe temples ', size='53-16-145', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Metal (Stainless Steel)', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1912', color='009', color_description='Matte Gunmetal with Matte Black temples', size='55-15-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal (Stainless Steel)', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1913', color='033', color_description='Matte Brown/Matte Gold with Matte Brown Temples', size='51-20-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal (Stainless Steel)', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1926', color='009', color_description='Matte Gunmetal with Matte Brown-Navy temples ', size='54-17-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal (Stainless Steel)', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Guess', model='GU1961', color='005', color_description='Matte Black with Black/Wine temples', size='52-18-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Metal (Stainless Steel)', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2274', color='AMB', color_description='Marbled Caramel/Lavender', size='52-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2287', color='BLK', color_description='Black/White with Silver and Lilac Temples w/ rhinestones', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2288', color='BRN', color_description='Dark Honey with Matte Copper Temples w/ rhinestones', size='51-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2288', color='WHT', color_description='Crystal with White and Silver Temples w/ rhinestones', size='51-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2333', color='DKPUR', color_description='Gradient Purple with Reptile print Temples', size='52-18-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2347', color='BLK', color_description='Matte Black with Rhinestones', size='51-16-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2351', color='AMB', color_description='Marbled Caramel/Lavender & Matte Gold', size='53-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2373', color='BLK', color_description='Black and Crystal w/silver chain insert on temples', size='51-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2381', color='TO', color_description='Tortoise Shell with Matte Gold and Copper Braid on temple', size='52-16-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2383', color='PUR', color_description='Gradient Mauve and Light Honey', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GUA2385', color='PUR', color_description='Gradient Mauve and Light Honey', size='52-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2387', color='O64', color_description='Dark Purple w/rhinestones on Temples', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2387', color='O64', color_description='Dark Purple w/rhinestones on Temples', size='51-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2388', color='BRN', color_description='Matte Brown with Rhinestones on Temples', size='52-18-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2414', color='BLK', color_description='Black/Aqua w/rhinestones on Temples', size='50-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2414', color='TO', color_description='Dark Tortoise/Bone w/rhinestones on Temples', size='50-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2414', color='BE', color_description='Light Beige/Dark Brown w/rhinestones on Temples', size='50-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2415', color='BL', color_description='Pearly Light Blue w/rhinestones on Temples', size='51-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2417', color='081', color_description='Dark Violet', size='49-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2417', color='096', color_description='Dark Forest Green', size='52-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2463', color='BLPUR', color_description='Transparent Blueish Purple', size='55-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2464', color='Burd', color_description='Dark Burgundy/Red', size='54-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2466', color='BLGRN', color_description='Frosted Blueish Green', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2466', color='PRBL', color_description='Frosted Purple-Blue', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2466', color='BLK', color_description='Black with Wine temples', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2492', color='052', color_description='Havanna Brown wth gold chain detail', size='52-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2494', color='001', color_description='Black and Crystal', size='53-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2494', color='056', color_description='Tortoise & Olive Green', size='53-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2506', color='005', color_description='Black with animal print/black temples', size='52-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2513', color='047', color_description='Transparent Honey with animal print/brown temples', size='53-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2514', color='BLK', color_description='Black', size='50-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2514', color='049', color_description='Matte Brown', size='50-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2514', color='082', color_description='Matte Violet', size='50-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2516', color='001', color_description='Satin Black and Silver temples w/Black tips', size='53-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2516', color='048', color_description='Matte Brown and Gold temples w/Tortoise Shell tips', size='53-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2516', color='048', color_description='Matte Brown and Gold temples w/Tortoise Shell tips', size='53-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2517', color='081', color_description='Crystalline Violet', size='50-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2521', color='049', color_description='Matte Brown and Tortoise Shell temples', size='53-16-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2523', color='048', color_description='Caramel/Gold', size='52-16-135', material='Metal and Plastic', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal and Plastic', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal and Plastic'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2553', color='005', color_description='Black-Blue with sparkles', size='53-16-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2554', color='050', color_description='Brown with Strass', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2561F', color='045', color_description='Crystalline Brown', size='53-15-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2566', color='005', color_description='Black-Matte Gold', size='53-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2568', color='002', color_description='Matte Black with Rhinestones', size='52-17-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2582', color='052', color_description='Tortoise Shell/Light Purple', size='51-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2589', color='092', color_description='Blue and Crystal w/silver side detail', size='54-17-140', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2596', color='003', color_description='Black and Crystal', size='49-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2604', color='001', color_description='Black-Tortoise-Matte Gold', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2604', color='050', color_description='Brown-Tortoise-Orange-Matte Copper Temples', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2604', color='068', color_description='Lipstick Red with Matte Copper Temples', size='52-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2606', color='066', color_description='Strawberry Red', size='52-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2527', color='049', color_description='Matte Copper/Matte Gold and Teal tips', size='51-16-135', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2635', color='001', color_description='Tortoise Shell-Matte Gold/Gold', size='54-14-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2635', color='050', color_description='Brown-Tortoise-Orange-Matte Copper', size='54-14-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2635', color='083', color_description='Purple with Matte Silver Temples', size='54-14-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult',  'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU3025', color='052', color_description='Matte Demi/Shiny Copper', size='51-21-135', material='Acetate and Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate and Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU3025', color='073', color_description='Bubblegum Matte Pink/Shiny Gold', size='51-21-135', material='Acetate and Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate and Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU3025', color='088', color_description='Matte Teal/Shiny Green', size='51-21-135', material='Acetate and Metal', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate and Metal', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Acetate and Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Guess', model='GU9145', color='091', color_description='Matte Navy/Neon Yellow', size='48-16-130', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Unisex optical frame, Acetate', categories={'Guess', 'Collections Catalog', 'Designer Brands', 'Teens', 'Children', 'Optical Frames', 'Acetate'}, tags={'Teens', 'Children', 'Unisex frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD105', color='BLKBL', color_description='Black and Crystal Blue', size='49-17-130', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD105', color='BLKGRN', color_description='Black and Crystal Green', size='49-17-130', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD123T', color='005', color_description='Matte Black – Matte Gun and Navy Temples', size='47-17-130', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD123T', color='009', color_description='Matte Gun – Matte Gun and Navy Temples', size='47-17-130', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD129T', color='001', color_description='Black', size='47-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD403', color='AGUN', color_description='Brushed Gunmetal', size='59-17-145', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD428', color='BLK', color_description='Black', size='54-17-145', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD478', color='BLK', color_description='Matte Black', size='52-18-145', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD0511', color='DBRN', color_description='Brown/Copper', size='53-15-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', Acetate}, tags={'Adult', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD0531', color='001', color_description='Black/Silver with strass', size='53-16-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD0532', color='002', color_description='Black/Animal Print w/strass', size='52-16-135', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Lady’s optical frame, Metal', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD0539', color='001', color_description='Black/Granite w/strass', size='54-17-135', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Lady’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', Acetate}, tags={'Adult', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD0721', color='BRN', color_description='Matte Brown', size='53-18-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal (Stainless Steel)', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Harley Davidson', model='HD0781', color='091', color_description='Matte Black', size='57-17-150', material='Acetate', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Acetate', categories={'Harley Davidson', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0084', color='6EC', color_description='Black ', size='52-16-140', material='Acetate', price_silver=37.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0209', color='KOL', color_description='Matte Matte Navy ', size='54-18-140', material='Metal Stainless Steel', price_silver=37.00, price_gold=35.00, description_short='Men’s optical frame, Metal (Stainless Steel)', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0230', color='LHI', color_description='Brown/Orange ', size='57-17-140', material='Acetate', price_silver=37.00, price_gold=35.00, description_short='Unisex optical frame, Acetate', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0233', color='LH2', color_description='Matte Copper Brown/Pink ', size='54-16-140', material='Metal', price_silver=37.00, price_gold=35.00, description_short='Lady’s optical frame, Metal', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady’s frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0235', color='LEI', color_description='Frosted Blue ', size='53-17-140', material='Acetate', price_silver=37.00, price_gold=35.00, description_short='Unisex optical frame, Acetate', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0257', color='5FC', color_description='Marble Brown ', size='53-16-140', material='Acetate', price_silver=37.00, price_gold=35.00, description_short='Unisex optical frame, Acetate', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0262/F', color='TAY', color_description='Matte Black ', size='54-16-140', material='Acetate', price_silver=37.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Hugo Boss', model='BO0318', color='RCT', color_description='Frosted Blue ', size='52-17-140', material='Acetate', price_silver=37.00, price_gold=35.00, description_short='Unisex optical frame, Acetate', categories={'Hugo Boss', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC746', color='005', color_description='Dark Brown Reptile', size='53-15-135', material='Acetate', price_silver=12.00, price_gold=10.00, description_short='Lady optical frame, Acetate', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC746', color='050', color_description='Honey Brown Reptile', size='53-15-135', material='Acetate', price_silver=12.00, price_gold=10.00, description_short='Lady optical frame, Acetate', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC778', color='092', color_description='Matte Navy Blue', size='55-17-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC779', color='009', color_description='Matte Brown', size='54-16-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC780', color='002', color_description='Matte Black/Frosted Crystal', size='50-17-140', material='Plastic', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Plastic', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC782', color='002', color_description='Matte Gunmetal', size='53-18-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC782', color='049', color_description='Matte Copper Brown', size='53-18-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole Reaction', model='KC783', color='049', color_description='Matte Copper Brown', size='52-17-140', material='Metal (Stainless Steel)', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Kenneth Cole Reaction', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC203', color='002', color_description='Matte Gun/Granite Temples', size='53-17-135', material='Metal', price_silver=22.00, price_gold=20.00, description_short='Lady optical frame, Metal', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC254', color='001', color_description='Black', size='51-18-140', material='Plastic', price_silver=22.00, price_gold=20.00, description_short='Men’s optical frame, plastic', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC258', color='001', color_description='Black/Matte Gold Temples', size='54-15-135', material='Plastic', price_silver=22.00, price_gold=20.00, description_short='Unisex optical frame, Plastic', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC258', color='052', color_description='Demi/Matte Gold Temples', size='54-15-135', material='Plastic', price_silver=22.00, price_gold=20.00, description_short='Unisex optical frame, Plastic', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC259', color='001', color_description='Satin Black/Demi Temples', size='54-16-135', material='Metal (Stainless Steel)', price_silver=22.00, price_gold=20.00, description_short='Unisex optical frame, Metal (Stainless Steel)', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC259', color='045', color_description='Matte Copper/Matte Demi Temples', size='54-16-135', material='Metal (Stainless Steel)', price_silver=22.00, price_gold=20.00, description_short='Unisex optical frame, Metal (Stainless Steel)', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC266', color='091', color_description='Matte Navy/Gun', size='52-18-145', material='Plastic and Metal', price_silver=22.00, price_gold=20.00, description_short='Unisex optical frame, Plastic and Metal', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic and Metal'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kenneth Cole New York', model='KC271', color='002', color_description='Matte Black', size='54-18-145', material='Plastic', price_silver=22.00, price_gold=20.00, description_short='Men’s optical frame, plastic', categories={'Kenneth Cole New York', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2223', color='001', color_description='Matte Black/Green', size='56-17-145', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2233', color='424', color_description='Matte Navy/Neon Green', size='53-17-145', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2233', color='210', color_description='Matte Brown', size='53-17-145', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2239', color='424', color_description='Matte Black/Neon Yellow', size='56-17-140', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2239', color='002', color_description='Matte Black/Blue', size='56-17-140', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2242', color='002', color_description='Matte Black', size='54-16-1xx', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2242', color='424', color_description='Matte Blue', size='54-16-1xx', material='Metal', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Metal', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2660', color='215', color_description='Blue/Black Marble', size='53-15-140', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Unisex optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2660', color='001', color_description='Black', size='53-15-140', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Unisex optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2672', color='214', color_description='Tortoise/Olive Green', size='52-17-140', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2685', color='210', color_description='Striped Brown Grey', size='53-16-140', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Unisex optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2738', color='615', color_description='Burgundy/Red', size='53-15-135', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Lady optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2769', color='001', color_description='Black Butterscotch', size='52-15-140', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Unisex optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2771', color='424', color_description='Blue/Black-Yellow stripe', size='53-18-145', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2774', color='035', color_description='Grey and Black', size='54-15-140', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Lady optical frame, Plastic', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2774', color='467', color_description='Azure Aqua', size='54-15-140', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Lady optical frame, Plastic', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2783', color='210', color_description='Frosted Brown', size='53-16-135', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2794', color='604', color_description='Matte Brown', size='52-17-140', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Acetate', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Lacoste', model='L2818', color='424', color_description='Crystalline Blue', size='53-15-145', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Lacoste', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='37KD', color='001', color_description='Matte Black', size='52-20-135', material='Acetate', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Acetate', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', Acetate}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='4278', color='005', color_description='Matte Black', size='54-16-140', material='Flexon Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='4281', color='001', color_description='Matte Black-Neon Yellow', size='52-16-140', material='Flexon Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='7070/2', color='035', color_description='Matte Black', size='57-15-135', material='Stealth Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='7078', color='401', color_description='Matte Teal', size='57-15-140', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='7097', color='215', color_description='Matte Tortoise', size='54-17-140', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='7102', color='002', color_description='Matte Black', size='55-15-140', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='7104', color='001', color_description='Matte Black', size='54-17-140', material='Plastic', price_silver=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Nike', model='FLEET', color='001', color_description='Matte Black', size='55-16-140', material='TR90', price_gold=35.00, price_gold=32.00, description_short='Men’s optical frame, Plastic', categories={'Nike', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'TR90', 'Plastic'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PE0010O', color='005', color_description='Matte Black', size='53-15-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PE0020O', color='004', color_description='Crystalline Dark Smoke', size='53-18-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0031OA', color='005', color_description='Matte Burgundy', size='53-18-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0034O', color='004', color_description='Black/Yellow ', size='52-18-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0034O', color='002', color_description='Matte Dark Brown/Grey', size='52-18-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0034O', color='005', color_description='Crystalline Red/Grey-orange', size='52-18-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0035OA', color='001', color_description='Matte Black/Frosted Crystal ', size='53-17-145', material='Plastic', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Plastic', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0035OA', color='004', color_description='Matte Black/Frosted Orange ', size='53-18-145', material='Plastic', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Plastic', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0035OA', color='001', color_description='Black/Frosted Crystal', size='53-17-145', material='Acetate ', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0044OA', color='003', color_description='Tortoise/Red Suede', size='56-16-140', material='Acetate and Rubber', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0047O', color='003', color_description='Tortoise Shell ', size='53-19-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0047OA', color='009', color_description='Dark Tortoise ', size='57-17-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0047OA', color='011', color_description='Crystalline Blue ', size='57-17-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0048O', color='003', color_description='Tortoise Shell ', size='55-17-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0051OA', color='005', color_description='Crystalline Blue ', size='54-18-140', material='Plastic', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Plastic', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0051O', color='003', color_description='Crystalline Grey/Neon Yellow ', size='54-18-140', material='Plastic', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Plastic', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0051OA', color='001', color_description='Black ', size='56-15-140', material='Plastic', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Plastic', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0053OA', color='005', color_description='Matte Brown/Orange ', size='55-16-145', material='Plastic', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Plastic', categories={'Puma', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0066O', color='001', color_description='Matte Silver/Orange/White ', size='54-16-140', material='Metal', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Metal', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0067O', color='001', color_description='Black/Tortoise Shell ', size='53-18-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0067O', color='003', color_description='Crystalline Blue/Black ', size='53-18-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0067O', color='004', color_description='Tortoise/Orange ', size='53-18-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0068O', color='005', color_description='Crystalline Blue/Black ', size='52-17-140', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0075OA', color='003', color_description='Dark Grey/Crystalline Yellow ', size='56-16-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Puma', model='PU0075OA', color='001', color_description='Dark Navy Blue ', size='56-16-145', material='Acetate', price_silver=40.00, price_gold=35.00, description_short='Men’s optical frame, Acetate', categories={'Puma', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5228', color='2000', color_description='Black', size='50-17-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5228', color='2012', color_description='Tortoise Shell', size='50-17-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5248', color='2000', color_description='Black', size='51-19-145', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5248', color='2012', color_description='Tortoise Shell', size='51-19-145', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5298', color='2012', color_description='Tortoise Shell', size='53-17-135', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5316', color='2012', color_description='Tortoise Shell', size='53-16-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5316', color='2034', color_description='Tortoise Shell', size='53-16-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Unisex frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB5360', color='5713', color_description='Tortoise Shell w/Matte Gold metal temples| Size: 52-18-145', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Ladies optical frame, Acetate', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB6263', color='2509', color_description='Matte Black', size='54-17-145', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Men’s optical frame, Metal', categories={RayBan, 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB6336M', color='2503', color_description='Matte Black', size='53-16-140', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Men’s optical frame, Metal', categories={RayBan, 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB6336M', color='2758', color_description='Matte Brown', size='53-16-140', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Men’s optical frame, Metal', categories={RayBan, 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB6336', color='2857', color_description='Matte Silver/Mauve', size='51-18-140', material='Metal and Plastic', price_silver=45.00, price_gold=42.00, description_short='Unisex optical frame, Metal and Plastic', categories={RayBan, 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal and Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Ray Ban', model='RB8750', color='1195', color_description='Matte Silver/ Mauve plastic temples| Size: 54-17-140', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Ladies optical frame, Metal', categories={RayBan, 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2148', color='451', color_description='Teal and Shiny Gold', size='52-17-140', material='Metal', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Metal', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2674A', color='214', color_description='Demi Amber', size='54-15-135', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2676', color='315', color_description='Crystalline Olive Green', size='55-17-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Men’s optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2677A', color='001', color_description='Black ', size='55-17-145', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Men’s optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2749', color='741', color_description='Caramel and Bone', size='53-16-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2750', color='649', color_description='Burgundy and Demi', size='54-17-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2765', color='214', color_description='Tortoise Shell and Gold details', size='53-16-135', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2778', color='210', color_description='Caramel and Animal-Floral print', size='53-17-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2780', color='214', color_description='Tortoise Shell and Gold details', size='54-18-145', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Unisex optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2781', color='052', color_description='Olive Marble and Silver details', size='55-17-145', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Unisex optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2789', color='001', color_description='Black', size='52-15-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2789', color='996', color_description='Multicolor Crystal', size='52-15-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Lady optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Salvatore Ferragamo', model='SF2790', color='214', color_description='Tortoise Shell and Gold details', size='54-16-140', material='Acetate', price_silver=55.00, price_gold=50.00, description_short='Unisex optical frame, Acetate', categories={'Salvatore Ferragamo', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB513', color='002', color_description='Matte Gunmetal', size='52-16-140', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1276-1', color='002', color_description='Matte Black', size='55-18-140', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Timberland', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1308', color='090', color_description='Matte Navy', size='54-17-145', material='Plastic', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Plastic', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1347', color='049', color_description='Matte Brown/Orange ', size='55-17-140', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Timberland', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1350', color='009', color_description='Matte Gun/Olive ', size='54-17-145', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1350', color='037', color_description='Matte Brown', size='54-17-145', material='Metal', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Metal', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teens', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1351', color='091', color_description='Matte Navy/Matte Silver ', size='56-17-145', material='TR90', price_gold=20.00, price_gold=18.00, description_short='Men’s optical frame, TR90', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'TR90'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1353', color='005', color_description='Matte Black', size='51-20-140', material='TR90', price_gold=20.00, price_gold=18.00, description_short='Men’s optical frame, TR90', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'TR90'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1580', color='092', color_description='Matte Blue/Tortoise ', size='54-17-145', material='Plastic', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Plastic', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Timberland', model='TB1619', color='090', color_description='Navy Blue/Matte Silver ', size='54-17-145', material='Plastic', price_silver=20.00, price_gold=18.00, description_short='Men’s optical frame, Plastic', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tom Ford', model='TF5392', color='050', color_description='Taupe and Matte Gold ', size='54-18-135', material='Metal and plastic', price_silver=80.00, price_gold=75.00, description_short='Lady optical frame, Metal and Plastic', categories={'Tom Ford', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal and Plastic'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Tom Ford', model='TF5392', color='020', color_description='Grey and Matte Gold ', size='54-18-135', material='Metal and plastic', price_silver=80.00, price_gold=75.00, description_short='Lady optical frame, Metal and Plastic', categories={'Tom Ford', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Metal and Plastic'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Tom Ford', model='TF5142', color='059', color_description='Grey and Gold detail ', size='54-15-135', material='Acetate', price_silver=80.00, price_gold=75.00, description_short='Lady optical frame, Acetate', categories={'Tom Ford', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Tom Ford', model='TF5431', color='001', color_description='Black and Gold detail ', size='53-16-145', material='Acetate', price_silver=80.00, price_gold=75.00, description_short='Lady optical frame, Acetate', categories={'Tom Ford', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1026', color='UNV', color_description='Dark Chocolate', size='50-18-135', material='Metal (Stainless Steel)', price_silver=40.00, price_gold=38.00, description_short='Unisex Optical frames, Metal', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1163', color='V60', color_description='Dark Chocolate/Burgundy', size='56-14-140', material='Metal (Stainless Steel)', price_silver=40.00, price_gold=38.00, description_short='Men’s Optical frames, Metal (Stainless Steel)', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1195', color='MPZ', color_description='Black', size='54-17-145', material='Metal (Stainless Steel)', price_silver=40.00, price_gold=38.00, description_short='Men’s Optical frames, Metal (Stainless Steel)', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1284', color='FO5', color_description='Matte Gunmetal', size='53-17-140', material='Metal (Stainless Steel)', price_silver=40.00, price_gold=38.00, description_short='Men’s Optical frames, Metal (Stainless Steel)', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1326', color='03V', color_description='Chocolate/Orange', size='52-17-140', material='Metal (Stainless Steel)', price_silver=40.00, price_gold=38.00, description_short='Men’s Optical frames, Metal (Stainless Steel)', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1353', color='K0C', color_description='Matte Black/Frosted Granite', size='51-17-145', material='Acetate', price_silver=40.00, price_gold=38.00, description_short='Men’s optical frame, Acetate', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1353', color='K03', color_description='Matte Demi Brown', size='51-17-145', material='Acetate', price_silver=40.00, price_gold=38.00, description_short='Men’s optical frame, Acetate', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1357', color='K2F', color_description='Black', size='53-17-145', material='Metal ', price_silver=40.00, price_gold=38.00, description_short='Men’s Optical frames, Metal', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1406', color='T99', color_description='Matte Demi Brown-Blue', size='54-17-145', material='Acetate', price_silver=40.00, price_gold=38.00, description_short='Men’s optical frame, Acetate', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1436', color='U7M', color_description='Black/Matte Silver', size='53-17-145', material='Acetate', price_silver=40.00, price_gold=38.00, description_short='Men’s optical frame, Acetate', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1477', color='N9P', color_description='Matte Demi Brown', size='50-21-145', material='Acetate', price_silver=40.00, price_gold=38.00, description_short='Men’s optical frame, Acetate', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tommy Hilfiger', model='TH1489', color='KJ1', color_description='Light Shiny Gunmetal', size='55-19-143', material='Metal (Stainless Steel)', price_silver=40.00, price_gold=38.00, description_short='Men’s Optical frames, Metal (Stainless Steel)', categories={'Tommy Hilfiger', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal (Stainless Steel)'}, tags={'Adult', 'Teens', 'Men’s frames'}})
+item.new({subtype='frame', brand='Tory Burch', model='TY2055', color='1475', color_description='Grey Marble ', size='53-16-135', material='Acetate', price_silver=60.00, price_gold=55.00, description_short='Lady optical frame, Acetate', categories={'Tory Burch', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTK006', color='0F98', color_description='Lavender/Silver ', size='49-16-125', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Teen optical frame, Metal', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Teens', 'Optical Frames', 'Metal'}, tags={'Teen frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO318S', color='08R9', color_description='Copper/Demi Temples w/pearl detail ', size='54-17-135', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Metal', categories={'Tous', 'Collections Catalog', 'Designer Brands' , 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO347', color='08M6', color_description='Violet-Gold/Taupe Temples', size='53-15-135', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Metal', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO348', color='01HD', color_description='Violet-Silver/Lavender w/Tous logo print Temples', size='54-17-135', material='Metal', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Metal (Stainless Steel)', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Metal'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO821', color='0B87', color_description='Lavender/Gradient Temples', size='53-15-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO878', color='0D27', color_description='Powder Blue/Rubber Temples', size='53-15-135', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO878', color='0M79', color_description='Beige/Rubber Temples', size='53-15-135', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO881', color='0XAB', color_description='Mauve/Silver', size='51-18-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO930', color='0700', color_description='Black/Grey Tous logo print Temples', size='52-16-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO930', color='06PB', color_description='Caramel/Brown & Beige Tous logo print Temples', size='52-16-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+item.new({subtype='frame', brand='Tous', model='VTO933', color='07TB', color_description='Marble Brown/Coral and Brown Temples-Gold', size='53-16-140', material='Acetate', price_silver=45.00, price_gold=42.00, description_short='Lady optical frame, Acetate', categories={'Tous', 'Collections Catalog', 'Designer Brands', 'Adult', 'Teen', 'Optical Frames', 'Acetate'}, tags={'Adult', 'Teens', 'Lady frames'}})
+
+item.new({subtype='frame', brand='Converse', model='VCO0058Q', color='0741',  size='53- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0059Q', color='0703',  size='53- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0059Q', color='09GU',  size='53- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0063Q', color='06RV',  size='51- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Unisex frame', 'Plastic	Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0069Q', color='0978',  size='51- - ', material='metal',	  price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0075Q', color='0703',  size='54- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0124Q', color='0627H', size='50- - ', material='metal',	  price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0131Q', color='0722Y', size='54- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames'}})
+item.new({subtype='frame', brand='Converse', model='VCO0133Q', color='0627',  size='55- - ', material='metal',	  price_silver=50, price_gold=48,	categories={'Men’s frame', 'Metal	Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames', 'Metal'}})
+item.new({subtype='frame', brand='Converse', model='VCO0174Q', color='0W47Y', size='54- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Men’s frame', 'Plastic	Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0176Q', color='0700',  size='54- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Men’s frame', 'Plastic	Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames', 'Plastic'}})
+item.new({subtype='frame', brand='Converse', model='VCO0184Q', color='7NSM',  size='53- - ', material='plastic',	price_silver=50, price_gold=48,	categories={'Men’s frame', 'Plastic	Converse', 'Collections Catalog', 'Designer Brands'}, tags={'Adult', 'Optical Frames', 'Plastic'}})
+
+
+
+
+item.new({subtype='frame', brand='Kapricci', model='K9991', color='C27', size='52-16-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9991', color='C96', size='52-16-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9991', color='C99', size='52-16-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9992', color='C27', size='55-17-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9992', color='C98', size='55-17-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9992', color='C99', size='55-17-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9993', color='C27', size='51-18-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9993', color='C96', size='51-18-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9993', color='C99', size='51-18-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9994', color='C26', size='52-17-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9994', color='C76', size='52-17-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9994', color='C95', size='52-17-135', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9995', color='C26', size='54-16-142', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9995', color='C30', size='54-16-142', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+item.new({subtype='frame', brand='Kapricci', model='K9995', color='C66', size='54-16-142', material='metal',	price_silver=10, price_gold=8, description_short='Metal Unisex frame', categories={'Kapricci', 'Exclusive Labels', 'Adult', 'Optical Frames', 'Metal'}, tags={'Adult', 'Unisex frames'}})
+
+item.new({subtype='frame', brand='Timberland', model='TB1540', color='048', price_silver=20, price_gold=18, description_short='Men’s optical frame, Plastic', categories={'Timberland', 'Collections Catalog', 'Designer Brands', 'Adult', 'Optical Frames', 'Plastic'}, tags={'Adult', 'Men’s frames'}})
+item.new({subtype='frame', brand='Guess', model='GU2467', color='BRN', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU2506', color='066', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU2515', color='049', price_silver=20, price_gold=18})		
+item.new({subtype='frame', brand='Guess', model='GU2378', color='BLK', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU2378', color='BRN', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU1940', color='005', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU1948', color='020', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU1857', color='009', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU1677', color='GUN', price_silver=17, price_gold=15})			
+item.new({subtype='frame', brand='Guess', model='GU1799', color='GUN', price_silver=20, price_gold=18})			
+item.new({subtype='frame', brand='Guess', model='GU1617', color='GUN', price_silver=17, price_gold=15})
+
+-- Set names for all the items thus far:
+local item_records = db:findByStructure({subtype='frame'})
+for _,item_record in ipairs(item_records) do
+  item_record.name = item_record.brand..' '..item_record.model..' ('..item_record.color..')'
+  item_record:save()
+end
+
+--  Lenses
+--[=[
+local single_vision_options, multifocal_options, base_options = {}, {}, {}
+single_vision_options.sph = { '0.00',
+                              '+0.25',
+                              '+0.50',
+                              '+0.75',
+                              '+1.00',
+                              '+1.25',
+                              '+1.50',
+                              '+1.75',
+                              '+2.00',
+                              '+2.25',
+                              '+2.50',
+                              '+2.75',
+                              '+3.00',
+                              '+3.25',
+                              '+3.50',
+                              '+3.75',
+                              '+4.00',
+                              '+4.25',
+                              '+4.50',
+                              '+4.75',
+                              '+5.00',
+                              '+5.25',
+                              '+5.50',
+                              '+5.75',
+                              '+6.00',
+                              '+6.25',
+                              '+6.50',
+                              '+6.75',
+                              '+7.00',
+                              '-0.25',
+                              '-0.50',
+                              '-0.75',
+                              '-1.00',
+                              '-1.25',
+                              '-1.50',
+                              '-1.75',
+                              '-2.00',
+                              '-2.25',
+                              '-2.50',
+                              '-2.75',
+                              '-3.00',
+                              '-3.25',
+                              '-3.50',
+                              '-3.75',
+                              '-4.00',
+                              '-4.25',
+                              '-4.50',
+                              '-4.75',
+                              '-5.00',
+                              '-5.25',
+                              '-5.50',
+                              '-5.75',
+                              '-6.00',
+                              '-6.25',
+                              '-6.50',
+                              '-6.75',
+                              '-7.00'}
+single_vision_options.cyl = { '0.00',
+                              '0.25',
+                              '0.50',
+                              '0.75',
+                              '1.00',
+                              '1.25',
+                              '1.50',
+                              '1.75',
+                              '2.00',
+                              '2.25',
+                              '2.50',
+                              '2.75',
+                              '3.00'}
+single_vision_options.material = {'cr39', 'polycarbonate', 'blue-bocker', 'glass'}
+single_vision_options.ar = {true, false}
+single_vision_options.photochromatic = {'none', 'photogray', 'photobrown'}
+for _,sph in ipairs(single_vision_options.sph) do
+  for _,cyl in ipairs(single_vision_options.cyl) do
+    for _,material in ipairs(single_vision_options.material) do
+      for _,ar in ipairs(single_vision_options.ar) do
+        for _,photochromatic in ipairs(single_vision_options.photochromatic) do
+          --[[ cr39 0.90
+                photochromatic $6
+                high-sph(4.25) +$1, high-cyl +$1
+               blue-bocker  +$1.50
+                ]]
+          item.new({subtype='single-vision-lens', sph=sph, cyl=cyl, material=material, ar=ar, photochromatic=photochromatic, price_silver=0, price_gold=0})
+        end
+      end
+    end
+  end
+end
+
+multifocal_options.strength1 = {'0.00',
+                                '0.25',
+                                '0.50',
+                                '0.75',
+                                '1.00',
+                                '1.25',
+                                '1.50',
+                                '1.75',
+                                '2.00',
+                                '2.25',
+                                '2.50',
+                                '2.75',
+                                '3.00'}
+multifocal_options.strength2 = {'1.00',
+                                '1.25',
+                                '1.50',
+                                '1.75',
+                                '2.00',
+                                '2.25',
+                                '2.50',
+                                '2.75',
+                                '3.00'}
+multifocal_options.material = {'cr39', 'polycarbonate', 'blue-bocker', 'glass'}
+multifocal_options['type'] = {'progressive', 'ft28', 'blended'}
+multifocal_options.ar = {true, false}
+multifocal_options.photochromatic = {'none', 'photogray', 'photobrown'}
+for _,strength1 in ipairs(multifocal_options.strength1) do
+  for _,strength2 in ipairs(multifocal_options.strength2) do
+    for _,material in ipairs(multifocal_options.material) do
+      for _,ar in ipairs(multifocal_options.ar) do
+        for _,photochromatic in ipairs(multifocal_options.photochromatic) do
+          for _,_type in ipairs(multifocal_options['type']) do
+            --[[  Bifocal
+                  AR  +$1
+                  Flat-top  $2.40
+                    Photogray $9
+                  Invisible $1.90
+                    Photogray ?
+                  ]]
+            --[[  Progressive
+                  ]]
+            item.new({subtype='multifocal-lens', strength1=strength1, strength2=strength2, material=material, ar=ar, photochromatic=photochromatic, ['type']=_type, price_silver=0, price_gold=0})
+          end
+        end
+      end
+    end
+  end
+end
+
+
+base_options.base = {'2', '4', '6', '8'}
+base_options.add = {'1.00',
+                    '1.25',
+                    '1.50',
+                    '1.75',
+                    '2.00',
+                    '2.25',
+                    '2.50',
+                    '2.75',
+                    '3.00'}
+base_options.material = {'cr39', 'ft', 'kriptok', 'progressive'}
+base_options.ar = {true, false}
+base_options.photochromatic = {'none', 'photogray', 'photobrown'}
+
+for _,base in ipairs(base_options.base) do
+  for _,add in ipairs(base_options.add) do
+    for _,material in ipairs(base_options.material) do
+      for _,ar in ipairs(base_options.ar) do
+        for _,photochromatic in ipairs(base_options.photochromatic) do
+          item.new({subtype='base-lens', base=base, add=add, material=material, ar=ar, photochromatic=photochromatic, price_silver=0, price_gold=0})
+        end
+      end
+    end
+  end
+end
+]=]
+
+--  Equipment
+item.new({subtype='equipment', name='Ophthalmic Unit', brand='Dongwoo', model='TW-1521TW', price_silver=0, price_gold=0, description_short='Ophthalmic Unit'})
+item.new({subtype='equipment', name='Autorefractometer', brand='Dongwoo', model='TW-9200K', price_silver=0, price_gold=0, description_short='Autorefractometer with Keratometer'})
+item.new({subtype='equipment', name='Color Lensometer', brand='Dongwoo', model='TW-8090', price_silver=0, price_gold=0, description_short='Color Lensometer'})
+
+item.new({subtype='equipment', name='Phoropter', brand='Dongwoo', model='TW-1450A', price_silver=0, price_gold=0, description_short='Phoropter'})
+
+item.new({subtype='equipment', name='PD Meter', brand='Dongwoo', model='TW-2210', price_silver=0, price_gold=0, description_short='PD Meter'})
+item.new({subtype='equipment', name='PD Meter', brand='Dongwoo', model='TW-2213', price_silver=0, price_gold=0, description_short='PD Meter'})
+
+item.new({subtype='equipment', name='Slit Lamp', brand='Dongwoo', model='YZ5F1', price_silver=0, price_gold=0, description_short='Slit Lamp'})
+item.new({subtype='equipment', name='Trial Lens Set (104 pcs.)', brand='', model='', price_silver=0, price_gold=0, description_short='Trial Lens Set (104 pcs.)'})
+item.new({subtype='equipment', name='Trial Lens Set (158 pcs.)', brand='', model='', price_silver=0, price_gold=0, description_short='Trial Lens Set (158 pcs.)'})
+item.new({subtype='equipment', name='Trial Lens Set (232 pcs.)', brand='', model='', price_silver=0, price_gold=0, description_short='Trial Lens Set (232 pcs.)'})
+item.new({subtype='equipment', name='Trial Lens Set (266 pcs.)', brand='', model='', price_silver=0, price_gold=0, description_short='Trial Lens Set (266 pcs.)'})
+-- still need info for:
+--item.new({subtype='equipment', name='Chart Projector', brand='Dongwoo', model='', price_silver=0, price_gold=0, description_short='Chart Projector'})
+--item.new({subtype='equipment', name='Ophthalmoscope', brand='Dongwoo', model='', price_silver=0, price_gold=0, description_short='Ophthalmoscope'})
+--item.new({subtype='equipment', name='Pachymeter', brand='Dongwoo', model='', price_silver=0, price_gold=0, description_short='Pachimeter'})
+--item.new({subtype='equipment', name='Prism Bar', brand='Dongwoo', model='', price_silver=0, price_gold=0, description_short='Prism Bar'})
+--item.new({subtype='equipment', name='Retinoscope', brand='Dongwoo', model='', price_silver=0, price_gold=0, description_short='Retinoscope'})
+
+-- Accessories
+-- still need info for:
+--item.new({subtype='accessory', name='Case', brand='', model='', price_silver=0, price_gold=0, description_short=''})
+--item.new({subtype='accessory', name='Cord', brand='', model='', price_silver=0, price_gold=0, description_short=''})
+--item.new({subtype='accessory', name='Lens Cleaner Cloth', brand='', model='', price_silver=0, price_gold=0, description_short='Microfiber Cloth Lens Cleaner'})
+--item.new({subtype='accessory', name='Lens Cleaner Bottle', brand='', model='', price_silver=0, price_gold=0, description_short=''})
+--item.new({subtype='accessory', name='Nosepads', brand='', model='', price_silver=0, price_gold=0, description_short=''})
+--item.new({subtype='accessory', name='Screws', brand='', model='', price_silver=0, price_gold=0, description_short=''})
\ No newline at end of file
diff --git a/server/models/application.lua b/server/models/application.lua
new file mode 100644
index 0000000..11106eb
--- /dev/null
+++ b/server/models/application.lua
@@ -0,0 +1,29 @@
+local application = {}
+
+application.setdb = function(db)
+  application.db = db
+end
+
+application.new = function(t)
+  local application_record = {}
+  application_record.type = 'application'
+  application_record.username = t.username
+  application_record.salutation = t.salutation
+  application_record.firstname = t.firstname
+  application_record.lastname = t.lastname
+  application_record.position = t.position
+  application_record.store = t.store
+  application_record.address = t.address
+  application_record.practice_type = t.practice_type
+  application_record.phone_office = t.phone_office
+  application_record.phone_cell = t.phone_cell
+  application_record.email = t.email
+  application_record.submitted_at = os.time()
+  application_record.status = 'open'
+  
+  application.db:insertrecord(application_record)
+  
+  return application_record
+end
+
+return application
\ No newline at end of file
diff --git a/server/models/cart.lua b/server/models/cart.lua
new file mode 100644
index 0000000..e23d4a1
--- /dev/null
+++ b/server/models/cart.lua
@@ -0,0 +1,15 @@
+local cart = {}
+
+cart.setdb = function(db)
+  cart.db = db
+end
+
+cart.newForUser = function(user_record)
+  local cart_record = {['type']='cart', lineitem_ids={}, user_id=user_record.id}
+  cart.db:insertrecord(cart_record)
+  user_record.current_cart_id = cart_record.id
+  user_record:save()
+  return cart_record
+end
+
+return cart
\ No newline at end of file
diff --git a/server/models/customprice.lua b/server/models/customprice.lua
new file mode 100644
index 0000000..7ff3dde
--- /dev/null
+++ b/server/models/customprice.lua
@@ -0,0 +1,23 @@
+local customprice = {}
+
+customprice.setdb = function(db)
+  customprice.db = db
+end
+
+customprice.find = function(item_record, user_record, db)
+  return customprice.db:findByStructure({type='custom_price', item_id=item_record.id, user_id=user_record_id})[1]
+end
+
+customprice.new = function(t, db)
+  local customprice_record = {}
+  customprice_record.type = 'custom_price'
+  customprice_record.user_id = t.user.id
+  customprice_record.item_id = t.item.id
+  customprice_record.price = t.price
+  
+  customprice.db:insertrecord(customprice_record)
+  
+  return customprice_record
+end
+
+return customprice
\ No newline at end of file
diff --git a/server/models/image.lua b/server/models/image.lua
new file mode 100644
index 0000000..6993c40
--- /dev/null
+++ b/server/models/image.lua
@@ -0,0 +1,54 @@
+local basexx = require 'basexx'
+local uuid = require 'lua_uuid'
+local vips = require 'vips'
+local thumbnail = require './models/thumbnail'
+
+local image = {}
+
+-- where images are saved:
+--image.directory = 'thumbnails/'
+
+image.setdb = function(db)
+  image.db = db
+end
+
+image.new = function(img_buffer, original_filename)
+  local image_record = {};
+  image_record['type'] = 'image'
+  image_record.original_filename = original_filename
+  
+  local new_filename = uuid()
+  --local vips_image = vips.Image.new_from_buffer(img_buffer, "", {access = "sequential"})
+  local thumbnail_original = vips.Image.new_from_buffer(img_buffer, "")  -- don't give `{access = "sequential"}` option as 3rd parameter, since then it won't be able to be read twice: once for 960px thumbnail, and again for the 180px
+  local thumbnail_960 = thumbnail_original:thumbnail_image(960)
+  local thumbnail_180 = thumbnail_original:thumbnail_image(180)
+  
+  --[[
+  thumbnail_original:write_to_file(thumbnail_original_path, {compression=9}) -- LMDBTODO: instead of writing to file, store in record; store each thumbnail in individual records (type='thumbnail'), so binser doesn't have to deserialize all the sizes just to get one (small) size
+  thumbnail_960:write_to_file(thumbnail_960_path, {compression=9})
+  thumbnail_180:write_to_file(thumbnail_180_path, {compression=9})
+  ]]
+  
+  local thumbnail_original_record = thumbnail.newfromvips(thumbnail_original)
+  local thumbnail_960_record = thumbnail.newfromvips(thumbnail_960)
+  local thumbnail_180_record = thumbnail.newfromvips(thumbnail_180)
+  
+  -- TODO: close/release vips buffers, unless vips binding does it automatically
+  
+  image_record.thumbnail_original_id = thumbnail_original_record.id
+  image_record.thumbnail_960_id = thumbnail_960_record.id
+  image_record.thumbnail_180_id = thumbnail_180_record.id
+  
+  if image.db ~= nil then
+    image.db:insertrecord(image_record)
+  end
+  
+  return image_record;
+end
+
+image.new_from_base64 = function(img_base64, original_filename)
+  local img_buffer = basexx.from_base64(img_base64)
+  return image.new(img_buffer, original_filename);
+end
+
+return image;
diff --git a/server/models/item.lua b/server/models/item.lua
new file mode 100644
index 0000000..061bdbb
--- /dev/null
+++ b/server/models/item.lua
@@ -0,0 +1,44 @@
+local util = require('./piazza-util')
+local user = require'./models/user'
+local customprice = require'./models/customprice'
+
+local item = {}
+
+item.setdb = function(db)
+  item.db = db
+end
+
+item.defaults = {
+  name = ''
+  }
+
+item.create = function(t)
+  -- util.setdefaults(t, item.defaults)
+  --if t.name == nil then
+  --  t.name = t.brand .. ' ' .. t.model .. ' (' .. t.color .. ')'
+  --end
+  return t
+end
+
+item.new = function(t)
+  t = t or {}
+  local i = item.create(t)
+  i.type = 'item'
+  i.image_ids = {}
+  i.inventory = 0
+  item.db:insertrecord(i)
+  return i
+end
+
+item.priceof = function(item_record, user_record)
+  local customprice_record = customprice.find(item_record, user_record)
+  if customprice_record ~= nil then
+    return customprice_record.price
+  end
+  if user.isgold(user_record) then
+    return item_record.price_gold
+  end
+  return item_record.price_silver
+end
+
+return item
diff --git a/server/models/lineitem.lua b/server/models/lineitem.lua
new file mode 100644
index 0000000..5b425bb
--- /dev/null
+++ b/server/models/lineitem.lua
@@ -0,0 +1,25 @@
+local item = require'./models/item'
+
+local lineitem = {}
+
+lineitem.setdb = function(db)
+  lineitem.db = db
+end
+
+lineitem.new = function(t)
+  local li = {}
+  li.type = 'lineitem'
+  li.cart_id = t.cart.id
+  li.item_id = t.item.id
+  li.quantity = t.quantity or 1
+  local item_record = t.item
+  local cart_record = t.cart
+  local user_record = lineitem.db:getrecord(cart_record.user_id)
+  li.price = item.priceof(item_record, user_record)
+  lineitem.db:insertrecord(li)
+  table.insert(cart_record.lineitem_ids, li.id)
+  cart_record:save()
+  return li
+end
+
+return lineitem
\ No newline at end of file
diff --git a/server/models/order.lua b/server/models/order.lua
new file mode 100644
index 0000000..50aba35
--- /dev/null
+++ b/server/models/order.lua
@@ -0,0 +1,24 @@
+local order = {}
+
+order.setdb = function(db)
+  order.db = db
+end
+
+order.new = function(t)
+  local order_record = {}
+  order_record.type = 'order'
+  order_record.cart_id = t.cart.id
+  order_record.user_id = t.cart.user_id
+  order_record.date_ordered = os.time()
+  order_record.status = 'open'
+  order_record.progress = 'ordered'
+  
+  order.db:insertrecord(order_record)
+  
+  t.cart.order_id = order_record.id
+  t.cart:save()
+  
+  return order_record
+end
+
+return order
\ No newline at end of file
diff --git a/server/models/thumbnail.lua b/server/models/thumbnail.lua
new file mode 100644
index 0000000..2653102
--- /dev/null
+++ b/server/models/thumbnail.lua
@@ -0,0 +1,17 @@
+local thumbnail = {}
+
+thumbnail.setdb = function(db)
+  thumbnail.db = db
+end
+
+thumbnail.newfromvips = function(vipsimage)
+  local t = {}
+  
+  t['type'] = 'thumbnail'
+  t.src = vipsimage:write_to_buffer('.png', {compression=9})
+  
+  thumbnail.db:insertrecord(t)
+  return t
+end
+
+return thumbnail
\ No newline at end of file
diff --git a/server/models/user.lua b/server/models/user.lua
new file mode 100644
index 0000000..14a638a
--- /dev/null
+++ b/server/models/user.lua
@@ -0,0 +1,36 @@
+local hash = require('./piazza-util').hash
+
+local user = {}
+
+user.setdb = function(db)
+  user.db = db
+end
+
+user.new = function(t)
+  local u = {}
+  u.type = 'user'
+  u.username = t.username
+  u.password_hash = hash(t.password)
+  u.salutation = t.salutation or 'mr'
+  u.firstname = t.firstname or ''
+  u.lastname = t.lastname or ''
+  u.position = t.position or ''
+  u.store = t.store or ''
+  u.address = t.address or ''
+  u.practice_type = t.practice_type or ''
+  u.phone_office = t.phone_office or ''
+  u.phone_cell = t.phone_cell or ''
+  u.email = t.email or ''
+  u.tier = t.tier or 'silver'
+  u.is_admin = t.is_admin or false
+  
+  user.db:insertrecord(u)
+  
+  return u
+end
+
+user.isgold = function(user_record)
+  return user_record.tier == 'gold'
+end
+
+return user
\ No newline at end of file
diff --git a/server/piazza-api-lmdb.lua b/server/piazza-api-lmdb.lua
new file mode 100644
index 0000000..95d3e10
--- /dev/null
+++ b/server/piazza-api-lmdb.lua
@@ -0,0 +1,846 @@
+--local xxhash = require( "xxhash" )
+--local uuid = require( 'resty.jit-uuid' )
+local uuid = require( 'lua_uuid' )
+local DB = require( "./piazza-lmdb" )
+local db = DB.init()
+
+local user = require'./models/user'
+local item = require'./models/item'
+local image = require'./models/image'
+local thumbnail = require'./models/thumbnail'
+local cart = require'./models/cart'
+local lineitem = require'./models/lineitem'
+local order = require'./models/order'
+local customprice = require'./models/customprice'
+local application = require'./models/application'
+
+local util = require( './piazza-util' )
+
+local models = {user, item, image, thumbnail, cart, lineitem, order, customprice, application}
+for _, model in ipairs(models) do
+  model.setdb(db)
+end
+
+-- password hash:
+local hash = util.hash
+
+local sessions = {}  -- keys are session_hashes, values are whatever the server wants to store
+
+local validate = util.validate
+
+local api = {};
+api.post = function()
+  return {message="I did a post."}
+end
+
+api.attemptlogin = function(req)
+  local validation_errors = validate(req, {
+    username = {'string', required=true},
+    password = {'string', required=true}
+    })
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local user_record = db:findOne(function(record)
+      return record.type == 'user' and record.username == req.username
+      end)
+    if user_record == nil then
+      return {success = false, error="no such user"}
+    elseif user_record.password_hash ~= hash(req.password) then
+      return {success = false, error="wrong password"}
+    -- TODO: add 'elseif' to make sure user isn't already logged-in, so two sessions aren't made for the same user who clicked 'login' button twice; although this will make it impossible to sign-in from two different computers
+    else
+      local session_hash = uuid()
+      sessions[session_hash] = {user_id = user_record.id}
+      if user_record.current_cart_id == nil then
+        cart.newForUser(user_record)
+      end
+      return {
+        success = true, 
+        -- user = db:preparecopy(user_record, {'password_hash'}), 
+        -- cart = db:preparecopy(user_record.current_cart),
+        user = user_record:copyandtransform({
+          id = 'copy',
+          username = 'copy',
+          firstname = 'copy',
+          tier = 'copy',
+          is_admin = 'copy'
+          }),
+        cart = db:getrecord(user_record.current_cart_id):copyandtransform({
+          id = 'copy',
+          lineitem_ids = {'list', {
+            id = 'copy',
+            quantity = 'copy',
+            price = 'copy',
+            item_id = {
+              id = 'copy',
+              name = 'copy',
+              brand = 'copy',
+              model = 'copy',
+              color = 'copy'
+              }
+            }}
+          }),
+        session_hash = session_hash
+      }
+    end
+  end
+end
+
+api.logout = function(req)
+  local session_hash = req.session_hash
+  if session_hash ~= nil and sessions[session_hash] ~= nil then
+    sessions[session_hash] = nil
+    return {success=true}
+  else
+    return {error="no such session_hash"} -- TODO: this could happen if user logged-in, then fastcgi was restarted (thus clearing the sessions table), and then logged-out
+  end
+end
+
+api.getone = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true},
+    ['type'] = {'string', required=true},
+    id = {'db_ref', to=req['type'], required=true, load_as='record'},
+    structure = {'table', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local record_copy = loaded_records.record:copyandtransform(req.structure)
+    return {success = true, record = record_copy}
+  end
+end
+
+--[[ -- too big of a security concern. it could return the whole DB to a clever attacker
+api.getall = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true},
+    filter = {'table', required=true},  -- TODO: ensure 'filter' is a non-empty table, for security reasons, because then the whole DB will be returned
+    structure = {'table', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local records = db:findByStructure(req.filter)
+    local record_copies = db:copyandtransformall(records, req.structure)
+    return {success=true, records = record_copies}
+  end
+end
+]]
+
+api.setproperty = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    record_type = {'string', required=true},
+    record_id = {'db_ref', to=req.record_type, required=true, load_as='record'},
+    key = {'string', required=true}
+    -- value = {'string', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local record = loaded_records.record
+    record[req.key] = req.value
+    record:save()
+    return {success=true}
+  end
+end
+
+api.insertrecord = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true},
+    record = {'table', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local id = db:insertrecord(req.record)
+    return {success=true, id = id}
+  end
+end
+
+
+-- admin function: add item
+api.additem = function(req)
+  local validation_errors = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    item = {'table', required=true}
+    }, nil, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    item.new(req.item)
+    -- if saving succeeds, return success message
+    return {success=true}
+  end
+end
+
+-- admin function: delete item
+api.deleteitem = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- delete item
+    --loaded_records.item_record:delete()
+    loaded_records.item_record.deleted = true
+    loaded_records.item_record:save()
+    -- if deletion succeeds, return success message
+    return {success=true}
+  end
+end
+
+-- admin function: update item
+-- session_hash, item_id, properties_to_update
+api.updateitem = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'},
+    properties_to_update = {'table', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    util.merge(loaded_records.item_record, req.properties_to_update)
+    loaded_records.item_record:save()
+    --db:update(loaded_records.item_record, req.properties_to_update)
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+api.fulliteminfo = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local item_record_copy = loaded_records.item_record:copyandtransform({
+      id = 'copy',
+      ['type'] = 'copy',
+      description_short = 'copy',
+      size = 'copy',
+      material = 'copy',
+      color_description = 'copy'
+      })
+    -- if update succeeds, reply with success
+    return {success=true, item=item_record_copy}
+  end
+end
+
+--[[
+api.newimage = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    image_base64 = {'base64', required=true, load_as = 'image_base64'},
+    original_filename = {'string', required=true}  -- so we can tell for which frame it is in retrospect
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    image.new_from_base64(loaded_records.image_base64, req.original_filename, db) 
+    return {success=true}
+  end
+end
+]]
+
+-- admin function: create new empty frame record
+-- session_hash
+api.createnewframe = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local new_frame_record = item.new({
+      subtype='frame',
+      brand='',
+      model='',
+      color = '',
+      color_description = '',
+      name = '',
+      description_short = '',
+      size = '',
+      material = '',
+      price_silver = 0,
+      price_gold = 0,
+      inventory = 0
+      })
+    local new_frame_record_copy = new_frame_record:copyandtransform({
+                    id = 'copy',
+                    ['type'] = 'copy',
+                    subtype = 'copy',
+                    brand = 'copy',
+                    model = 'copy',
+                    color = 'copy',
+                    color_description = 'copy',
+                    name = 'copy',
+                    description_short = 'copy',
+                    size = 'copy',
+                    material = 'copy',
+                    price_silver = 'copy',
+                    price_gold = 'copy',
+                    inventory = 'copy'
+                    })
+    -- if update succeeds, reply with success
+    return {success=true, new_frame=new_frame_record_copy}
+  end
+end
+
+-- admin function: add image to item
+-- session_hash, item_id, image_base64, original_filename
+api.addimagetoitem = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'},
+    image_base64 = {'base64', required=true, load_as='image_base64'},
+    original_filename = {'string', required=true}  -- so we can tell for which frame it is in retrospect
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local image_record = image.new_from_base64(loaded_records.image_base64, req.original_filename)
+    local item_record = loaded_records.item_record
+    -- image_record.item = item_record   -- not all images have a `.item` property, so we should rather link the image to the item by `item.images`
+    if item_record.image_ids == nil then item_record.image_ids = {} end
+    table.insert(item_record.image_ids, image_record.id)
+    item_record:save()
+    local image_record_copy = image_record:copyandtransform({
+                    id = 'copy',
+                    ['type'] = 'copy',
+                    original_filename = 'copy',
+                    thumbnail_960_id = 'copy',
+                    thumbnail_180_id = 'copy',
+                    thumbnail_original_id = 'copy'
+                    })
+    -- if update succeeds, reply with success
+    return {success=true, image=image_record_copy}
+  end
+end
+
+api.deleteitemimage = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'},
+    image_id = {'db_ref', to='image', required=true, load_as='image_record'}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local image_record = loaded_records.image_record
+    local item_record = loaded_records.item_record
+    -- image_record.item = item_record   -- not all images have a `.item` property, so we should rather link the image to the item by `item.images`
+    if item_record.image_ids == nil then item_record.image_ids = {} end
+    local image_index = 0
+    repeat
+      image_index = image_index + 1
+    until item_record.image_ids[image_index] == image_record.id or item_record.image_ids[image_index] == nil
+    
+    table.remove(item_record.image_ids, image_index)
+    item_record:save()
+    -- also delete the image_record, and the files it points to
+    image_record:delete()
+    
+    db:delete(image_record.thumbnail_original_id)
+    db:delete(image_record.thumbnail_960_id)
+    db:delete(image_record.thumbnail_180_id)
+    
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+api.itemsbystring = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true},
+    search_string = {'string', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local item_records = db:findAll(function(record)
+      return record.type == 'item' and string.find(record.model, req.search_string) ~= nil
+      end)
+    item_records = db:copyandtransformall(item_records, {
+          id = 'copy',
+          ['type'] = 'copy',
+          brand = 'copy',
+          model = 'copy',
+          color = 'copy'
+          })
+    return {success=true, results = item_records}
+  end
+end
+
+api.framesbystring = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true},
+    search_string = {'string', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local item_records = db:findAll(function(record)
+      return record.subtype == 'frame' and string.find(record.model, req.search_string) ~= nil
+      end)
+    item_records = db:copyandtransformall(item_records, {
+          id = 'copy',
+          ['type'] = 'copy',
+          subtype = 'copy',
+          name = 'copy',
+          brand = 'copy',
+          model = 'copy',
+          color = 'copy',
+          color_description = 'copy',
+          description_short = 'copy',
+          size = 'copy',
+          material = 'copy',
+          price_silver = 'copy',
+          price_gold = 'copy',
+          inventory = 'copy'
+          })
+    return {success=true, results = item_records}
+  end
+end
+
+api.itemimages = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    --session_hash = {'session', required=true},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local item_record = loaded_records.item_record
+    if item_record.image_ids == nil then
+      item_record.image_ids = {}
+      item_record:save()
+    end
+    local image_records = db:copyandtransformall(item_record.image_ids, {
+            id = 'copy',
+            ['type'] = 'copy',
+            original_filename = 'copy',
+            thumbnail_960_id = 'copy',
+            thumbnail_180_id = 'copy',
+            thumbnail_original_id = 'copy'
+            })
+    return {success=true, images = image_records}
+  end
+end
+
+-- admin function: change user's tier
+-- session_hash, user_id, tier
+api.changeusertier = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    user_id = {'db_ref', to='user', required=true, load_as='user_record'},
+    tier = {'string', required=true, is_any_of={'gold','silver'}}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    --db:update(loaded_records.user_record, {tier=req.tier})
+    loaded_records.user_record.tier = req.tier
+    loaded_records.user_record:save()
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+-- admin function: give custom price to user for certain item
+-- session_hash, user_id, item_id, price
+api.setuseritemprice = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    user_id = {'db_ref', to='user', required=true, load_as='user_record'},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'},
+    price = {'number', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- find previously-existing special price between this user and this item
+    local custom_price_record = db:findOne(function(record) return record.type == 'custom_price' and record.user_id == loaded_records.user_record.id and record.item_id == loaded_records.item_record_id end)
+    -- if no existing special price is found, insert one into DB
+    if custom_price_record == nil then
+      customprice.new({user_id=loaded_records.user_record.id, item_id=loaded_records.item_record.id, price=req.price})
+      -- if insert succeeds, reply with success
+      return {success=true}
+      -- if insert fails, reply with error
+    -- if existing special price is found, update it
+    else
+      --db:update(custom_price_record, {price = req.price})
+      custom_price_record.price = req.price
+      custom_price_record:save()
+      -- if update succeeds, reply with success
+      return {success=true}
+      -- if update fails, reply with error
+    end
+  end
+end
+
+-- function: update item quantity in current cart; if zero, remove; if was zero, add to cart
+api.updateitemquantityincart = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true},
+    item_id = {'db_ref', to='item', required=true, load_as='item_record'},
+    quantity = {'number', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- find cart based on session_hash
+    local current_user_record = db:getrecord( loaded_records.session.user_id )
+    local cart_record = db:getrecord(current_user_record.current_cart_id)
+    -- if cart not found, create one
+    if cart_record == nil then
+      cart_record = cart.newForUser(current_user_record)
+    end
+    -- find lineitem for this item in cart
+    local lineitem_record_id = util.findOne(cart_record.lineitem_ids, function(lineitem_id)
+        local lineitem = db:getrecord(lineitem_id)
+        return lineitem.item_id == loaded_records.item_record.id
+        end)
+    local lineitem_record
+    -- if lineitem not found, create one
+    if lineitem_record_id == nil then
+      if req.quantity > 0 then
+        lineitem_record = lineitem.new({cart=cart_record, item=loaded_records.item_record, quantity=req.quantity})
+      end
+    else
+      lineitem_record = db:getrecord(lineitem_record_id)
+      if req.quantity > 0 then
+        -- update quantity in lineitem
+        --db:update(lineitem_record, {quantity = req.quantity})
+        lineitem_record.quantity = req.quantity
+        lineitem_record:save()
+      -- if the item is being removed from the cart
+      elseif req.quantity == 0 then
+        -- remove item from cart
+        util.removefromtable(cart_record.lineitem_ids, lineitem_record.id)
+        --db:remove(lineitem_record)
+        lineitem_record:delete()
+        cart_record:save()
+      end
+    end
+    local lineitem_records_copy = db:copyandtransformall(cart_record.lineitem_ids, {
+        id = 'copy',
+        ['type'] = 'copy',
+        item_id = {
+          id = 'copy',
+          ['type'] = 'copy',
+          name = 'copy',
+          brand = 'copy',
+          model = 'copy',
+          color = 'copy',
+          price_silver = 'copy',
+          price_gold = 'copy',
+          inventory = 'copy',
+          price = 'copy',
+          },
+        quantity = 'copy',
+        price = 'copy'
+      })
+    return {success=true, lineitems = lineitem_records_copy}
+  end
+end
+
+-- function: place order (i.e. current cart)
+api.placeorder = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- find cart based on session_hash
+    local current_user_record = db:getrecord( loaded_records.session.user_id )
+    local cart_record = db:getrecord( current_user_record.current_cart_id )
+    -- if cart not found, reply with error
+    if cart_record == nil then
+      return {error="No cart for current user."}
+    elseif #cart_record.lineitem_ids == 0 then
+      return {error="Cart is empty."}
+    else
+      -- if cart found, create order out of it
+      local order_record = order.new({cart=cart_record})
+      -- if order creation successful, create new empty cart for user and reply with success
+      for _, lineitem_id in ipairs(cart_record.lineitem_ids) do
+        local lineitem_record = db:getrecord(lineitem_id)
+        local item_record = db:getrecord(lineitem_record.item_id)
+        item_record.inventory = item_record.inventory - lineitem_record.quantity
+        item_record:save()
+      end
+      local new_cart_record = cart.newForUser(current_user_record)
+      return {success=true, order_id = order_record.id, new_cart_record = new_cart_record}
+    end
+  end
+end
+
+-- admin function: list open orders
+api.listopenorders = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- find open orders
+    local open_order_records = db:findAll(function(record)
+      return record.type == 'order' and record.status == 'open'
+      end)
+    -- local open_orders = db:preparecopies(open_order_records)
+    local open_orders = db:copyandtransformall(open_order_records, {
+        id = 'copy',
+        ['type'] = 'copy',
+        cart_id = 'copy',
+        user_id = {
+          id = 'copy',
+          ['type'] = 'copy',
+          firstname = 'copy',
+          lastname = 'copy',
+          store = 'copy'
+          },
+        date_ordered = 'copy',
+        status = 'copy',
+        progress = 'copy'
+        })
+    return {success=true, orders=open_orders}
+  end
+end
+
+-- admin function: list open orders
+api.loadorder = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    order_id = {'db_ref', to='order', load_as='order_record'}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local order_record_copy = loaded_records.order_record:copyandtransform({
+        id = 'copy',
+        ['type'] = 'copy',
+        progress = 'copy',
+        cart_id = {
+          id = 'copy',
+          ['type'] = 'copy',
+          lineitem_ids = {
+            'list',
+            {
+              id = 'copy',
+              ['type'] = 'copy',
+              price = 'copy',
+              quantity = 'copy',
+              item_id = {
+                id = 'copy',
+                ['type'] = 'copy',
+                name = 'copy'
+                }
+              }
+            }
+          }
+        })
+    return {success=true, order=order_record_copy}
+  end
+end
+
+-- admin function: mark order as packed, shipped, and delivered
+api.updateorderstatus = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    order_id = {'db_ref', to='order', required=true, load_as='order_record'},
+    status = {'string', required=true, is_any_of={'open','packed','shipped','paid'}}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- if order found, update status
+    --db:update(loaded_records.order_record, {status = req.status})
+    loaded_records.order_record.status = req.status
+    loaded_records.order_record:save()
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+-- function: find items according to privileges and characteristics
+api.itemsbyfilter = function(req)
+  local filter = req.filter
+  local item_records = db:findAll(function(record)
+    if record.type ~= 'item' then return false end
+    --if record.inventory == nil then record.inventory = 0; record:save() end
+    if record.inventory < 1 then return false end
+    -- if user is not signed-in, he cannot see all items:
+    if req.session_hash == nil then
+      for k,v in pairs(filter) do
+        if record[k] ~= v then return false end
+        if item.restricted == true then return false end
+      end
+    -- if user is signed-in, he may see all items:
+    else
+      for k,v in pairs(filter) do
+        if record[k] ~= v then return false end
+      end
+    end
+    return true
+  end)
+  local item_records_copy = db:copyandtransformall(item_records, {
+    id = 'copy',
+    name = 'copy',
+    brand = 'copy',
+    model = 'copy',
+    color = 'copy',
+    color_description = 'copy',
+    size = 'copy',
+    material = 'copy',
+    description_short = 'copy', 
+    price_gold = 'copy',
+    price_silver = 'copy',
+    inventory = 'copy',
+    image_ids = {
+      'list',
+      {
+        id = 'copy',
+        ['type'] = 'copy',
+        thumbnail_180_id = 'copy',
+        thumbnail_960_id = 'copy',
+        thumbnail_original_id = 'copy'
+        }
+      }
+    })
+  -- TODO: only send the price for each item according to the user's tier, or his own special pricing. don't send price_silver and price_gold
+  return {success=true, items = item_records_copy}
+end
+
+-- function: submit new user application, to be accepted or declined by admin
+api.submitnewuserapplication = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    username = {'string', required=true},
+    salutation = {'string', required=true, is_any_of={'mr','ms','mrs','dr'}},
+    firstname = {'string', required=true},
+    lastname = {'string', required=true},
+    position = {'string', required=true},
+    store = {'string', required=true},
+    address = {'string', required=true},
+    practice_type = {'string', required=true},
+    phone_office = {'string', required=true},
+    phone_cell = {'string', required=true},
+    email = {'string', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    application.new({
+      ['type'] = 'application',
+      username = req.username,
+      salutation = req.salutation,
+      firstname = req.firstname,
+      lastname = req.lastname,
+      position = req.position,
+      store = req.store,
+      address = req.address,
+      practice_type = req.practice_type,
+      phone_office = req.phone_office,
+      phone_cell = req.phone_cell,
+      email = req.email
+      })
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+api.acceptnewuserapplication = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    application_id = {'db_ref', to='application', required=true, load_as='application_record'},
+    password = {'string', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    local application_record = loaded_records.application_record
+    user.new({
+      password = req.password,
+      username = application_record.username,
+      salutation = application_record.salutation,
+      firstname = application_record.firstname,
+      lastname = application_record.lastname,
+      position = application_record.position,
+      store = application_record.store,
+      address = application_record.address,
+      practice_type = application_record.practice_type,
+      phone_office = application_record.phone_office,
+      phone_cell = application_record.phone_cell,
+      email = application_record.email,
+      tier='silver'
+      })
+    --db:update(application_record, {status = 'accepted', accepted_at = os.time()})
+    application_record.status = 'accepted'
+    application_record.accepted_at = os.time()
+    application_record:save()
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+-- admin function: list open application records
+api.listnewuserapplications = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    -- find open applications
+    local open_application_records = db:findAll(function(record) return record.type == 'application' and record.status == 'open' end)
+    local open_applications = db:copyandtransformall(open_application_records, {
+      id='copy',
+      ['type'] = 'copy',
+      username = 'copy',
+      salutation = 'copy',
+      firstname = 'copy',
+      lastname = 'copy',
+      position = 'copy',
+      store = 'copy',
+      address = 'copy',
+      practice_type = 'copy',
+      phone_office = 'copy',
+      phone_cell = 'copy',
+      email = 'copy',
+      submitted_at = 'copy'
+      })
+    return {success=true, open_applications=open_applications}
+  end
+end
+
+api.declinenewuserapplication = function(req)
+  local validation_errors, loaded_records = validate(req, {
+    session_hash = {'session', required=true, is_admin=true},
+    application_id = {'db_ref', to='application', required=true, load_as='application_record'},
+    password = {'string', required=true}
+    }, db, sessions)
+  if #validation_errors > 0 then
+    return {errors=validation_errors}
+  else
+    --db:update(loaded_records.application_record, {status = 'declined', declined_at = os.time()})
+    local application_record = loaded_records.application_record
+    application_record.status = 'declined'
+    application_record.declined_at = os.time()
+    application_record:save()
+    -- if update succeeds, reply with success
+    return {success=true}
+  end
+end
+
+api.getthumbnail = function(thumbnail_id)
+  return db:getrecord(thumbnail_id).src
+end
+
+return api
diff --git a/server/piazza-lmdb.lua b/server/piazza-lmdb.lua
new file mode 100644
index 0000000..291669a
--- /dev/null
+++ b/server/piazza-lmdb.lua
@@ -0,0 +1,237 @@
+lightningmdb_lib=require "lightningmdb"
+
+lightningmdb = _VERSION>="Lua 5.2" and lightningmdb_lib or lightningmdb
+MDB = setmetatable({}, {__index = function(t, k)
+  return lightningmdb["MDB_" .. k]
+end})
+
+--local binser = require'binser'
+local bitser = require'bitser/bitser'
+
+local lrandom = require'random'  -- 'lrandom' luarocks package
+local lrandom_sequence = lrandom.new(os.time())
+
+-- helper function to generate random integer
+local randomid = function()
+  local min = 0
+  local max = 256*256*256*256-1  -- 32-bits exactly;  TODO: confirm this isn't larger than 32-bits
+  return lrandom.value(lrandom_sequence, min, max)
+end
+
+local piazzadb = {}
+local dbmt = {}
+dbmt.__index = dbmt
+local recordmt = {}
+recordmt.__index = recordmt
+
+piazzadb.init = function()
+  local env = lightningmdb.env_create()
+  env:set_mapsize(4096*1000000000) -- 4GB max DB size
+  env:open('./piazza.lmdb', MDB.NOSUBDIR+MDB.NOLOCK, 420)
+  
+  local transaction = env:txn_begin(nil, 0)
+  local dbi = transaction:dbi_open(nil, 0) -- only need one db handle; can be reused in later transactions
+  transaction:commit()
+  
+  local db = {}
+  db.env = env
+  db.dbi = dbi
+  setmetatable(db, dbmt)
+  
+  return db
+end
+
+dbmt.serializerecord = function(db, record)
+  record.db = nil
+  --return binser.serialize(record)
+  return bitser.dumps(record)
+end
+
+dbmt.deserializerecord = function(db, record_string)
+  --local record = binser.deserializeN(record_string, 1)
+  local record = bitser.loads(record_string)
+  record.db = db
+  setmetatable(record, recordmt)
+  return record
+end
+
+
+-- helper function to get a new available id
+dbmt.newid = function(db)
+  local transaction = db.env:txn_begin(nil, 0)
+  -- generate new ids and check for pre-existing entry in DB until an available ID is found:
+  local id, v
+  local count = 2
+  repeat
+    id = randomid()
+    count=count+1
+    v = transaction:get(db.dbi, id)
+  until v == nil
+  transaction:commit()
+  
+  return id
+end
+
+dbmt.getstring = function(db, id)
+  local transaction = db.env:txn_begin(nil, 0)
+  local v = transaction:get(db.dbi, id)
+  transaction:commit()
+  return v
+end
+
+dbmt.setstring = function(db, id, s)  -- DON'T USE THIS DIRECTLY! Everything that goes into the DB must pass through binser (the serializer), because if not it there's no way to loop through all records, because it's impossible to tell what's a record (i.e. binser table) and what's a raw string
+  local transaction = db.env:txn_begin(nil, 0)
+  transaction:put(db.dbi, id, s, 0)
+  transaction:commit()
+end
+
+dbmt.delete = function(db, id)
+  local transaction = db.env:txn_begin(nil, 0)
+  transaction:del(db.dbi, id, nil)
+  transaction:commit()
+end
+
+
+-- gets record cast from raw string into lua table, outfitted with metatable methods
+dbmt.getrecord = function(db, id)
+  local record_string = db:getstring(id)
+  return db:deserializerecord( record_string )
+end
+
+-- stores Lua table as record
+dbmt.setrecord = function(db, id, t)
+  local record_string = db:serializerecord(t)
+  db:setstring(id, record_string)
+end
+
+
+-- stores Lua table as new record, assigning it a random ID
+dbmt.insertrecord = function(db, t)
+  local id = db:newid()
+  t.id = id
+  setmetatable(t, recordmt)
+  local record_string = db:serializerecord(t)
+  db:setstring(id, record_string)
+  return id
+end
+
+dbmt.records = function(db)
+  local transaction = db.env:txn_begin(nil, 0)
+  local cursor = transaction:cursor_open(db.dbi)
+  --cursor:get(nil, nil, MDB.FIRST)
+  local k, v
+  
+  return function()
+    k, v = cursor:get(k, MDB.NEXT)
+    if k then
+      return k, db:deserializerecord(v)
+    else
+      cursor:close()
+      transaction:commit()
+    end
+  end
+end
+
+dbmt.findAll = function(db, fn)
+  local t = {}
+  for id,record in db:records() do
+    if fn(record, id) then table.insert(t, record) end
+  end
+  return t
+end
+
+dbmt.findOne = function(db, fn)
+  for id,record in db:records() do
+    if fn(record, id) then return record end
+  end
+  return nil
+end
+
+dbmt.close = function(db)
+  db.env:dbi_close(db.dbi)
+end
+
+dbmt.copyandtransformall = function(db, list, structure)
+  local copy = {}
+  for _, el in ipairs(list) do
+    local record
+    if type(el) == 'number' then -- if it's an ID, get the record
+      record = db:getrecord(el)
+    elseif type(el) == 'table' then -- if it's a record itself
+      record = el
+    end
+    table.insert(copy, record:copyandtransform(structure))
+  end
+  return copy
+end
+
+dbmt.findByStructure = function(db, structure)
+  local t = {}
+  for _,record in db:records() do
+    local does_match = true
+    for k,v in pairs(structure) do
+      if type(v) == 'table' then  -- TODO: everything within this `if` needs to be fleshed-out; it doesn't do JOINs yet
+        if v[1] == 'list' then
+          if type(record[k]) ~= 'table' then  -- TODO: find more accurate way to check whether it's a list, which excludes 'object' tables but includes empty lists (i.e. `#record[k] > 0` won't work)
+            does_match = false
+            break
+          end
+        end
+      else
+        if record[k] ~= v then
+          does_match = false
+          break
+        end
+      end
+    end
+    if does_match then table.insert(t, record) end
+  end
+  return t
+end
+
+recordmt.save = function(record)
+  record.db:setrecord(record.id, record)
+end
+
+recordmt.delete = function(record)
+  record.db:delete(record.id)
+end
+
+recordmt.getref = function(record, key)
+  return record.db:getrecord(record[key..'_id'])
+end
+
+recordmt.copyandtransform = function(record, structure)
+  local db = record.db
+  local copy = {}
+  for k,op in pairs(structure) do
+    if op=='copy' then
+      copy[k] = record[k]
+    elseif type(op)=='table' then  -- it can either be a 'list' directive, or a substructure
+      if op[1] == 'list' or op[1] == 'array' then
+        local subcopy = {}
+        local substructure = op[2]
+        if substructure == nil then -- if it's a list of scalars, e.g. strings
+          for _,el in ipairs(record[k]) do
+            table.insert(subcopy, el)
+          end
+        else  -- if it's a list of tables/records, of which we want just a portion as per the substructure
+          if record[k] ~= nil then
+            for _,el in ipairs(record[k]) do
+              local referenced_record = db:getrecord(el)
+              table.insert(subcopy, referenced_record:copyandtransform(substructure))
+            end
+          end
+        end
+        copy[k] = subcopy
+      elseif op[1] == nil then -- if it's just a single referenced table
+        local substructure = op
+        local referenced_record = db:getrecord(record[k]) -- e.g. k='some_record_id'
+        copy[k] = referenced_record:copyandtransform(substructure)
+      end
+    end
+  end
+  return copy
+end
+
+return piazzadb
\ No newline at end of file
diff --git a/server/piazza-prompt.lua b/server/piazza-prompt.lua
new file mode 100644
index 0000000..9083b81
--- /dev/null
+++ b/server/piazza-prompt.lua
@@ -0,0 +1,17 @@
+prompt = require "prompt"
+prompt.colorize = true
+prompt.name = "piazza"
+prompt.history = "/tmp/.piazza_lua_history"
+prompt.prompts = {"%  ", "%% "}
+
+DB = require( "./piazza-lmdb" )
+db = DB.init()
+
+api = require'./piazza-api-lmdb'
+
+user = require'./models/user'
+item = require'./models/item'
+cart = require'./models/cart'
+image = require'./models/image'
+
+prompt.enter()
\ No newline at end of file
diff --git a/server/piazza-util.lua b/server/piazza-util.lua
new file mode 100644
index 0000000..770535c
--- /dev/null
+++ b/server/piazza-util.lua
@@ -0,0 +1,126 @@
+local util = {}
+
+local table_is_empty = function(t)
+  return next(t) == nil
+end
+
+local is_in = function(value, list)
+  for _,el in ipairs(list) do
+    if value == el then
+      return true
+    end
+  end
+  return false
+end
+
+util.hash = function(v) -- TODO: maybe use Argon2 [https://luarocks.org/modules/thibaultcha/argon2]
+  --xxhash:update(v)
+  --return xxhash:digest()
+  return v
+end
+
+
+--[[
+  Uses 'schema' to verify:
+    Existence of required value in 'req'
+    They have proper types
+    The DB references actually exist
+  ]]
+--[[ schema = {
+  user_id = {'db_ref', to='user', required=true, load_as='user_record'} -- `load_as` so a DB search doesn't have to be done again after validation
+  price = {'number', required=true}
+  }
+  ]]
+util.validate = function(req, schema, db, sessions)
+  local errors = {}
+  local loaded_records = {}
+  for property, rules in pairs(schema) do
+    local expected_value_type = rules[1]
+    local value = req[property]
+    if rules.required == true then
+      if value == nil then
+        table.insert(errors, "Expected '"..property.."' to be provided.")
+      end
+    end
+    if expected_value_type == 'number' or expected_value_type == 'string' or expected_value_type == 'table' then
+      if type(value) ~= expected_value_type then
+        table.insert(errors, "Expected '"..property.."' to be a "..expected_value_type..".")
+      elseif rules.is_any_of ~= nil then
+        if not is_in(value, rules.is_any_of) then
+          table.insert(errors, "Expected '"..property.."' to be one of (".. table.concat(rules.is_any_of,',') ..").")
+        end
+      end
+    elseif expected_value_type == 'db_ref' then
+      local expected_record_type = rules.to
+      local record = db:findOne(function(record) return record.id == value and record.type == expected_record_type end)
+      if record == nil then
+        table.insert(errors, "Expected '"..property.."' to point to a '"..expected_record_type.."' in the database.")
+      else
+        loaded_records[rules.load_as] = record
+      end
+    elseif expected_value_type == 'base64' then
+      local _, start_of_base64_string_index = string.find(value, "data:.-/.-;base64,")
+      start_of_base64_string_index = start_of_base64_string_index + 1
+      local base64_adjusted = string.sub(value, start_of_base64_string_index)  -- must remove "data:*/*;base64," from the beginning of the string
+      loaded_records[rules.load_as] = base64_adjusted
+    elseif expected_value_type == 'session' then
+      local session = sessions[value]
+      if session == nil then
+        table.insert(errors, "No such session.")
+      else
+        if rules.is_admin == true and db:getrecord(session.user_id).is_admin ~= true then
+          table.insert(errors, "Current user is not admin.")
+        else
+          loaded_records.session = session
+        end
+      end
+    end
+  end
+  return errors, loaded_records
+end
+
+
+util.run_every = function(interval_in_s, fn)
+  local co = coroutine.create(function()
+    local t1 = os.time()
+    while true do
+      if os.time()-t1 > interval_in_s*1000 then
+        fn()
+        t1 = os.time()
+      end
+      coroutine.yield()
+      --posix.unistd.sleep(interval_in_s)
+    end
+    end)
+  return co
+end
+
+util.setdefaults = function(t, defaults)
+  for k,v in pairs(defaults) do
+    if t[k] == nil then
+      t[k] = v
+    end
+  end
+end
+
+util.merge = function(dest, source)
+  for k,v in pairs(source) do
+    dest[k] = v
+  end
+end
+
+util.findOne = function(t, fn)
+  for i,v in ipairs(t) do
+    if fn(v, i) then return v end
+  end
+  return nil
+end
+
+util.removefromtable = function(t, v)
+  local i = 1
+  while t[i] ~= v do  i = i + 1  end
+  table.remove(t, i)
+  return i
+end
+
+return util
\ No newline at end of file
diff --git a/server/server.lua b/server/server.lua
new file mode 100644
index 0000000..7f51f96
--- /dev/null
+++ b/server/server.lua
@@ -0,0 +1,288 @@
+--[=[
+This example serves a file/directory browser
+It defaults to serving the current directory.
+Usage: lua examples/serve_dir.lua [<port> [<dir>]]
+]=]
+
+local port = arg[1] or 8000
+local dir = '../public/'
+
+local new_headers = require "http.headers".new
+local http_server = require "http.server"
+local http_util = require "http.util"
+local http_version = require "http.version"
+local ce = require "cqueues.errno"
+local lfs = require "lfs"
+local lpeg = require "lpeg"
+local uri_patts = require "lpeg_patterns.uri"
+local cjson = require "cjson"
+local mimetypes = require "mimetypes"
+local api = require './piazza-api-lmdb'
+
+local replyJSON = function(t, stream)
+  stream.res_headers:upsert(":status", "200")
+  stream.res_headers:append('content-type', 'application/json')
+  stream:write_headers(stream.res_headers, false)
+  stream:write_body_from_string( cjson.encode(t) )
+end
+
+--local mdb do
+--	-- If available, use libmagic https://github.com/mah0x211/lua-magic
+--	local ok, magic = pcall(require, "magic")
+--	if ok then
+--		mdb = magic.open(magic.MIME_TYPE+magic.PRESERVE_ATIME+magic.RAW+magic.ERROR)
+--    local mgc_file = '/usr/share/misc/magic.mgc'
+--		if mdb:load(mgc_file) ~= 0 then
+--			error(magic:error())
+--		end
+--	end
+--end
+
+local uri_reference = uri_patts.uri_reference * lpeg.P(-1)
+
+local default_server = string.format("%s/%s", http_version.name, http_version.version)
+
+local xml_escape do
+	local escape_table = {
+		["'"] = "&apos;";
+		["\""] = "&quot;";
+		["<"] = "&lt;";
+		[">"] = "&gt;";
+		["&"] = "&amp;";
+	}
+	function xml_escape(str)
+		str = string.gsub(str, "['&<>\"]", escape_table)
+		str = string.gsub(str, "[%c\r\n]", function(c)
+			return string.format("&#x%x;", string.byte(c))
+		end)
+		return str
+	end
+end
+
+local human do -- Utility function to convert to a human readable number
+	local suffixes = {
+		[0] = "";
+		[1] = "K";
+		[2] = "M";
+		[3] = "G";
+		[4] = "T";
+		[5] = "P";
+	}
+	local log = math.log
+	if _VERSION:match("%d+%.?%d*") < "5.1" then
+		log = require "compat53.module".math.log
+	end
+	function human(n)
+		if n == 0 then return "0" end
+		local order = math.floor(log(n, 2) / 10)
+		if order > 5 then order = 5 end
+		n = math.ceil(n / 2^(order*10))
+		return string.format("%d%s", n, suffixes[order])
+	end
+end
+
+
+local function _reply(myserver, stream) -- luacheck: ignore 212
+	-- Read in headers
+	local req_headers = assert(stream:get_headers())
+	local req_method = req_headers:get ":method"
+
+	-- Log request to stdout
+	assert(io.stdout:write(string.format('[%s] "%s %s HTTP/%g"  "%s" "%s"\n',
+		os.date("%d/%b/%Y:%H:%M:%S %z"),
+		req_method or "",
+		req_headers:get(":path") or "",
+		stream.connection.version,
+		req_headers:get("referer") or "-",
+		req_headers:get("user-agent") or "-"
+	)))
+
+	-- Build response headers
+	local res_headers = new_headers()
+  stream.res_headers = res_headers
+	res_headers:append(":status", nil)
+	res_headers:append("server", default_server)
+	res_headers:append("date", http_util.imf_date())
+  
+  if req_method == 'POST' then
+    local endpoint = req_headers:get(":path"):sub(6)  -- TODO: match exact proper path, and return 404 if no match;  shave-off the leading '/cgi' from the path
+    if api[endpoint] ~= nil then
+      local req = cjson.decode(stream:get_body_as_string())
+      replyJSON( api[endpoint](req) , stream )
+      return
+    end
+  end
+	if req_method ~= "GET" and req_method ~= "HEAD" then
+		res_headers:upsert(":status", "405")
+		assert(stream:write_headers(res_headers, true))
+		return
+	end
+  
+  local path = req_headers:get(":path")
+  local thumbnail_id = string.match(path, '/thumbnailsdb/(.+)%.png')
+  if req_method == 'GET' and thumbnail_id ~= nil then
+    res_headers:upsert(":status", "200")
+		res_headers:append("content-type", "image/png")
+    assert(stream:write_headers(res_headers, false))
+    local src = api.getthumbnail(tonumber(thumbnail_id))
+    stream:write_chunk(src, true)
+    return
+  end
+
+	-- use LPEG to create a uri table with the URI in different forms:
+	local uri_t = assert(uri_reference:match(path), "invalid path")
+	path = http_util.resolve_relative_path("/", uri_t.path or nil)
+	local real_path = dir .. path
+	local file_type = lfs.attributes(real_path, "mode")
+	if file_type == "directory" then
+    -- check for index.html
+    local fd, err, errno = io.open(real_path..'/index.html', "rb")
+		if not fd then
+                  -- directory listing
+                  path = path:gsub("/+$", "") .. "/"
+                  res_headers:upsert(":status", "200")
+                  res_headers:append("content-type", "text/html; charset=utf-8")
+                  assert(stream:write_headers(res_headers, req_method == "HEAD"))
+                  if req_method ~= "HEAD" then
+                    assert(stream:write_chunk(string.format([[
+              <!DOCTYPE html>
+              <html>
+              <head>
+                <title>Index of %s</title>
+                <style>
+                  a {
+                    float: left;
+                  }
+                  a::before {
+                    width: 1em;
+                    float: left;
+                    content: "\0000a0";
+                  }
+                  a.directory::before {
+                    content: "📁";
+                  }
+                  table {
+                    width: 800px;
+                  }
+                  td {
+                    padding: 0 5px;
+                    white-space: nowrap;
+                  }
+                  td:nth-child(2) {
+                    text-align: right;
+                    width: 3em;
+                  }
+                  td:last-child {
+                    width: 1px;
+                  }
+                </style>
+              </head>
+              <body>
+                <h1>Index of %s</h1>
+                <table>
+                  <thead><tr>
+                    <th>File Name</th><th>Size</th><th>Modified</th>
+                  </tr></thead>
+                  <tbody>
+              ]], xml_escape(path), xml_escape(path)), false))
+                    -- lfs doesn't provide a way to get an errno for attempting to open a directory
+                    -- See https://github.com/keplerproject/luafilesystem/issues/87
+                    for filename in lfs.dir(real_path) do
+                      if not (filename == ".." and path == "/") then -- Exclude parent directory entry listing from top level
+                        local stats = lfs.attributes(real_path .. "/" .. filename)
+                        if stats.mode == "directory" then
+                          filename = filename .. "/"
+                        end
+                        assert(stream:write_chunk(string.format("\t\t\t<tr><td><a class='%s' href='%s'>%s</a></td><td title='%d bytes'>%s</td><td><time>%s</time></td></tr>\n",
+                          xml_escape(stats.mode:gsub("%s", "-")),
+                          xml_escape(http_util.encodeURI(path .. filename)),
+                          xml_escape(filename),
+                          stats.size,
+                          xml_escape(human(stats.size)),
+                          xml_escape(os.date("!%Y-%m-%d %X", stats.modification))
+                        ), false))
+                      end
+                    end
+                    assert(stream:write_chunk([[
+                  </tbody>
+                </table>
+              </body>
+              </html>
+              ]], true))
+                  end
+    else
+      res_headers:upsert(":status", "200")
+			res_headers:append("content-type", 'text/html')
+			assert(stream:write_headers(res_headers, req_method == "HEAD"))
+			if req_method ~= "HEAD" then
+				assert(stream:write_body_from_file(fd))
+			end
+    end
+	elseif file_type == "file" then
+		local fd, err, errno = io.open(real_path, "rb")
+		local code
+		if not fd then
+			if errno == ce.ENOENT then
+				code = "404"
+			elseif errno == ce.EACCES then
+				code = "403"
+			else
+				code = "503"
+			end
+			res_headers:upsert(":status", code)
+			res_headers:append("content-type", "text/plain")
+			assert(stream:write_headers(res_headers, req_method == "HEAD"))
+			if req_method ~= "HEAD" then
+				assert(stream:write_body_from_string("Fail!\n"..err.."\n"))
+			end
+		else
+			res_headers:upsert(":status", "200")
+			-- local mime_type = mdb and mdb:file(real_path) or "application/octet-stream"
+      local mime_type = mimetypes.guess(real_path) or 'application/octet-stream'
+			res_headers:append("content-type", mime_type)
+			assert(stream:write_headers(res_headers, req_method == "HEAD"))
+			if req_method ~= "HEAD" then
+				assert(stream:write_body_from_file(fd))
+			end
+		end
+	elseif file_type == nil then
+		res_headers:upsert(":status", "404")
+		assert(stream:write_headers(res_headers, true))
+	else
+		res_headers:upsert(":status", "403")
+		assert(stream:write_headers(res_headers, true))
+	end
+end
+
+local function reply(myserver, stream)
+  xpcall(function()
+    _reply(myserver, stream)
+    end,
+    function(err)
+      print('ERROR: ', err)
+      print(debug.traceback())
+    end)
+end
+
+local myserver = assert(http_server.listen {
+	host = "localhost";
+	port = port;
+	max_concurrent = 100;
+	onstream = reply;
+	onerror = function(myserver, context, op, err, errno) -- luacheck: ignore 212
+		local msg = op .. " on " .. tostring(context) .. " failed"
+		if err then
+			msg = msg .. ": " .. tostring(err)
+		end
+		assert(io.stderr:write(msg, "\n"))
+	end;
+})
+
+-- Manually call :listen() so that we are bound before calling :localname()
+assert(myserver:listen())
+do
+	local bound_port = select(3, myserver:localname())
+	assert(io.stderr:write(string.format("Now listening on port %d\n", bound_port)))
+end
+-- Start the main server loop
+assert(myserver:loop())
\ No newline at end of file
diff --git a/server/smtp-message.lua b/server/smtp-message.lua
new file mode 100644
index 0000000..70024e6
--- /dev/null
+++ b/server/smtp-message.lua
@@ -0,0 +1,62 @@
+local msg = function(mime, s)
+  local res = {}
+  local a = function(s) table.insert(res, s) end
+  a('Content-Type: ')
+  a(mime)
+  a('; charset="utf-8"\r\nContent-Transfer-Encoding: quoted-printable\r\nContent-Disposition: inline\r\n\r\n')
+  a(s)
+  a('\r\n\r\n')
+  return table.concat(res)
+end
+
+local plaintext = function(subject, s)
+  local res = {}
+  local a = function(s) table.insert(res, s) end
+  a('Subject: ')
+  a(subject)
+  a('\r\n')
+  a('MIME-Version: 1.0\r\n')
+  a(msg('text/plain', s))
+  return table.concat(res)
+end
+local html = function(subject, s)
+  local res = {}
+  local a = function(s) table.insert(res, s) end
+  a('Subject: ')
+  a(subject)
+  a('\r\n')
+  a('MIME-Version: 1.0\r\n')
+  a(msg('text/html', s))
+  return table.concat(res)
+end
+
+local plaintext_html = function(subject, s1, s2)
+  local boundary_string = 'wedcoi' -- TODO:check boundary string against s1 and s2
+  local res = {}
+  local a = function(s) table.insert(res, s) end
+  a('Subject: ')
+  a(subject)
+  a('\r\n')
+  a('MIME-Version: 1.0\r\nContent-Type: multipart/alternative; boundary="')
+  a(boundary_string)
+  a('"\r\n\r\n')
+  a('--')
+  a(boundary_string)
+  a('\r\n')
+  a(msg('text/plain', s1))
+  a('\r\n\r\n')
+  a('--')
+  a(boundary_string)
+  a('\r\n')
+  a(msg('text/html', s2))
+  a('--')
+  a(boundary_string)
+  a('--')
+  return table.concat(res)
+end
+
+return {
+  plaintext=plaintext,
+  html=html,
+  plaintext_html=plaintext_html
+  }
diff --git a/server/smtp-test.lua b/server/smtp-test.lua
new file mode 100644
index 0000000..1324c46
--- /dev/null
+++ b/server/smtp-test.lua
@@ -0,0 +1,20 @@
+local sendemail = require'./smtp'
+local message = require'smtp-message'
+
+--local mymsg = message.plaintext('A Subject', 'A plaintext body of a message.')
+local mymsg = message.plaintext_html('An HTML email with plaintext alternative', 'Please open in an HTML-capable email client. Get with the 21st-century.', [[
+  <html><head></head>
+  <body>
+  <h1>Piazza Optical</h1>
+  <h6>How... manipulative of an ad this is.</h6>
+  </body></html>
+  ]])
+sendemail({
+  message=mymsg,
+  from='brian@sakal.us',
+  to='briansakal@gmail.com',
+  host='sakal.us',
+  username='brian@sakal.us',
+  password='buginoO1$',
+  ehlo_host='piazzaoptical.com'
+  })
diff --git a/server/smtp.lua b/server/smtp.lua
new file mode 100644
index 0000000..c967bb7
--- /dev/null
+++ b/server/smtp.lua
@@ -0,0 +1,83 @@
+local cqueues = require'cqueues'
+local socket = require'cqueues.socket'
+local openssl_context = require'openssl.ssl.context'
+local base64 = require'base64'
+
+
+
+local get_default_ehlo_host = function()
+  return 'debian' -- TODO read from /etc/hosts
+end
+
+local send_auth_plain = function(opts)
+  if opts.host==nil or opts.from==nil or opts.to==nil then error('`host`, `from`, and `to` are required.') end
+
+  local host = opts.host
+  local port = opts.port or 25 --587
+  local username = opts.username
+  local password = opts.password
+
+  local ehlo_host = opts.ehlo_host or get_default_ehlo_host()
+
+  local from = opts.from
+  local to = opts.to
+  -- `message` includes Subject and other headers. Use stmp-message.lua to construct a message string.
+  local message = opts.message or 'Subject: \r\n\r\n\r\n.\r\n'
+  --local subject = opts.subject or ''
+  --local body = opts.body or ''
+  
+  local connection = socket.connect(host, port)
+  connection:settimeout(5)
+
+  local read = function()
+    local m = connection:read('*l') or ''
+    print('<-- '..m)
+    return m
+  end
+
+  local read_until = function(code_desired, substring)
+    local substring_needed = (substring ~= nil)
+    local code, line
+    repeat
+      line = read()
+      code = string.sub(line,1,3)
+    until code == code_desired and (not substring_needed or line:find(substring) ~= nil)
+  end
+
+  local write = function(m)
+    print('--> '..m)
+    connection:write(m)
+  end
+
+  read_until('220')
+  write('STARTTLS\r\n')
+
+  read_until('220')
+  local ctx = openssl_context.new('TLSv1_2', false)
+
+  local ok, err = connection:starttls(ctx)
+  if not ok then print('starttls error', err) end
+
+  write('EHLO '..ehlo_host..'\r\n')
+  read_until('250','PLAIN')
+
+  write('AUTH PLAIN '..base64.encode(username..'\0'..username..'\0'..password)..'\r\n')
+
+  read_until('235') -- auth successful
+  write('MAIL FROM:<'..from..'>\r\n')
+  read_until('250')
+  write('RCPT TO:<'..to..'>\r\n')
+  read_until('250')
+  write('DATA\r\n')
+  read_until('354')
+  write(message)
+  --write('Subject: '..subject..'\r\n\r\n')
+  --write(body..'\r\n')
+  write('\r\n.\r\n')
+  read_until('250')
+  write('QUIT')
+  --read_until('221')
+  connection:close()
+end
+
+return send_auth_plain
diff --git a/todo b/todo
new file mode 100644
index 0000000..93ed9ae
--- /dev/null
+++ b/todo
@@ -0,0 +1,38 @@
+== Important ==
+Organize server API by "page"
+Inventory
+  Decrement immediately upon order placement (or even addtocart), not shipment
+  In placeorder, check that all items are still in stock, because maybe customer added to his cart a few months ago, during which time the item was sold-out
+  Don't present customers with out-of-stock items, or label them as out-of-stock
+  On addtocart or updatequantity, check that quantity is in stock
+Never delete
+  Set all items to 'deleted=false'
+  Set any new items to 'deleted=false'
+  In itemsbyfilter, only return items where 'deleted=false'
+  In FrameAdmin, make 'delete' column into switch
+Split into frames and sunglasses
+'Enter' in either login textbox triggers attemptlogin
+Search bar
+'Clearance' tab
+  Each item needs a 'clearance' property
+'Place order' makes an invoice and sends email to user; maybe a "My Account" page with orders
+Implement routes, for back-button
+Progress bar for image upload
+Hash passwords (implement in already-existing 'hash' function)
+Elavon Requirements
+  Return/Refund Policy
+  Privacy Policy
+  Delivery Methods and Timing described
+
+== Nice for the Future ==
+Make multi-lingual. Multi-currency?
+Lens Chart
+  Create item entries in DB
+  Load all Lens entries, so UI is smooth (it doesn't have to download the new price every time a small change is made)
+Implement the entire menu hierarchy as per the spreadsheet
+Go through 'TODO's in code comments
+Get price info for lenses, equipment, and accessories; get brand/model info on accessories; get AR/transition options for blue bocker and glass
+
+== Notes ==
+To renew certbot SSL certificate (prepend `--dry-run` before `certonly` to test):
+  sudo certbot certonly --webroot -w /home/brian/piazza-website/public/ -d piazzaoptical.com