diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index c9cf24c..b5c61c9 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,52 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.stepC {
-  margin-left: 0;
-  margin-right: 0;
-}
-.toggle-switch:checked {
-  @apply right-0;
-  right: 0;
-}
-#device {
-  border-radius: 1rem;
-  width: 100%;
-}
-.max-hd {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  max-height: 100vh;
-}
-.max-hd::-webkit-scrollbar {
-  display: none;
-}
-.theme-one {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.theme-one::-webkit-scrollbar {
-  display: none;
-}
-.footer {
-  display: flex;
-}
-.stepC.actions {
-  display: grid;
-  grid-gap: 1.5rem;
-  justify-content: space-between;
-  grid-template-columns: repeat(auto-fill, minmax(3rem, auto));
-}
-
-@media (min-width: 640px) {
-  .stepC {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-}
-@media (min-width: 768px) {
-  .max-hd {
-    max-height: 38rem;
-  }
-}
diff --git a/assets/styles/T1.min.css b/assets/styles/T1.min.css
index 2eab748..27a5b2a 100644
--- a/assets/styles/T1.min.css
+++ b/assets/styles/T1.min.css
@@ -1 +1 @@
-body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;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 2rem;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;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView h2,#qrView p{margin:0 2rem 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{min-height:6rem;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}#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;margin-top:-4.5rem}#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:bold;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc,.textC{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.textC{font-size:1rem;margin:2rem 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}.secondary{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:bold;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:bold}.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:bold;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}footer a{text-decoration:underline;color:inherit}
+body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;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 2rem;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;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView h2,#qrView p{margin:0 2rem 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}#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;margin-top:-4.5rem}#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:bold;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc,.textC{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.textC{font-size:1rem;margin:2rem 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}.secondary{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:bold;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:bold}.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:bold;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}footer a{text-decoration:underline;color:inherit}
diff --git a/assets/styles/T1.scss b/assets/styles/T1.scss
index c8cad76..46b96bb 100644
--- a/assets/styles/T1.scss
+++ b/assets/styles/T1.scss
@@ -76,7 +76,6 @@ header {
   box-sizing: border-box;
 }
 #logo {
-  min-height: 6rem;
   max-height: 6rem;
   text-align: center;
   color: gray;
diff --git a/components/Attachment.vue b/components/Attachment.vue
index 07a962f..8d9f559 100644
--- a/components/Attachment.vue
+++ b/components/Attachment.vue
@@ -1,5 +1,15 @@
 <template>
   <div class="flex mt-6">
+    <transition name="list">
+      <Cropper
+        v-if="showCropper"
+        :src="tempURL"
+        @closeCropper="closeCropper"
+        :content="content"
+        :mime="mime"
+        :resizeImage="resizeImage"
+      />
+    </transition>
     <div class="flex flex-wrap items-center">
       <img
         class="w-12 h-12 rounded object-contain"
@@ -22,7 +32,7 @@
         <input
           :ref="`import${type}`"
           type="file"
-          :accept="`.png,.jpg,.jpeg${type == 'logo' ? ',.svg' : ''}`"
+          :accept="`.png,.jpg,.jpeg,.gif,.webp${type == 'logo' ? ',.svg' : ''}`"
           v-show="false"
           @change="fileLoaded($event, type, false)"
           @click="$event.target.files = null"
@@ -65,6 +75,9 @@ export default {
   data() {
     return {
       dragOver: false,
+      showCropper: false,
+      tempURL: null,
+      mime: null,
     }
   },
   computed: {
@@ -73,6 +86,9 @@ export default {
     },
   },
   methods: {
+    closeCropper() {
+      this.showCropper = false
+    },
     attachFile(e, type, dropped) {
       dropped
         ? (this.fileLoaded(e, type, true), (this.dragOver = false))
@@ -84,40 +100,50 @@ export default {
         (!dropped && e.target.files.length)
       ) {
         let file = dropped ? e.dataTransfer.files[0] : e.target.files[0]
-        if (type == 'logo' && file.type.match(/image\/(svg\+xml|png|jpeg)/)) {
-          this.imageLoaded(file, type)
-        } else if (file.type.match(/image\/(png|jpeg)/)) {
-          this.imageLoaded(file, type)
+        let mime = file.type
+        if (
+          type == 'logo' &&
+          file.type.match(/image\/(svg\+xml|png|jpeg|gif|webp)/)
+        ) {
+          this.imageLoaded(file, type, mime)
+        } else if (file.type.match(/image\/(png|jpeg|gif|webp)/)) {
+          this.imageLoaded(file, type, mime)
+        } else {
+          if (type == 'logo') {
+            this.showAlert(
+              'Unsupported file format.\nOnly jpeg, png, webp, gif and svg file can be attached.'
+            )
+          } else {
+            this.showAlert(
+              'Unsupported file format.\nOnly jpeg, png, webp and gif file can be attached.'
+            )
+          }
         }
       }
     },
-    imageLoaded(file, type) {
+    imageLoaded(file, type, mime) {
       let reader = new FileReader()
       reader.onload = (f) => {
         let dataURI = f.target.result
-        let format = dataURI
+        let ext = dataURI
           .split(',')[0]
           .split(':')[1]
           .split('/')[1]
           .match(/^\w+/g)[0]
-        if (type == 'photo') {
-          let img = new Image()
-          img.src = dataURI
-          img.onload = () => {
-            img.width != img.height
-              ? this.showAlert(
-                  'Looks like its not a square photo.\n\nPlease use an image editor to crop the photo to 1:1 and re-attach the same.'
-                )
-              : null
+        if (type == 'logo' || mime.match(/gif|webp/)) {
+          this.content[type] = {
+            url: dataURI,
+            blob: file,
+            ext,
+            mime,
+            resized: file,
           }
-        }
-        this.content[type] = {
-          url: dataURI,
-          blob: file,
-          format,
-        }
-        if (this.content[type].format.match(/(png|jpg|jpeg)/)) {
-          this.resizeImage(type)
+          if (!mime.match(/svg|gif|webp/)) this.resizeImage(type, mime)
+        } else {
+          this.content.photo.ext = ext
+          this.mime = mime
+          this.tempURL = dataURI
+          this.showCropper = true
         }
       }
       reader.readAsDataURL(file)
diff --git a/components/Colour.vue b/components/Colour.vue
index 0d0cb50..0bcfec6 100644
--- a/components/Colour.vue
+++ b/components/Colour.vue
@@ -53,7 +53,7 @@ export default {
 <style lang="scss">
 .palette-enter-active,
 .palette-leave-active {
-  transition: transform 0.1s ease;
+  transition: transform 0.2s ease;
   transform-origin: left top;
 }
 .palette-enter,
diff --git a/components/Cropper.vue b/components/Cropper.vue
new file mode 100644
index 0000000..de47828
--- /dev/null
+++ b/components/Cropper.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    id="notificationContainer"
+    class="flex justify-center fixed top-0 left-0 right-0 bottom-0 items-center z-30 bg-black bg-opacity-80"
+  >
+    <div
+      class="flex flex-col items-center notification content bg-gray-800 text-gray-100 rounded relative z-50 max-w-sm mx-4 p-2"
+    >
+      <div class="mb-2 max-w-sm max-h-80">
+        <img ref="image" :src="src" />
+      </div>
+      <div class="flex">
+        <button
+          class="p-3 font-extrabold rounded tracking-wide focus:outline-none select-none bg-gray-700 mr-2 hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200"
+          @click="$emit('closeCropper')"
+        >
+          Cancel
+        </button>
+        <button
+          class="font-extrabold leading-none tracking-wide select-none flex-shrink-0 p-3 text-white bg-green-600 rounded hover:bg-green-500 focus:bg-green-500 transition-colors duration-200 focus:outline-none"
+          @click="cropPhoto"
+        >
+          Crop photo
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+export default {
+  props: ['src', 'mime', 'content', 'resizeImage'],
+  data() {
+    return {
+      cropper: {},
+      dataURL: null,
+      blobData: null,
+      image: {},
+    }
+  },
+  methods: {
+    cropPhoto() {
+      let vm = this
+      const canvas = this.cropper.getCroppedCanvas()
+      let url = canvas.toDataURL(this.mime)
+      this.content.photo.url = url
+      this.content.photo.mime = this.mime
+      canvas.toBlob(
+        (blob) => {
+          vm.content.photo.blob = new File([blob], 'photo', {
+            type: this.mime,
+          })
+          vm.resizeImage('photo', vm.mime)
+          vm.$emit('closeCropper')
+        },
+        this.mime,
+        0.8
+      )
+    },
+  },
+  mounted() {
+    this.image = this.$refs.image
+    this.cropper = new Cropper(this.image, {
+      zoomable: false,
+      scalable: true,
+      aspectRatio: 1,
+      autoCropArea: 1,
+      responsive: true,
+      viewMode: 2,
+      highlight: false,
+      rotatable: false,
+    })
+  },
+}
+</script>
\ No newline at end of file
diff --git a/components/DocumentDownloader.vue b/components/DocumentDownloader.vue
index 22ea6fd..0dcab08 100644
--- a/components/DocumentDownloader.vue
+++ b/components/DocumentDownloader.vue
@@ -5,7 +5,7 @@
         :src="
           PreviewMode
             ? media.coverDataURI
-            : `./featured/${getTitle(media.title)}.${media.coverFormat}`
+            : `./media/${getTitle(media.title)}.${media.coverExt}`
         "
         :alt="media.title"
       />
@@ -23,9 +23,7 @@
             backgroundColor: `${colors.buttonBg.color}`,
           }"
           :href="
-            PreviewMode
-              ? ''
-              : `./featured/${getTitle(media.title)}.${media.format}`
+            PreviewMode ? '' : `./media/${getTitle(media.title)}.${media.ext}`
           "
           download
           target="_blank"
diff --git a/components/Download.vue b/components/Download.vue
index fc3fa1d..d8d74eb 100644
--- a/components/Download.vue
+++ b/components/Download.vue
@@ -27,7 +27,7 @@
       >
         Download as ZIP
       </button>
-      <p class="mt-6 border px-3 py-2 rounded border-gray-700 text-gray-400">
+      <p class="mt-6 border p-4 rounded border-gray-700 text-gray-400">
         Extract the downloaded ZIP file and follow the
         <NuxtLink
           to="/hosting-guide"
@@ -35,6 +35,15 @@
           >Hosting&nbsp;Guide</NuxtLink
         >
         to get your digital business card online.
+        <br /><br />
+        If you find this service valuable to you or your business, please
+        consider donating.
+        <br /><a
+          class="inline-block font-extrabold tracking-wide leading-none flex-shrink-0 p-3 text-white bg-gray-700 rounded hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200 mt-4"
+          href="https://www.vishnuraghav.com/donate/"
+          target="_blank"
+          >Donate</a
+        >
       </p>
     </div>
   </div>
diff --git a/components/Featured.vue b/components/Featured.vue
index cb1bc2e..1879989 100644
--- a/components/Featured.vue
+++ b/components/Featured.vue
@@ -25,120 +25,142 @@
         ></div>
       </button>
     </div>
-    <draggable v-model="featured[index].content" class="mt-4" handle=".drag">
-      <div v-for="(item, i) in featured[index].content" :key="i">
-        <div
-          class="flex items-center mt-2 mr-4"
-          v-if="item.contentType == 'media'"
-        >
-          <button
-            class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
-            tabindex="-1"
+    <draggable
+      v-model="featured[index].content"
+      class="mt-4"
+      handle=".drag"
+      animation="1"
+      ghostClass="ghost"
+    >
+      <transition-group name="list">
+        <div v-for="(item, i) in featured[index].content" :key="'item' + i">
+          <div
+            class="flex items-center mt-2"
+            v-if="item.contentType == 'media'"
           >
-            <div
-              class="w-6 h-6"
-              v-html="require(`~/assets/icons/drag.svg?include`)"
-            ></div>
-          </button>
-          <img
-            class="w-12 h-12 rounded mr-3 object-contain flex-shrink-0"
-            v-if="item.type == 'image' ? item.dataURI : item.coverDataURI"
-            :src="item.type == 'image' ? item.dataURI : item.coverDataURI"
-            :alt="item.title"
+            <button
+              class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
+              tabindex="-1"
+            >
+              <div
+                class="w-6 h-6"
+                v-html="require(`~/assets/icons/drag.svg?include`)"
+              ></div>
+            </button>
+            <img
+              class="w-12 h-12 rounded mr-3 object-contain flex-shrink-0"
+              v-if="
+                item.type == 'image'
+                  ? item.dataURI
+                  : item.coverDataURI
+                  ? item.coverDataURI
+                  : false
+              "
+              :src="item.type == 'image' ? item.dataURI : item.coverDataURI"
+              :alt="item.title"
+            />
+            <a
+              v-else
+              class="w-12 h-12 mr-3 bg-gray-900 flex items-center justify-center text-center text-xs rounded flex-shrink-0 leading-none select-none cursor-pointer"
+              target="_blank"
+              href="https://duckduckgo.com/?q=Add+ID3+tags+to+mp3+file"
+            >
+              {{ item.info }}
+            </a>
+            <!-- prettier-ignore -->
+            <p class="w-full leading-none whitespace-pre overflow-x-hidden">{{ item.name }}</p>
+            <button
+              class="p-1 m-2 self-end flex-shrink-0 focus:outline-none rounded hover:bg-gray-700 focus:bg-gray-700 transition-colors duration-200"
+              @click="removeItem(i)"
+              aria-label="Remove media"
+              title="Remove media"
+            >
+              <div
+                class="w-6 h-6"
+                v-html="require(`~/assets/icons/x.svg?include`)"
+              ></div>
+            </button>
+          </div>
+          <ProductCard
+            v-else-if="item.contentType == 'product'"
+            :featured="featured"
+            :item="item"
+            :index="index"
+            :i="i"
+            :resizeImage="resizeImage"
+            :showAlert="showAlert"
           />
-          <!-- prettier-ignore -->
-          <p class="w-full leading-none whitespace-pre overflow-x-hidden">{{ item.name }}</p>
-          <button
-            class="p-1 m-2 self-end flex-shrink-0 focus:outline-none rounded hover:bg-gray-700 focus:bg-gray-700 transition-colors duration-200"
-            @click="removeItem(i)"
-            aria-label="Remove media"
-            title="Remove media"
+          <div
+            class="flex items-center mt-2"
+            v-else-if="item.contentType == 'text'"
           >
-            <div
-              class="w-6 h-6"
-              v-html="require(`~/assets/icons/x.svg?include`)"
-            ></div>
-          </button>
-        </div>
-        <ProductCard
-          v-else-if="item.contentType == 'product'"
-          :featured="featured"
-          :item="item"
-          :index="index"
-          :i="i"
-          :resizeImage="resizeImage"
-          :showAlert="showAlert"
-        />
-        <div
-          class="flex items-center mt-2 mr-4"
-          v-else-if="item.contentType == 'text'"
-        >
-          <button
-            class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
-            tabindex="-1"
-          >
-            <div
-              class="w-6 h-6"
-              v-html="require(`~/assets/icons/drag.svg?include`)"
-            ></div>
-          </button>
-          <div class="w-full">
-            <textarea
-              class="block mt-2 px-4 py-3 w-full bg-black rounded border border-transparent placeholder-gray-600 transition-colors duration-200 focus:outline-none focus:border-gray-600 resize-none hover:border-gray-600"
-              ref="text"
-              aria-label="Type text content here"
-              title="Type text content here"
-              v-model="featured[index].content[i].value"
-              placeholder="Type text content here"
-              rows="5"
-            ></textarea>
+            <button
+              class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
+              tabindex="-1"
+            >
+              <div
+                class="w-6 h-6"
+                v-html="require(`~/assets/icons/drag.svg?include`)"
+              ></div>
+            </button>
+            <div class="w-full">
+              <textarea
+                class="block px-4 py-3 w-full bg-black rounded border border-transparent placeholder-gray-600 transition-colors duration-200 focus:outline-none focus:border-gray-500 resize-none hover:border-gray-500"
+                ref="text"
+                aria-label="Type text content here"
+                title="Type text content here"
+                v-model="featured[index].content[i].value"
+                placeholder="Type text content here"
+                rows="5"
+              ></textarea>
+            </div>
+            <button
+              class="p-1 m-2 flex-shrink-0 focus:outline-none rounded hover:bg-gray-700 focus:bg-gray-700 transition-colors duration-200"
+              @click="removeItem(i)"
+              aria-label="Remove text"
+              title="Remove text"
+            >
+              <div
+                class="w-6 h-6"
+                v-html="require(`~/assets/icons/x.svg?include`)"
+              ></div>
+            </button>
           </div>
-          <button
-            class="p-1 m-2 mt-4 flex-shrink-0 focus:outline-none rounded self-start hover:bg-gray-700 focus:bg-gray-700 transition-colors duration-200"
-            @click="removeItem(i)"
-            aria-label="Remove text"
-            title="Remove text"
-          >
-            <div
-              class="w-6 h-6"
-              v-html="require(`~/assets/icons/x.svg?include`)"
-            ></div>
-          </button>
-        </div>
-        <div class="flex items-center mt-2 mr-4" v-else>
-          <button
-            class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
-            tabindex="-1"
-          >
-            <div
-              class="w-6 h-6"
-              v-html="require(`~/assets/icons/drag.svg?include`)"
-            ></div>
-          </button>
-          <div class="w-full">
-            <input
-              class="px-4 w-full h-12 bg-black placeholder-gray-600 rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-500 hover:border-gray-500"
-              ref="link"
-              type="text"
-              aria-label="Paste HTML embed link here"
-              title="Paste HTML embed link here"
-              v-model="featured[index].content[i]"
-              placeholder="Paste HTML embed link here"
-            />
+          <div class="flex items-center mt-2" v-else>
+            <button
+              class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
+              tabindex="-1"
+            >
+              <div
+                class="w-6 h-6"
+                v-html="require(`~/assets/icons/drag.svg?include`)"
+              ></div>
+            </button>
+            <div class="w-full">
+              <input
+                class="px-4 w-full h-12 bg-black placeholder-gray-600 rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-500 hover:border-gray-500"
+                ref="link"
+                type="text"
+                aria-label="Paste HTML embed link here"
+                title="Paste HTML embed link here"
+                v-model="featured[index].content[i]"
+                placeholder="Paste HTML embed link here"
+              />
+            </div>
+            <button
+              class="p-1 m-2 flex-shrink-0 focus:outline-none rounded hover:bg-gray-700 focus:bg-gray-700 transition-colors duration-200"
+              @click="removeItem(i)"
+              aria-label="Remove field"
+              title="Remove field"
+            >
+              <div
+                class="w-6 h-6"
+                v-html="require(`~/assets/icons/x.svg?include`)"
+              ></div>
+            </button>
           </div>
-          <button
-            class="p-1 m-2 flex-shrink-0 focus:outline-none rounded hover:bg-gray-700 focus:bg-gray-700 transition-colors duration-200"
-            @click="removeItem(i)"
-            aria-label="Remove field"
-            title="Remove field"
-          >
-            <div
-              class="w-6 h-6"
-              v-html="require(`~/assets/icons/x.svg?include`)"
-            ></div>
-          </button>
         </div>
-      </div>
+      </transition-group>
     </draggable>
     <div
       class="grid grid-flow-row sm:grid-cols-2 gap-2 w-full p-2"
@@ -280,6 +302,10 @@ export default {
         contentType: 'text',
         value: null,
       })
+      let texts = this.featured[this.index].content.filter(
+        (e) => e.contentType == 'text'
+      )
+      setTimeout(() => this.$refs.text[texts.length - 1].focus(), 50)
     },
     fileLoaded(e, dropped) {
       if (
@@ -293,7 +319,7 @@ export default {
         if (file) {
           switch (type) {
             case 'image':
-              this.imageLoaded(file, type)
+              this.imageLoaded(file, type, mimetype)
               break
             case 'music':
               this.musicLoaded(file, type)
@@ -320,22 +346,29 @@ export default {
       this.featured[this.index].content.splice(i, 1)
     },
     // Images
-    imageLoaded(file, type) {
+    imageLoaded(file, type, mime) {
       let title = this.getFileName(file)
       let reader = new FileReader()
       reader.onload = (f) => {
         let dataURI = f.target.result
+        let ext = dataURI
+          .split(',')[0]
+          .split(':')[1]
+          .split('/')[1]
+          .match(/^\w+/g)[0]
         this.featured[this.index].content.push({
           name: file.name,
+          title,
           dataURI,
           file,
           type,
           contentType: 'media',
-          format: 'jpeg',
-          title,
+          ext,
+          mime,
         })
         this.resizeImage(
           type,
+          mime,
           this.index,
           this.featured[this.index].content.length - 1
         )
@@ -344,11 +377,12 @@ export default {
     },
 
     // Music
-    async musicLoaded(file, type) {
+    musicLoaded(file, type) {
       this.extractTags(file, type)
         .then((f) => {
           this.resizeImage(
             type,
+            'image/jpeg',
             this.index,
             this.featured[this.index].content.length - 1
           )
@@ -368,7 +402,7 @@ export default {
                   name: file.name,
                   cover,
                   coverDataURI,
-                  coverFormat: 'jpeg',
+                  coverExt: 'jpeg',
                   title: tag.title,
                   artist: tag.artist,
                   album: tag.album,
@@ -376,7 +410,7 @@ export default {
                   type,
                   contentType: 'media',
                   file,
-                  format: 'mp3',
+                  ext: 'mp3',
                 })
                 let loadTags = setInterval(() => {
                   if (
@@ -389,15 +423,31 @@ export default {
                   }
                 }, 500)
               } else {
-                this.showAlert(
-                  'Looks like this mp3 file has no album art.\n\nMusic with no album art can make you look unprofessional. So, please re-attach the file after adding an album art.\n\n<b>Pro-tip</b>: A professionally designed album art or cover image can help your music stand out.'
-                )
+                this.featured[this.index].content.push({
+                  name: file.name,
+                  title: tag.title,
+                  artist: tag.artist,
+                  album: tag.album,
+                  dataURI: URL.createObjectURL(file),
+                  type,
+                  contentType: 'media',
+                  file,
+                  ext: 'mp3',
+                  info: 'No Thumb',
+                })
                 reject()
               }
             } else {
-              this.showAlert(
-                'Looks like this mp3 file has no ID3 tags.\n\nMusic with no ID3 tags can make you look unprofessional. So, please re-attach the file after adding some tag information.'
-              )
+              this.featured[this.index].content.push({
+                name: file.name,
+                title: this.getFileName(file),
+                dataURI: URL.createObjectURL(file),
+                type,
+                contentType: 'media',
+                file,
+                ext: 'mp3',
+                info: 'No ID3 Tag',
+              })
               reject()
             }
           })
@@ -435,13 +485,13 @@ export default {
         vm.featured[vm.index].content.push({
           name: file.name,
           coverDataURI,
-          coverFormat: 'jpeg',
+          coverExt: 'jpeg',
           dataURI,
           file,
           title,
           type,
           contentType: 'media',
-          format: 'mp4',
+          ext: 'mp4',
         })
       }
       if (uA && uA.length == 2) {
@@ -523,13 +573,13 @@ export default {
                 name: file.name,
                 cover,
                 coverDataURI,
-                coverFormat: 'jpeg',
+                coverExt: 'jpeg',
                 file,
                 filesize,
                 title,
                 type,
                 contentType: 'media',
-                format: 'pdf',
+                ext: 'pdf',
               })
             })
           })
diff --git a/components/MediaPlayer.vue b/components/MediaPlayer.vue
index 00a1e53..dfd91fb 100644
--- a/components/MediaPlayer.vue
+++ b/components/MediaPlayer.vue
@@ -15,15 +15,16 @@
         :src="
           PreviewMode
             ? media.dataURI + '#t=0.2'
-            : `./media/${getTitle(media.title)}.${media.format}`
+            : `./media/${getTitle(media.title)}.${media.ext}`
         "
       />
     </video>
-    <img v-if="type == 'music'"
+    <img
+      v-if="type == 'music' && media.coverDataURI"
       :src="
         PreviewMode
           ? media.coverDataURI
-          : `./media/${getTitle(media.title)}.${media.coverFormat}`
+          : `./media/${getTitle(media.title)}.${media.coverExt}`
       "
       alt="cover"
     />
diff --git a/components/Modal.vue b/components/Modal.vue
index be9fac9..2a71b01 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     id="notificationContainer"
-    class="flex justify-center fixed top-0 left-0 right-0 bottom-0 items-center z-30 bg-black bg-opacity-80"
+    class="flex justify-center fixed top-0 left-0 right-0 bottom-0 items-center z-50 bg-black bg-opacity-80"
   >
     <div
-      class="flex items-start notification content bg-gray-800 text-gray-100 rounded relative z-10 mx-4 max-w-md p-2"
+      class="flex items-start notification content bg-gray-800 text-gray-100 rounded relative z-50 mx-8 max-w-md p-2"
     >
       <div class="whitespace-pre-line p-2" v-html="content"></div>
       <div
         @click="clearContent()"
-        class="w-8 cursor-pointer flex-shrink-0 p-1 m-1 focus:outline-none rounded hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200"
+        class="w-8 cursor-pointer flex-shrink-0 p-1 focus:outline-none rounded bg-gray-700 hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200 absolute -top-4 -right-4"
         v-html="require(`~/assets/icons/x.svg?include`)"
       ></div>
     </div>
@@ -19,5 +19,10 @@
 <script>
 export default {
   props: ['content', 'clearContent'],
+  methods: {
+    navTo() {
+      router.push('hosting-guide')
+    },
+  },
 }
 </script>
diff --git a/components/Preview.vue b/components/Preview.vue
index de61c45..9daf3af 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -21,6 +21,14 @@
           />
           <meta name="url" content="https://enbizcard.vercel.app/" />
           <meta name="designer" content="Vishnu Raghav" />
+          <meta
+            property="og:title"
+            :content="`${genInfo.name}'s Digital Business Card`"
+          />
+          <meta
+            property="twitter:title"
+            :content="`${genInfo.name}'s Digital Business Card`"
+          />
           <!-- prettier-ignore -->
           <script>
             "http"==window.location.href.substr(0,4)&&"/"!=window.location.href.slice(-1)&&window.location.replace(window.location.href+"/");
@@ -35,9 +43,6 @@
             {{genInfo.fontCss && getFontFamily}}
             }
           </style>
-          {{
-            !PreviewMode && genInfo.tracker ? getTrackingCode : null
-          }}
         </head>
         <body id="body">
           <div
@@ -56,7 +61,7 @@
             <div id="modalView">
               <div id="keyInfo">
                 <p class="text">
-                  Download my public key to send encrypted messages to me
+                  Use my public key to send me encrypted messages
                 </p>
                 <a
                   :href="PreviewMode ? '' : `${genInfo.name}'s public key.asc`"
@@ -72,7 +77,7 @@
                     class="icon action"
                     v-html="require(`~/assets/icons/download.svg?include`)"
                   ></div>
-                  <span class="action">Download Public Key</span></a
+                  <span class="action">Download Key</span></a
                 >
               </div>
               <div id="copyView" ref="copyView">
@@ -94,7 +99,7 @@
               <div id="qrView" ref="qrView">
                 <div id="qr"></div>
                 <h2 class="text">Scan the QR Code</h2>
-                <p class="text">to view my Business Card on your device</p>
+                <p class="text">to view my Business Card on another device</p>
               </div>
             </div>
           </div>
@@ -102,9 +107,7 @@
             <img
               id="logo"
               v-if="images.logo.url"
-              :src="
-                PreviewMode ? images.logo.url : `./logo.${images.logo.format}`
-              "
+              :src="PreviewMode ? images.logo.url : `./logo.${images.logo.ext}`"
               alt="Logo"
             />
             <div
@@ -141,9 +144,7 @@
               <img
                 v-if="images.photo.url"
                 :src="
-                  PreviewMode
-                    ? images.photo.url
-                    : `./photo.${images.photo.format}`
+                  PreviewMode ? images.photo.url : `./photo.${images.photo.ext}`
                 "
                 alt="Photo"
               />
@@ -250,7 +251,7 @@
                       :src="
                         PreviewMode
                           ? item.dataURI
-                          : `./media/${getTitle(item.title)}.${item.format}`
+                          : `./media/${getTitle(item.title)}.${item.ext}`
                       "
                       alt="Product image"
                     />
@@ -390,14 +391,6 @@ export default {
         return css.match(/^font-family[^;]*/)[0]
       }
     },
-    getTrackingCode() {
-      let regex = /<script[^<]*<\/script>/g
-      let tracker = this.genInfo.tracker
-      if (regex.test(tracker)) {
-        let scripts = tracker.match(regex)
-        return scripts.length && scripts.join()
-      }
-    },
   },
   methods: {
     getTitle(e) {
@@ -543,7 +536,6 @@ export default {
     box-sizing: border-box;
   }
   #logo {
-    min-height: 6rem;
     max-height: 6rem;
     text-align: center;
     color: gray;
diff --git a/components/ProductCard.vue b/components/ProductCard.vue
index 4695a27..9a9b39b 100644
--- a/components/ProductCard.vue
+++ b/components/ProductCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex mt-2 mr-4">
+  <div class="flex items-center mt-2">
     <button
       class="p-1 m-2 flex-shrink-0 focus:outline-none drag cursor-move"
       tabindex="-1"
@@ -58,23 +58,12 @@
             placeholder="Product title"
           />
         </div>
-        <button
-          class="p-1 ml-2 flex-shrink-0 focus:outline-none rounded hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200"
-          @click="removeItem(i)"
-          aria-label="Remove product"
-          title="Remove product"
-        >
-          <div
-            class="w-6 h-6"
-            v-html="require(`~/assets/icons/x.svg?include`)"
-          ></div>
-        </button>
       </div>
       <textarea
         name="description"
         placeholder="Product description"
         class="pDescription block mt-2 px-4 py-3 w-full bg-black placeholder-gray-600 rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-500 resize-none hover:border-gray-500"
-        rows="3"
+        rows="2"
         v-model="item.description"
       ></textarea>
       <input
@@ -101,6 +90,17 @@
         />
       </div>
     </div>
+    <button
+      class="p-1 m-2 flex-shrink-0 focus:outline-none rounded hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200"
+      @click="removeItem(i)"
+      aria-label="Remove product"
+      title="Remove product"
+    >
+      <div
+        class="w-6 h-6"
+        v-html="require(`~/assets/icons/x.svg?include`)"
+      ></div>
+    </button>
   </div>
 </template>
 
@@ -134,24 +134,34 @@ export default {
         let mimetype = file.type
         this.dragOver = false
         if (file && mimetype.match(/image\/jpeg|image\/png/gi)) {
-          this.imageLoaded(file, i)
-        } else this.showAlert('Only jpeg and png files can be attached')
+          this.imageLoaded(file, i, mimetype)
+        } else
+          this.showAlert(
+            'Unsupported file format.\nOnly jpeg and png files can be attached.'
+          )
       } else this.dragOver = false
     },
-    imageLoaded(file, i) {
+    imageLoaded(file, i, mime) {
       let title = this.getFileName(file)
       let reader = new FileReader()
       reader.onload = (f) => {
         let dataURI = f.target.result
+        let ext = dataURI
+          .split(',')[0]
+          .split(':')[1]
+          .split('/')[1]
+          .match(/^\w+/g)[0]
         this.featured[this.index].content[i].image = {
           dataURI,
           file,
           type: 'image',
-          format: 'jpeg',
+          ext,
+          mime,
           title,
         }
         this.resizeImage(
           'product',
+          mime,
           this.index,
           this.featured[this.index].content.length - 1
         )
diff --git a/components/ProductShowcase.vue b/components/ProductShowcase.vue
index b466ba1..274fc75 100644
--- a/components/ProductShowcase.vue
+++ b/components/ProductShowcase.vue
@@ -6,7 +6,7 @@
         PreviewMode
           ? product.image.dataURI
           : `./media/${getTitle(product.image.title)}.${
-              product.image.format
+              product.image.ext
             }`
       "
       alt="Product image"
diff --git a/layouts/default.vue b/layouts/default.vue
index 88a6043..792f98c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,6 +3,11 @@
     <Nuxt />
   </div>
 </template>
+<script>
+export default {
+  transition: 'page',
+}
+</script>
 
 <style lang="scss">
 @font-face {
@@ -28,11 +33,68 @@ html {
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
 }
+
+.stepC {
+  margin-left: 0;
+  margin-right: 0;
+}
+#device {
+  border-radius: 1rem;
+  width: 100%;
+}
+.max-hd {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  max-height: 100vh;
+}
+.max-hd::-webkit-scrollbar {
+  display: none;
+}
+.theme-one {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.theme-one::-webkit-scrollbar {
+  display: none;
+}
+.footer {
+  display: flex;
+}
+.stepC.actions {
+  display: grid;
+  grid-gap: 1.5rem;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, minmax(3rem, auto));
+}
+.ghost {
+  opacity: 0.5;
+}
+.toggle-switch {
+  left: 0;
+  transition: left 0.2s ease;
+  &:checked {
+    left: calc(100% - 3rem);
+  }
+}
+
+// Responsive
+@media (min-width: 640px) {
+  .stepC {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+}
+@media (min-width: 768px) {
+  .max-hd {
+    max-height: 38rem;
+  }
+}
+
+// Transitions
 .drop-enter-active,
 .drop-leave-active {
   transition: transform 0.2s ease;
 }
-
 .drop-enter,
 .drop-leave-to {
   transform: translateY(-100%);
@@ -47,4 +109,19 @@ html {
   transform: translateY(-100%);
   opacity: 0;
 }
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.1s ease;
+}
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+}
+.list-enter-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.list-enter {
+  transform: translateY(0.5rem);
+  opacity: 0;
+}
 </style>
diff --git a/package-lock.json b/package-lock.json
index 02cc325..45427d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4302,6 +4302,11 @@
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
     },
+    "cropperjs": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.10.tgz",
+      "integrity": "sha512-Zlggv+unsBXVc7EQip6rnOqFnFpHOIc4f8HqzAj3RQNEUNjrCCJyE7OlT/V8S0lO2m4ytRoceTlgzEh1DNMU0Q=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
diff --git a/package.json b/package.json
index d8cc433..b025a51 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@caohenghu/vue-colorpicker": "^1.2.4",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/robots": "^2.4.2",
+    "cropperjs": "^1.5.10",
     "file-saver": "^2.0.5",
     "id3-parser": "^2.0.0",
     "jszip": "^3.6.0",
diff --git a/pages/index.vue b/pages/index.vue
index 61f1f63..86dc7f2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,8 +6,7 @@
   >
     <Modal
       v-if="content"
-      @click.native.self="content = null"
-      @scroll.native="content = null"
+      @click.native.self="clearContent"
       :content="content"
       :clearContent="clearContent"
     />
@@ -21,7 +20,7 @@
           v-html="require(`~/assets/icons/logo.svg?include`)"
         ></div>
         <button
-          class="p-3 mx-4 font-extrabold rounded focus:outline-none select-none"
+          class="p-3 mx-4 font-extrabold rounded tracking-wide focus:outline-none select-none"
           :class="showPreview ? 'bg-gray-700' : 'bg-green-600'"
           @click="!opening && togglePreview()"
         >
@@ -114,7 +113,7 @@
                 type="logo"
                 :resizeImage="resizeImage"
                 label="Attach brand logo"
-                description="recommended format: svg or png"
+                description="suggested format: svg, png or gif"
                 :showAlert="showAlert"
               />
               <Attachment
@@ -122,7 +121,7 @@
                 type="photo"
                 :resizeImage="resizeImage"
                 label="Attach photo"
-                description="recommended: a square photo"
+                description="suggested format: jpeg, png or gif"
                 :showAlert="showAlert"
               />
             </div>
@@ -168,7 +167,7 @@
                 :value="genInfo.desc"
                 @input="genInfo.desc = $event.target.value"
                 class="block mt-2 px-4 py-3 w-full bg-black rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 resize-none hover:border-gray-600"
-                rows="5"
+                rows="4"
               ></textarea>
             </div>
             <div class="stepC relative mt-6">
@@ -184,7 +183,7 @@
                 id="pgp-public-key"
                 v-model="genInfo.key"
                 class="block mt-2 px-4 py-3 w-full bg-black placeholder-gray-600 rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 resize-none hover:border-gray-600"
-                rows="5"
+                rows="4"
                 spellcheck="false"
                 placeholder="Paste PGP PUBLIC KEY BLOCK here"
               ></textarea>
@@ -212,16 +211,19 @@
           </div>
           <div id="step-3" class="mt-16">
             <h2 class="font-extrabold text-2xl">Primary actions</h2>
-            <Action
-              v-for="(item, index) in primaryActions"
-              :key="index"
-              name="primaryActions"
-              :type="primaryActions"
-              :item="item"
-              :index="index"
-              :buttonBg="colors.buttonBg.color"
-              :removeAction="removeAction"
-            />
+            <transition-group type="transition" name="list">
+              <Action
+                v-for="(item, index) in primaryActions"
+                :key="'item' + index"
+                name="primaryActions"
+                :type="primaryActions"
+                :item="item"
+                :index="index"
+                :buttonBg="colors.buttonBg.color"
+                :removeAction="removeAction"
+              />
+            </transition-group>
+
             <div class="stepC actions mt-6">
               <button
                 v-for="(action, index) in actions.primaryActions"
@@ -245,15 +247,17 @@
           </div>
           <div id="step-4" class="mt-16">
             <h2 class="font-extrabold text-2xl">Secondary actions</h2>
-            <Action
-              v-for="(item, index) in secondaryActions"
-              :key="index"
-              name="secondaryActions"
-              :type="secondaryActions"
-              :item="item"
-              :index="index"
-              :removeAction="removeAction"
-            />
+            <transition-group type="transition" name="list">
+              <Action
+                v-for="(item, index) in secondaryActions"
+                :key="'item' + index"
+                name="secondaryActions"
+                :type="secondaryActions"
+                :item="item"
+                :index="index"
+                :removeAction="removeAction"
+              />
+            </transition-group>
             <div class="stepC actions mt-6">
               <button
                 v-for="(action, index) in actions.secondaryActions"
@@ -275,16 +279,19 @@
           <div id="step-5" class="mt-16">
             <h2 class="font-extrabold text-2xl">Featured content</h2>
             <div class="stepC">
-              <Featured
-                v-for="(content, index) in featured"
-                :key="index"
-                :featured="featured"
-                :resizeImage="resizeImage"
-                :index="index"
-                label="Attach content"
-                mimetypes="image/jpeg, image/png, audio/mpeg, video/mp4, video/webm, application/pdf"
-                :showAlert="showAlert"
-              />
+              <transition-group type="transition" name="list">
+                <Featured
+                  v-for="(content, index) in featured"
+                  :key="'content' + index"
+                  :featured="featured"
+                  :resizeImage="resizeImage"
+                  :index="index"
+                  label="Attach content"
+                  mimetypes="image/jpeg, image/png, audio/mpeg, video/mp4, video/webm, application/pdf"
+                  :showAlert="showAlert"
+                />
+              </transition-group>
+
               <div class="flex mt-6">
                 <div class="flex flex-wrap items-center">
                   <button
@@ -300,9 +307,7 @@
                   <p class="ml-3 leading-none">Add section</p>
                 </div>
               </div>
-              <p
-                class="mt-6 border px-3 py-2 rounded border-gray-700 text-gray-400"
-              >
+              <p class="mt-6 border p-4 rounded border-gray-700 text-gray-400">
                 Supported media file formats: jpeg, png, mp3, mp4, webm and pdf
               </p>
             </div>
@@ -320,23 +325,23 @@
                   @click="footerCredit = !footerCredit"
                   @keypress.space.enter.prevent="footerCredit = !footerCredit"
                 >
-                  <input
-                    type="checkbox"
-                    name="toggle"
-                    aria-label="Toggle footer credit"
-                    id="toggle"
-                    v-model="footerCredit"
-                    class="toggle-switch absolute block w-10 h-10 m-1 rounded border-4 border-transparent appearance-none cursor-pointer transition-colors duration-200 focus:outline-none bg-white"
-                    tabindex="-1"
-                  />
+                  <transition name="slide">
+                    <input
+                      type="checkbox"
+                      name="toggle"
+                      aria-label="Toggle footer credit"
+                      id="toggle"
+                      v-model="footerCredit"
+                      class="toggle-switch absolute block w-10 h-10 m-1 rounded border-4 border-transparent appearance-none cursor-pointer transition-colors duration-200 focus:outline-none bg-white"
+                      tabindex="-1"
+                    />
+                  </transition>
                 </div>
                 <p>{{ footerCredit ? 'Yes, for sure!' : 'No, thanks' }}</p>
               </div>
-              <p
-                class="mt-6 border px-3 py-2 rounded border-gray-700 text-gray-400"
-              >
-                Footer credit lets others to use this Service. Help support this
-                project by enabling the footer credit.
+              <p class="mt-6 border p-4 rounded border-gray-700 text-gray-400">
+                Footer credit lets others to use this Service. You can support
+                this project by enabling the footer credit.
               </p>
             </div>
           </div>
@@ -349,7 +354,7 @@
                 T1
               </button>
               <button
-                class="w-12 h-12 rounded mt-3 mr-3 text-black bg-gray-700 font-extrabold focus:outline-none transition-colors duration-200"
+                class="w-12 h-12 rounded mt-3 mr-3 text-black bg-gray-700 font-extrabold focus:outline-none transition-colors duration-200 cursor-default"
               >
                 T2
               </button>
@@ -376,7 +381,7 @@
                 id="font-link"
                 v-model="genInfo.fontLink"
                 class="block mt-2 px-4 py-3 w-full bg-black placeholder-gray-600 rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 resize-none hover:border-gray-600"
-                rows="3"
+                rows="4"
                 spellcheck="false"
                 :placeholder="`Eg.: <link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap&quot; rel=&quot;stylesheet&quot;>`"
               ></textarea>
@@ -392,12 +397,10 @@
                 :placeholder="`Eg.: font-family: 'Poppins', sans-serif;`"
               />
             </div>
-            <p
-              class="mt-6 border px-3 py-2 rounded border-gray-700 text-gray-400"
-            >
-              Supports web fonts from services such as Google Fonts, Adobe
-              Typekit, etc. Make sure to get the embed link for both regular and
-              bold font variants from the same font family.
+            <p class="mt-6 border p-4 rounded border-gray-700 text-gray-400">
+              Supports services such as Google Fonts, Adobe Typekit, etc. Make
+              sure to get the embed link for both regular and bold font variants
+              from the same font family.
             </p>
           </div>
           <div id="step-10" class="mt-16">
@@ -407,15 +410,12 @@
                 id="pgp-public-key"
                 v-model="genInfo.tracker"
                 class="block mt-2 px-4 py-3 w-full bg-black placeholder-gray-600 rounded border border-transparent transition-colors duration-200 focus:outline-none focus:border-gray-600 resize-none hover:border-gray-600"
-                rows="5"
+                rows="4"
                 spellcheck="false"
                 placeholder="Paste tracking code here"
               ></textarea>
-              <p
-                class="mt-6 border px-3 py-2 rounded border-gray-700 text-gray-400"
-              >
-                You can add tracking code from service such as Matomo, Clicky,
-                Google Analytics etc.
+              <p class="mt-6 border p-4 rounded border-gray-700 text-gray-400">
+                Supports services such as Clicky, Matomo, Google Analytics etc.
               </p>
             </div>
           </div>
@@ -499,15 +499,16 @@ import Preview from '@/components/Preview'
 import Download from '@/components/Download'
 import Help from '@/components/Help'
 import Footer from '@/components/Footer'
+import Cropper from '@/components/Cropper'
 
 import Vcard from '@/components/Vcard'
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
-// let minify = require('html-minifier').minify
 import QRCode from '!!raw-loader!~/static/qrcode.min.js'
 import Theme1 from '!!raw-loader!~/assets/styles/T1.min.css'
 export default {
   components: {
+    Cropper,
     Modal,
     Attachment,
     Action,
@@ -541,13 +542,15 @@ export default {
         logo: {
           url: null,
           blob: null,
-          format: null,
+          ext: null,
+          mime: null,
           resized: null,
         },
         photo: {
           url: null,
           blob: null,
-          format: null,
+          ext: null,
+          mime: null,
           resized: null,
         },
       },
@@ -1004,7 +1007,7 @@ export default {
         `${this.genInfo.name}'s public key.asc`
       )
     },
-    async resizeImage(type, index1, index2) {
+    async resizeImage(type, mime, index1, index2) {
       let vm = this
       let reader = new FileReader()
       let file
@@ -1017,7 +1020,7 @@ export default {
           file = await this.featured[index1].content[index2].image.file
         }
       } else {
-        file = this.images[type].blob
+        file = await this.images[type].blob
       }
       let canvas = document.createElement('canvas')
       let ctx = canvas.getContext('2d')
@@ -1051,8 +1054,10 @@ export default {
           }
           ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
           canvas.toBlob(
-            function (blob) {
-              let image = new File([blob], type)
+            (blob) => {
+              let image = new File([blob], type, {
+                type: mime,
+              })
               if (index2 >= 0) {
                 if (type == 'image') {
                   vm.featured[index1].content[index2].file = image
@@ -1065,13 +1070,24 @@ export default {
                 vm.images[type].resized = image
               }
             },
-            'image/jpeg',
+            mime,
             0.8
           )
         }
       }
       reader.readAsDataURL(file)
     },
+    getTrackingCode() {
+      let regex = /<script[^<]*<\/script>/g
+      let tracker = this.genInfo.tracker
+      if (regex.test(tracker)) {
+        let scripts = tracker.match(regex)
+        let temp = document.createElement('div')
+        temp.innerHTML = tracker
+        return scripts.length && temp
+      }
+      return false
+    },
     downloadPackage() {
       if (this.downloadChecked) {
         this.PreviewMode = false
@@ -1080,22 +1096,36 @@ export default {
             this.$refs.html.$refs.html.outerHTML,
             'text/html'
           )
+
+          // Inject stylesheets
           let styleLink = document.createElement('link')
           styleLink.rel = 'stylesheet'
           styleLink.href = './style.min.css'
           el.querySelector('head').appendChild(styleLink)
+
+          // Inject qrcode script
           let qrcode = document.createElement('script')
           qrcode.src = './qrcode.min.js'
           el.querySelector('body').appendChild(qrcode)
+
+          // Inject general script
           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)
+
+          // Inject media script
           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)
+
+          // Inject tracking scripts
+          let tracker = this.getTrackingCode()
+          while (tracker.firstChild) el.head.appendChild(tracker.firstChild)
+
+          // Create blobs
           let html = new Blob(
             [`<!DOCTYPE html>${el.documentElement.outerHTML}`],
             {
@@ -1119,70 +1149,74 @@ export default {
           let qrScript = new Blob([QRCode], {
             type: 'application/javascript',
           })
-          let name = this.genInfo.name
+
+          // Prepare files
           let username = this.username
           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('Hosting-Guide.html', guide)
-          if (this.images.logo.url) {
-            zip.folder(username).file(
-              `logo.${this.images.logo.format}`,
 
-              this.images.logo.format == 'svg'
-                ? this.images.logo.blob
-                : this.images.logo.resized
-            )
-          }
-          if (this.images.photo.url) {
-            zip
-              .folder(username)
-              .file(
-                `photo.${this.images.photo.format}`,
-                this.images.photo.resized
-              )
+          // Image attachments
+          for (const key in this.images) {
+            if (this.images[key].url) {
+              zip
+                .folder(username)
+                .file(
+                  `${key}.${this.images[key].ext}`,
+                  this.images[key].resized
+                )
+            }
           }
+
+          // Featured content
           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) => {
+          if (hasFeaturedContent) {
+            this.featured.forEach((item) => {
+              item.content.forEach((item) => {
                 if (item.contentType == 'media') {
                   zip
                     .folder(username)
                     .folder('media')
-                    .file(
-                      `${this.getTitle(item.title)}.${item.format}`,
-                      item.file
-                    )
+                    .file(`${this.getTitle(item.title)}.${item.ext}`, item.file)
                   if (item.type.match(/music|document/gi)) {
-                    zip
-                      .folder(username)
-                      .folder('media')
-                      .file(
-                        `${this.getTitle(item.title)}.${item.coverFormat}`,
-                        item.cover
-                      )
+                    if (!item.info) {
+                      zip
+                        .folder(username)
+                        .folder('media')
+                        .file(
+                          `${this.getTitle(item.title)}.${item.coverExt}`,
+                          item.cover
+                        )
+                    }
                   }
                 } else if (item.contentType == 'product' && item.image) {
                   zip
                     .folder(username)
                     .folder('media')
                     .file(
-                      `${this.getTitle(item.image.title)}.${item.image.format}`,
+                      `${this.getTitle(item.image.title)}.${item.image.ext}`,
                       item.image.file
                     )
                 }
               })
             })
           }
+
+          //  Public key
+          let name = this.genInfo.name
           if (this.pubKeyIsValid) {
             zip
               .folder(username)
-              .file(`${this.genInfo.name}'s public key.asc`, this.genInfo.key)
+              .file(`${name}'s public key.asc`, this.genInfo.key)
           }
+
+          // VCARD
           zip.folder(username).file(`${username}.vcf`, vCard)
+
+          // Final ZIP file
           zip
             .generateAsync({
               type: 'blob',
@@ -1190,9 +1224,6 @@ export default {
             .then(function (zip) {
               saveAs(zip, `${name}'s Digital Business Card.zip`)
             })
-          this.showAlert(
-            'Your Download Has Been Started!\n\nExtract the downloaded ZIP file and follow the <NuxtLink to="/hosting-guide" class="cursor-pointer underline font-extrabold text-green-600 hover:text-green-500 transition-colors duration-200">Hosting&nbsp;Guide</NuxtLink> to get your digital business card online.\n\nIf you find this service valuable to you or your business, please consider donating.\n<a class="inline-block font-extrabold tracking-wide leading-none flex-shrink-0 p-3  text-white bg-green-600 rounded hover:bg-green-500 focus:bg-green-500 transition-colors duration-200 mt-4" href="https://www.vishnuraghav.com/donate/" target="_blank">Donate</a>'
-          )
           this.PreviewMode = true
         }, 250)
       }
@@ -1200,6 +1231,9 @@ export default {
   },
   mounted() {
     window.addEventListener('scroll', this.checkView)
+    // window.onbeforeunload = function () {
+    //   return 'Your work will be lost.'
+    // }
   },
 }
 </script>
\ No newline at end of file
diff --git a/static/demo/Digital Business Card Generator's public key.asc b/static/demo/EnBizCard's public key.asc
similarity index 100%
rename from static/demo/Digital Business Card Generator's public key.asc
rename to static/demo/EnBizCard's public key.asc
diff --git a/static/demo/digitalbusinesscardgenerator.vcf b/static/demo/digitalbusinesscardgenerator.vcf
deleted file mode 100644
index dc8cb2a..0000000
--- a/static/demo/digitalbusinesscardgenerator.vcf
+++ /dev/null
@@ -1,13 +0,0 @@
-BEGIN:VCARD
-VERSION:3.0
-N:Digital Business Card Generator;;;;
-FN: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-135137
-END:VCARD
\ No newline at end of file
diff --git a/static/demo/enbizcard.vcf b/static/demo/enbizcard.vcf
new file mode 100644
index 0000000..e0345e0
--- /dev/null
+++ b/static/demo/enbizcard.vcf
@@ -0,0 +1,13 @@
+BEGIN:VCARD
+VERSION:3.0
+N:EnBizCard;;;;
+FN:EnBizCard
+ORG:EnBizCard - An Open-Source Digital Business Card Generator
+TITLE:An Open-Source Digital Business Card Generator 
+TEL;TYPE=work,pref:9876543210
+TEL;TYPE=work:
+EMAIL;TYPE=work:apps@vishnuraghav.com
+URL:https://enbizcard.vercel.app/
+KEY:OPENPGP4FPR:E62C45D676568839D9400FAE67360EC2DEB07BB7
+UID:enbizcard-857131
+END:VCARD
\ No newline at end of file
diff --git a/static/demo/featured/sea_side.mp4 b/static/demo/featured/sea_side.mp4
deleted file mode 100644
index b986314..0000000
Binary files a/static/demo/featured/sea_side.mp4 and /dev/null differ
diff --git a/static/demo/featured/shipping_lanes.jpeg b/static/demo/featured/shipping_lanes.jpeg
deleted file mode 100644
index fdfa18a..0000000
Binary files a/static/demo/featured/shipping_lanes.jpeg and /dev/null differ
diff --git a/static/demo/featured/shipping_lanes.mp3 b/static/demo/featured/shipping_lanes.mp3
deleted file mode 100644
index 8f5e334..0000000
Binary files a/static/demo/featured/shipping_lanes.mp3 and /dev/null differ
diff --git a/static/demo/index.html b/static/demo/index.html
index 97c7ff4..11a7131 100644
--- a/static/demo/index.html
+++ b/static/demo/index.html
@@ -1,87 +1,68 @@
-<!DOCTYPE html><html style="background-color: rgb(56, 161, 105);" lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="Digital Business Card Generator"> <meta name="url" content="https://dbizcard.vercel.app/"> <meta name="designer" content="Vishnu Raghav B"> <script>
-        'http' == window.location.href.substr(0, 4) &&
-          '/' != window.location.href.slice(-1) &&
-          window.location.replace(window.location.href + '/')
-      </script> <title>Digital Business Card Generator's Digital Business Card</title> <style>
-        input[type='range']::-moz-range-track {
-          background: none;
-        }
-        input[type='range']::-moz-range-thumb {
-          -moz-appearance: none;
-          width: 3rem;
-          height: 3rem;
-          border-radius: 100%;
-          border: none;
-          background: #38a169;
-          z-index: 3;
-          cursor: pointer;
-        }
-        input[type='range']::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          width: 3rem;
-          height: 3rem;
-          border-radius: 100%;
-          border: none;
-          background: #38a169;
-          z-index: 3;
-          cursor: pointer;
-        }
-        .closeBtnColor{
-          filter:invert(1)
-        }
-        .topAction{
-          false
-        }
-        .action{
-          color:#fff;
-          
-        }
-        .card{
-          false
-        }
-        .text{
-          text-align: center;
-          color:#000 !important
-        }
-      </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="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="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="desc text">
-            Stop printing. Start hosting!
-            ⚡
-            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="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="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="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="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 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><div class="attachments"><h2 class="section text">Music Releases</h2> <div class="content music" style="background-color: rgb(34, 34, 34);"><!----> </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">
+<!DOCTYPE html><html style="background-color: rgb(255, 255, 255);" lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="EnBizCard - An Open-Source Digital Business Card Generator"> <meta name="url" content="https://enbizcard.vercel.app/"> <meta name="designer" content="Vishnu Raghav"> <meta property="og:title" content="EnBizCard's Digital Business Card"> <meta property="twitter:title" content="EnBizCard's Digital Business Card"> <script>
+          "http"==window.location.href.substr(0,4)&&"/"!=window.location.href.slice(-1)&&window.location.replace(window.location.href+"/");
+        </script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;800&amp;display=swap" rel="stylesheet"> <title>EnBizCard's Digital Business Card</title> <style>
+          #body{ font-family: sans-serif; } input[type='range']::-moz-range-track { background: none; } input[type='range']::-moz-range-thumb { -moz-appearance: none; width: 3rem; height: 3rem; border-radius: 100%; border: none; background: #059669; z-index: 3; cursor: pointer; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 3rem; border-radius: 100%; border: none; background: #059669; z-index: 3; cursor: pointer; } .closeBtnColor{ false } .topAction{ filter:invert(1) } .action{ color:#fff;  } .card{ false } .text{ text-align: center;line-height: 1.5;color:#fff !important }
+        </style> <style>
+          #body{
+          font-family: 'Nunito', sans-serif
+          }
+        </style><link rel="stylesheet" href="./style.min.css"><script src="https://getinsights.io/js/insights.js"></script>
+<script>
+insights.init('jXInThyXOQTzVEaa');
+insights.trackPages();
+</script></head> <body id="body"><div id="modal" style="background-color: rgb(31, 41, 55); 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">
+                Use my public key to send me encrypted messages
+              </p> <a href="EnBizCard's public key.asc" download="" target="_blank" id="dlKey" tabindex="-1" style="background-color: rgb(5, 150, 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 Key</span></a></div> <div id="copyView"><p class="text">
+                Copy and send the URL to share my Business Card
+              </p> <a id="copyURL" style="background-color: rgb(5, 150, 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 the QR Code</h2> <p class="text">to view my Business Card on another device</p></div></div></div> <header><img id="logo" src="./logo.gif" alt="Logo"> <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(31, 41, 55);"><div id="profile"><img src="./photo.png" alt="Photo"> <div id="info"><p class="name text">
+                EnBizCard
+              </p> <p class="jobtitle text">
+                An Open-Source Digital Business Card Generator 
+              </p></div></div> <p class="desc text">
+            EnBizCard helps you create beautiful, responsive HTML-based digital business cards that can be hosted on your website.
+          </p> <div class="actions"><div class="actionsC"><div class="actionBtn"><a href="tel:9876543210" target="_blank" rel="noopener noreferrer" aria-label="call" style="background-color: rgb(5, 150, 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="actionsC"><div class="actionBtn"><a href="https://t.me/enbizcard" target="_blank" rel="noopener noreferrer" aria-label="telegram" style="background-color: rgb(5, 150, 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="actionsC"><div class="actionBtn"><a href="mailto:apps@vishnuraghav.com" target="_blank" rel="noopener noreferrer" aria-label="email" style="background-color: rgb(5, 150, 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="actionsC"><div class="actionBtn"><a href="https://enbizcard.vercel.app/" target="_blank" rel="noopener noreferrer" aria-label="website" style="background-color: rgb(5, 150, 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 class="actionsC"><div class="actionBtn"><a href="https://www.vishnuraghav.com/" target="_blank" rel="noopener noreferrer" aria-label="store" style="background-color: rgb(5, 150, 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="enbizcard.vcf" download="" target="_blank" aria-label="Add to Contacts" style="background-color: rgb(5, 150, 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 secondary"><div class="actionsC"><div class="actionBtn secBtn"><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="instagram" style="background-color: rgb(64, 93, 230);"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><path d="M11.999 7.377a4.623 4.623 0 100 9.248 4.623 4.623 0 000-9.248zm0 7.627a3.004 3.004 0 110-6.008 3.004 3.004 0 010 6.008z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533 6.111A4.605 4.605 0 0017.9 3.479a6.606 6.606 0 00-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 00-2.184.42 4.6 4.6 0 00-2.633 2.632 6.585 6.585 0 00-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 002.634 2.632 6.584 6.584 0 002.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 002.186-.419 4.613 4.613 0 002.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 00-.421-2.217zm-1.218 9.532a5.043 5.043 0 01-.311 1.688 2.987 2.987 0 01-1.712 1.711 4.985 4.985 0 01-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 01-1.669-.311 2.985 2.985 0 01-1.719-1.711 5.08 5.08 0 01-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 01.311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 011.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 011.67.311 2.991 2.991 0 011.712 1.712 5.08 5.08 0 01.311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a href="https://pixelfed.org/" 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 href="https://twitter.com/" target="_blank" rel="noopener noreferrer" aria-label="twitter" style="background-color: rgb(29, 161, 242);"><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"><path d="M19.981 8.497c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 005.001-1.721 4.036 4.036 0 01-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 01-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 01-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 008.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 014.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 002.556-.973 4.02 4.02 0 01-1.771 2.22A8.073 8.073 0 0022 6.414a8.645 8.645 0 01-2.019 2.083z" fill="#fff" fill-rule="nonzero"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a href="https://mastodon.social/" 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 href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer" aria-label="youtube" style="background-color: rgb(255, 0, 0);"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><path d="M21.593 7.203a2.506 2.506 0 00-1.762-1.766C18.265 5.007 12 5 12 5s-6.264-.007-7.831.404a2.56 2.56 0 00-1.766 1.778c-.413 1.566-.417 4.814-.417 4.814s-.004 3.264.406 4.814c.23.857.905 1.534 1.763 1.765 1.582.43 7.83.437 7.83.437s6.265.007 7.831-.403a2.515 2.515 0 001.767-1.763c.414-1.565.417-4.812.417-4.812s.02-3.265-.407-4.831zM9.996 15.005l.005-6 5.207 3.005-5.212 2.995z"></path></svg></div></a></div></div><div class="actionsC"><div class="actionBtn secBtn"><a href="https://joinpeertube.org/" 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 href="https://github.com/vishnuraghavb/EnBizCard" target="_blank" rel="noopener noreferrer" aria-label="github" style="background-color: rgb(51, 51, 51);"><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><div class="content image" style="background-color: rgb(0, 0, 0);"><div><img src="./media/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><div><div class="content image" style="background-color: rgb(0, 0, 0);"><div><img src="./media/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><div class="attachments"><h2 class="section text">Music Releases</h2> <div><div class="content music" style="background-color: rgb(0, 0, 0);"><!----> <div class="mediaC"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto; display: none;" controls="controls"><source src="./media/over_the_water,_humans_gather.mp3"></video> <img src="./media/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(5, 150, 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><div class="content embedded"><iframe src="https://audiomack.com/embed/album/adhil-1/enthiran-20?background=1" allowfullscreen="allowfullscreen" frameborder="0"></iframe></div></div></div><div class="attachments"><h2 class="section text">Video Gallery</h2> <div><div class="content video" style="background-color: rgb(0, 0, 0);"><!----> <div class="mediaC"><video controlslist="nodownload nofullscreen noremoteplayback" disablepictureinpicture="" preload="metadata" class="source" style="pointer-events: auto;" controls="controls"><source src="./media/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></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">
+    </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(5, 150, 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><div class="content embedded"><iframe src="https://www.youtube-nocookie.com/embed/IUN664s7N-c" allowfullscreen="allowfullscreen" frameborder="0"></iframe></div></div></div><div class="attachments"><h2 class="section text">Documents</h2> <div><div class="content document" style="background-color: rgb(0, 0, 0);"><!----> <!----> <div class="mediaC"><div><img src="./media/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" frameborder="0"></iframe></div><div class="content embedded"><iframe src="https://player.vimeo.com/video/182932029" allowfullscreen="allowfullscreen" 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" 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
+    </p> <p class="mediaInfo card">PDF - 386.96 KB</p> <div class="docDl"><a href="./media/business_card_-_wikipedia.pdf" download="" target="_blank" class="dlBtn" style="background-color: rgb(5, 150, 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><div class="attachments"><h2 class="section text">Poem - Once in a Lifetime</h2> <div><div class="content text" style="background-color: rgb(0, 0, 0);"><p class="textC card">Once in a lifetime you find someone special,
+
+Your lives intermingle and somehow you know.
+
+This is the beginning of all you have longed for,
+
+A love you can build on, a love that will grow.
+
+Once in a lifetime to those who are lucky,
+
+A miracle happens and dreams all come true.
+
+I know it can happen, it happened to me,
+For I've found my "once in a lifetime" with you.</p></div></div></div><div class="attachments"><h2 class="section text">Geolocation</h2> <div><div class="content embedded"><iframe src="https://www.openstreetmap.org/export/embed.html?bbox=76.71752929687501%2C10.839375596102927%2C77.12230682373048%2C11.16391871056715&amp;amp;layer=mapnik" allowfullscreen="allowfullscreen" frameborder="0"></iframe></div></div></div><div class="attachments"><h2 class="section text">Product Showcase</h2> <div><div class="content" style="background-color: rgb(0, 0, 0);"><img src="./media/photo.png" alt="Product image"> <div class="controls prodInfo"><p class="title card">
+      EnBizCard 
+    </p> <p class="desc card">
+      by Vishnu Raghav
+    </p> <p class="price card">
+      Free Forever 
+    </p> <a target="_blank" href="https://enbizcard.vercel.app/" class="label" style="background-color: rgb(5, 150, 105); line-height: 1.5rem;"><p class="action">Create your own</p></a></div></div></div><div><div class="content" style="background-color: rgb(0, 0, 0);"><!----> <div class="controls prodInfo"><p class="title card">
+      Please Donate
+    </p> <p class="desc card">
+      If you find this service valuable to you or your business, please consider donating.
+    </p> <!----> <a target="_blank" href="https://www.vishnuraghav.com/donate/" class="label" style="background-color: rgb(5, 150, 105); line-height: 1.5rem;"><p class="action">Donate</p></a></div></div></div></div></main> <footer class="text" style="background-color: rgb(31, 41, 55);">
+          Created with
+          <a href="https://enbizcard.vercel.app/" target="_blank" rel="noopener noreferrer" class="text">EnBizCard</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.gif b/static/demo/logo.gif
new file mode 100644
index 0000000..978a9dc
Binary files /dev/null and b/static/demo/logo.gif differ
diff --git a/static/demo/featured/business_card_-_wikipedia.jpeg b/static/demo/media/business_card_-_wikipedia.jpeg
similarity index 100%
rename from static/demo/featured/business_card_-_wikipedia.jpeg
rename to static/demo/media/business_card_-_wikipedia.jpeg
diff --git a/static/demo/featured/business_card_-_wikipedia.pdf b/static/demo/media/business_card_-_wikipedia.pdf
similarity index 100%
rename from static/demo/featured/business_card_-_wikipedia.pdf
rename to static/demo/media/business_card_-_wikipedia.pdf
diff --git a/static/demo/featured/butterflies.mp4 b/static/demo/media/butterflies.mp4
similarity index 100%
rename from static/demo/featured/butterflies.mp4
rename to static/demo/media/butterflies.mp4
diff --git a/static/demo/media/over_the_water,_humans_gather.jpeg b/static/demo/media/over_the_water,_humans_gather.jpeg
new file mode 100644
index 0000000..3c05776
Binary files /dev/null and b/static/demo/media/over_the_water,_humans_gather.jpeg differ
diff --git a/static/demo/media/over_the_water,_humans_gather.mp3 b/static/demo/media/over_the_water,_humans_gather.mp3
new file mode 100644
index 0000000..0b0e4c2
Binary files /dev/null and b/static/demo/media/over_the_water,_humans_gather.mp3 differ
diff --git a/static/demo/media/photo.png b/static/demo/media/photo.png
new file mode 100644
index 0000000..632786d
Binary files /dev/null and b/static/demo/media/photo.png differ
diff --git "a/static/demo/featured/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg" "b/static/demo/media/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg"
similarity index 100%
rename from "static/demo/featured/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg"
rename to "static/demo/media/photo_by_andreas_g\303\274cklhorn_on_unsplash.jpeg"
diff --git a/static/demo/media/photo_by_erol_ahmed_on_unsplash.jpeg b/static/demo/media/photo_by_erol_ahmed_on_unsplash.jpeg
new file mode 100644
index 0000000..b8def01
Binary files /dev/null and b/static/demo/media/photo_by_erol_ahmed_on_unsplash.jpeg differ
diff --git a/static/demo/photo.png b/static/demo/photo.png
index 00fdfb3..65769e7 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
deleted file mode 100644
index 2218c7c..0000000
Binary files a/static/demo/products/l456@2x.jpeg and /dev/null differ
diff --git a/static/demo/style.min.css b/static/demo/style.min.css
index 0e366e8..27a5b2a 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:#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}
+body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;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 2rem;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;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView h2,#qrView p{margin:0 2rem 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}#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;margin-top:-4.5rem}#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:bold;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc,.textC{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.textC{font-size:1rem;margin:2rem 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}.secondary{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:bold;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:bold}.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:bold;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}footer a{text-decoration:underline;color:inherit}