diff --git a/README.md b/README.md
index 2a0a7a8..260d01f 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,7 @@ Digital Business Card Generator is a free and open-source front-end web applicat
 - ~~Product showcase~~
 - Custom font support
 - Analytics support
+- Themes
 
 ## License
 
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 3bcab69..7a86044 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -18,25 +18,22 @@
   background-color: #38a169;
   border-color: #38a169;
 }
-/* .checkbox:checked + img {
-  filter: invert(1);
-} */
+
 .device-curve {
   border-radius: 2rem;
 }
 .max-hd {
-  /* max-height: 60vh; */
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 .max-hd::-webkit-scrollbar {
   display: none;
 }
-.device-viewport {
+.theme-one {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.device-viewport::-webkit-scrollbar {
+.theme-one::-webkit-scrollbar {
   display: none;
 }
 @media (min-width: 640px) {
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
index 3df0040..a351802 100644
--- a/assets/scripts/main.js
+++ b/assets/scripts/main.js
@@ -1,13 +1,13 @@
-let sC = document.getElementById('shareContainer'),
-  cBtn = document.getElementById('closeBtn'),
-  cURL = document.getElementById('copyURL'),
-  cSURL = document.getElementById('copyShareURL'),
-  dQR = document.getElementById('displayQRCode'),
-  qrc = document.getElementById('qrcode'),
+let m = document.getElementById('modal'),
+  c = document.getElementById('close'),
+  ki = document.getElementById('keyInfo'),
+  cv = document.getElementById('copyView'),
+  curl = document.getElementById('copyURL'),
+  qrv = document.getElementById('qrView'),
+  qr = document.getElementById('qr'),
   s = document.getElementById('share'),
-  sQRC = document.getElementById('showQRCode'),
-  pKI = document.getElementById('pubKeyInfo'),
-  sPK = document.getElementById('showPubKey')
+  sqr = document.getElementById('showQR'),
+  sk = document.getElementById('showKey')
 
 function tC(e) {
   '2rem' == e.style.top
@@ -24,8 +24,8 @@ function dN(value) {
   value.style.display = 'none'
 }
 window.addEventListener('load', () => {
-  ;(document.querySelector('#actions').style.display = 'flex'),
-    (qrc.innerHTML = new QRCode({
+  ;(document.querySelector('#topActions').style.display = 'flex'),
+    (qr.innerHTML = new QRCode({
       content: window.location.href,
       container: 'svg-viewbox',
       join: !0,
@@ -42,31 +42,22 @@ navigator.canShare
       })
     })
   : s.addEventListener('click', () => {
-      tC(sC),
-        (cURL.style.display = 'flex'),
-        dN(dQR),
-        pKI ? dN(pKI) : null
+      tC(m), (cv.style.display = 'flex'), dN(qrv), ki ? dN(ki) : null
     })
 
-sQRC.addEventListener('click', () => {
-  tC(sC),
-    (dQR.style.display = 'block'),
-    dN(cURL),
-    pKI ? dN(pKI) : null
+sqr.addEventListener('click', () => {
+  tC(m), (qrv.style.display = 'block'), dN(cv), ki ? dN(ki) : null
 })
 
-if (sPK) {
-  sPK.addEventListener('click', () => {
-    tC(sC),
-      pKI ? (pKI.style.display = 'flex') : null,
-      dN(cURL),
-      dN(dQR)
+if (sk) {
+  sk.addEventListener('click', () => {
+    tC(m), ki ? (ki.style.display = 'flex') : null, dN(cv), dN(qrv)
   })
 }
 
-cBtn.addEventListener('click', () => tC(sC)),
-  cSURL.addEventListener('click', async () => {
-    let action = cSURL.querySelectorAll('.action')[1]
+c.addEventListener('click', () => tC(m)),
+  curl.addEventListener('click', async () => {
+    let action = curl.querySelectorAll('.action')[1]
     await navigator.clipboard.writeText(window.location.href).then((e) => {
       action.innerText = 'Copied'
       setTimeout(() => {
diff --git a/assets/scripts/media.js b/assets/scripts/media.js
index 089ae5e..46a361f 100644
--- a/assets/scripts/media.js
+++ b/assets/scripts/media.js
@@ -1,4 +1,4 @@
-let pC = document.querySelectorAll('.playerControl'),
+let pC = document.querySelectorAll('.pCtrl'),
   pP = document.querySelectorAll('.playPause'),
   srcs = document.querySelectorAll('.source')
 srcs.forEach((e) => {
diff --git a/assets/styles/T1.min.css b/assets/styles/T1.min.css
new file mode 100644
index 0000000..0e366e8
--- /dev/null
+++ b/assets/styles/T1.min.css
@@ -0,0 +1 @@
+body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;font-family:sans-serif;position:relative}#modal{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeModal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#close{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#modalView,#copyView,#qrView,#keyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyView p,#keyInfo p{margin:1rem 2em 0;line-height:1.5;text-align:center}#copyURL,#dlKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:2rem;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView{text-align:center;width:100%}#qrView h2,#qrView p{padding:0 2rem}#qrView h2{margin:0}#qrView p{margin-top:0.5rem}#qr{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:0.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#topActions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#topActions>div{display:-webkit-box;display:-ms-flexbox;display:flex}#topActions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}main{padding:1rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-4.5rem}#profile img,#profile .img{width:7rem;height:7rem;border-radius:100%;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:700;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.actions{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionsC{width:33.33%}.actionBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionBtn a{border-radius:100%;padding:0.75rem;line-height:0}.actionBtn p{margin:0.5rem 0 0;font-size:0.875rem}.secActions{margin-top:1.25rem}.secBtn{padding:1rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#cta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#dlVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#dlVcard .icon{margin-right:0.5rem}#dlVcard p{margin:0}.attachments{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.section{font-weight:700;text-align:center;font-size:1.5rem;margin:3rem 1rem 1rem}.content{overflow:hidden;border-radius:0.5rem;margin-top:1rem}.content img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.embedded{position:relative;padding-top:56.25%}.embedded iframe{position:absolute;top:0;left:0;width:100%;height:100%}.music,.video{width:100%}.mediaC{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.controls{padding:2rem 1rem;font-size:0.875rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.prodInfo .desc{margin:-1rem 0 0}.price{margin:2rem 0 0;font-size:1.25rem;font-weight:700}.label{display:inline-block;font-size:1rem;margin-top:1rem;border-radius:5rem;letter-spacing:1px;padding:0.75rem 1.5rem}.label p{margin:0}.title{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem}.mediaInfo{margin:0}.pCtrl,.docDl{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.docDl{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:2.5rem 1.5rem 2rem;font-size:0.75rem;text-align:center}footer a{text-decoration:underline;color:inherit}
diff --git a/assets/styles/style.scss b/assets/styles/T1.scss
similarity index 75%
rename from assets/styles/style.scss
rename to assets/styles/T1.scss
index 2d350ce..3fef7d6 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/T1.scss
@@ -7,7 +7,7 @@ body {
   font-family: sans-serif;
   position: relative;
 }
-#shareContainer {
+#modal {
   position: absolute;
   z-index: 1;
   width: 100%;
@@ -15,12 +15,12 @@ body {
   transition: top 0.2s ease-out, opacity 0.1s ease-out;
   transform: translateZ(0);
 }
-#closeBtnContainer {
+#closeModal {
   display: flex;
   justify-content: flex-end;
   margin: 1rem 1rem 0 0;
 }
-#closeBtn {
+#close {
   padding: 0.75rem;
   cursor: pointer;
   line-height: 0;
@@ -29,24 +29,24 @@ body {
   width: 1.5rem;
   height: 1.5rem;
 }
-#shareContent,
-#copyURL,
-#displayQRCode,
-#pubKeyInfo {
+#modalView,
+#copyView,
+#qrView,
+#keyInfo {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-#copyURL,
-#pubKeyInfo {
+#copyView,
+#keyInfo {
   p {
     margin: 1rem 2em 0;
     line-height: 1.5;
     text-align: center;
   }
 }
-#copyShareURL,
-#downloadKey {
+#copyURL,
+#dlKey {
   display: inline-flex;
   align-items: center;
   border-radius: 5rem;
@@ -57,7 +57,7 @@ body {
     margin-left: 0.5rem;
   }
 }
-#displayQRCode {
+#qrView {
   text-align: center;
   width: 100%;
   h2,
@@ -65,15 +65,13 @@ body {
     padding: 0 2rem;
   }
   h2 {
-    font-weight: 700;
-    font-size: 1.5rem;
     margin: 0;
   }
   p {
     margin-top: 0.5rem;
   }
 }
-#qrcode {
+#qr {
   margin: 1rem 2rem 2rem;
   padding: 2rem;
   background: #fff;
@@ -95,13 +93,16 @@ header {
   pointer-events: none;
   user-select: none;
 }
-#actions {
+#topActions {
   flex-direction: row-reverse;
   justify-content: space-between;
   position: absolute;
   left: 1rem;
   right: 0;
   top: 1rem;
+  & > div {
+    display: flex;
+  }
   a {
     padding: 0.75rem;
     cursor: pointer;
@@ -110,9 +111,6 @@ header {
     margin-right: 1rem;
   }
 }
-#shareActions {
-  display: flex;
-}
 main {
   padding: 1rem;
 }
@@ -131,7 +129,7 @@ main {
     user-select: none;
   }
 }
-#profileInfo {
+#info {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -150,26 +148,22 @@ main {
   margin: 0.25rem 0 0 0;
 }
 
-.bizDescription {
-  text-align: center;
+.desc {
   font-size: 0.875rem;
   white-space: pre-line;
   line-height: 1.5;
   margin: 1rem;
 }
-#contactBtns,
-#socialBtns {
+.actions {
   margin-top: 2rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
-.contactBtnContainer,
-.socialBtnContainer {
+.actionsC {
   width: 33.33%;
 }
-.contactBtn,
-.socialBtn {
+.actionBtn {
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
@@ -185,16 +179,22 @@ main {
     font-size: 0.875rem;
   }
 }
+.secActions {
+  margin-top: 1.25rem;
+}
+.secBtn {
+  padding: 1rem;
+}
 a {
   text-decoration: none;
   user-select: none;
 }
-#ctaContainer {
+#cta {
   display: flex;
   justify-content: center;
   width: 100%;
 }
-#downloadVcard {
+#dlVcard {
   display: flex;
   align-items: center;
   border-radius: 5rem;
@@ -209,33 +209,22 @@ a {
     margin: 0;
   }
 }
-#socialBtns {
-  margin-top: 1.25rem;
-}
-.socialBtn {
-  padding: 1rem;
-}
-.contentContainer {
+.attachments {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.sectionTitle {
+.section {
   font-weight: 700;
   text-align: center;
   font-size: 1.5rem;
-  margin: 3rem 1.5rem 1.5rem;
+  margin: 3rem 1rem 1rem;
 }
-.image,
-.music,
-.video,
-.document,
-.embedContent,
-.product {
+.content {
   overflow: hidden;
   border-radius: 0.5rem;
-  margin-top: 1.5rem;
+  margin-top: 1rem;
   img {
     display: block;
     pointer-events: none;
@@ -243,13 +232,22 @@ a {
     width: 100%;
   }
 }
-
+.embedded {
+  position: relative;
+  padding-top: 56.25%;
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
 .music,
 .video {
   width: 100%;
 }
-.mediaPlayerContainer,
-.documentContainer {
+.mediaC {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
@@ -258,36 +256,32 @@ a {
 video {
   width: 100%;
 }
-.infoControls {
+.controls {
   padding: 2rem 1rem;
   font-size: 0.875rem;
   text-align: center;
   width: 100%;
   box-sizing: border-box;
 }
-.productContent {
-  .description {
+.prodInfo {
+  .desc {
     margin: -1rem 0 0;
-    font-size: 0.875rem;
-    white-space: pre-line;
-    line-height: 1.5;
   }
-  .price {
-    margin: 2rem 0 0;
-    font-size: 1.25rem;
-    font-weight: 700;
-  }
-  .label {
-    display: inline-block;
-    font-size: 1rem;
-    margin-top: 1rem;
-    border-radius: 5rem;
-    letter-spacing: 1px;
-    padding: 0.75rem 1.5rem;
-    line-height: 0;
-    .action {
-      margin: 0;
-    }
+}
+.price {
+  margin: 2rem 0 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+.label {
+  display: inline-block;
+  font-size: 1rem;
+  margin-top: 1rem;
+  border-radius: 5rem;
+  letter-spacing: 1px;
+  padding: 0.75rem 1.5rem;
+  p {
+    margin: 0;
   }
 }
 .title {
@@ -295,18 +289,17 @@ video {
   font-weight: 700;
   margin: 0 0 0.5rem;
 }
-.artistAlbum,
-.fileSize {
+.mediaInfo {
   margin: 0;
 }
-.playerControl,
-.downloadDocument {
+.pCtrl,
+.docDl {
   display: none;
   flex-direction: column;
   align-items: center;
   width: 100%;
 }
-.downloadDocument {
+.docDl {
   display: flex;
 }
 .seekBar {
@@ -319,7 +312,7 @@ video {
   cursor: pointer;
 }
 .playPause,
-.downloadBtn {
+.dlBtn {
   margin: 2rem 0.5rem 0;
   padding: 0.75rem;
   border-radius: 5rem;
@@ -330,14 +323,11 @@ video {
   display: none;
 }
 footer {
-  padding: 1.5rem 1.5rem 2rem;
-  div {
-    margin-top: 1rem;
-    font-size: 0.75rem;
-    text-align: center;
-    a {
-      text-decoration: underline;
-      color: inherit;
-    }
+  padding: 2.5rem 1.5rem 2rem;
+  font-size: 0.75rem;
+  text-align: center;
+  a {
+    text-decoration: underline;
+    color: inherit;
   }
 }
\ No newline at end of file
diff --git a/assets/styles/style.css b/assets/styles/style.css
deleted file mode 100644
index 138fafb..0000000
--- a/assets/styles/style.css
+++ /dev/null
@@ -1,511 +0,0 @@
-body {
-  margin: 0 auto;
-  width: 100%;
-  padding: 0;
-  max-width: 30rem;
-  color: #fff;
-  font-family: sans-serif;
-  position: relative;
-}
-
-#shareContainer {
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  bottom: 0;
-  -webkit-transition: top 0.2s ease-out, opacity 0.1s ease-out;
-  transition: top 0.2s ease-out, opacity 0.1s ease-out;
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-}
-
-#closeBtnContainer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  margin: 1rem 1rem 0 0;
-}
-
-#closeBtn {
-  padding: 0.75rem;
-  cursor: pointer;
-  line-height: 0;
-}
-
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-#shareContent,
-#copyURL,
-#displayQRCode,
-#pubKeyInfo {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-#copyURL p,
-#pubKeyInfo p {
-  margin: 1rem 2em 0;
-  line-height: 1.5;
-  text-align: center;
-}
-
-#copyShareURL,
-#downloadKey {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  border-radius: 5rem;
-  margin-top: 2rem;
-  padding: 0.75rem 1.5rem;
-  cursor: pointer;
-}
-
-#copyShareURL span,
-#downloadKey span {
-  margin-left: 0.5rem;
-}
-
-#displayQRCode {
-  text-align: center;
-  width: 100%;
-}
-
-#displayQRCode h2,
-#displayQRCode p {
-  padding: 0 2rem;
-}
-
-#displayQRCode h2 {
-  font-weight: 700;
-  font-size: 1.5rem;
-  margin: 0;
-}
-
-#displayQRCode p {
-  margin-top: 0.5rem;
-}
-
-#qrcode {
-  margin: 1rem 2rem 2rem;
-  padding: 2rem;
-  background: #fff;
-  border-radius: 0.5rem;
-}
-
-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  position: relative;
-  padding: 6rem 3rem;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-#logo {
-  max-height: 6rem;
-  text-align: center;
-  color: gray;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-#actions {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: row-reverse;
-          flex-direction: row-reverse;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  position: absolute;
-  left: 1rem;
-  right: 0;
-  top: 1rem;
-}
-
-#actions a {
-  padding: 0.75rem;
-  cursor: pointer;
-  border-radius: 100%;
-  line-height: 0;
-  margin-right: 1rem;
-}
-
-#shareActions {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-main {
-  padding: 1rem;
-}
-
-#profile {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin-top: -4.5rem;
-}
-
-#profile img,
-#profile .img {
-  width: 7rem;
-  height: 7rem;
-  border-radius: 100%;
-  text-align: center;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-#profileInfo {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin-top: 1rem;
-  line-height: 1.25;
-  word-break: break-word;
-}
-
-.name {
-  font-weight: 700;
-  font-size: 1.25rem;
-  margin: 0;
-}
-
-.jobtitle {
-  font-size: 1rem;
-  margin: 0.25rem 0 0 0;
-}
-
-.bizDescription {
-  text-align: center;
-  font-size: 0.875rem;
-  white-space: pre-line;
-  line-height: 1.5;
-  margin: 1rem;
-}
-
-#contactBtns,
-#socialBtns {
-  margin-top: 2rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-
-.contactBtnContainer,
-.socialBtnContainer {
-  width: 33.33%;
-}
-
-.contactBtn,
-.socialBtn {
-  padding: 0.5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-
-.contactBtn a,
-.socialBtn a {
-  border-radius: 100%;
-  padding: 0.75rem;
-  line-height: 0;
-}
-
-.contactBtn p,
-.socialBtn p {
-  margin: 0.5rem 0 0;
-  font-size: 0.875rem;
-}
-
-a {
-  text-decoration: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-#ctaContainer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  width: 100%;
-}
-
-#downloadVcard {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  border-radius: 5rem;
-  margin-top: 1.5rem;
-  padding: 0.75rem 1.5rem;
-  cursor: pointer;
-  line-height: 0;
-}
-
-#downloadVcard .icon {
-  margin-right: 0.5rem;
-}
-
-#downloadVcard p {
-  margin: 0;
-}
-
-#socialBtns {
-  margin-top: 1.25rem;
-}
-
-.socialBtn {
-  padding: 1rem;
-}
-
-.contentContainer {
-  margin-top: 1.5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-
-.sectionTitle {
-  font-weight: 700;
-  text-align: center;
-  font-size: 1.5rem;
-  margin: 3rem 1.5rem 1.5rem;
-}
-
-.image,
-.music,
-.video,
-.document,
-.embedContent,
-.product {
-  overflow: hidden;
-  border-radius: 0.5rem;
-  margin-top: 1.5rem;
-}
-
-.image img,
-.music img,
-.video img,
-.document img,
-.embedContent img,
-.product img {
-  display: block;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  width: 100%;
-}
-
-.music,
-.video {
-  width: 100%;
-}
-
-.mediaPlayerContainer,
-.documentContainer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-video {
-  width: 100%;
-}
-
-.infoControls {
-  padding: 2rem 1rem;
-  font-size: 0.875rem;
-  text-align: center;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-.productContent .description {
-  margin: -1rem 0 0;
-  font-size: 0.875rem;
-  white-space: pre-line;
-  line-height: 1.5;
-}
-
-.productContent .price {
-  margin: 2rem 0 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.productContent .label {
-  display: inline-block;
-  font-size: 1rem;
-  margin-top: 1rem;
-  border-radius: 5rem;
-  letter-spacing: 1px;
-  padding: 0.75rem 1.5rem;
-  line-height: 0;
-}
-
-.productContent .label .action {
-  margin: 0;
-}
-
-.title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  margin: 0 0 0.5rem;
-}
-
-.artistAlbum,
-.fileSize {
-  margin: 0;
-}
-
-.playerControl,
-.downloadDocument {
-  display: none;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 100%;
-}
-
-.downloadDocument {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.seekBar {
-  width: 100%;
-  height: 0.5rem;
-  margin-top: 2rem;
-  border-radius: 5rem;
-  background: #adb5bd;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  cursor: pointer;
-}
-
-.playPause,
-.downloadBtn {
-  margin: 2rem 0.5rem 0;
-  padding: 0.75rem;
-  border-radius: 5rem;
-  line-height: 0;
-  cursor: pointer;
-}
-
-.pause {
-  display: none;
-}
-
-footer {
-  padding: 1.5rem 1.5rem 2rem;
-}
-
-footer div {
-  margin-top: 1rem;
-  font-size: 0.75rem;
-  text-align: center;
-}
-
-footer div a {
-  text-decoration: underline;
-  color: inherit;
-}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/assets/styles/style.css.map b/assets/styles/style.css.map
deleted file mode 100644
index 1488d1e..0000000
--- a/assets/styles/style.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "style.scss"
-    ],
-    "names": [],
-    "file": "style.css"
-}
\ No newline at end of file
diff --git a/assets/styles/style.min.css b/assets/styles/style.min.css
deleted file mode 100644
index f366cfc..0000000
--- a/assets/styles/style.min.css
+++ /dev/null
@@ -1,2 +0,0 @@
-body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;font-family:sans-serif;position:relative}#shareContainer{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeBtnContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#closeBtn{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#shareContent,#copyURL,#displayQRCode,#pubKeyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyURL p,#pubKeyInfo p{margin:1rem 2em 0;line-height:1.5;text-align:center}#copyShareURL,#downloadKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:2rem;padding:0.75rem 1.5rem;cursor:pointer}#copyShareURL span,#downloadKey span{margin-left:0.5rem}#displayQRCode{text-align:center;width:100%}#displayQRCode h2,#displayQRCode p{padding:0 2rem}#displayQRCode h2{font-weight:700;font-size:1.5rem;margin:0}#displayQRCode p{margin-top:0.5rem}#qrcode{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:0.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#actions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#actions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}#shareActions{display:-webkit-box;display:-ms-flexbox;display:flex}main{padding:1rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-4.5rem}#profile img,#profile .img{width:7rem;height:7rem;border-radius:100%;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#profileInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:700;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.bizDescription{text-align:center;font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}#contactBtns,#socialBtns{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.contactBtnContainer,.socialBtnContainer{width:33.33%}.contactBtn,.socialBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.contactBtn a,.socialBtn a{border-radius:100%;padding:0.75rem;line-height:0}.contactBtn p,.socialBtn p{margin:0.5rem 0 0;font-size:0.875rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#ctaContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#downloadVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#downloadVcard .icon{margin-right:0.5rem}#downloadVcard p{margin:0}#socialBtns{margin-top:1.25rem}.socialBtn{padding:1rem}.contentContainer{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.sectionTitle{font-weight:700;text-align:center;font-size:1.5rem;margin:3rem 1.5rem 1.5rem}.image,.music,.video,.document,.embedContent,.product{overflow:hidden;border-radius:0.5rem;margin-top:1.5rem}.image img,.music img,.video img,.document img,.embedContent img,.product img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.music,.video{width:100%}.mediaPlayerContainer,.documentContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.infoControls{padding:2rem 1rem;font-size:0.875rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.productContent .description{margin:-1rem 0 0;font-size:0.875rem;white-space:pre-line;line-height:1.5}.productContent .price{margin:2rem 0 0;font-size:1.25rem;font-weight:700}.productContent .label{display:inline-block;font-size:1rem;margin-top:1rem;border-radius:5rem;letter-spacing:1px;padding:0.75rem 1.5rem;line-height:0}.productContent .label .action{margin:0}.title{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem}.artistAlbum,.fileSize{margin:0}.playerControl,.downloadDocument{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.downloadDocument{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.downloadBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:1.5rem 1.5rem 2rem}footer div{margin-top:1rem;font-size:0.75rem;text-align:center}footer div a{text-decoration:underline;color:inherit}
-/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/assets/styles/style.min.css.map b/assets/styles/style.min.css.map
deleted file mode 100644
index 2a0c66f..0000000
--- a/assets/styles/style.min.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "style.scss"
-    ],
-    "names": [],
-    "file": "style.min.css"
-}
\ No newline at end of file
diff --git a/components/DocumentDownloader.vue b/components/DocumentDownloader.vue
index 98fd0df..22ea6fd 100644
--- a/components/DocumentDownloader.vue
+++ b/components/DocumentDownloader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="documentContainer">
-    <div class="documentPreview">
+  <div class="mediaC">
+    <div>
       <img
         :src="
           PreviewMode
@@ -10,14 +10,14 @@
         :alt="media.title"
       />
     </div>
-    <div class="infoControls">
+    <div class="controls">
       <p class="title card">
         {{ media.title }}
       </p>
-      <p class="fileSize card">PDF - {{ media.filesize }}</p>
-      <div class="downloadDocument">
+      <p class="mediaInfo card">PDF - {{ media.filesize }}</p>
+      <div class="docDl">
         <a
-          class="downloadBtn"
+          class="dlBtn"
           @click.prevent="downloadDocument()"
           :style="{
             backgroundColor: `${colors.buttonBg.color}`,
diff --git a/components/MediaPlayer.vue b/components/MediaPlayer.vue
index 2b654f5..b25ca43 100644
--- a/components/MediaPlayer.vue
+++ b/components/MediaPlayer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mediaPlayerContainer">
+  <div class="mediaC">
     <video
       v-show="type == 'video'"
       controlsList="nodownload nofullscreen noremoteplayback"
@@ -19,7 +19,7 @@
         "
       />
     </video>
-    <img v-show="type == 'music'"
+    <img v-if="type == 'music'"
       :src="
         PreviewMode
           ? media.coverDataURI
@@ -27,17 +27,17 @@
       "
       alt="cover"
     />
-    <div class="infoControls">
+    <div class="controls">
       <p class="title card">
         {{ media.title }}
       </p>
-      <p class="artistAlbum card" v-if="media.artist">
+      <p class="mediaInfo card" v-if="media.artist">
         <span>{{ media.artist }}</span>
         <span v-if="media.album"> - {{ media.album }}</span>
       </p>
       <div
-        class="playerControl"
-        ref="playerControl"
+        class="pCtrl"
+        ref="pCtrl"
         :style="{ display: PreviewMode ? 'flex' : 'none' }"
       >
         <output class="currentTime card" ref="bubble">00:00</output>
@@ -110,7 +110,7 @@ export default {
     },
   },
   mounted() {
-    this.$refs.playerControl.style.display = 'flex'
+    this.$refs.pCtrl.style.display = 'flex'
   },
 }
 </script>
diff --git a/components/Preview.vue b/components/Preview.vue
index 759cae0..cea4e14 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    id="device-viewport"
-    class="rounded-b-lg overflow-y-scroll max-hd sm:max-hm"
-  >
+  <div id="Theme1" class="rounded-b-lg overflow-y-scroll max-hd sm:max-hm">
     <html
       ref="html"
       lang="en"
@@ -20,7 +17,6 @@
             '/' != window.location.href.slice(-1) &&
             window.location.replace(window.location.href + '/')
         </script>
-        <link v-if="!PreviewMode" rel="stylesheet" href="./style.min.css" />
         <title>{{ businessInfo.name }}'s Digital Business Card</title>
         <style>
           input[type='range']::-moz-range-track {
@@ -49,7 +45,7 @@
           .closeBtnColor{
             {{hasLightBG('mainBg') && 'filter:invert(1)'}}
           }
-          .shareAction{
+          .topAction{
             {{hasLightBG('logoBg') && 'filter:invert(1)'}}
           }
           .action{
@@ -60,26 +56,27 @@
             {{hasLightBG('cardBg') && 'color:#000 !important'}}
           }
           .text{
+            text-align: center;
             {{hasLightBG('mainBg') ? 'color:#000 !important' : 'color:#fff !important'}}
           }
         </style>
       </head>
       <body>
         <div
-          id="shareContainer"
-          ref="shareContainer"
+          id="modal"
+          ref="modal"
           :style="`backgroundColor: ${colors.mainBg.color}; visibility: hidden; top: 2rem; opacity: 0;`"
         >
-          <div id="closeBtnContainer">
-            <a id="closeBtn" @click="closePublicKey()" class="closeBtnColor">
+          <div id="closeModal">
+            <a id="close" @click="closePublicKey()" class="closeBtnColor">
               <div
                 class="icon"
                 v-html="require(`~/assets/icons/close.svg?include`)"
               ></div>
             </a>
           </div>
-          <div id="shareContent">
-            <div id="pubKeyInfo">
+          <div id="modalView">
+            <div id="keyInfo">
               <p class="text">
                 You can download my public key and use it to send me encrypted
                 messages
@@ -90,7 +87,7 @@
                 "
                 download
                 target="_blank"
-                id="downloadKey"
+                id="dlKey"
                 @click.prevent.capture="downloadKey()"
                 :style="{
                   backgroundColor: `${colors.buttonBg.color}`,
@@ -102,12 +99,12 @@
                 <span class="action">Download</span></a
               >
             </div>
-            <div id="copyURL" ref="copyURL">
+            <div id="copyView" ref="copyView">
               <p class="text">
                 You can copy my Business Card URL and share it via any medium
               </p>
               <a
-                id="copyShareURL"
+                id="copyURL"
                 :style="{
                   backgroundColor: `${colors.buttonBg.color}`,
                 }"
@@ -118,8 +115,8 @@
                 <span class="action">Copy URL</span></a
               >
             </div>
-            <div id="displayQRCode" ref="displayQRCode">
-              <div id="qrcode"></div>
+            <div id="qrView" ref="qrView">
+              <div id="qr"></div>
               <h2 class="text">Scan this QR Code</h2>
               <p class="text">to view my Business Card</p>
             </div>
@@ -134,27 +131,30 @@
             "
             alt="Logo"
           />
-          <div id="actions" :style="{ display: PreviewMode ? 'flex' : 'none' }">
-            <div id="shareActions">
+          <div
+            id="topActions"
+            :style="{ display: PreviewMode ? 'flex' : 'none' }"
+          >
+            <div>
               <a id="share" @click.prevent.capture="sharingAlert()">
                 <div
-                  class="icon shareAction"
+                  class="icon topAction"
                   v-html="require(`~/assets/icons/share.svg?include`)"
                 ></div>
               </a>
-              <a id="showQRCode" @click.prevent.capture="sharingAlert()"
+              <a id="showQR" @click.prevent.capture="sharingAlert()"
                 ><div
-                  class="icon shareAction"
+                  class="icon topAction"
                   v-html="require(`~/assets/icons/qrcode.svg?include`)"
                 ></div>
               </a>
             </div>
             <a
               v-if="pubKeyIsValid"
-              id="showPubKey"
-              @click.prevent.capture="showPubKey()"
+              id="showKey"
+              @click.prevent.capture="showKey()"
               ><div
-                class="icon shareAction"
+                class="icon topAction"
                 v-html="require(`~/assets/icons/key.svg?include`)"
               ></div>
             </a>
@@ -176,7 +176,7 @@
               class="img"
               :style="{ backgroundColor: `${colors.mainBg.color}` }"
             ></div>
-            <div id="profileInfo">
+            <div id="info">
               <p class="name text">
                 {{ businessInfo.name }}
               </p>
@@ -185,19 +185,16 @@
               </p>
             </div>
           </div>
-          <p
-            class="bizDescription text"
-            v-if="businessInfo.businessDescription"
-          >
+          <p class="desc text" v-if="businessInfo.businessDescription">
             {{ businessInfo.businessDescription }}
           </p>
-          <div id="contactBtns">
+          <div class="actions">
             <div
-              class="contactBtnContainer"
+              class="actionsC"
               v-for="(item, index) in primaryActions"
               :key="'pa' + index"
             >
-              <div class="contactBtn">
+              <div class="actionBtn">
                 <a
                   :href="`${item.href ? item.href + item.value : item.value}`"
                   target="_blank"
@@ -219,9 +216,9 @@
                 </p>
               </div>
             </div>
-            <div id="ctaContainer">
+            <div id="cta">
               <a
-                id="downloadVcard"
+                id="dlVcard"
                 :href="PreviewMode ? '' : `${username}.vcf`"
                 download
                 target="_blank"
@@ -237,13 +234,13 @@
               </a>
             </div>
           </div>
-          <div id="socialBtns">
+          <div class="actions secActions">
             <div
-              class="socialBtnContainer"
+              class="actionsC"
               v-for="(item, index) in secondaryActions"
               :key="'sa' + index"
             >
-              <div class="socialBtn">
+              <div class="actionBtn secBtn">
                 <a
                   :href="item.value"
                   target="_blank"
@@ -260,12 +257,13 @@
             </div>
           </div>
           <div
-            class="contentContainer"
+            class="attachments"
             v-for="(item, index) in featured"
             :key="'fc' + index"
           >
-            <h2 class="sectionTitle text">{{ item.title }}</h2>
+            <h2 class="section text">{{ item.title }}</h2>
             <div
+              class="content"
               :class="item.type"
               v-for="(item, i) in item.content"
               :key="i"
@@ -281,7 +279,7 @@
                   "
                   alt="Product image"
                 />
-                <div class="infoControls">
+                <div class="controls">
                   <p class="title card">
                     {{ item.title }}
                   </p>
@@ -306,14 +304,13 @@
             </div>
           </div>
           <div
-            class="contentContainer"
+            class="attachments"
             v-for="(item, index) in getEmbedContent"
             :key="'ec' + index"
           >
-            <h2 class="sectionTitle text">{{ item.title }}</h2>
+            <h2 class="section text">{{ item.title }}</h2>
             <div
-              class="embedContent"
-              style="position: relative; padding-top: 56.25%"
+              class="content embedded"
               v-for="(item, index) in item.content"
               :key="index"
             >
@@ -321,23 +318,16 @@
                 :src="stripAttr(item)"
                 frameborder="0"
                 allowfullscreen
-                style="
-                  position: absolute;
-                  top: 0;
-                  left: 0;
-                  width: 100%;
-                  height: 100%;
-                "
                 allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'"
               ></iframe>
             </div>
           </div>
           <div
-            class="contentContainer"
+            class="attachments"
             v-for="(item, index) in products"
             :key="'pc' + index"
           >
-            <h2 class="sectionTitle text">{{ item.title }}</h2>
+            <h2 class="section text">{{ item.title }}</h2>
             <ProductShowcase
               :products="item.content"
               :colors="colors"
@@ -349,31 +339,17 @@
         <footer
           v-if="footerCredit"
           :style="{ backgroundColor: `${colors.mainBg.color}` }"
+          class="text"
         >
-          <div class="text">
-            Created with
-            <a
-              class="text"
-              href="https://dbizcard.vercel.app/"
-              target="_blank"
-              rel="noopener noreferrer"
-              >Digital Business Card Generator</a
-            >
-          </div>
+          Created with
+          <a
+            class="text"
+            href="https://dbizcard.vercel.app/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Digital Business Card Generator</a
+          >
         </footer>
-        <script v-if="!PreviewMode" src="./qrcode.min.js"></script>
-        <!-- prettier-ignore -->
-        <script v-if="!PreviewMode">
-          let sC=document.getElementById("shareContainer"),cBtn=document.getElementById("closeBtn"),cURL=document.getElementById("copyURL"),cSURL=document.getElementById("copyShareURL"),dQR=document.getElementById("displayQRCode"),qrc=document.getElementById("qrcode"),s=document.getElementById("share"),sQRC=document.getElementById("showQRCode"),pKI=document.getElementById("pubKeyInfo"),sPK=document.getElementById("showPubKey");function tC(e){"2rem"==e.style.top?(e.style.visibility="visible",e.style.top="0px",e.style.opacity=1):(e.style.top="2rem",e.style.opacity=0,setTimeout(()=>{e.style.visibility="hidden"},200))}function dN(e){e.style.display="none"}window.addEventListener("load",()=>{document.querySelector("#actions").style.display="flex",qrc.innerHTML=new QRCode({content:window.location.href,container:"svg-viewbox",join:!0,ecl:"L",padding:0}).svg()}),navigator.canShare?s.addEventListener("click",()=>{navigator.share({title:document.title,text:"You can view my Digital Business Card here:",url:window.location.href})}):s.addEventListener("click",()=>{tC(sC),cURL.style.display="flex",dN(dQR),pKI&&dN(pKI)}),sQRC.addEventListener("click",()=>{tC(sC),dQR.style.display="block",dN(cURL),pKI&&dN(pKI)}),sPK&&sPK.addEventListener("click",()=>{tC(sC),pKI&&(pKI.style.display="flex"),dN(cURL),dN(dQR)}),cBtn.addEventListener("click",()=>tC(sC)),cSURL.addEventListener("click",async()=>{let e=cSURL.querySelectorAll(".action")[1];await navigator.clipboard.writeText(window.location.href).then(t=>{e.innerText="Copied",setTimeout(()=>{e.innerText="Copy URL"},1e3)})});
-        </script>
-        <!-- prettier-ignore -->
-        <script
-          v-if="
-            !PreviewMode && (featured.length)
-          "
-        >
-          let pC=document.querySelectorAll(".playerControl"),pP=document.querySelectorAll(".playPause"),srcs=document.querySelectorAll(".source");srcs.forEach(e=>{e.style.pointerEvents="none",e.removeAttribute("controls")}),pC.forEach((e,l)=>{e.style.display="flex";let r=e.querySelector(".currentTime"),s=e.querySelector(".seekBar"),t=e.querySelector(".playPause"),a=t.querySelector(".play"),o=t.querySelector(".pause");srcs[l].addEventListener("timeupdate",()=>{let e=srcs[l].currentTime,t=100/srcs[l].duration*e;s.value=t,100==t&&(s.value=0,a.style.display="block",o.style.display="none");let c=Math.floor(e/60),y=Math.floor(e%60);c.toString().length<2&&(c="0"+c),y.toString().length<2&&(y="0"+y),r.value=c+":"+y}),s.addEventListener("change",()=>{srcs[l].currentTime=srcs[l].duration*(parseInt(s.value)/100)}),t.addEventListener("click",()=>{srcs[l].paused?(srcs.forEach((e,r)=>{l!=r&&(e.paused||e.pause())}),pP.forEach((e,l)=>{let r=e.querySelector(".play"),s=e.querySelector(".pause");r.style.display="block",s.style.display="none"}),srcs[l].play(),a.style.display="none",o.style.display="block"):(srcs[l].pause(),o.style.display="none",a.style.display="block")})});
-        </script>
       </body>
     </html>
   </div>
@@ -438,7 +414,7 @@ export default {
       return e.toLowerCase().split(' ').join('_')
     },
     stripAttr(val) {
-      if (/<iframe/.test(val)) {
+      if (/<iframe(.*)\/iframe>/.test(val)) {
         let iframe = val.match(/<iframe(.*)\/iframe>/)[0]
         return iframe.match(/src="?([^"\s]+)"/)[1]
       } else return null
@@ -454,15 +430,15 @@ export default {
             e.style.visibility = 'hidden'
           }, 200))
     },
-    showPubKey() {
-      let shareContainer = this.$refs.shareContainer
-      let copyURL = this.$refs.copyURL
-      let displayQRCode = this.$refs.displayQRCode
-      this.toggleContainer(shareContainer)
-      copyURL.style.display = displayQRCode.style.display = 'none'
+    showKey() {
+      let modal = this.$refs.modal
+      let copyView = this.$refs.copyView
+      let qrView = this.$refs.qrView
+      this.toggleContainer(modal)
+      copyView.style.display = qrView.style.display = 'none'
     },
     closePublicKey() {
-      this.toggleContainer(shareContainer)
+      this.toggleContainer(modal)
     },
     sharingAlert() {
       this.showAlert(
@@ -496,7 +472,7 @@ export default {
 }
 </script>
 <style lang="scss">
-#device-viewport {
+#Theme1 {
   body {
     margin: 0 auto;
     width: 100%;
@@ -506,7 +482,7 @@ export default {
     font-family: sans-serif;
     position: relative;
   }
-  #shareContainer {
+  #modal {
     position: absolute;
     z-index: 1;
     width: 100%;
@@ -514,12 +490,12 @@ export default {
     transition: top 0.2s ease-out, opacity 0.1s ease-out;
     transform: translateZ(0);
   }
-  #closeBtnContainer {
+  #closeModal {
     display: flex;
     justify-content: flex-end;
     margin: 1rem 1rem 0 0;
   }
-  #closeBtn {
+  #close {
     padding: 0.75rem;
     cursor: pointer;
     line-height: 0;
@@ -528,24 +504,24 @@ export default {
     width: 1.5rem;
     height: 1.5rem;
   }
-  #shareContent,
-  #copyURL,
-  #displayQRCode,
-  #pubKeyInfo {
+  #modalView,
+  #copyView,
+  #qrView,
+  #keyInfo {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-  #copyURL,
-  #pubKeyInfo {
+  #copyView,
+  #keyInfo {
     p {
       margin: 1rem 2em 0;
       line-height: 1.5;
       text-align: center;
     }
   }
-  #copyShareURL,
-  #downloadKey {
+  #copyURL,
+  #dlKey {
     display: inline-flex;
     align-items: center;
     border-radius: 5rem;
@@ -556,7 +532,7 @@ export default {
       margin-left: 0.5rem;
     }
   }
-  #displayQRCode {
+  #qrView {
     text-align: center;
     width: 100%;
     h2,
@@ -564,15 +540,13 @@ export default {
       padding: 0 2rem;
     }
     h2 {
-      font-weight: 700;
-      font-size: 1.5rem;
       margin: 0;
     }
     p {
       margin-top: 0.5rem;
     }
   }
-  #qrcode {
+  #qr {
     margin: 1rem 2rem 2rem;
     padding: 2rem;
     background: #fff;
@@ -594,13 +568,16 @@ export default {
     pointer-events: none;
     user-select: none;
   }
-  #actions {
+  #topActions {
     flex-direction: row-reverse;
     justify-content: space-between;
     position: absolute;
     left: 1rem;
     right: 0;
     top: 1rem;
+    & > div {
+      display: flex;
+    }
     a {
       padding: 0.75rem;
       cursor: pointer;
@@ -609,9 +586,6 @@ export default {
       margin-right: 1rem;
     }
   }
-  #shareActions {
-    display: flex;
-  }
   main {
     padding: 1rem;
   }
@@ -630,7 +604,7 @@ export default {
       user-select: none;
     }
   }
-  #profileInfo {
+  #info {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -649,26 +623,22 @@ export default {
     margin: 0.25rem 0 0 0;
   }
 
-  .bizDescription {
-    text-align: center;
+  .desc {
     font-size: 0.875rem;
     white-space: pre-line;
     line-height: 1.5;
     margin: 1rem;
   }
-  #contactBtns,
-  #socialBtns {
+  .actions {
     margin-top: 2rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
   }
-  .contactBtnContainer,
-  .socialBtnContainer {
+  .actionsC {
     width: 33.33%;
   }
-  .contactBtn,
-  .socialBtn {
+  .actionBtn {
     padding: 0.5rem;
     display: flex;
     flex-direction: column;
@@ -684,16 +654,22 @@ export default {
       font-size: 0.875rem;
     }
   }
+  .secActions {
+    margin-top: 1.25rem;
+  }
+  .secBtn {
+    padding: 1rem;
+  }
   a {
     text-decoration: none;
     user-select: none;
   }
-  #ctaContainer {
+  #cta {
     display: flex;
     justify-content: center;
     width: 100%;
   }
-  #downloadVcard {
+  #dlVcard {
     display: flex;
     align-items: center;
     border-radius: 5rem;
@@ -708,33 +684,22 @@ export default {
       margin: 0;
     }
   }
-  #socialBtns {
-    margin-top: 1.25rem;
-  }
-  .socialBtn {
-    padding: 1rem;
-  }
-  .contentContainer {
+  .attachments {
     margin-top: 1.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
-  .sectionTitle {
+  .section {
     font-weight: 700;
     text-align: center;
     font-size: 1.5rem;
-    margin: 3rem 1.5rem 1.5rem;
+    margin: 3rem 1rem 1rem;
   }
-  .image,
-  .music,
-  .video,
-  .document,
-  .embedContent,
-  .product {
+  .content {
     overflow: hidden;
     border-radius: 0.5rem;
-    margin-top: 1.5rem;
+    margin-top: 1rem;
     img {
       display: block;
       pointer-events: none;
@@ -742,13 +707,22 @@ export default {
       width: 100%;
     }
   }
-
+  .embedded {
+    position: relative;
+    padding-top: 56.25%;
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
   .music,
   .video {
     width: 100%;
   }
-  .mediaPlayerContainer,
-  .documentContainer {
+  .mediaC {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -757,36 +731,32 @@ export default {
   video {
     width: 100%;
   }
-  .infoControls {
+  .controls {
     padding: 2rem 1rem;
     font-size: 0.875rem;
     text-align: center;
     width: 100%;
     box-sizing: border-box;
   }
-  .productContent {
-    .description {
+  .prodInfo {
+    .desc {
       margin: -1rem 0 0;
-      font-size: 0.875rem;
-      white-space: pre-line;
-      line-height: 1.5;
     }
-    .price {
-      margin: 2rem 0 0;
-      font-size: 1.25rem;
-      font-weight: 700;
-    }
-    .label {
-      display: inline-block;
-      font-size: 1rem;
-      margin-top: 1rem;
-      border-radius: 5rem;
-      letter-spacing: 1px;
-      padding: 0.75rem 1.5rem;
-      line-height: 0;
-      .action {
-        margin: 0;
-      }
+  }
+  .price {
+    margin: 2rem 0 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+  }
+  .label {
+    display: inline-block;
+    font-size: 1rem;
+    margin-top: 1rem;
+    border-radius: 5rem;
+    letter-spacing: 1px;
+    padding: 0.75rem 1.5rem;
+    p {
+      margin: 0;
     }
   }
   .title {
@@ -794,18 +764,17 @@ export default {
     font-weight: 700;
     margin: 0 0 0.5rem;
   }
-  .artistAlbum,
-  .fileSize {
+  .mediaInfo {
     margin: 0;
   }
-  .playerControl,
-  .downloadDocument {
+  .pCtrl,
+  .docDl {
     display: none;
     flex-direction: column;
     align-items: center;
     width: 100%;
   }
-  .downloadDocument {
+  .docDl {
     display: flex;
   }
   .seekBar {
@@ -818,7 +787,7 @@ export default {
     cursor: pointer;
   }
   .playPause,
-  .downloadBtn {
+  .dlBtn {
     margin: 2rem 0.5rem 0;
     padding: 0.75rem;
     border-radius: 5rem;
@@ -829,15 +798,12 @@ export default {
     display: none;
   }
   footer {
-    padding: 1.5rem 1.5rem 2rem;
-    div {
-      margin-top: 1rem;
-      font-size: 0.75rem;
-      text-align: center;
-      a {
-        text-decoration: underline;
-        color: inherit;
-      }
+    padding: 2.5rem 1.5rem 2rem;
+    font-size: 0.75rem;
+    text-align: center;
+    a {
+      text-decoration: underline;
+      color: inherit;
     }
   }
 }
diff --git a/components/ProductCard.vue b/components/ProductCard.vue
index 7fb50fd..3704573 100644
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -14,7 +14,7 @@
         />
         <button
           v-else
-          class="p-3 h-12 w-12 box-border rounded cursor-pointer border border-dashed border-gray-500 hover:border-gray-900 transition-colors duration-200"
+          class="p-3 h-12 w-12 box-border rounded cursor-pointer border border-dashed border-gray-900 hover:border-gray-500 transition-colors duration-200"
           @click="loadFile(i)"
           aria-label="Attach product image"
           title="Attach product image"
diff --git a/components/ProductShowcase.vue b/components/ProductShowcase.vue
index 5439144..e04d4c3 100644
--- a/components/ProductShowcase.vue
+++ b/components/ProductShowcase.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="product"
+      class="content"
       v-for="(item, i) in products"
       :key="i"
       :style="{ backgroundColor: `${colors.cardBg.color}` }"
@@ -15,11 +15,11 @@
         "
         alt="Product image"
       />
-      <div class="infoControls productContent">
+      <div class="controls prodInfo">
         <p class="title card">
           {{ item.title }}
         </p>
-        <p class="description card">
+        <p class="desc card">
           {{ item.description }}
         </p>
         <p class="price card">
@@ -29,7 +29,7 @@
           class="label"
           :style="{
             backgroundColor: `${colors.buttonBg.color}`,
-            lineHeight: PreviewMode ? 'inherit' : 0,
+            lineHeight: PreviewMode ? 'inherit' : '2rem',
           }"
           target="_blank"
           :href="item.link"
diff --git a/components/QRCode.vue b/components/QRCode.vue
deleted file mode 100644
index 40f66f9..0000000
--- a/components/QRCode.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <script ref="qrcode">function QR8bitByte(t){this.mode=QRMode.MODE_8BIT_BYTE,this.data=t,this.parsedData=[];for(var e=0,r=this.data.length;e<r;e++){var o=[],n=this.data.charCodeAt(e);n>65536?(o[0]=240|(1835008&n)>>>18,o[1]=128|(258048&n)>>>12,o[2]=128|(4032&n)>>>6,o[3]=128|63&n):n>2048?(o[0]=224|(61440&n)>>>12,o[1]=128|(4032&n)>>>6,o[2]=128|63&n):n>128?(o[0]=192|(1984&n)>>>6,o[1]=128|63&n):o[0]=n,this.parsedData.push(o)}this.parsedData=Array.prototype.concat.apply([],this.parsedData),this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function QRCodeModel(t,e){this.typeNumber=t,this.errorCorrectLevel=e,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}QR8bitByte.prototype={getLength:function(t){return this.parsedData.length},write:function(t){for(var e=0,r=this.parsedData.length;e<r;e++)t.put(this.parsedData[e],8)}},QRCodeModel.prototype={addData:function(t){var e=new QR8bitByte(t);this.dataList.push(e),this.dataCache=null},isDark:function(t,e){if(t<0||this.moduleCount<=t||e<0||this.moduleCount<=e)throw new Error(t+","+e);return this.modules[t][e]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(t,e){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var r=0;r<this.moduleCount;r++){this.modules[r]=new Array(this.moduleCount);for(var o=0;o<this.moduleCount;o++)this.modules[r][o]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(t,e),this.typeNumber>=7&&this.setupTypeNumber(t),null==this.dataCache&&(this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,e)},setupPositionProbePattern:function(t,e){for(var r=-1;r<=7;r++)if(!(t+r<=-1||this.moduleCount<=t+r))for(var o=-1;o<=7;o++)e+o<=-1||this.moduleCount<=e+o||(this.modules[t+r][e+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var t=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=QRUtil.getLostPoint(this);(0==r||t>o)&&(t=o,e=r)}return e},createMovieClip:function(t,e,r){var o=t.createEmptyMovieClip(e,r);this.make();for(var n=0;n<this.modules.length;n++)for(var i=1*n,a=0;a<this.modules[n].length;a++){var s=1*a;this.modules[n][a]&&(o.beginFill(0,100),o.moveTo(s,i),o.lineTo(s+1,i),o.lineTo(s+1,i+1),o.lineTo(s,i+1),o.endFill())}return o},setupTimingPattern:function(){for(var t=8;t<this.moduleCount-8;t++)null==this.modules[t][6]&&(this.modules[t][6]=t%2==0);for(var e=8;e<this.moduleCount-8;e++)null==this.modules[6][e]&&(this.modules[6][e]=e%2==0)},setupPositionAdjustPattern:function(){for(var t=QRUtil.getPatternPosition(this.typeNumber),e=0;e<t.length;e++)for(var r=0;r<t.length;r++){var o=t[e],n=t[r];if(null==this.modules[o][n])for(var i=-2;i<=2;i++)for(var a=-2;a<=2;a++)this.modules[o+i][n+a]=-2==i||2==i||-2==a||2==a||0==i&&0==a}},setupTypeNumber:function(t){for(var e=QRUtil.getBCHTypeNumber(this.typeNumber),r=0;r<18;r++){var o=!t&&1==(e>>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(r=0;r<18;r++)o=!t&&1==(e>>r&1),this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=o},setupTypeInfo:function(t,e){for(var r=this.errorCorrectLevel<<3|e,o=QRUtil.getBCHTypeInfo(r),n=0;n<15;n++){var i=!t&&1==(o>>n&1);n<6?this.modules[n][8]=i:n<8?this.modules[n+1][8]=i:this.modules[this.moduleCount-15+n][8]=i}for(n=0;n<15;n++)i=!t&&1==(o>>n&1),n<8?this.modules[8][this.moduleCount-n-1]=i:n<9?this.modules[8][15-n-1+1]=i:this.modules[8][15-n-1]=i;this.modules[this.moduleCount-8][8]=!t},mapData:function(t,e){for(var r=-1,o=this.moduleCount-1,n=7,i=0,a=this.moduleCount-1;a>0;a-=2)for(6==a&&a--;;){for(var s=0;s<2;s++)if(null==this.modules[o][a-s]){var h=!1;i<t.length&&(h=1==(t[i]>>>n&1)),QRUtil.getMask(e,o,a-s)&&(h=!h),this.modules[o][a-s]=h,-1==--n&&(i++,n=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},QRCodeModel.PAD0=236,QRCodeModel.PAD1=17,QRCodeModel.createData=function(t,e,r){for(var o=QRRSBlock.getRSBlocks(t,e),n=new QRBitBuffer,i=0;i<r.length;i++){var a=r[i];n.put(a.mode,4),n.put(a.getLength(),QRUtil.getLengthInBits(a.mode,t)),a.write(n)}var s=0;for(i=0;i<o.length;i++)s+=o[i].dataCount;if(n.getLengthInBits()>8*s)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*s+")");for(n.getLengthInBits()+4<=8*s&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*s||(n.put(QRCodeModel.PAD0,8),n.getLengthInBits()>=8*s));)n.put(QRCodeModel.PAD1,8);return QRCodeModel.createBytes(n,o)},QRCodeModel.createBytes=function(t,e){for(var r=0,o=0,n=0,i=new Array(e.length),a=new Array(e.length),s=0;s<e.length;s++){var h=e[s].dataCount,l=e[s].totalCount-h;o=Math.max(o,h),n=Math.max(n,l),i[s]=new Array(h);for(var u=0;u<i[s].length;u++)i[s][u]=255&t.buffer[u+r];r+=h;var g=QRUtil.getErrorCorrectPolynomial(l),d=new QRPolynomial(i[s],g.getLength()-1).mod(g);for(a[s]=new Array(g.getLength()-1),u=0;u<a[s].length;u++){var f=u+d.getLength()-a[s].length;a[s][u]=f>=0?d.get(f):0}}var c=0;for(u=0;u<e.length;u++)c+=e[u].totalCount;var R=new Array(c),p=0;for(u=0;u<o;u++)for(s=0;s<e.length;s++)u<i[s].length&&(R[p++]=i[s][u]);for(u=0;u<n;u++)for(s=0;s<e.length;s++)u<a[s].length&&(R[p++]=a[s][u]);return R};for(var QRMode={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},QRErrorCorrectLevel={L:1,M:0,Q:3,H:2},QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(t){for(var e=t<<10;QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G15)>=0;)e^=QRUtil.G15<<QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G15);return(t<<10|e)^QRUtil.G15_MASK},getBCHTypeNumber:function(t){for(var e=t<<12;QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G18)>=0;)e^=QRUtil.G18<<QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G18);return t<<12|e},getBCHDigit:function(t){for(var e=0;0!=t;)e++,t>>>=1;return e},getPatternPosition:function(t){return QRUtil.PATTERN_POSITION_TABLE[t-1]},getMask:function(t,e,r){switch(t){case QRMaskPattern.PATTERN000:return(e+r)%2==0;case QRMaskPattern.PATTERN001:return e%2==0;case QRMaskPattern.PATTERN010:return r%3==0;case QRMaskPattern.PATTERN011:return(e+r)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(e/2)+Math.floor(r/3))%2==0;case QRMaskPattern.PATTERN101:return e*r%2+e*r%3==0;case QRMaskPattern.PATTERN110:return(e*r%2+e*r%3)%2==0;case QRMaskPattern.PATTERN111:return(e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}},getErrorCorrectPolynomial:function(t){for(var e=new QRPolynomial([1],0),r=0;r<t;r++)e=e.multiply(new QRPolynomial([1,QRMath.gexp(r)],0));return e},getLengthInBits:function(t,e){if(1<=e&&e<10)switch(t){case QRMode.MODE_NUMBER:return 10;case QRMode.MODE_ALPHA_NUM:return 9;case QRMode.MODE_8BIT_BYTE:case QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+t)}else if(e<27)switch(t){case QRMode.MODE_NUMBER:return 12;case QRMode.MODE_ALPHA_NUM:return 11;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+t)}else{if(!(e<41))throw new Error("type:"+e);switch(t){case QRMode.MODE_NUMBER:return 14;case QRMode.MODE_ALPHA_NUM:return 13;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+t)}}},getLostPoint:function(t){for(var e=t.getModuleCount(),r=0,o=0;o<e;o++)for(var n=0;n<e;n++){for(var i=0,a=t.isDark(o,n),s=-1;s<=1;s++)if(!(o+s<0||e<=o+s))for(var h=-1;h<=1;h++)n+h<0||e<=n+h||0==s&&0==h||a==t.isDark(o+s,n+h)&&i++;i>5&&(r+=3+i-5)}for(o=0;o<e-1;o++)for(n=0;n<e-1;n++){var l=0;t.isDark(o,n)&&l++,t.isDark(o+1,n)&&l++,t.isDark(o,n+1)&&l++,t.isDark(o+1,n+1)&&l++,0!=l&&4!=l||(r+=3)}for(o=0;o<e;o++)for(n=0;n<e-6;n++)t.isDark(o,n)&&!t.isDark(o,n+1)&&t.isDark(o,n+2)&&t.isDark(o,n+3)&&t.isDark(o,n+4)&&!t.isDark(o,n+5)&&t.isDark(o,n+6)&&(r+=40);for(n=0;n<e;n++)for(o=0;o<e-6;o++)t.isDark(o,n)&&!t.isDark(o+1,n)&&t.isDark(o+2,n)&&t.isDark(o+3,n)&&t.isDark(o+4,n)&&!t.isDark(o+5,n)&&t.isDark(o+6,n)&&(r+=40);var u=0;for(n=0;n<e;n++)for(o=0;o<e;o++)t.isDark(o,n)&&u++;return r+Math.abs(100*u/e/e-50)/5*10}},QRMath={glog:function(t){if(t<1)throw new Error("glog("+t+")");return QRMath.LOG_TABLE[t]},gexp:function(t){for(;t<0;)t+=255;for(;t>=256;)t-=255;return QRMath.EXP_TABLE[t]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},i=0;i<8;i++)QRMath.EXP_TABLE[i]=1<<i;for(i=8;i<256;i++)QRMath.EXP_TABLE[i]=QRMath.EXP_TABLE[i-4]^QRMath.EXP_TABLE[i-5]^QRMath.EXP_TABLE[i-6]^QRMath.EXP_TABLE[i-8];for(i=0;i<255;i++)QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]]=i;function QRPolynomial(t,e){if(null==t.length)throw new Error(t.length+"/"+e);for(var r=0;r<t.length&&0==t[r];)r++;this.num=new Array(t.length-r+e);for(var o=0;o<t.length-r;o++)this.num[o]=t[o+r]}function QRRSBlock(t,e){this.totalCount=t,this.dataCount=e}function QRBitBuffer(){this.buffer=[],this.length=0}QRPolynomial.prototype={get:function(t){return this.num[t]},getLength:function(){return this.num.length},multiply:function(t){for(var e=new Array(this.getLength()+t.getLength()-1),r=0;r<this.getLength();r++)for(var o=0;o<t.getLength();o++)e[r+o]^=QRMath.gexp(QRMath.glog(this.get(r))+QRMath.glog(t.get(o)));return new QRPolynomial(e,0)},mod:function(t){if(this.getLength()-t.getLength()<0)return this;for(var e=QRMath.glog(this.get(0))-QRMath.glog(t.get(0)),r=new Array(this.getLength()),o=0;o<this.getLength();o++)r[o]=this.get(o);for(o=0;o<t.getLength();o++)r[o]^=QRMath.gexp(QRMath.glog(t.get(o))+e);return new QRPolynomial(r,0).mod(t)}},QRRSBlock.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],QRRSBlock.getRSBlocks=function(t,e){var r=QRRSBlock.getRsBlockTable(t,e);if(null==r)throw new Error("bad rs block @ typeNumber:"+t+"/errorCorrectLevel:"+e);for(var o=r.length/3,n=[],i=0;i<o;i++)for(var a=r[3*i+0],s=r[3*i+1],h=r[3*i+2],l=0;l<a;l++)n.push(new QRRSBlock(s,h));return n},QRRSBlock.getRsBlockTable=function(t,e){switch(e){case QRErrorCorrectLevel.L:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+0];case QRErrorCorrectLevel.M:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+1];case QRErrorCorrectLevel.Q:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+2];case QRErrorCorrectLevel.H:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+3];default:return}},QRBitBuffer.prototype={get:function(t){var e=Math.floor(t/8);return 1==(this.buffer[e]>>>7-t%8&1)},put:function(t,e){for(var r=0;r<e;r++)this.putBit(1==(t>>>e-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(t){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),t&&(this.buffer[e]|=128>>>this.length%8),this.length++}};var QRCodeLimitLength=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];function QRCode(t){if(this.options={padding:4,width:256,height:256,typeNumber:4,color:"#000000",background:"#ffffff",ecl:"M"},"string"==typeof t&&(t={content:t}),t)for(var e in t)this.options[e]=t[e];if("string"!=typeof this.options.content)throw new Error("Expected 'content' as string!");if(0===this.options.content.length)throw new Error("Expected 'content' to be non-empty!");if(!(this.options.padding>=0))throw new Error("Expected 'padding' value to be non-negative!");if(!(this.options.width>0&&this.options.height>0))throw new Error("Expected 'width' or 'height' value to be higher than zero!");var r=this.options.content,o=function(t,e){for(var r=function(t){var e=encodeURI(t).toString().replace(/\%[0-9a-fA-F]{2}/g,"a");return e.length+(e.length!=t?3:0)}(t),o=1,n=0,i=0,a=QRCodeLimitLength.length;i<=a;i++){var s=QRCodeLimitLength[i];if(!s)throw new Error("Content too long: expected "+n+" but got "+r);switch(e){case"L":n=s[0];break;case"M":n=s[1];break;case"Q":n=s[2];break;case"H":n=s[3];break;default:throw new Error("Unknwon error correction level: "+e)}if(r<=n)break;o++}if(o>QRCodeLimitLength.length)throw new Error("Content too long");return o}(r,this.options.ecl),n=function(t){switch(t){case"L":return QRErrorCorrectLevel.L;case"M":return QRErrorCorrectLevel.M;case"Q":return QRErrorCorrectLevel.Q;case"H":return QRErrorCorrectLevel.H;default:throw new Error("Unknwon error correction level: "+t)}}(this.options.ecl);this.qrcode=new QRCodeModel(o,n),this.qrcode.addData(r),this.qrcode.make()}QRCode.prototype.svg=function(t){var e=this.options||{},r=this.qrcode.modules;void 0===t&&(t={container:e.container||"svg"});for(var o=void 0===e.pretty||!!e.pretty,n=o?"  ":"",i=o?"\r\n":"",a=e.width,s=e.height,h=r.length,l=a/(h+2*e.padding),u=s/(h+2*e.padding),g=void 0!==e.join&&!!e.join,d=void 0!==e.swap&&!!e.swap,f=void 0===e.xmlDeclaration||!!e.xmlDeclaration,c=void 0!==e.predefined&&!!e.predefined,R=c?n+'<defs><path id="qrmodule" d="M0 0 h'+u+" v"+l+' H0 z" style="fill:'+e.color+';shape-rendering:crispEdges;" /></defs>'+i:"",p=n+'<rect x="0" y="0" width="'+a+'" height="'+s+'" style="fill:'+e.background+';shape-rendering:crispEdges;"/>'+i,m="",Q="",v=0;v<h;v++)for(var E=0;E<h;E++)if(r[E][v]){var M=E*l+e.padding*l,C=v*u+e.padding*u;if(d){var B=M;M=C,C=B}if(g){var w=l+M,L=u+C;M=Number.isInteger(M)?Number(M):M.toFixed(2),C=Number.isInteger(C)?Number(C):C.toFixed(2),w=Number.isInteger(w)?Number(w):w.toFixed(2),Q+="M"+M+","+C+" V"+(L=Number.isInteger(L)?Number(L):L.toFixed(2))+" H"+w+" V"+C+" H"+M+" Z "}else m+=c?n+'<use x="'+M.toString()+'" y="'+C.toString()+'" href="#qrmodule" />'+i:n+'<rect x="'+M.toString()+'" y="'+C.toString()+'" width="'+l+'" height="'+u+'" style="fill:'+e.color+';shape-rendering:crispEdges;"/>'+i}g&&(m=n+'<path x="0" y="0" style="fill:'+e.color+';shape-rendering:crispEdges;" d="'+Q+'" />');var T="";switch(t.container){case"svg":f&&(T+='<?xml version="1.0" standalone="yes"?>'+i),T+='<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="'+a+'" height="'+s+'">'+i,T+=R+p+m,T+="</svg>";break;case"svg-viewbox":f&&(T+='<?xml version="1.0" standalone="yes"?>'+i),T+='<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 '+a+" "+s+'">'+i,T+=R+p+m,T+="</svg>";break;case"g":T+='<g width="'+a+'" height="'+s+'">'+i,T+=R+p+m,T+="</g>";break;default:T+=(R+p+m).replace(/^\s+/,"")}return T},QRCode.prototype.save=function(t,e){var r=this.svg();"function"!=typeof e&&(e=function(t,e){});try{require("fs").writeFile(t,r,e)}catch(t){e(t)}},"undefined"!=typeof module&&(module.exports=QRCode);</script>
-</template>
diff --git a/components/ReadMe.vue b/components/ReadMe.vue
index 61e51fa..f71bb9b 100644
--- a/components/ReadMe.vue
+++ b/components/ReadMe.vue
@@ -1,5 +1,5 @@
 <template>
-  <pre ref="readme">
+  <pre ref="readme" v-show="false">
 -----------------------------------------------------------------------
 Thank you for using Digital Business Card Generator!
 -----------------------------------------------------------------------
diff --git a/components/StyleSheet.vue b/components/StyleSheet.vue
deleted file mode 100644
index bf1ee5b..0000000
--- a/components/StyleSheet.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <p ref="stylesheet">body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;font-family:sans-serif;position:relative}#shareContainer{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeBtnContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#closeBtn{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#shareContent,#copyURL,#displayQRCode,#pubKeyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyURL p,#pubKeyInfo p{margin:1rem 2em 0;line-height:1.5;text-align:center}#copyShareURL,#downloadKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:2rem;padding:0.75rem 1.5rem;cursor:pointer}#copyShareURL span,#downloadKey span{margin-left:0.5rem}#displayQRCode{text-align:center;width:100%}#displayQRCode h2,#displayQRCode p{padding:0 2rem}#displayQRCode h2{font-weight:700;font-size:1.5rem;margin:0}#displayQRCode p{margin-top:0.5rem}#qrcode{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:0.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#actions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#actions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}#shareActions{display:-webkit-box;display:-ms-flexbox;display:flex}main{padding:1rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-4.5rem}#profile img,#profile .img{width:7rem;height:7rem;border-radius:100%;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#profileInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:700;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.bizDescription{text-align:center;font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}#contactBtns,#socialBtns{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.contactBtnContainer,.socialBtnContainer{width:33.33%}.contactBtn,.socialBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.contactBtn a,.socialBtn a{border-radius:100%;padding:0.75rem;line-height:0}.contactBtn p,.socialBtn p{margin:0.5rem 0 0;font-size:0.875rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#ctaContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#downloadVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#downloadVcard .icon{margin-right:0.5rem}#downloadVcard p{margin:0}#socialBtns{margin-top:1.25rem}.socialBtn{padding:1rem}.contentContainer{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.sectionTitle{font-weight:700;text-align:center;font-size:1.5rem;margin:3rem 1.5rem 1.5rem}.image,.music,.video,.document,.embedContent,.product{overflow:hidden;border-radius:0.5rem;margin-top:1.5rem}.image img,.music img,.video img,.document img,.embedContent img,.product img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.music,.video{width:100%}.mediaPlayerContainer,.documentContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.infoControls{padding:2rem 1rem;font-size:0.875rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.productContent .description{margin:-1rem 0 0;font-size:0.875rem;white-space:pre-line;line-height:1.5}.productContent .price{margin:2rem 0 0;font-size:1.25rem;font-weight:700}.productContent .label{display:inline-block;font-size:1rem;margin-top:1rem;border-radius:5rem;letter-spacing:1px;padding:0.75rem 1.5rem;line-height:0}.productContent .label .action{margin:0}.title{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem}.artistAlbum,.fileSize{margin:0}.playerControl,.downloadDocument{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.downloadDocument{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.downloadBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:1.5rem 1.5rem 2rem}footer div{margin-top:1rem;font-size:0.75rem;text-align:center}footer div a{text-decoration:underline;color:inherit}</p>
-</template>
diff --git a/nuxt.config.js b/nuxt.config.js
index 3d4ee6a..37acaac 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -67,7 +67,7 @@ export default {
         href: '/safari-pinned-tab.svg',
       },
     ],
-    script: [{src:'/qrcode.min.js'}],
+    script: [{ src: '/qrcode.min.js' }],
   },
   manifest: {
     name: 'Digital Business Card Generator - Free & Open-Source',
@@ -206,7 +206,23 @@ export default {
    ** Build configuration
    ** See https://nuxtjs.org/api/configuration-build/
    */
-  build: {},
+  build: {
+    extend(config, ctx) {
+      config.module.rules.push({
+        // enforce: 'pre',
+        test: /\.min.css|\.min.js$/,
+        use: [
+          {
+            loader: 'raw-loader',
+            options: {
+              esModule: false,
+            },
+          },
+        ],
+        exclude: /(node_modules)/,
+      })
+    },
+  },
   generate: {
     dir: 'public',
     fallback: true,
diff --git a/package-lock.json b/package-lock.json
index 3fb1e48..02aad2e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9441,9 +9441,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
           "requires": {
             "minimist": "^1.2.5"
           }
diff --git a/package.json b/package.json
index 58ceecc..a1ac55d 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "node-sass": "^4.14.1",
     "pdfjs-dist": "^2.5.207",
     "prettier": "^2.2.1",
+    "raw-loader": "^4.0.2",
     "sass-loader": "^9.0.3"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 88f24be..3215e61 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -151,7 +151,7 @@
                 v-for="(action, index) in actions.primaryActions"
                 :key="index"
                 @click="addAction('primaryActions', index)"
-                class="p-3 flex-shrink-0 bg-gray-900 mt-6 mr-6 rounded-full cursor-pointer  hover:scale-110 transform transition-transform duration-200"
+                class="p-3 flex-shrink-0 bg-gray-900 mt-6 mr-6 rounded-full cursor-pointer hover:scale-110 transform transition-transform duration-200"
                 :style="{
                   backgroundColor: `${colors.buttonBg.color}`,
                 }"
@@ -183,7 +183,7 @@
                 v-for="(action, index) in actions.secondaryActions"
                 :key="index"
                 @click="addAction('secondaryActions', index)"
-                class="p-3 flex-shrink-0 mt-6 mr-6 rounded-full cursor-pointer  hover:scale-110 transform transition-transform duration-200"
+                class="p-3 flex-shrink-0 mt-6 mr-6 rounded-full cursor-pointer hover:scale-110 transform transition-transform duration-200"
                 :style="{ backgroundColor: action.color }"
                 :title="
                   action.name.substr(0, 1).toUpperCase() + action.name.slice(1)
@@ -212,7 +212,7 @@
               <div class="flex mt-6">
                 <div class="flex flex-wrap items-center">
                   <button
-                    class="p-3 rounded-full cursor-pointer bg-gray-500  hover:bg-green-600 focus:bg-green-600 transition-colors duration-200"
+                    class="p-3 rounded-full cursor-pointer bg-gray-500 hover:bg-green-600 focus:bg-green-600 transition-colors duration-200"
                     @click="addFeature()"
                     aria-label="Add section"
                   >
@@ -247,7 +247,7 @@
               <div class="flex mt-6">
                 <div class="flex flex-wrap items-center">
                   <button
-                    class="p-3 rounded-full cursor-pointer bg-gray-500  hover:bg-green-600 focus:bg-green-600 transition-colors duration-200"
+                    class="p-3 rounded-full cursor-pointer bg-gray-500 hover:bg-green-600 focus:bg-green-600 transition-colors duration-200"
                     @click="addEmbed()"
                     aria-label="Add section"
                   >
@@ -275,7 +275,7 @@
               <div class="flex mt-6">
                 <div class="flex flex-wrap items-center">
                   <button
-                    class="p-3 rounded-full cursor-pointer bg-gray-500  hover:bg-green-600 focus:bg-green-600 transition-colors duration-200"
+                    class="p-3 rounded-full cursor-pointer bg-gray-500 hover:bg-green-600 focus:bg-green-600 transition-colors duration-200"
                     @click="addProduct()"
                     aria-label="Add section"
                   >
@@ -318,7 +318,7 @@
                 />
                 <label
                   for="toggle"
-                  class="toggle-label block overflow-hidden h-12 rounded-full bg-gray-500 hover:bg-green-600 cursor-pointer transition-colors duration-200  focus:border-green-600"
+                  class="toggle-label block overflow-hidden h-12 rounded-full bg-gray-500 hover:bg-green-600 cursor-pointer transition-colors duration-200 focus:border-green-600"
                 ></label>
               </div>
               <label for="toggle">{{
@@ -417,10 +417,8 @@
       </div>
     </div>
     <Donate />
-    <StyleSheet ref="stylesheet" v-show="false" />
-    <Vcard ref="vCard" v-show="false" :vCard="vCard" />
-    <ReadMe ref="readme" v-show="false" :name="username" />
-    <QRCode ref="qrcode" v-show="false" />
+    <Vcard ref="vCard" :vCard="vCard" />
+    <ReadMe ref="readme" :name="username" />
     <footer class="py-8 mx-4 mt-24">
       <p class="text-gray-500 text-sm">
         <a
@@ -478,12 +476,12 @@ import Preview from '@/components/Preview'
 import Check from '@/components/Check'
 import Donate from '@/components/Donate'
 
-import StyleSheet from '@/components/StyleSheet'
 import ReadMe from '@/components/ReadMe'
 import Vcard from '@/components/Vcard'
-import QRCode from '@/components/QRCode'
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
+import QRCode from '!!raw-loader!~/static/qrcode.min.js'
+import Theme1 from '!!raw-loader!~/assets/styles/T1.min.css'
 export default {
   components: {
     Modal,
@@ -496,10 +494,8 @@ export default {
     Preview,
     Check,
     Donate,
-    StyleSheet,
     ReadMe,
     Vcard,
-    QRCode,
   },
 
   data() {
@@ -516,8 +512,7 @@ export default {
           checked: false,
         },
         {
-          label:
-            'I have verified that all the information provided here are correct',
+          label: 'I have removed all unused and empty fields or sections',
           checked: false,
         },
       ],
@@ -1063,25 +1058,42 @@ export default {
       if (this.downloadChecked) {
         this.PreviewMode = false
         setTimeout(() => {
+          let el = new DOMParser().parseFromString(
+            this.$refs.html.$refs.html.outerHTML,
+            'text/html'
+          )
+          let styleLink = document.createElement('link')
+          styleLink.rel = 'stylesheet'
+          styleLink.href = './style.min.css'
+          el.querySelector('head').appendChild(styleLink)
+          let qrcode = document.createElement('script')
+          qrcode.src = './qrcode.min.js'
+          el.querySelector('body').appendChild(qrcode)
+          let modals = document.createElement('script')
+          modals.innerText =
+            'let m=document.getElementById("modal"),c=document.getElementById("close"),ki=document.getElementById("keyInfo"),cv=document.getElementById("copyView"),curl=document.getElementById("copyURL"),qrv=document.getElementById("qrView"),qr=document.getElementById("qr"),s=document.getElementById("share"),sqr=document.getElementById("showQR"),sk=document.getElementById("showKey");function tC(e){"2rem"==e.style.top?(e.style.visibility="visible",e.style.top="0px",e.style.opacity=1):(e.style.top="2rem",e.style.opacity=0,setTimeout(()=>{e.style.visibility="hidden"},200))}function dN(e){e.style.display="none"}window.addEventListener("load",()=>{document.querySelector("#topActions").style.display="flex",qr.innerHTML=new QRCode({content:window.location.href,container:"svg-viewbox",join:!0,ecl:"L",padding:0}).svg()}),navigator.canShare?s.addEventListener("click",()=>{navigator.share({title:document.title,text:"You can view my Digital Business Card here:",url:window.location.href})}):s.addEventListener("click",()=>{tC(m),cv.style.display="flex",dN(qrv),ki&&dN(ki)}),sqr.addEventListener("click",()=>{tC(m),qrv.style.display="block",dN(cv),ki&&dN(ki)}),sk&&sk.addEventListener("click",()=>{tC(m),ki&&(ki.style.display="flex"),dN(cv),dN(qrv)}),c.addEventListener("click",()=>tC(m)),curl.addEventListener("click",async()=>{let e=curl.querySelectorAll(".action")[1];await navigator.clipboard.writeText(window.location.href).then(t=>{e.innerText="Copied",setTimeout(()=>{e.innerText="Copy URL"},1e3)})});'
+          el.querySelector('body').appendChild(modals)
+          let mediaHandler = document.createElement('script')
+          mediaHandler.innerText =
+            'let pC=document.querySelectorAll(".pCtrl"),pP=document.querySelectorAll(".playPause"),srcs=document.querySelectorAll(".source");srcs.forEach(e=>{e.style.pointerEvents="none",e.removeAttribute("controls")}),pC.forEach((e,l)=>{e.style.display="flex";let r=e.querySelector(".currentTime"),s=e.querySelector(".seekBar"),t=e.querySelector(".playPause"),a=t.querySelector(".play"),c=t.querySelector(".pause");srcs[l].addEventListener("timeupdate",()=>{let e=srcs[l].currentTime,t=100/srcs[l].duration*e;s.value=t,100==t&&(s.value=0,a.style.display="block",c.style.display="none");let o=Math.floor(e/60),y=Math.floor(e%60);o.toString().length<2&&(o="0"+o),y.toString().length<2&&(y="0"+y),r.value=o+":"+y}),s.addEventListener("change",()=>{srcs[l].currentTime=srcs[l].duration*(parseInt(s.value)/100)}),t.addEventListener("click",()=>{srcs[l].paused?(srcs.forEach((e,r)=>{l!=r&&(e.paused||e.pause())}),pP.forEach((e,l)=>{let r=e.querySelector(".play"),s=e.querySelector(".pause");r.style.display="block",s.style.display="none"}),srcs[l].play(),a.style.display="none",c.style.display="block"):(srcs[l].pause(),c.style.display="none",a.style.display="block")})});'
+          if (this.featured.length)
+            el.querySelector('body').appendChild(mediaHandler)
           let html = new Blob(
-            [`<!DOCTYPE html>${this.$refs.html.$refs.html.outerHTML}`],
+            [`<!DOCTYPE html>${el.documentElement.outerHTML}`],
             {
               type: 'text/html',
             }
           )
-          let css = new Blob(
-            [this.$refs.stylesheet.$refs.stylesheet.innerText],
-            {
-              type: 'text/css',
-            }
-          )
+          let css = new Blob([Theme1], {
+            type: 'text/css',
+          })
           let vCard = new Blob([this.$refs.vCard.$refs.vCard.innerText], {
             type: 'text/plain',
           })
           let README = new Blob([this.$refs.readme.$refs.readme.innerText], {
             type: 'text/plain',
           })
-          let qrcode = new Blob([this.$refs.qrcode.$refs.qrcode.innerText], {
+          let qrScript = new Blob([QRCode], {
             type: 'application/javascript',
           })
           let name = this.businessInfo.name
@@ -1089,8 +1101,8 @@ export default {
           let zip = new JSZip()
           zip.folder(username).file('index.html', html)
           zip.folder(username).file('style.min.css', css)
+          zip.folder(username).file('qrcode.min.js', qrScript)
           zip.file('README.txt', README)
-          zip.folder(username).file('qrcode.min.js', qrcode)
           if (this.images.logo.url) {
             zip.folder(username).file(
               `logo.${this.images.logo.format}`,
@@ -1108,7 +1120,9 @@ export default {
                 this.images.photo.resized
               )
           }
-          if (this.featured.length) {
+          let hasFeaturedContent = this.featured.filter((e) => e.content.length)
+            .length
+          if (this.featured.length && hasFeaturedContent) {
             this.featured.forEach((item, index) => {
               item.content.forEach((item, i) => {
                 zip
@@ -1133,13 +1147,15 @@ export default {
           if (this.products.length) {
             this.products.forEach((item, index) => {
               item.content.forEach((item, i) => {
-                zip
-                  .folder(username)
-                  .folder('products')
-                  .file(
-                    `${this.getTitle(item.image.title)}.${item.image.format}`,
-                    item.image.file
-                  )
+                if (item.image) {
+                  zip
+                    .folder(username)
+                    .folder('products')
+                    .file(
+                      `${this.getTitle(item.image.title)}.${item.image.format}`,
+                      item.image.file
+                    )
+                }
               })
             })
           }
@@ -1165,4 +1181,4 @@ export default {
     },
   },
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/static/Nuxtjs-Cheat-Sheet.pdf b/static/Nuxtjs-Cheat-Sheet.pdf
deleted file mode 100644
index 6d43e13..0000000
Binary files a/static/Nuxtjs-Cheat-Sheet.pdf and /dev/null differ
diff --git a/static/demo/digitalbusinesscardgenerator.vcf b/static/demo/digitalbusinesscardgenerator.vcf
index 9ecfb89..dc8cb2a 100644
--- a/static/demo/digitalbusinesscardgenerator.vcf
+++ b/static/demo/digitalbusinesscardgenerator.vcf
@@ -2,12 +2,12 @@ BEGIN:VCARD
 VERSION:3.0
 N:Digital Business Card Generator;;;;
 FN:Digital Business Card Generator
-ORG:Digital Business Card Generator
+ORG:Web App
 TITLE:Web App
 TEL;TYPE=work,pref:+91 9876543210
 TEL;TYPE=work:
 EMAIL;TYPE=work:dbizcard@example.com
 URL:https://dbizcard.vercel.app/
 KEY:OPENPGP4FPR:E62C45D676568839D9400FAE67360EC2DEB07BB7
-UID:dbizcard-422142
+UID:dbizcard-135137
 END:VCARD
\ No newline at end of file
diff --git a/static/demo/featured/Business_card.pdf b/static/demo/featured/Business_card.pdf
deleted file mode 100644
index fe13620..0000000
Binary files a/static/demo/featured/Business_card.pdf and /dev/null differ
diff --git a/static/demo/featured/business_card_-_wikipedia.jpeg b/static/demo/featured/business_card_-_wikipedia.jpeg
new file mode 100644
index 0000000..42d84a0
Binary files /dev/null and b/static/demo/featured/business_card_-_wikipedia.jpeg differ
diff --git a/static/demo/featured/business_card_-_wikipedia.pdf b/static/demo/featured/business_card_-_wikipedia.pdf
new file mode 100644
index 0000000..9df976a
Binary files /dev/null and b/static/demo/featured/business_card_-_wikipedia.pdf differ
diff --git a/static/demo/featured/butterflies.mp4 b/static/demo/featured/butterflies.mp4
new file mode 100644
index 0000000..f74798b
Binary files /dev/null and b/static/demo/featured/butterflies.mp4 differ
diff --git a/static/demo/featured/document-0.jpeg b/static/demo/featured/document-0.jpeg
deleted file mode 100644
index aaca3d5..0000000
Binary files a/static/demo/featured/document-0.jpeg and /dev/null differ
diff --git a/static/demo/featured/image-0.jpeg b/static/demo/featured/image-0.jpeg
deleted file mode 100644
index c97cb66..0000000
Binary files a/static/demo/featured/image-0.jpeg and /dev/null differ
diff --git a/static/demo/featured/over_the_water,_humans_gather.jpeg b/static/demo/featured/over_the_water,_humans_gather.jpeg
new file mode 100644
index 0000000..b063ace
Binary files /dev/null and b/static/demo/featured/over_the_water,_humans_gather.jpeg differ
diff --git a/static/demo/featured/over_the_water,_humans_gather.mp3 b/static/demo/featured/over_the_water,_humans_gather.mp3
new file mode 100644
index 0000000..5386a73
Binary files /dev/null and b/static/demo/featured/over_the_water,_humans_gather.mp3 differ
diff --git "a/static/demo/featured/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg" "b/static/demo/featured/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg"
new file mode 100644
index 0000000..1505118
Binary files /dev/null and "b/static/demo/featured/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg" differ
diff --git a/static/demo/featured/photo_by_erol_ahmed_on_unsplash.jpeg b/static/demo/featured/photo_by_erol_ahmed_on_unsplash.jpeg
new file mode 100644
index 0000000..b8def01
Binary files /dev/null and b/static/demo/featured/photo_by_erol_ahmed_on_unsplash.jpeg differ
diff --git a/static/demo/featured/video-0.mp4 b/static/demo/featured/sea_side.mp4
similarity index 100%
rename from static/demo/featured/video-0.mp4
rename to static/demo/featured/sea_side.mp4
diff --git a/static/demo/featured/music-0.jpeg b/static/demo/featured/shipping_lanes.jpeg
similarity index 100%
rename from static/demo/featured/music-0.jpeg
rename to static/demo/featured/shipping_lanes.jpeg
diff --git a/static/demo/featured/music-0.mp3 b/static/demo/featured/shipping_lanes.mp3
similarity index 99%
rename from static/demo/featured/music-0.mp3
rename to static/demo/featured/shipping_lanes.mp3
index 6ba92f9..114a7ff 100644
Binary files a/static/demo/featured/music-0.mp3 and b/static/demo/featured/shipping_lanes.mp3 differ
diff --git a/static/demo/index.html b/static/demo/index.html
index 14fec1d..e610da7 100644
--- a/static/demo/index.html
+++ b/static/demo/index.html
@@ -2,7 +2,7 @@
         'http' == window.location.href.substr(0, 4) &&
           '/' != window.location.href.slice(-1) &&
           window.location.replace(window.location.href + '/')
-      </script> <link rel="stylesheet" href="./style.min.css"> <title>Digital Business Card Generator's Digital Business Card</title> <style>
+      </script> <title>Digital Business Card Generator's Digital Business Card</title> <style>
         input[type='range']::-moz-range-track {
           background: none;
         }
@@ -26,60 +26,66 @@
           z-index: 3;
           cursor: pointer;
         }
+        .closeBtnColor{
+          filter:invert(1)
+        }
+        .topAction{
+          false
+        }
         .action{
           color:#fff;
           
-        }
-
-        .shareAction{
-          
         }
         .card{
-          filter:invert(1)
+          false
         }
         .text{
-          filter:invert(1)
+          text-align: center;
+          color:#000 !important
         }
-      </style></head> <body><div id="shareContainer" style="background-color: rgb(34, 34, 34); visibility: hidden; top: 2rem; opacity: 0;"><div id="closeBtnContainer"><a id="closeBtn" class="text"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg></div></a></div> <div id="shareContent"><div id="pubKeyInfo"><p class="text">
+      </style><link rel="stylesheet" href="./style.min.css"></head> <body><div id="modal" style="background-color: rgb(238, 238, 238); visibility: hidden; top: 2rem; opacity: 0;"><div id="closeModal"><a id="close" class="closeBtnColor"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg></div></a></div> <div id="modalView"><div id="keyInfo"><p class="text">
               You can download my public key and use it to send me encrypted
               messages
-            </p> <a href="Digital Business Card Generator's public key.asc" download="" target="_blank" id="downloadKey" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"></path></svg></div><span class="action">Download</span></a></div> <div id="copyURL"><p class="text">
+            </p> <a href="Digital Business Card Generator's public key.asc" download="" target="_blank" id="dlKey" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"></path></svg></div> <span class="action">Download</span></a></div> <div id="copyView"><p class="text">
               You can copy my Business Card URL and share it via any medium
-            </p> <a id="copyShareURL" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></div><span class="action">Copy URL</span></a></div> <div id="displayQRCode"><div id="qrcode"></div> <h2 class="text">
-              Scan this QR Code
-            </h2> <p class="text">
-              to view my Business Card
-            </p></div></div></div> <header><img id="logo" src="./logo.svg" alt="Logo"> <div id="actions" style="display: none;"><div id="shareActions"><a id="share"><div class="icon shareAction"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff" stroke-width="2"><circle cx="17" cy="5" r="3"></circle><circle cx="5" cy="12" r="3"></circle><circle cx="17" cy="19" r="3"></circle><path d="M7.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98"></path></svg></div></a> <a id="showQRCode"><div class="icon shareAction"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round"><g fill="none" stroke="#fff" stroke-width="2"><path d="M4 4h4v4H4zm0 12h4v4H4zM16 4h4v4h-4z"></path><path d="M12 3v15a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2H3"></path></g><path fill="#fff" d="M15 15h2v2h-2z"></path></svg></div></a></div> <a id="showPubKey"><div class="icon shareAction"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg></div></a></div></header> <main style="background-color: rgb(34, 34, 34);"><div id="profile"><img src="./photo.png" alt="Photo"> <div id="profileInfo"><p class="name text">
+            </p> <a id="copyURL" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></div> <span class="action">Copy URL</span></a></div> <div id="qrView"><div id="qr"></div> <h2 class="text">Scan this QR Code</h2> <p class="text">to view my Business Card</p></div></div></div> <header><!----> <div id="topActions" style="display: none;"><div><a id="share"><div class="icon topAction"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff" stroke-width="2"><circle cx="17" cy="5" r="3"></circle><circle cx="5" cy="12" r="3"></circle><circle cx="17" cy="19" r="3"></circle><path d="M7.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98"></path></svg></div></a> <a id="showQR"><div class="icon topAction"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round"><g fill="none" stroke="#fff" stroke-width="2"><path d="M4 4h4v4H4zm0 12h4v4H4zM16 4h4v4h-4z"></path><path d="M12 3v15a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2H3"></path></g><path fill="#fff" d="M15 15h2v2h-2z"></path></svg></div></a></div> <a id="showKey"><div class="icon topAction"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg></div></a></div></header> <main style="background-color: rgb(238, 238, 238);"><div id="profile"><img src="./photo.png" alt="Photo"> <div id="info"><p class="name text">
               Digital Business Card Generator
             </p> <p class="jobtitle text">
               Web App
-            </p></div></div> <p class="bizDescription text">Quickly generate an interactive and responsive HTML-based digital business card, that can be hosted with your website.
-        </p> <div id="contactBtns"><div class="contactBtnContainer"><div class="contactBtn"><a href="tel:+91 9876543210" target="_blank" rel="noopener noreferrer" aria-label="call" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path></svg></div></a> <p class="text">
+            </p></div></div> <p class="desc text">
+          Quickly generate an interactive and responsive HTML-based digital business card, that can be hosted with your website
+        </p> <div class="actions"><div class="actionsC"><div class="actionBtn"><a href="tel:+91 9876543210" target="_blank" rel="noopener noreferrer" aria-label="call" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path></svg></div></a> <p class="text">
                 Call
-              </p></div></div><div class="contactBtnContainer"><div class="contactBtn"><a href="https://wa.me/" target="_blank" rel="noopener noreferrer" aria-label="whatsapp" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="#fff"><path d="M2.841 16.664A10.987 10.987 0 014.776 3.725c4.297-4.297 11.273-4.297 15.57 0 4.297 4.297 4.297 11.273 0 15.57-3.522 3.522-8.845 4.157-13.018 1.904l-4.142.784a1.002 1.002 0 01-1.167-1.178l.822-4.141zm1.428 3.078l3.045-.576c.238-.045.483-.002.692.12 3.452 2.024 7.966 1.555 10.926-1.405 3.516-3.516 3.516-9.226 0-12.742s-9.226-3.516-12.742 0a8.992 8.992 0 00-1.432 10.86 1 1 0 01.116.696l-.605 3.047z"></path><path d="M17.5 14.002v1.512a1.01 1.01 0 01-1.006 1.006c-.03 0-.06-.002-.09-.004a9.948 9.948 0 01-4.34-1.544 9.811 9.811 0 01-3.016-3.017 9.944 9.944 0 01-1.544-4.359A1.01 1.01 0 018.505 6.5h1.508a1.01 1.01 0 011.006.865c.063.483.181.957.352 1.413.137.367.049.782-.227 1.061l-.638.638a8.039 8.039 0 003.017 3.017l.638-.639a1.008 1.008 0 011.061-.226c.456.17.93.288 1.413.352.503.071.877.513.865 1.021z" fill-rule="nonzero"></path></svg></div></a> <p class="text">
+              </p></div></div><div class="actionsC"><div class="actionBtn"><a href="https://wa.me/" target="_blank" rel="noopener noreferrer" aria-label="whatsapp" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="#fff"><path d="M2.841 16.664A10.987 10.987 0 014.776 3.725c4.297-4.297 11.273-4.297 15.57 0 4.297 4.297 4.297 11.273 0 15.57-3.522 3.522-8.845 4.157-13.018 1.904l-4.142.784a1.002 1.002 0 01-1.167-1.178l.822-4.141zm1.428 3.078l3.045-.576c.238-.045.483-.002.692.12 3.452 2.024 7.966 1.555 10.926-1.405 3.516-3.516 3.516-9.226 0-12.742s-9.226-3.516-12.742 0a8.992 8.992 0 00-1.432 10.86 1 1 0 01.116.696l-.605 3.047z"></path><path d="M17.5 14.002v1.512a1.01 1.01 0 01-1.006 1.006c-.03 0-.06-.002-.09-.004a9.948 9.948 0 01-4.34-1.544 9.811 9.811 0 01-3.016-3.017 9.944 9.944 0 01-1.544-4.359A1.01 1.01 0 018.505 6.5h1.508a1.01 1.01 0 011.006.865c.063.483.181.957.352 1.413.137.367.049.782-.227 1.061l-.638.638a8.039 8.039 0 003.017 3.017l.638-.639a1.008 1.008 0 011.061-.226c.456.17.93.288 1.413.352.503.071.877.513.865 1.021z" fill-rule="nonzero"></path></svg></div></a> <p class="text">
                 Whatsapp
-              </p></div></div><div class="contactBtnContainer"><div class="contactBtn"><a href="https://t.me/dbizcard" target="_blank" rel="noopener noreferrer" aria-label="telegram" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M5.671 14.738L.989 12.787a1.399 1.399 0 01-.013-2.579L20.222 1.96a1.498 1.498 0 012.058 1.688l-3.483 16.547a2.001 2.001 0 01-3.134 1.206l-3.56-2.59-2.415 2.415a1.4 1.4 0 01-2.336-.605l-1.681-5.883zm3.319 4.338l.005.015 2.902-2.902 4.943 3.594 3.285-15.606-17.056 7.31 4.183 1.743 10.106-6.22a.2.2 0 01.242.316L9.5 15l-.51 4.076z" fill="#fff"></path></svg></div></a> <p class="text">
+              </p></div></div><div class="actionsC"><div class="actionBtn"><a href="https://t.me/dbizcard" target="_blank" rel="noopener noreferrer" aria-label="telegram" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M5.671 14.738L.989 12.787a1.399 1.399 0 01-.013-2.579L20.222 1.96a1.498 1.498 0 012.058 1.688l-3.483 16.547a2.001 2.001 0 01-3.134 1.206l-3.56-2.59-2.415 2.415a1.4 1.4 0 01-2.336-.605l-1.681-5.883zm3.319 4.338l.005.015 2.902-2.902 4.943 3.594 3.285-15.606-17.056 7.31 4.183 1.743 10.106-6.22a.2.2 0 01.242.316L9.5 15l-.51 4.076z" fill="#fff"></path></svg></div></a> <p class="text">
                 Telegram
-              </p></div></div><div class="contactBtnContainer"><div class="contactBtn"><a href="mailto:dbizcard@example.com" target="_blank" rel="noopener noreferrer" aria-label="email" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><path d="M22 6l-10 7L2 6"></path></svg></div></a> <p class="text">
+              </p></div></div><div class="actionsC"><div class="actionBtn"><a href="mailto:dbizcard@example.com" target="_blank" rel="noopener noreferrer" aria-label="email" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><path d="M22 6l-10 7L2 6"></path></svg></div></a> <p class="text">
                 Email
-              </p></div></div><div class="contactBtnContainer"><div class="contactBtn"><a href="https://dbizcard.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="website" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"></path></svg></div></a> <p class="text">
+              </p></div></div><div class="actionsC"><div class="actionBtn"><a href="https://dbizcard.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="website" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"></path></svg></div></a> <p class="text">
                 Website
-              </p></div></div> <div id="ctaContainer"><a id="downloadVcard" href="digitalbusinesscardgenerator.vcf" download="" target="_blank" aria-label="Add to Contacts" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><path d="M20 8v6m3-3h-6"></path></svg></div> <p class="action">
-              Add to Contacts
-            </p></a></div></div> <div id="socialBtns"><div class="socialBtnContainer"><div class="socialBtn"><a target="_blank" rel="noopener noreferrer" aria-label="mastodon" style="background-color: rgb(43, 144, 217);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="#fff"><path d="M20.93 13.99c-.274 1.411-2.455 2.955-4.961 3.254-1.307.156-2.594.299-3.966.236-2.243-.103-4.013-.535-4.013-.535 0 .218.013.426.04.621.291 2.214 2.195 2.346 3.999 2.408 1.82.063 3.441-.448 3.441-.448l.075 1.645s-1.274.684-3.542.81c-1.25.068-2.803-.032-4.612-.511-3.923-1.038-4.598-5.22-4.701-9.462-.031-1.26-.012-2.448-.012-3.441 0-4.339 2.842-5.611 2.842-5.611 1.434-.658 3.894-.935 6.45-.956h.063c2.557.021 5.018.298 6.452.956 0 0 2.842 1.272 2.842 5.611 0 0 .036 3.201-.397 5.423zm-2.956-5.087v5.253h-2.081V9.058c0-1.075-.453-1.621-1.357-1.621-1.001 0-1.501.647-1.501 1.927v2.791h-2.07V9.364c0-1.28-.501-1.927-1.501-1.927-.904 0-1.357.546-1.357 1.621v5.098H6.025V8.903c0-1.074.275-1.927.823-2.558.567-.632 1.308-.955 2.228-.955 1.066 0 1.872.409 2.405 1.228l.519.87.519-.87c.532-.819 1.339-1.228 2.404-1.228.921 0 1.662.323 2.228.955.549.631.823 1.484.823 2.558z"></path></svg></div></a></div></div><div class="socialBtnContainer"><div class="socialBtn"><a target="_blank" rel="noopener noreferrer" aria-label="pixelfed" style="background-color: rgb(141, 89, 168);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="#fff"><path d="M9.835 15.338h3.387C16.413 15.338 19 12.8 19 9.669S16.413 4 13.222 4H8.333C6.492 4 5 5.464 5 7.271V20l4.835-4.662z"></path></svg></div></a></div></div><div class="socialBtnContainer"><div class="socialBtn"><a target="_blank" rel="noopener noreferrer" aria-label="friendica" style="background-color: rgb(29, 110, 154);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path d="M20.5 5.5a2 2 0 00-2-2h-13a2 2 0 00-2 2v13a2 2 0 002 2h13a2 2 0 002-2v-13z" fill="none" stroke="#ffc019"></path><path d="M14.906 3.5v4.533H9.167V12h5.687v3.967H9.167V20.5H5.5a2 2 0 01-2-2v-13a2 2 0 012-2h9.406z" fill="#ffc019"></path></svg></div></a></div></div><div class="socialBtnContainer"><div class="socialBtn"><a target="_blank" rel="noopener noreferrer" aria-label="peertube" style="background-color: rgb(255, 255, 255);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M6.5 2v10L14 7" fill="#211f20"></path><path d="M6.5 12v10l7.5-5" fill="#737373"></path><path d="M14 7v10l7.5-5" fill="#f1680d"></path></svg></div></a></div></div><div class="socialBtnContainer"><div class="socialBtn"><a target="_blank" rel="noopener noreferrer" aria-label="funkwhale" style="background-color: rgb(255, 255, 255);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill="#009fe3"><path d="M12 14.49a3.467 3.467 0 003.463-3.462.19.19 0 00-.184-.184h-1.305a.189.189 0 00-.183.184c0 .981-.799 1.79-1.791 1.79a1.793 1.793 0 01-1.791-1.79.189.189 0 00-.183-.184H8.721a.19.19 0 00-.184.184A3.46 3.46 0 0012 14.49z"></path><path d="M12 17.759c3.7 0 6.721-3.021 6.721-6.721a.19.19 0 00-.184-.183h-1.305a.188.188 0 00-.183.183 5.06 5.06 0 01-10.119 0 .189.189 0 00-.184-.183H5.463a.19.19 0 00-.184.183c-.021 3.7 2.999 6.721 6.721 6.721z"></path><path d="M21.817 10.855h-1.306a.188.188 0 00-.183.183c0 4.596-3.754 8.339-8.339 8.339-4.595 0-8.339-3.732-8.339-8.339a.188.188 0 00-.183-.183H2.183a.188.188 0 00-.183.183c0 5.513 4.488 10 10 10s10-4.487 10-10a.188.188 0 00-.183-.183z"></path></g><path d="M7.499 6.561c.669.345 1.391.41 2.039.787.42.248.69.518.949.928.41.615.388 1.391.388 1.391l.054.853s.324.852 1.047.852c.766 0 1.046-.852 1.046-.852l.054-.853s-.022-.765.388-1.391c.259-.41.518-.701.95-.928.647-.377 1.37-.442 2.038-.787.669-.346 1.317-.788 1.759-1.403.442-.615.647-1.434.41-2.157-1.273-.065-2.74.086-3.862.69-1.564.831-2.514.54-2.794 1.78h-.022c-.28-1.251-1.219-.949-2.794-1.78-1.122-.604-2.589-.755-3.862-.69-.248.723-.032 1.532.41 2.157.475.626 1.133 1.068 1.802 1.403z" fill="#3c3c3b"></path></svg></div></a></div></div></div> <div id="featuredContent"><div class="images" style="background-color: rgb(0, 0, 0);"><img src="./featured/image-0.jpeg" alt="Product image"> <div class="infoControls"><p class="title card">
-                Photo by Erol Ahmed on Unsplash
-              </p></div></div> <div class="music" style="background-color: rgb(0, 0, 0);"><div class="mediaPlayerContainer"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" poster="./featured/music-0.jpeg" preload="metadata" class="source" style="pointer-events: auto;" controls="controls"><source src="./featured/music-0.mp3"></video> <div class="infoControls"><p class="title card">
-      Shipping Lanes
-    </p> <p class="artistAlbum card"><span>Chad Crouch</span> <span> - Arps</span></p> <div class="playerControl" style="display: none;"><output class="currentTime card">00:00</output> <input type="range" value="0" class="seekBar"> <a class="playPause" style="background-color: rgb(56, 161, 105);"><div class="icon play action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3l14 9-14 9V3z" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <div class="icon pause action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="#fff" stroke-width="2" d="M5 5h14v14H5z"></path></svg></div></a></div></div></div></div> <div class="video" style="background-color: rgb(0, 0, 0);"><div class="mediaPlayerContainer"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto;" controls="controls"><source src="./featured/video-0.mp4#t=0.2"></video> <div class="infoControls"><p class="title card">
-      Sea Side
-    </p> <!----> <div class="playerControl" style="display: none;"><output class="currentTime card">00:00</output> <input type="range" value="0" class="seekBar"> <a class="playPause" style="background-color: rgb(56, 161, 105);"><div class="icon play action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3l14 9-14 9V3z" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <div class="icon pause action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="#fff" stroke-width="2" d="M5 5h14v14H5z"></path></svg></div></a></div></div></div></div> <div class="document" style="background-color: rgb(0, 0, 0);"><div class="documentContainer"><div class="documentPreview"><img src="./featured/document-0.jpeg" alt="Business_card"></div> <div class="infoControls"><p class="title card">
-      Business_card
-    </p> <p class="fileSize card">
-      PDF - 830.59 KB
-    </p> <div class="downloadDocument"><a href="./featured/Business_card.pdf" download="" target="_blank" class="downloadBtn" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"></path></svg></div></a></div></div></div></div></div> <div id="embedContent"><div class="embedContent" style="position: relative; padding-top: 56.25%;"><iframe src="https://www.youtube.com/embed/-OV9ErsuGHk" allowfullscreen="allowfullscreen" allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" frameborder="0"></iframe></div><div class="embedContent" style="position: relative; padding-top: 56.25%;"><iframe src="https://player.vimeo.com/video/68771045" allowfullscreen="allowfullscreen" allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" frameborder="0"></iframe></div><div class="embedContent" style="position: relative; padding-top: 56.25%;"><iframe src="https://www.openstreetmap.org/export/embed.html?bbox=76.42364501953126%2C10.686923787001353%2C77.33001708984376%2C11.316460689114656&amp;amp;layer=mapnik" allowfullscreen="allowfullscreen" allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" frameborder="0"></iframe></div></div></main> <footer style="background-color: rgb(34, 34, 34);"><div class="text">
-          Created with
-          <a href="https://dbizcard.vercel.app/" target="_blank" rel="noopener noreferrer">Digital Business Card Generator</a></div></footer> <script src="./qrcode.min.js"></script> <script>
-        let sC=document.getElementById("shareContainer"),cBtn=document.getElementById("closeBtn"),cURL=document.getElementById("copyURL"),cSURL=document.getElementById("copyShareURL"),dQR=document.getElementById("displayQRCode"),qrc=document.getElementById("qrcode"),s=document.getElementById("share"),sQRC=document.getElementById("showQRCode"),pKI=document.getElementById("pubKeyInfo"),sPK=document.getElementById("showPubKey");function tC(e){"2rem"==e.style.top?(e.style.visibility="visible",e.style.top="0px",e.style.opacity=1):(e.style.top="2rem",e.style.opacity=0,setTimeout(()=>{e.style.visibility="hidden"},200))}function dN(e){e.style.display="none"}window.addEventListener("load",()=>{document.querySelector("#actions").style.display="flex",qrc.innerHTML=new QRCode({content:window.location.href,container:"svg-viewbox",join:!0,ecl:"L",padding:0}).svg()}),navigator.canShare?s.addEventListener("click",()=>{navigator.share({title:document.title,text:"You can view my Digital Business Card here:",url:window.location.href})}):s.addEventListener("click",()=>{tC(sC),cURL.style.display="flex",dN(dQR),pKI&&dN(pKI)}),sQRC.addEventListener("click",()=>{tC(sC),dQR.style.display="block",dN(cURL),pKI&&dN(pKI)}),sPK&&sPK.addEventListener("click",()=>{tC(sC),pKI&&(pKI.style.display="flex"),dN(cURL),dN(dQR)}),cBtn.addEventListener("click",()=>tC(sC)),cSURL.addEventListener("click",async()=>{let e=cSURL.querySelectorAll(".action")[1];await navigator.clipboard.writeText(window.location.href).then(t=>{e.innerText="Copied",setTimeout(()=>{e.innerText="Copy URL"},1e3)})});
-      </script> <script>
-        let pC=document.querySelectorAll(".playerControl"),pP=document.querySelectorAll(".playPause"),srcs=document.querySelectorAll(".source");srcs.forEach(e=>{e.style.pointerEvents="none",e.removeAttribute("controls")}),pC.forEach((e,l)=>{e.style.display="flex";let r=e.querySelector(".currentTime"),s=e.querySelector(".seekBar"),t=e.querySelector(".playPause"),a=t.querySelector(".play"),o=t.querySelector(".pause");srcs[l].addEventListener("timeupdate",()=>{let e=srcs[l].currentTime,t=100/srcs[l].duration*e;s.value=t,100==t&&(s.value=0,a.style.display="block",o.style.display="none");let c=Math.floor(e/60),y=Math.floor(e%60);c.toString().length<2&&(c="0"+c),y.toString().length<2&&(y="0"+y),r.value=c+":"+y}),s.addEventListener("change",()=>{srcs[l].currentTime=srcs[l].duration*(parseInt(s.value)/100)}),t.addEventListener("click",()=>{srcs[l].paused?(srcs.forEach((e,r)=>{l!=r&&(e.paused||e.pause())}),pP.forEach((e,l)=>{let r=e.querySelector(".play"),s=e.querySelector(".pause");r.style.display="block",s.style.display="none"}),srcs[l].play(),a.style.display="none",o.style.display="block"):(srcs[l].pause(),o.style.display="none",a.style.display="block")})});
-      </script></body></html>
\ No newline at end of file
+              </p></div></div><div class="actionsC"><div class="actionBtn"><a href="https://www.vishnuraghav.com" target="_blank" rel="noopener noreferrer" aria-label="store" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><path d="M19.148 2.971A2.008 2.008 0 0017.434 2H6.566c-.698 0-1.355.372-1.714.971L2.143 7.485A.995.995 0 002 8a3.97 3.97 0 001 2.618V19c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-8.382A3.97 3.97 0 0022 8a.995.995 0 00-.143-.515l-2.709-4.514zm.836 5.28A2.003 2.003 0 0118 10c-1.103 0-2-.897-2-2 0-.068-.025-.128-.039-.192l.02-.004L15.22 4h2.214l2.55 4.251zM10.819 4h2.361l.813 4.065C13.958 9.137 13.08 10 12 10s-1.958-.863-1.993-1.935L10.819 4zM6.566 4H8.78l-.76 3.804.02.004C8.025 7.872 8 7.932 8 8c0 1.103-.897 2-2 2a2.003 2.003 0 01-1.984-1.749L6.566 4zM10 19v-3h4v3h-4zm6 0v-3c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v3H5v-7.142c.321.083.652.142 1 .142a3.99 3.99 0 003-1.357c.733.832 1.807 1.357 3 1.357s2.267-.525 3-1.357A3.99 3.99 0 0018 12c.348 0 .679-.059 1-.142V19h-3z"></path></svg></div></a> <p class="text">
+                Store
+              </p></div></div> <div id="cta"><a id="dlVcard" href="digitalbusinesscardgenerator.vcf" download="" target="_blank" aria-label="Add to Contacts" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><path d="M20 8v6m3-3h-6"></path></svg></div> <p class="action">Add to Contacts</p></a></div></div> <div class="actions secActions"><div class="actionsC"><div class="actionBtn secBtn"><a target="_blank" rel="noopener noreferrer" aria-label="mastodon" style="background-color: rgb(43, 144, 217);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="#fff"><path d="M20.93 13.99c-.274 1.411-2.455 2.955-4.961 3.254-1.307.156-2.594.299-3.966.236-2.243-.103-4.013-.535-4.013-.535 0 .218.013.426.04.621.291 2.214 2.195 2.346 3.999 2.408 1.82.063 3.441-.448 3.441-.448l.075 1.645s-1.274.684-3.542.81c-1.25.068-2.803-.032-4.612-.511-3.923-1.038-4.598-5.22-4.701-9.462-.031-1.26-.012-2.448-.012-3.441 0-4.339 2.842-5.611 2.842-5.611 1.434-.658 3.894-.935 6.45-.956h.063c2.557.021 5.018.298 6.452.956 0 0 2.842 1.272 2.842 5.611 0 0 .036 3.201-.397 5.423zm-2.956-5.087v5.253h-2.081V9.058c0-1.075-.453-1.621-1.357-1.621-1.001 0-1.501.647-1.501 1.927v2.791h-2.07V9.364c0-1.28-.501-1.927-1.501-1.927-.904 0-1.357.546-1.357 1.621v5.098H6.025V8.903c0-1.074.275-1.927.823-2.558.567-.632 1.308-.955 2.228-.955 1.066 0 1.872.409 2.405 1.228l.519.87.519-.87c.532-.819 1.339-1.228 2.404-1.228.921 0 1.662.323 2.228.955.549.631.823 1.484.823 2.558z"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a target="_blank" rel="noopener noreferrer" aria-label="pixelfed" style="background-color: rgb(141, 89, 168);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" fill="#fff"><path d="M9.835 15.338h3.387C16.413 15.338 19 12.8 19 9.669S16.413 4 13.222 4H8.333C6.492 4 5 5.464 5 7.271V20l4.835-4.662z"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a target="_blank" rel="noopener noreferrer" aria-label="friendica" style="background-color: rgb(29, 110, 154);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path d="M20.5 5.5a2 2 0 00-2-2h-13a2 2 0 00-2 2v13a2 2 0 002 2h13a2 2 0 002-2v-13z" fill="none" stroke="#ffc019"></path><path d="M14.906 3.5v4.533H9.167V12h5.687v3.967H9.167V20.5H5.5a2 2 0 01-2-2v-13a2 2 0 012-2h9.406z" fill="#ffc019"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a target="_blank" rel="noopener noreferrer" aria-label="peertube" style="background-color: rgb(255, 255, 255);"><div class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M6.5 2v10L14 7" fill="#211f20"></path><path d="M6.5 12v10l7.5-5" fill="#737373"></path><path d="M14 7v10l7.5-5" fill="#f1680d"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a target="_blank" rel="noopener noreferrer" aria-label="github" style="background-color: rgb(51, 51, 51);" href="https://github.com/vishnuraghavb/dbizcard"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#fff"><path fill-rule="evenodd" d="M12.03 2a9.97 9.97 0 00-3.16 19.44c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.15-1.1-1.46-1.1-1.46-.91-.61.06-.6.06-.6 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.33 1.08 2.9.83.1-.65.35-1.09.64-1.34-2.22-.25-4.55-1.1-4.55-4.93 0-1.08.4-1.98 1.03-2.67-.1-.26-.45-1.27.1-2.64 0 0 .83-.27 2.74 1.02a9.58 9.58 0 015 0c1.9-1.3 2.73-1.02 2.73-1.02.55 1.37.2 2.38.1 2.64.64.7 1.03 1.58 1.03 2.67 0 3.84-2.33 4.68-4.56 4.92.36.31.68.92.68 1.85l-.01 2.74c0 .26.18.57.68.48A9.98 9.98 0 0012.03 2z" clip-rule="evenodd"></path></svg></div></a></div></div></div> <div class="attachments"><h2 class="section text">Image Gallery</h2> <div class="content image" style="background-color: rgb(34, 34, 34);"><div><img src="./featured/photo_by_andreas_gücklhorn_on_unsplash.jpeg" alt="Product image"> <div class="controls"><p class="title card">
+                  Photo by Andreas Gücklhorn on Unsplash
+                </p></div></div> <!----> <!----></div><div class="content image" style="background-color: rgb(34, 34, 34);"><div><img src="./featured/photo_by_erol_ahmed_on_unsplash.jpeg" alt="Product image"> <div class="controls"><p class="title card">
+                  Photo by Erol Ahmed on Unsplash
+                </p></div></div> <!----> <!----></div></div><div class="attachments"><h2 class="section text">Music Releases</h2> <div class="content music" style="background-color: rgb(34, 34, 34);"><!----> <div class="mediaC"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto; display: none;" controls="controls"><source src="./featured/over_the_water,_humans_gather.mp3"></video> <img src="./featured/over_the_water,_humans_gather.jpeg" alt="cover"> <div class="controls"><p class="title card">
+      Over the Water, Humans Gather
+    </p> <p class="mediaInfo card"><span>Doctor Turtle</span> <span> - One Person Listening Now</span></p> <div class="pCtrl" style="display: none;"><output class="currentTime card">00:00</output> <input type="range" value="0" class="seekBar"> <a class="playPause" style="background-color: rgb(56, 161, 105);"><div class="icon play action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3l14 9-14 9V3z" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <div class="icon pause action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="#fff" stroke-width="2" d="M5 5h14v14H5z"></path></svg></div></a></div></div></div> <!----></div><div class="content music" style="background-color: rgb(34, 34, 34);"><!----> <div class="mediaC"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto; display: none;" controls="controls"><source src="./featured/shipping_lanes.mp3"></video> <img src="./featured/shipping_lanes.jpeg" alt="cover"> <div class="controls"><p class="title card">
+      Shipping Lanes
+    </p> <p class="mediaInfo card"><span>Chad Crouch</span> <span> - Arps</span></p> <div class="pCtrl" style="display: none;"><output class="currentTime card">00:00</output> <input type="range" value="0" class="seekBar"> <a class="playPause" style="background-color: rgb(56, 161, 105);"><div class="icon play action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3l14 9-14 9V3z" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <div class="icon pause action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="#fff" stroke-width="2" d="M5 5h14v14H5z"></path></svg></div></a></div></div></div> <!----></div></div><div class="attachments"><h2 class="section text">Video Gallery</h2> <div class="content video" style="background-color: rgb(34, 34, 34);"><!----> <div class="mediaC"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto;" controls="controls"><source src="./featured/butterflies.mp4"></video> <!----> <div class="controls"><p class="title card">
+      Butterflies
+    </p> <!----> <div class="pCtrl" style="display: none;"><output class="currentTime card">00:00</output> <input type="range" value="0" class="seekBar"> <a class="playPause" style="background-color: rgb(56, 161, 105);"><div class="icon play action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3l14 9-14 9V3z" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <div class="icon pause action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="#fff" stroke-width="2" d="M5 5h14v14H5z"></path></svg></div></a></div></div></div> <!----></div><div class="content video" style="background-color: rgb(34, 34, 34);"><!----> <div class="mediaC"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto;" controls="controls"><source src="./featured/sea_side.mp4"></video> <!----> <div class="controls"><p class="title card">
+      Sea side
+    </p> <!----> <div class="pCtrl" style="display: none;"><output class="currentTime card">00:00</output> <input type="range" value="0" class="seekBar"> <a class="playPause" style="background-color: rgb(56, 161, 105);"><div class="icon play action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3l14 9-14 9V3z" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <div class="icon pause action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="#fff" stroke-width="2" d="M5 5h14v14H5z"></path></svg></div></a></div></div></div> <!----></div></div><div class="attachments"><h2 class="section text">Documents</h2> <div class="content document" style="background-color: rgb(34, 34, 34);"><!----> <!----> <div class="mediaC"><div><img src="./featured/business_card_-_wikipedia.jpeg" alt="Business card - Wikipedia"></div> <div class="controls"><p class="title card">
+      Business card - Wikipedia
+    </p> <p class="mediaInfo card">PDF - 386.96 KB</p> <div class="docDl"><a href="./featured/business_card_-_wikipedia.pdf" download="" target="_blank" class="dlBtn" style="background-color: rgb(56, 161, 105);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"></path></svg></div></a></div></div></div></div></div> <div class="attachments"><h2 class="section text">Videos on the Web</h2> <div class="content embedded"><iframe src="https://www.youtube-nocookie.com/embed/IUN664s7N-c" allowfullscreen="allowfullscreen" allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'" frameborder="0"></iframe></div><div class="content embedded"><iframe src="https://player.vimeo.com/video/182932029" allowfullscreen="allowfullscreen" allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'" frameborder="0"></iframe></div></div><div class="attachments"><h2 class="section text">Geolocation</h2> <div class="content embedded"><iframe src="https://www.openstreetmap.org/export/embed.html?bbox=76.42364501953126%2C10.685574312521242%2C77.33001708984376%2C11.317807277884592&amp;amp;layer=mapnik" allowfullscreen="allowfullscreen" allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; camera 'none'; microphone 'none'" frameborder="0"></iframe></div></div> <div class="attachments"><h2 class="section text">Author</h2> <div><div class="content" style="background-color: rgb(34, 34, 34);"><img src="./products/l456@2x.jpeg" alt="Product image"> <div class="controls prodInfo"><p class="title card">
+        Vishnu Raghav B
+      </p> <p class="desc card">
+        🌐 Freelancer 🎨 Designer 💻 Developer 🛡️ Technology &amp; Privacy Enthusiast
+      </p> <p class="price card">
+        
+      </p> <a target="_blank" class="label" style="background-color: rgb(56, 161, 105); line-height: 2rem;" href="https://www.vishnuraghav.com/donate"><p class="action">Donate</p></a></div></div></div></div></main> <footer class="text" style="background-color: rgb(238, 238, 238);">
+        Created with
+        <a href="https://dbizcard.vercel.app/" target="_blank" rel="noopener noreferrer" class="text">Digital Business Card Generator</a></footer><script src="./qrcode.min.js"></script><script>let m=document.getElementById("modal"),c=document.getElementById("close"),ki=document.getElementById("keyInfo"),cv=document.getElementById("copyView"),curl=document.getElementById("copyURL"),qrv=document.getElementById("qrView"),qr=document.getElementById("qr"),s=document.getElementById("share"),sqr=document.getElementById("showQR"),sk=document.getElementById("showKey");function tC(e){"2rem"==e.style.top?(e.style.visibility="visible",e.style.top="0px",e.style.opacity=1):(e.style.top="2rem",e.style.opacity=0,setTimeout(()=>{e.style.visibility="hidden"},200))}function dN(e){e.style.display="none"}window.addEventListener("load",()=>{document.querySelector("#topActions").style.display="flex",qr.innerHTML=new QRCode({content:window.location.href,container:"svg-viewbox",join:!0,ecl:"L",padding:0}).svg()}),navigator.canShare?s.addEventListener("click",()=>{navigator.share({title:document.title,text:"You can view my Digital Business Card here:",url:window.location.href})}):s.addEventListener("click",()=>{tC(m),cv.style.display="flex",dN(qrv),ki&&dN(ki)}),sqr.addEventListener("click",()=>{tC(m),qrv.style.display="block",dN(cv),ki&&dN(ki)}),sk&&sk.addEventListener("click",()=>{tC(m),ki&&(ki.style.display="flex"),dN(cv),dN(qrv)}),c.addEventListener("click",()=>tC(m)),curl.addEventListener("click",async()=>{let e=curl.querySelectorAll(".action")[1];await navigator.clipboard.writeText(window.location.href).then(t=>{e.innerText="Copied",setTimeout(()=>{e.innerText="Copy URL"},1e3)})});</script><script>let pC=document.querySelectorAll(".pCtrl"),pP=document.querySelectorAll(".playPause"),srcs=document.querySelectorAll(".source");srcs.forEach(e=>{e.style.pointerEvents="none",e.removeAttribute("controls")}),pC.forEach((e,l)=>{e.style.display="flex";let r=e.querySelector(".currentTime"),s=e.querySelector(".seekBar"),t=e.querySelector(".playPause"),a=t.querySelector(".play"),c=t.querySelector(".pause");srcs[l].addEventListener("timeupdate",()=>{let e=srcs[l].currentTime,t=100/srcs[l].duration*e;s.value=t,100==t&&(s.value=0,a.style.display="block",c.style.display="none");let o=Math.floor(e/60),y=Math.floor(e%60);o.toString().length<2&&(o="0"+o),y.toString().length<2&&(y="0"+y),r.value=o+":"+y}),s.addEventListener("change",()=>{srcs[l].currentTime=srcs[l].duration*(parseInt(s.value)/100)}),t.addEventListener("click",()=>{srcs[l].paused?(srcs.forEach((e,r)=>{l!=r&&(e.paused||e.pause())}),pP.forEach((e,l)=>{let r=e.querySelector(".play"),s=e.querySelector(".pause");r.style.display="block",s.style.display="none"}),srcs[l].play(),a.style.display="none",c.style.display="block"):(srcs[l].pause(),c.style.display="none",a.style.display="block")})});</script></body></html>
\ No newline at end of file
diff --git a/static/demo/logo.svg b/static/demo/logo.svg
deleted file mode 100644
index c6b856f..0000000
--- a/static/demo/logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 200 150"
-  xmlns="http://www.w3.org/2000/svg" fill="#ffffff" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
-  <path d="M40.732 140H5a5 5 0 01-5-5V5a5 5 0 015-5h190a5 5 0 015 5v130a5 5 0 01-5 5h-25.855c-2.061 5.823-7.619 10-14.145 10-8.279 0-15-6.721-15-15s6.721-15 15-15c6.526 0 12.084 4.177 14.145 10H190V10H10v120h30.732c2.06-5.823 7.619-10 14.145-10 8.279 0 15 6.721 15 15s-6.721 15-15 15c-6.526 0-12.085-4.177-14.145-10zM105 119.919c-8.279 0-15 6.722-15 15 0 8.279 6.721 15 15 15s15-6.721 15-15c0-8.278-6.721-15-15-15zM54.877 130c2.759 0 5 2.24 5 5s-2.241 5-5 5c-2.76 0-5-2.24-5-5s2.24-5 5-5zM155 130c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm-50-.081c2.76 0 5 2.241 5 5 0 2.76-2.24 5-5 5s-5-2.24-5-5c0-2.759 2.24-5 5-5zM55 40.138c-13.803 0-25 11.176-25 24.931S41.197 90 55 90s25-11.176 25-24.931-11.197-24.931-25-24.931zm0 10c8.274 0 15 6.685 15 14.931C70 73.314 63.274 80 55 80c-8.274 0-15-6.686-15-14.931 0-8.246 6.726-14.931 15-14.931zM145 70h-40c-2.76 0-5 2.24-5 5s2.24 5 5 5h40c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-40-10h60c2.76 0 5-2.24 5-5s-2.24-5-5-5h-60c-2.76 0-5 2.24-5 5s2.24 5 5 5z"/>
-</svg>
diff --git a/static/demo/photo.png b/static/demo/photo.png
index c776f4f..00fdfb3 100644
Binary files a/static/demo/photo.png and b/static/demo/photo.png differ
diff --git a/static/demo/products/l456@2x.jpeg b/static/demo/products/l456@2x.jpeg
new file mode 100644
index 0000000..2218c7c
Binary files /dev/null and b/static/demo/products/l456@2x.jpeg differ
diff --git a/static/demo/style.min.css b/static/demo/style.min.css
index 979d2bb..0e366e8 100644
--- a/static/demo/style.min.css
+++ b/static/demo/style.min.css
@@ -1 +1 @@
-body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#000;font-family:sans-serif;position:relative}#shareContainer{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeBtnContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#closeBtn{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#shareContent,#copyURL,#displayQRCode,#pubKeyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyURL p,#pubKeyInfo p{margin:2rem 2em 0;line-height:1.5;text-align:center}#copyShareURL,#downloadKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:2rem;padding:0.75rem 1.5rem;cursor:pointer}#copyShareURL span,#downloadKey span{margin-left:0.5rem}#displayQRCode{text-align:center;width:100%}#displayQRCode h2,#displayQRCode p{padding:0 2rem}#displayQRCode h2{font-weight:700;font-size:1.5rem;margin:0}#displayQRCode p{margin-top:0.5rem}#qrcode{margin:2rem;padding:2rem;background:#fff;border-radius:1.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem 4rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#actions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#actions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}#shareActions{display:-webkit-box;display:-ms-flexbox;display:flex}main{border-radius:1.5rem 1.5rem 0 0;padding:1.5rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex}#profile img{width:6rem;height:6rem;border-radius:100%;margin-right:0.75rem;text-align:center;-ms-flex-item-align:start;align-self:flex-start;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#profileInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1.25;word-break:break-word}.name{font-weight:700;font-size:1.25rem;margin:0}.jobtitle{font-size:0.875rem;margin:0.25rem 0 0 0}.bizDescription{color:#212529;font-size:0.875rem;white-space:pre-line;line-height:1.5;margin-top:1rem}#contactBtns,#socialBtns{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.contactBtnContainer,.socialBtnContainer{width:33.33%}.contactBtn,.socialBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.contactBtn a,.socialBtn a{border-radius:100%;padding:0.75rem;line-height:0}.contactBtn p,.socialBtn p{margin:0.5rem 0 0;font-size:0.875rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a:not(#closeBtn){-webkit-box-shadow:0 1px 4px -1px rgba(0,0,0,0.2);box-shadow:0 1px 4px -1px rgba(0,0,0,0.2)}a:not(#closeBtn):hover,a:not(#closeBtn):focus{-webkit-box-shadow:none;box-shadow:none}#ctaContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#downloadVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#downloadVcard .icon{margin-right:0.5rem}#downloadVcard p{margin:0}#socialBtns{margin-top:1.25rem}.socialBtn{padding:1rem}#featuredContent{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.images,.music,.video,.document,.embedContent{overflow:hidden;border-radius:0.5rem;margin-top:1.5rem}.images img,.music img,.video img,.document img,.embedContent img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.music,.video{width:100%}.mediaPlayerContainer,.documentContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.infoControls{padding:1rem 2rem 2rem;font-size:0.75rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.title{font-size:1rem;font-weight:700}.artistAlbum,.fileSize{margin-top:0.25rem}.playerControl,.downloadDocument{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.downloadDocument{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.downloadBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:1.5rem 1.5rem 2rem}footer div{margin-top:1rem;font-size:0.75rem;text-align:center;color:#000}footer div a{text-decoration:underline;color:#000}
\ No newline at end of file
+body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;font-family:sans-serif;position:relative}#modal{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeModal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#close{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#modalView,#copyView,#qrView,#keyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyView p,#keyInfo p{margin:1rem 2em 0;line-height:1.5;text-align:center}#copyURL,#dlKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:2rem;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView{text-align:center;width:100%}#qrView h2,#qrView p{padding:0 2rem}#qrView h2{margin:0}#qrView p{margin-top:0.5rem}#qr{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:0.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#topActions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#topActions>div{display:-webkit-box;display:-ms-flexbox;display:flex}#topActions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}main{padding:1rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-4.5rem}#profile img,#profile .img{width:7rem;height:7rem;border-radius:100%;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:700;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.actions{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionsC{width:33.33%}.actionBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionBtn a{border-radius:100%;padding:0.75rem;line-height:0}.actionBtn p{margin:0.5rem 0 0;font-size:0.875rem}.secActions{margin-top:1.25rem}.secBtn{padding:1rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#cta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#dlVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#dlVcard .icon{margin-right:0.5rem}#dlVcard p{margin:0}.attachments{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.section{font-weight:700;text-align:center;font-size:1.5rem;margin:3rem 1rem 1rem}.content{overflow:hidden;border-radius:0.5rem;margin-top:1rem}.content img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.embedded{position:relative;padding-top:56.25%}.embedded iframe{position:absolute;top:0;left:0;width:100%;height:100%}.music,.video{width:100%}.mediaC{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.controls{padding:2rem 1rem;font-size:0.875rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.prodInfo .desc{margin:-1rem 0 0}.price{margin:2rem 0 0;font-size:1.25rem;font-weight:700}.label{display:inline-block;font-size:1rem;margin-top:1rem;border-radius:5rem;letter-spacing:1px;padding:0.75rem 1.5rem}.label p{margin:0}.title{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem}.mediaInfo{margin:0}.pCtrl,.docDl{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.docDl{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:2.5rem 1.5rem 2rem;font-size:0.75rem;text-align:center}footer a{text-decoration:underline;color:inherit}
diff --git a/static/test.js b/static/test.js
deleted file mode 100644
index e69de29..0000000
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index c9f603c..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-    /* Basic Options */
-    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
-    // "allowJs": true,                       /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    // "outDir": "./",                        /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "composite": true,                     /* Enable project compilation */
-    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
-
-    /* Source Map Options */
-    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-
-    /* Advanced Options */
-    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
-  }
-}