diff --git a/src/app.css b/src/app.css
index 40fd199..6c2ab5c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,90 +1,79 @@
-@import '@fontsource/fira-mono';
+@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@300;400;700&display=swap');
 * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-family: 'Arial', sans-serif;
 }
 
-:root {
-    font-family: Ubuntu, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    --font-mono: 'Fira Mono', monospace;
-    --pure-white: #ffffff;
-    --primary-color: #b9c6d2;
-    --secondary-color: #d0dde9;
-    --tertiary-color: #edf0f8;
-    --accent-color: #ff3e00;
-    --heading-color: rgba(0, 0, 0, 0.7);
-    --text-color: #444444;
-    --background-without-opacity: rgba(255, 255, 255, 0.7);
-    --column-width: 42rem;
-    --column-margin-top: 4rem;
+html {
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
-body {
-    min-height: 100vh;
-    margin: 0;
+:root {
+  font-family: Arial, sans-serif;
 }
 
-
-p {
-    line-height: 1.5;
+body {
+  min-height: 100vh;
+  margin: 0;
 }
 
 ul,ol {
-margin-left: 1rem;
+  margin-left: 1rem;
 }
 
 
 /* Quill css */
 
 /*!
- *  * Quill Editor v1.3.6
- *   * https://quilljs.com/
- *    * Copyright (c) 2014, Jason Chen
- *     * Copyright (c) 2013, salesforce.com
- *      */
+*  * Quill Editor v1.3.6
+*   * https://quilljs.com/
+*    * Copyright (c) 2014, Jason Chen
+*     * Copyright (c) 2013, salesforce.com
+*      */
 .ql-container {
-    box-sizing: border-box;
-    font-family: Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    height: 100%;
-    margin: 0px;
-    position: relative;
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
 }
 .ql-container.ql-disabled .ql-tooltip {
-    visibility: hidden;
+  visibility: hidden;
 }
 .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
-    pointer-events: none;
+  pointer-events: none;
 }
 .ql-clipboard {
-    left: -100000px;
-    height: 1px;
-    overflow-y: hidden;
-    position: absolute;
-    top: 50%;
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
 }
 .ql-clipboard p {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 .ql-editor {
-    min-height: 8rem;
-    box-sizing: border-box;
-    line-height: 1.42;
-    height: 100%;
-    outline: none;
-    overflow-y: auto;
-    padding: 12px 15px;
-    tab-size: 4;
-    -moz-tab-size: 4;
-    text-align: left;
-    white-space: pre-wrap;
-    word-wrap: break-word;
+  min-height: 8rem;
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 .ql-editor > * {
-    cursor: text;
+  cursor: text;
 }
 .ql-editor p,
 .ql-editor ol,
@@ -97,374 +86,374 @@ margin-left: 1rem;
 .ql-editor h4,
 .ql-editor h5,
 .ql-editor h6 {
-    margin: 0;
-    padding: 0;
-    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol,
 .ql-editor ul {
-    padding-left: 1.5em;
+  padding-left: 1.5em;
 }
 .ql-editor ol > li,
 .ql-editor ul > li {
-    list-style-type: none;
+  list-style-type: none;
 }
 .ql-editor ul > li::before {
-    content: '\2022';
+  content: '\2022';
 }
 .ql-editor ul[data-checked=true],
 .ql-editor ul[data-checked=false] {
-    pointer-events: none;
+  pointer-events: none;
 }
 .ql-editor ul[data-checked=true] > li *,
 .ql-editor ul[data-checked=false] > li * {
-    pointer-events: all;
+  pointer-events: all;
 }
 .ql-editor ul[data-checked=true] > li::before,
 .ql-editor ul[data-checked=false] > li::before {
-    color: #777;
-    cursor: pointer;
-    pointer-events: all;
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
 }
 .ql-editor ul[data-checked=true] > li::before {
-    content: '\2611';
+  content: '\2611';
 }
 .ql-editor ul[data-checked=false] > li::before {
-    content: '\2610';
+  content: '\2610';
 }
 .ql-editor li::before {
-    display: inline-block;
-    white-space: nowrap;
-    width: 1.2em;
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
 }
 .ql-editor li:not(.ql-direction-rtl)::before {
-    margin-left: -1.5em;
-    margin-right: 0.3em;
-    text-align: right;
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
 }
 .ql-editor li.ql-direction-rtl::before {
-    margin-left: 0.3em;
-    margin-right: -1.5em;
+  margin-left: 0.3em;
+  margin-right: -1.5em;
 }
 .ql-editor ol li:not(.ql-direction-rtl),
 .ql-editor ul li:not(.ql-direction-rtl) {
-    padding-left: 1.5em;
+  padding-left: 1.5em;
 }
 .ql-editor ol li.ql-direction-rtl,
 .ql-editor ul li.ql-direction-rtl {
-    padding-right: 1.5em;
+  padding-right: 1.5em;
 }
 .ql-editor ol li {
-    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-    counter-increment: list-0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
 }
 .ql-editor ol li:before {
-    content: counter(list-0, decimal) '. ';
+  content: counter(list-0, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-1 {
-    counter-increment: list-1;
+  counter-increment: list-1;
 }
 .ql-editor ol li.ql-indent-1:before {
-    content: counter(list-1, lower-alpha) '. ';
+  content: counter(list-1, lower-alpha) '. ';
 }
 .ql-editor ol li.ql-indent-1 {
-    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-2 {
-    counter-increment: list-2;
+  counter-increment: list-2;
 }
 .ql-editor ol li.ql-indent-2:before {
-    content: counter(list-2, lower-roman) '. ';
+  content: counter(list-2, lower-roman) '. ';
 }
 .ql-editor ol li.ql-indent-2 {
-    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-3 {
-    counter-increment: list-3;
+  counter-increment: list-3;
 }
 .ql-editor ol li.ql-indent-3:before {
-    content: counter(list-3, decimal) '. ';
+  content: counter(list-3, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-3 {
-    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-4 {
-    counter-increment: list-4;
+  counter-increment: list-4;
 }
 .ql-editor ol li.ql-indent-4:before {
-    content: counter(list-4, lower-alpha) '. ';
+  content: counter(list-4, lower-alpha) '. ';
 }
 .ql-editor ol li.ql-indent-4 {
-    counter-reset: list-5 list-6 list-7 list-8 list-9;
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-5 {
-    counter-increment: list-5;
+  counter-increment: list-5;
 }
 .ql-editor ol li.ql-indent-5:before {
-    content: counter(list-5, lower-roman) '. ';
+  content: counter(list-5, lower-roman) '. ';
 }
 .ql-editor ol li.ql-indent-5 {
-    counter-reset: list-6 list-7 list-8 list-9;
+  counter-reset: list-6 list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-6 {
-    counter-increment: list-6;
+  counter-increment: list-6;
 }
 .ql-editor ol li.ql-indent-6:before {
-    content: counter(list-6, decimal) '. ';
+  content: counter(list-6, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-6 {
-    counter-reset: list-7 list-8 list-9;
+  counter-reset: list-7 list-8 list-9;
 }
 .ql-editor ol li.ql-indent-7 {
-    counter-increment: list-7;
+  counter-increment: list-7;
 }
 .ql-editor ol li.ql-indent-7:before {
-    content: counter(list-7, lower-alpha) '. ';
+  content: counter(list-7, lower-alpha) '. ';
 }
 .ql-editor ol li.ql-indent-7 {
-    counter-reset: list-8 list-9;
+  counter-reset: list-8 list-9;
 }
 .ql-editor ol li.ql-indent-8 {
-    counter-increment: list-8;
+  counter-increment: list-8;
 }
 .ql-editor ol li.ql-indent-8:before {
-    content: counter(list-8, lower-roman) '. ';
+  content: counter(list-8, lower-roman) '. ';
 }
 .ql-editor ol li.ql-indent-8 {
-    counter-reset: list-9;
+  counter-reset: list-9;
 }
 .ql-editor ol li.ql-indent-9 {
-    counter-increment: list-9;
+  counter-increment: list-9;
 }
 .ql-editor ol li.ql-indent-9:before {
-    content: counter(list-9, decimal) '. ';
+  content: counter(list-9, decimal) '. ';
 }
 .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
-    padding-left: 3em;
+  padding-left: 3em;
 }
 .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
-    padding-left: 4.5em;
+  padding-left: 4.5em;
 }
 .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
-    padding-right: 3em;
+  padding-right: 3em;
 }
 .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
-    padding-right: 4.5em;
+  padding-right: 4.5em;
 }
 .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
-    padding-left: 6em;
+  padding-left: 6em;
 }
 .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
-    padding-left: 7.5em;
+  padding-left: 7.5em;
 }
 .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
-    padding-right: 6em;
+  padding-right: 6em;
 }
 .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
-    padding-right: 7.5em;
+  padding-right: 7.5em;
 }
 .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
-    padding-left: 9em;
+  padding-left: 9em;
 }
 .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
-    padding-left: 10.5em;
+  padding-left: 10.5em;
 }
 .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
-    padding-right: 9em;
+  padding-right: 9em;
 }
 .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
-    padding-right: 10.5em;
+  padding-right: 10.5em;
 }
 .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
-    padding-left: 12em;
+  padding-left: 12em;
 }
 .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
-    padding-left: 13.5em;
+  padding-left: 13.5em;
 }
 .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
-    padding-right: 12em;
+  padding-right: 12em;
 }
 .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
-    padding-right: 13.5em;
+  padding-right: 13.5em;
 }
 .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
-    padding-left: 15em;
+  padding-left: 15em;
 }
 .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
-    padding-left: 16.5em;
+  padding-left: 16.5em;
 }
 .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
-    padding-right: 15em;
+  padding-right: 15em;
 }
 .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
-    padding-right: 16.5em;
+  padding-right: 16.5em;
 }
 .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
-    padding-left: 18em;
+  padding-left: 18em;
 }
 .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
-    padding-left: 19.5em;
+  padding-left: 19.5em;
 }
 .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
-    padding-right: 18em;
+  padding-right: 18em;
 }
 .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
-    padding-right: 19.5em;
+  padding-right: 19.5em;
 }
 .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
-    padding-left: 21em;
+  padding-left: 21em;
 }
 .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
-    padding-left: 22.5em;
+  padding-left: 22.5em;
 }
 .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
-    padding-right: 21em;
+  padding-right: 21em;
 }
 .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
-    padding-right: 22.5em;
+  padding-right: 22.5em;
 }
 .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
-    padding-left: 24em;
+  padding-left: 24em;
 }
 .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
-    padding-left: 25.5em;
+  padding-left: 25.5em;
 }
 .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
-    padding-right: 24em;
+  padding-right: 24em;
 }
 .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
-    padding-right: 25.5em;
+  padding-right: 25.5em;
 }
 .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
-    padding-left: 27em;
+  padding-left: 27em;
 }
 .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
-    padding-left: 28.5em;
+  padding-left: 28.5em;
 }
 .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
-    padding-right: 27em;
+  padding-right: 27em;
 }
 .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
-    padding-right: 28.5em;
+  padding-right: 28.5em;
 }
 .ql-editor .ql-video {
-    display: block;
-    max-width: 100%;
+  display: block;
+  max-width: 100%;
 }
 .ql-editor .ql-video.ql-align-center {
-    margin: 0 auto;
+  margin: 0 auto;
 }
 .ql-editor .ql-video.ql-align-right {
-    margin: 0 0 0 auto;
+  margin: 0 0 0 auto;
 }
 .ql-editor .ql-bg-black {
-    background-color: #000;
+  background-color: #000;
 }
 .ql-editor .ql-bg-red {
-    background-color: #e60000;
+  background-color: #e60000;
 }
 .ql-editor .ql-bg-orange {
-    background-color: #f90;
+  background-color: #f90;
 }
 .ql-editor .ql-bg-yellow {
-    background-color: #ff0;
+  background-color: #ff0;
 }
 .ql-editor .ql-bg-green {
-    background-color: #008a00;
+  background-color: #008a00;
 }
 .ql-editor .ql-bg-blue {
-    background-color: #06c;
+  background-color: #06c;
 }
 .ql-editor .ql-bg-purple {
-    background-color: #93f;
+  background-color: #93f;
 }
 .ql-editor .ql-color-white {
-    color: #fff;
+  color: #fff;
 }
 .ql-editor .ql-color-red {
-    color: #e60000;
+  color: #e60000;
 }
 .ql-editor .ql-color-orange {
-    color: #f90;
+  color: #f90;
 }
 .ql-editor .ql-color-yellow {
-    color: #ff0;
+  color: #ff0;
 }
 .ql-editor .ql-color-green {
-    color: #008a00;
+  color: #008a00;
 }
 .ql-editor .ql-color-blue {
-    color: #06c;
+  color: #06c;
 }
 .ql-editor .ql-color-purple {
-    color: #93f;
+  color: #93f;
 }
 .ql-editor .ql-font-serif {
-    font-family: Georgia, Times New Roman, serif;
+  font-family: Georgia, Times New Roman, serif;
 }
 .ql-editor .ql-font-monospace {
-    font-family: Monaco, Courier New, monospace;
+  font-family: Monaco, Courier New, monospace;
 }
 .ql-editor .ql-size-small {
-    font-size: 0.75em;
+  font-size: 0.75em;
 }
 .ql-editor .ql-size-large {
-    font-size: 1.5em;
+  font-size: 1.5em;
 }
 .ql-editor .ql-size-huge {
-    font-size: 2.5em;
+  font-size: 2.5em;
 }
 .ql-editor .ql-direction-rtl {
-    direction: rtl;
-    text-align: inherit;
+  direction: rtl;
+  text-align: inherit;
 }
 .ql-editor .ql-align-center {
-    text-align: center;
+  text-align: center;
 }
 .ql-editor .ql-align-justify {
-    text-align: justify;
+  text-align: justify;
 }
 .ql-editor .ql-align-right {
-    text-align: right;
+  text-align: right;
 }
 .ql-editor.ql-blank::before {
-    color: rgba(0,0,0,0.6);
-    content: attr(data-placeholder);
-    font-style: italic;
-    left: 15px;
-    pointer-events: none;
-    position: absolute;
-    right: 15px;
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
 }
 .ql-snow.ql-toolbar:after,
 .ql-snow .ql-toolbar:after {
-    clear: both;
-    content: '';
-    display: table;
+  clear: both;
+  content: '';
+  display: table;
 }
 .ql-snow.ql-toolbar button,
 .ql-snow .ql-toolbar button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: block;
-    float: left;
-    height: 24px;
-    padding: 3px 5px;
-    width: 28px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
 }
 .ql-snow.ql-toolbar button svg,
 .ql-snow .ql-toolbar button svg {
-    float: left;
-    height: 100%;
+  float: left;
+  height: 100%;
 }
 .ql-snow.ql-toolbar button:active:hover,
 .ql-snow .ql-toolbar button:active:hover {
-    outline: none;
+  outline: none;
 }
 .ql-snow.ql-toolbar input.ql-image[type=file],
 .ql-snow .ql-toolbar input.ql-image[type=file] {
-    display: none;
+  display: none;
 }
 .ql-snow.ql-toolbar button:hover,
 .ql-snow .ql-toolbar button:hover,
@@ -480,7 +469,7 @@ margin-left: 1rem;
 .ql-snow .ql-toolbar .ql-picker-item:hover,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-    color: #06c;
+  color: #06c;
 }
 .ql-snow.ql-toolbar button:hover .ql-fill,
 .ql-snow .ql-toolbar button:hover .ql-fill,
@@ -510,7 +499,7 @@ margin-left: 1rem;
 .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
-    fill: #06c;
+  fill: #06c;
 }
 .ql-snow.ql-toolbar button:hover .ql-stroke,
 .ql-snow .ql-toolbar button:hover .ql-stroke,
@@ -540,238 +529,238 @@ margin-left: 1rem;
 .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-    stroke: #06c;
+  stroke: #06c;
 }
 @media (pointer: coarse) {
-    .ql-snow.ql-toolbar button:hover:not(.ql-active),
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
-	color: #444;
-    }
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
-	fill: #444;
-    }
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
-	stroke: #444;
-    }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active),
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+    color: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #444;
+  }
 }
 .ql-snow {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 .ql-snow * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 .ql-snow .ql-hidden {
-    display: none;
+  display: none;
 }
 .ql-snow .ql-out-bottom,
 .ql-snow .ql-out-top {
-    visibility: hidden;
+  visibility: hidden;
 }
 .ql-snow .ql-tooltip {
-    position: absolute;
-    transform: translateY(10px);
+  position: absolute;
+  transform: translateY(10px);
 }
 .ql-snow .ql-tooltip a {
-    cursor: pointer;
-    text-decoration: none;
+  cursor: pointer;
+  text-decoration: none;
 }
 .ql-snow .ql-tooltip.ql-flip {
-    transform: translateY(-10px);
+  transform: translateY(-10px);
 }
 .ql-snow .ql-formats {
-    display: inline-block;
-    vertical-align: middle;
+  display: inline-block;
+  vertical-align: middle;
 }
 .ql-snow .ql-formats:after {
-    clear: both;
-    content: '';
-    display: table;
+  clear: both;
+  content: '';
+  display: table;
 }
 .ql-snow .ql-stroke {
-    fill: none;
-    stroke: #444;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
+  fill: none;
+  stroke: #444;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
 }
 .ql-snow .ql-stroke-miter {
-    fill: none;
-    stroke: #444;
-    stroke-miterlimit: 10;
-    stroke-width: 2;
+  fill: none;
+  stroke: #444;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
 }
 .ql-snow .ql-fill,
 .ql-snow .ql-stroke.ql-fill {
-    fill: #444;
+  fill: #444;
 }
 .ql-snow .ql-empty {
-    fill: none;
+  fill: none;
 }
 .ql-snow .ql-even {
-    fill-rule: evenodd;
+  fill-rule: evenodd;
 }
 .ql-snow .ql-thin,
 .ql-snow .ql-stroke.ql-thin {
-    stroke-width: 1;
+  stroke-width: 1;
 }
 .ql-snow .ql-transparent {
-    opacity: 0.4;
+  opacity: 0.4;
 }
 .ql-snow .ql-direction svg:last-child {
-    display: none;
+  display: none;
 }
 .ql-snow .ql-direction.ql-active svg:last-child {
-    display: inline;
+  display: inline;
 }
 .ql-snow .ql-direction.ql-active svg:first-child {
-    display: none;
+  display: none;
 }
 .ql-snow .ql-editor h1 {
-    font-size: 2em;
+  font-size: 2em;
 }
 .ql-snow .ql-editor h2 {
-    font-size: 1.5em;
+  font-size: 1.5em;
 }
 .ql-snow .ql-editor h3 {
-    font-size: 1.17em;
+  font-size: 1.17em;
 }
 .ql-snow .ql-editor h4 {
-    font-size: 1em;
+  font-size: 1em;
 }
 .ql-snow .ql-editor h5 {
-    font-size: 0.83em;
+  font-size: 0.83em;
 }
 .ql-snow .ql-editor h6 {
-    font-size: 0.67em;
+  font-size: 0.67em;
 }
 .ql-snow .ql-editor a {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 .ql-snow .ql-editor blockquote {
-    border-left: 4px solid #ccc;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    padding-left: 16px;
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
 }
 .ql-snow .ql-editor code,
 .ql-snow .ql-editor pre {
-    background-color: #f0f0f0;
-    border-radius: 3px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
 }
 .ql-snow .ql-editor pre {
-    white-space: pre-wrap;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    padding: 5px 10px;
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
 }
 .ql-snow .ql-editor code {
-    font-size: 85%;
-    padding: 2px 4px;
+  font-size: 85%;
+  padding: 2px 4px;
 }
 .ql-snow .ql-editor pre.ql-syntax {
-    background-color: #23241f;
-    color: #f8f8f2;
-    overflow: visible;
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
 }
 .ql-snow .ql-editor img {
-    max-width: 100%;
+  max-width: 100%;
 }
 .ql-snow .ql-picker {
-    color: #444;
-    display: block;
-    float: left;
-    font-size: 14px;
-    font-weight: 500;
-    height: 24px;
-    position: relative;
+  color: #444;
+  display: block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
 }
 .ql-snow .ql-picker-label {
-    cursor: pointer;
-    display: inline-block;
-    height: 100%;
-    padding-left: 8px;
-    padding-right: 2px;
-    position: relative;
-    width: 100%;
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
 }
 .ql-snow .ql-picker-label::before {
-    display: inline-block;
-    line-height: 22px;
+  display: inline-block;
+  line-height: 22px;
 }
 .ql-snow .ql-picker-options {
-    background-color: #fff;
-    display: none;
-    min-width: 100%;
-    padding: 4px 8px;
-    position: absolute;
-    white-space: nowrap;
+  background-color: #fff;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
 }
 .ql-snow .ql-picker-options .ql-picker-item {
-    cursor: pointer;
-    display: block;
-    padding-bottom: 5px;
-    padding-top: 5px;
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label {
-    color: #ccc;
-    z-index: 2;
+  color: #ccc;
+  z-index: 2;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-    fill: #ccc;
+  fill: #ccc;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-    stroke: #ccc;
+  stroke: #ccc;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-options {
-    display: block;
-    margin-top: -1px;
-    top: 100%;
-    z-index: 1;
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
 }
 .ql-snow .ql-color-picker,
 .ql-snow .ql-icon-picker {
-    width: 28px;
+  width: 28px;
 }
 .ql-snow .ql-color-picker .ql-picker-label,
 .ql-snow .ql-icon-picker .ql-picker-label {
-    padding: 2px 4px;
+  padding: 2px 4px;
 }
 .ql-snow .ql-color-picker .ql-picker-label svg,
 .ql-snow .ql-icon-picker .ql-picker-label svg {
-    right: 4px;
+  right: 4px;
 }
 .ql-snow .ql-icon-picker .ql-picker-options {
-    padding: 4px 0px;
+  padding: 4px 0px;
 }
 .ql-snow .ql-icon-picker .ql-picker-item {
-    height: 24px;
-    width: 24px;
-    padding: 2px 4px;
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
 }
 .ql-snow .ql-color-picker .ql-picker-options {
-    padding: 3px 5px;
-    width: 152px;
+  padding: 3px 5px;
+  width: 152px;
 }
 .ql-snow .ql-color-picker .ql-picker-item {
-    border: 1px solid transparent;
-    float: left;
-    height: 16px;
-    margin: 2px;
-    padding: 0px;
-    width: 16px;
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
 }
 .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
-    position: absolute;
-    margin-top: -9px;
-    right: 0;
-    top: 50%;
-    width: 18px;
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
@@ -779,208 +768,208 @@ margin-left: 1rem;
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
-    content: attr(data-label);
+  content: attr(data-label);
 }
 .ql-snow .ql-picker.ql-header {
-    width: 98px;
+  width: 98px;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
-    content: 'Normal';
+  content: 'Normal';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
-    content: 'Heading 1';
+  content: 'Heading 1';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
-    content: 'Heading 2';
+  content: 'Heading 2';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
-    content: 'Heading 3';
+  content: 'Heading 3';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
-    content: 'Heading 4';
+  content: 'Heading 4';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
-    content: 'Heading 5';
+  content: 'Heading 5';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
-    content: 'Heading 6';
+  content: 'Heading 6';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
-    font-size: 2em;
+  font-size: 2em;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
-    font-size: 1.5em;
+  font-size: 1.5em;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
-    font-size: 1.17em;
+  font-size: 1.17em;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
-    font-size: 1em;
+  font-size: 1em;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
-    font-size: 0.83em;
+  font-size: 0.83em;
 }
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
-    font-size: 0.67em;
+  font-size: 0.67em;
 }
 .ql-snow .ql-picker.ql-font {
-    width: 108px;
+  width: 108px;
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
-    content: 'Sans Serif';
+  content: 'Sans Serif';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
-    content: 'Serif';
+  content: 'Serif';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
-    content: 'Monospace';
+  content: 'Monospace';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
-    font-family: Georgia, Times New Roman, serif;
+  font-family: Georgia, Times New Roman, serif;
 }
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
-    font-family: Monaco, Courier New, monospace;
+  font-family: Monaco, Courier New, monospace;
 }
 .ql-snow .ql-picker.ql-size {
-    width: 98px;
+  width: 98px;
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
-    content: 'Normal';
+  content: 'Normal';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
-    content: 'Small';
+  content: 'Small';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
-    content: 'Large';
+  content: 'Large';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
-    content: 'Huge';
+  content: 'Huge';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
-    font-size: 10px;
+  font-size: 10px;
 }
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
-    font-size: 18px;
+  font-size: 18px;
 }
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
-    font-size: 32px;
+  font-size: 32px;
 }
 .ql-snow .ql-color-picker.ql-background .ql-picker-item {
-    background-color: #fff;
+  background-color: #fff;
 }
 .ql-snow .ql-color-picker.ql-color .ql-picker-item {
-    background-color: #000;
+  background-color: #000;
 }
 .ql-toolbar.ql-snow {
-    border: 1px solid #ccc;
-    box-sizing: border-box;
-    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-    padding: 8px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
 }
 .ql-toolbar.ql-snow .ql-formats {
-    margin-right: 15px;
+  margin-right: 15px;
 }
 .ql-toolbar.ql-snow .ql-picker-label {
-    border: 1px solid transparent;
+  border: 1px solid transparent;
 }
 .ql-toolbar.ql-snow .ql-picker-options {
-    border: 1px solid transparent;
-    box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+  border: 1px solid transparent;
+  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
 }
 .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-    border-color: #ccc;
+  border-color: #ccc;
 }
 .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-    border-color: #ccc;
+  border-color: #ccc;
 }
 .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
 .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
-    border-color: #000;
+  border-color: #000;
 }
 .ql-toolbar.ql-snow + .ql-container.ql-snow {
-    border-top: 0px;
+  border-top: 0px;
 }
 .ql-snow .ql-tooltip {
-    background-color: #fff;
-    border: 1px solid #ccc;
-    box-shadow: 0px 0px 5px #ddd;
-    color: #444;
-    padding: 5px 12px;
-    white-space: nowrap;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 5px #ddd;
+  color: #444;
+  padding: 5px 12px;
+  white-space: nowrap;
 }
 .ql-snow .ql-tooltip::before {
-    content: "Visit URL:";
-    line-height: 26px;
-    margin-right: 8px;
+  content: "Visit URL:";
+  line-height: 26px;
+  margin-right: 8px;
 }
 .ql-snow .ql-tooltip input[type=text] {
-    display: none;
-    border: 1px solid #ccc;
-    font-size: 13px;
-    height: 26px;
-    margin: 0px;
-    padding: 3px 5px;
-    width: 170px;
+  display: none;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  height: 26px;
+  margin: 0px;
+  padding: 3px 5px;
+  width: 170px;
 }
 .ql-snow .ql-tooltip a.ql-preview {
-    display: inline-block;
-    max-width: 200px;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
+  display: inline-block;
+  max-width: 200px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
 }
 .ql-snow .ql-tooltip a.ql-action::after {
-    border-right: 1px solid #ccc;
-    content: 'Edit';
-    margin-left: 16px;
-    padding-right: 8px;
+  border-right: 1px solid #ccc;
+  content: 'Edit';
+  margin-left: 16px;
+  padding-right: 8px;
 }
 .ql-snow .ql-tooltip a.ql-remove::before {
-    content: 'Remove';
-    margin-left: 8px;
+  content: 'Remove';
+  margin-left: 8px;
 }
 .ql-snow .ql-tooltip a {
-    line-height: 26px;
+  line-height: 26px;
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-preview,
 .ql-snow .ql-tooltip.ql-editing a.ql-remove {
-    display: none;
+  display: none;
 }
 .ql-snow .ql-tooltip.ql-editing input[type=text] {
-    display: inline-block;
+  display: inline-block;
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-    border-right: 0px;
-    content: 'Save';
-    padding-right: 0px;
+  border-right: 0px;
+  content: 'Save';
+  padding-right: 0px;
 }
 .ql-snow .ql-tooltip[data-mode=link]::before {
-    content: "Enter link:";
+  content: "Enter link:";
 }
 .ql-snow .ql-tooltip[data-mode=formula]::before {
-    content: "Enter formula:";
+  content: "Enter formula:";
 }
 .ql-snow .ql-tooltip[data-mode=video]::before {
-    content: "Enter video:";
+  content: "Enter video:";
 }
 .ql-snow a {
-    color: #06c;
+  color: #06c;
 }
 .ql-container.ql-snow {
-    border: 1px solid #ccc;
+  border: 1px solid #ccc;
 }
 
diff --git a/src/lib/components/Address.svelte b/src/lib/components/Address.svelte
index 93c305c..0c5209c 100644
--- a/src/lib/components/Address.svelte
+++ b/src/lib/components/Address.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { address } from '$lib/stores/store';
+	import { address, multiplier } from '$lib/stores/store';
 </script>
 
 {#if templates[templateIndex] && $address}
@@ -10,16 +10,16 @@
 		class="address"
 		style="
     top: {templates[templateIndex].address.top}px;
-    height: {templates[templateIndex].address.height}rem;
-    left: {templates[templateIndex].address.left}rem;
-    right: {templates[templateIndex].address.right}rem;
+    height: {templates[templateIndex].address.height}px;
+    left: {templates[templateIndex].address.left}px;
+    right: {templates[templateIndex].address.right}px;
     color: {templates[templateIndex].address.color};
-    font-size: {templates[templateIndex].address.fontSize}rem;
+    font-size: {templates[templateIndex].address.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].address.fontFamily};
     line-height: {templates[templateIndex].address.lineHeight};
 		text-align: {templates[templateIndex].address.textAlign};
 		font-weight: {templates[templateIndex].address.fontWeight};
-		line-height: {templates[templateIndex].address.lineHeight}rem;
+		line-height: {templates[templateIndex].address.lineHeight}px;
     "
 	>
 		{$address}
diff --git a/src/lib/components/City.svelte b/src/lib/components/City.svelte
index e5147d2..3e6afa1 100644
--- a/src/lib/components/City.svelte
+++ b/src/lib/components/City.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { city } from '$lib/stores/store';
+	import { city, multiplier } from '$lib/stores/store';
 </script>
 
 {#if templates[templateIndex] && $city}
@@ -10,16 +10,16 @@
 		class="city"
 		style="
     top: {templates[templateIndex].city.top}px;
-    height: {templates[templateIndex].city.height}rem;
-    left: {templates[templateIndex].city.left}rem;
-    right: {templates[templateIndex].city.right}rem;
+    height: {templates[templateIndex].city.height}px;
+    left: {templates[templateIndex].city.left}px;
+    right: {templates[templateIndex].city.right}px;
     color: {templates[templateIndex].city.color};
-    font-size: {templates[templateIndex].city.fontSize}rem;
+    font-size: {templates[templateIndex].city.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].city.fontFamily};
     line-height: {templates[templateIndex].city.lineHeight};
 		text-align: {templates[templateIndex].city.textAlign};
 		font-weight: {templates[templateIndex].city.fontWeight};
-		line-height: {templates[templateIndex].city.lineHeight}rem;
+		line-height: {templates[templateIndex].city.lineHeight}px;
     "
 	>
 		{$city}
diff --git a/src/lib/components/Content.svelte b/src/lib/components/Content.svelte
index 6bba7f0..94a1070 100644
--- a/src/lib/components/Content.svelte
+++ b/src/lib/components/Content.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { content } from '$lib/stores/store';
+	import { content, multiplier } from '$lib/stores/store';
 </script>
 
 {#if templates[templateIndex] && $content}
@@ -10,15 +10,15 @@
 		class="content"
 		style="
     top: {templates[templateIndex].content.top}px;
-    height: {templates[templateIndex].content.height}rem;
-    left: {templates[templateIndex].content.left}rem;
-    right: {templates[templateIndex].content.right}rem;
+    height: {templates[templateIndex].content.height}px;
+    left: {templates[templateIndex].content.left}px;
+    right: {templates[templateIndex].content.right}px;
     color: {templates[templateIndex].content.color};
-    font-size: {templates[templateIndex].content.fontSize}rem;
+    font-size: {templates[templateIndex].content.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].content.fontFamily};
 		text-align: {templates[templateIndex].content.textAlign};
 		font-weight: {templates[templateIndex].content.fontWeight};
-		line-height: {templates[templateIndex].content.lineHeight}rem;
+		line-height: {templates[templateIndex].content.lineHeight}px;
     "
 	>
 		{@html $content}
diff --git a/src/lib/components/Date.svelte b/src/lib/components/Date.svelte
index ac75a9a..cd1a22e 100644
--- a/src/lib/components/Date.svelte
+++ b/src/lib/components/Date.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { templates } from '$lib/templates/templates';
-	import { date } from '$lib/stores/store';
+	import { date, multiplier } from '$lib/stores/store';
 	import { convertDate } from '$lib/convertDate';
 	/** @type number */ export let templateIndex;
 
@@ -16,15 +16,15 @@
 		class="date"
 		style="
       top: {templates[templateIndex].date.top}px;
-      height: {templates[templateIndex].date.height}rem;
-      left: {templates[templateIndex].date.left}rem;
-      right: {templates[templateIndex].date.right}rem;
+      height: {templates[templateIndex].date.height}px;
+      left: {templates[templateIndex].date.left}px;
+      right: {templates[templateIndex].date.right}px;
       color: {templates[templateIndex].date.color};
-      font-size: {templates[templateIndex].date.fontSize}rem;
+      font-size: {templates[templateIndex].date.fontSize * $multiplier}px;
       font-family: {templates[templateIndex].date.fontFamily};
       text-align: {templates[templateIndex].date.textAlign};
       font-weight: {templates[templateIndex].date.fontWeight};
-      line-height: {templates[templateIndex].date.lineHeight}rem;
+      line-height: {templates[templateIndex].date.lineHeight}px;
     "
 	>
 		{newdate}
diff --git a/src/lib/components/Heading.svelte b/src/lib/components/Heading.svelte
index 3a4d0e7..facdce8 100644
--- a/src/lib/components/Heading.svelte
+++ b/src/lib/components/Heading.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { heading } from '$lib/stores/store';
+	import { heading, multiplier } from '$lib/stores/store';
 </script>
 
 {#if $heading && templates[templateIndex].heading}
@@ -10,15 +10,15 @@
 		class="heading"
 		style="
   top: {templates[templateIndex].heading.top}px;
-  height: {templates[templateIndex].heading.height}rem;
-  left: {templates[templateIndex].heading.left}rem;
-  right: {templates[templateIndex].heading.right}rem;
+  height: {templates[templateIndex].heading.height}px;
+  left: {templates[templateIndex].heading.left}px;
+  right: {templates[templateIndex].heading.right}px;
   color: {templates[templateIndex].heading.color};
-  font-size: {templates[templateIndex].heading.fontSize}rem;
+  font-size: {templates[templateIndex].heading.fontSize * $multiplier}px;
   font-family: {templates[templateIndex].heading.fontFamily};
 	text-align: {templates[templateIndex].heading.textAlign};
 	font-weight: {templates[templateIndex].heading.fontWeight};
-	line-height: {templates[templateIndex].heading.lineHeight}rem;
+	line-height: {templates[templateIndex].heading.lineHeight}px;
   "
 	>
 		{$heading}
@@ -28,7 +28,6 @@
 <style>
 	.heading {
 		position: absolute;
-		font-variant: small-caps;
 		overflow: hidden;
 	}
 </style>
diff --git a/src/lib/components/Subtitle.svelte b/src/lib/components/Subtitle.svelte
index 6c565e4..4e657d6 100644
--- a/src/lib/components/Subtitle.svelte
+++ b/src/lib/components/Subtitle.svelte
@@ -2,7 +2,8 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { subtitle } from '$lib/stores/store';
+	import { subtitle, multiplier } from '$lib/stores/store';
+	console.log($multiplier);
 </script>
 
 {#if templates[templateIndex] && $subtitle}
@@ -10,15 +11,15 @@
 		class="subtitle"
 		style="
     top: {templates[templateIndex].subtitle.top}px;
-    height: {templates[templateIndex].subtitle.height}rem;
-    left: {templates[templateIndex].subtitle.left}rem;
-    right: {templates[templateIndex].subtitle.right}rem;
+    height: {templates[templateIndex].subtitle.height}px;
+    left: {templates[templateIndex].subtitle.left}px;
+    right: {templates[templateIndex].subtitle.right}px;
     color: {templates[templateIndex].subtitle.color};
-    font-size: {templates[templateIndex].subtitle.fontSize}rem;
+    font-size: {templates[templateIndex].subtitle.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].subtitle.fontFamily};
 		text-align: {templates[templateIndex].subtitle.textAlign};
 		font-weight: {templates[templateIndex].subtitle.fontWeight};
-		line-height: {templates[templateIndex].subtitle.lineHeight}rem;
+		line-height: {templates[templateIndex].subtitle.lineHeight}px;
     "
 	>
 		{$subtitle}
@@ -28,7 +29,6 @@
 <style>
 	.subtitle {
 		position: absolute;
-		font-variant: small-caps;
 		overflow: hidden;
 		display: flex;
 		justify-content: center;
diff --git a/src/lib/components/Time.svelte b/src/lib/components/Time.svelte
index dfbdd21..0e4f4b1 100644
--- a/src/lib/components/Time.svelte
+++ b/src/lib/components/Time.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { time } from '$lib/stores/store';
+	import { time, multiplier } from '$lib/stores/store';
 </script>
 
 {#if templates[templateIndex] && $time !== ''}
@@ -10,15 +10,15 @@
 		class="time"
 		style="
     top: {templates[templateIndex].time.top}px;
-    height: {templates[templateIndex].time.height}rem;
-    left: {templates[templateIndex].time.left}rem;
-    right: {templates[templateIndex].time.right}rem;
+    height: {templates[templateIndex].time.height}px;
+    left: {templates[templateIndex].time.left}px;
+    right: {templates[templateIndex].time.right}px;
     color: {templates[templateIndex].time.color};
-    font-size: {templates[templateIndex].time.fontSize}rem;
+    font-size: {templates[templateIndex].time.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].time.fontFamily};
 		text-align: {templates[templateIndex].time.textAlign};
 		font-weight: {templates[templateIndex].time.fontWeight};
-		line-height: {templates[templateIndex].time.lineHeight}rem;
+		line-height: {templates[templateIndex].time.lineHeight}px;
     "
 	>
 		{$time}
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
index b47aa14..b26b7bc 100644
--- a/src/lib/components/Title.svelte
+++ b/src/lib/components/Title.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { title } from '$lib/stores/store';
+	import { title, multiplier } from '$lib/stores/store';
 </script>
 
 {#if templates[templateIndex] && $title}
@@ -10,15 +10,15 @@
 		class="title"
 		style="
     top: {templates[templateIndex].title.top}px;
-    height: {templates[templateIndex].title.height}rem;
-    left: {templates[templateIndex].title.left}rem;
-    right: {templates[templateIndex].title.right}rem;
+    height: {templates[templateIndex].title.height}px;
+    left: {templates[templateIndex].title.left}px;
+    right: {templates[templateIndex].title.right}px;
     color: {templates[templateIndex].title.color};
-    font-size: {templates[templateIndex].title.fontSize}rem;
+    font-size: {templates[templateIndex].title.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].title.fontFamily};
 		text-align: {templates[templateIndex].title.textAlign};
 		font-weight: {templates[templateIndex].title.fontWeight};
-		line-height: {templates[templateIndex].title.lineHeight}rem;
+		line-height: {templates[templateIndex].title.lineHeight}px;
 
     "
 	>
@@ -29,7 +29,6 @@
 <style>
 	.title {
 		position: absolute;
-		font-variant: small-caps;
 		overflow: hidden;
 		display: flex;
 		justify-content: center;
diff --git a/src/lib/components/Weekday.svelte b/src/lib/components/Weekday.svelte
index 169cd6b..92e35cc 100644
--- a/src/lib/components/Weekday.svelte
+++ b/src/lib/components/Weekday.svelte
@@ -2,7 +2,7 @@
 	import { templates } from '$lib/templates/templates';
 
 	/** @type number */ export let templateIndex;
-	import { weekday } from '$lib/stores/store';
+	import { weekday, multiplier } from '$lib/stores/store';
 </script>
 
 {#if templates[templateIndex] && $weekday}
@@ -10,15 +10,15 @@
 		class="weekday"
 		style="
     top: {templates[templateIndex].weekday.top}px;
-    height: {templates[templateIndex].weekday.height}rem;
-    left: {templates[templateIndex].weekday.left}rem;
-    right: {templates[templateIndex].weekday.right}rem;
+    height: {templates[templateIndex].weekday.height}px;
+    left: {templates[templateIndex].weekday.left}px;
+    right: {templates[templateIndex].weekday.right}px;
     color: {templates[templateIndex].weekday.color};
-    font-size: {templates[templateIndex].weekday.fontSize}rem;
+    font-size: {templates[templateIndex].weekday.fontSize * $multiplier}px;
     font-family: {templates[templateIndex].weekday.fontFamily};
 		text-align: {templates[templateIndex].weekday.textAlign};
 		font-weight: {templates[templateIndex].weekday.fontWeight};
-		line-height: {templates[templateIndex].weekday.lineHeight}rem;
+		line-height: {templates[templateIndex].weekday.lineHeight}px;
     "
 	>
 		{$weekday}
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 6268559..3030579 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -38,11 +38,9 @@
 			const res = await html2canvas($canvas, { scale: 2 });
 			const image = res.toDataURL('image/png');
 			const link = document.createElement('a');
-			const city = $address.split('\n');
-			link.download = `${$date.split('T')[0]}-${city[city.length - 1].replace(
-				' ',
-				'_'
-			)}-cartel.png`;
+			link.download = `${$date.split('-')[0]}-${$date.split('-')[1]}-${
+				$date.split('-')[2].split('T')[0]
+			}-${$city.replace(' ', '_')}-cartel.png`;
 			link.href = image;
 			link.click();
 		}
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index c9aceb6..1a26d83 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -10,16 +10,14 @@
 	}
 	h1 {
 		text-align: left;
-		font-size: 2rem;
 		font-weight: 700;
 		color: firebrick;
-		font-family: 'Ubuntu', sans-serif;
-		/* font-family: 'Gill Sans', sans-serif; */
-		/* font-variant: small-caps; */
+		font-family: 'Alegreya Sans SC', sans-serif;
 	}
 	a {
 		color: inherit;
 		text-decoration: none;
 		cursor: pointer;
+		font-size: 2rem;
 	}
 </style>
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 381c496..8011724 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -2,7 +2,7 @@
 	/** @type {number} */ export let templateIndex;
 	/** @type {string} */ export let templateImage;
 
-	import { organizedBy, colabs, canvas } from '$lib/stores/store';
+	import { organizedBy, colabs, canvas, multiplier } from '$lib/stores/store';
 
 	import Heading from '$lib/components/Heading.svelte';
 	import Title from '$lib/components/Title.svelte';
@@ -84,27 +84,30 @@
 
 <style>
 	.preview {
-		padding: 0.5rem;
-		display: grid;
-		justify-content: center;
-		grid-template-columns: 1fr;
-		align-items: start;
+		padding: 8px;
+		/* display: grid; */
+		/* justify-content: center; */
+		/* grid-template-columns: 1fr; */
+		/* align-items: start; */
 	}
 
 	.result {
 		display: block;
+		width: 600px;
+		/* height: 8px; */
 		aspect-ratio: 1/1.4142;
-		min-height: 842px;
-		align-self: center;
-		width: auto;
-		background-size: contain;
+		/* min-height: 842px; */
+		/* align-self: center; */
+		/* width: auto; */
+		background-size: cover;
 		position: relative;
-		padding: 1rem;
+		/* padding: 1rem; */
 	}
 
 	.imagetitle {
 		position: absolute;
 		top: 725px;
+		left: 16px;
 		font-size: 0.8rem;
 		color: #444;
 		text-transform: uppercase;
@@ -150,6 +153,7 @@
 	.orgcolab {
 		position: absolute;
 		top: 725px;
+		left: 16px;
 		height: 7rem;
 		overflow: hidden;
 		display: grid;
diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js
index 39570d3..095a9b6 100644
--- a/src/lib/stores/store.js
+++ b/src/lib/stores/store.js
@@ -12,3 +12,4 @@ export const city = writable("");
 export const organizedBy = writable([]);
 export const colabs = writable([]);
 export const canvas = writable();
+export const multiplier = writable(1);
diff --git a/src/lib/templates/azul.js b/src/lib/templates/azul.js
index 84346e8..46eb728 100644
--- a/src/lib/templates/azul.js
+++ b/src/lib/templates/azul.js
@@ -6,110 +6,110 @@ export const azul = {
   image: "plantilla_azul.png",
   heading: {
     top: 400,
-    height: 2,
-    left: 10,
-    right: 1,
-    fontSize: 2,
+    height: 32,
+    left: 240,
+    right: 8,
+    fontSize: 32,
     color: "white",
-    fontFamily: "sans-serif",
-    lineHeight: 2,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "right",
     fontWeight: 700
   },
   title: {
-    top: 440,
-    height: 7.5,
-    left: 1,
-    right: 1,
-    fontSize: 3,
+    top: 445,
+    height: 120,
+    left: 16,
+    right: 16,
+    fontSize: 40,
     color: "firebrick",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 2.4,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 40,
     textAlign: "right",
     fontWeight: 700
 
   },
   subtitle: {
     top: 575,
-    height: 1.4,
-    left: 1,
-    right: 1,
-    fontSize: 1.6,
+    height: 32,
+    left: 16,
+    right: 16,
+    fontSize: 24,
     color: "white",
-    fontFamily: "Gill Sans, sans-serif",
-    lineHeight: 1.5,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 400
   },
   content: {
-    top: 480,
-    height: 8.5,
-    left: 1.5,
-    right: 17,
+    top: 8,
+    height: 42,
+    left: 8,
+    right: 400,
     fontSize: 0,
-    color: "#222",
+    color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1.1,
+    lineHeight: 14,
     textAlign: "left",
-    fontWeight: 700
+    fontWeight: 400
   },
   date: {
-    top: 48,
-    height: 4,
-    left: 1,
-    right: 1,
-    fontSize: 1.5,
+    top: 40,
+    height: 32,
+    left: 200,
+    right: 8,
+    fontSize: 32,
     color: "#fff",
-    fontFamily: "sans-serif",
-    lineHeight: 2,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "right",
     fontWeight: 700
   },
   time: {
     top: 72,
-    height: 2,
-    left: 1,
-    right: 1,
-    fontSize: 1.5,
+    height: 32,
+    left: 200,
+    right: 8,
+    fontSize: 32,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 2,
+    lineHeight: 32,
     textAlign: "right",
     fontWeight: 700
   },
   weekday: {
-    top: 24,
-    height: 1.5,
-    left: 1,
-    right: 1,
-    fontSize: 1.5,
+    top: 8,
+    height: 32,
+    left: 300,
+    right: 8,
+    fontSize: 32,
     color: "#fff",
-    fontFamily: "sans-serif",
-    lineHeight: 2,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "right",
     fontWeight: 700
   },
   address: {
-    top: 620,
-    height: 3,
-    left: 2,
-    right: 2,
-    fontSize: 1.2,
+    top: 630,
+    height: 48,
+    left: 8,
+    right: 8,
+    fontSize: 20,
     color: "white",
     fontFamily: "sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 24,
     textAlign: "center",
     fontWeight: 400
   },
   city: {
     top: 680,
-    height: 2,
-    left: 2,
-    right: 2,
-    fontSize: 1.2,
+    height: 36,
+    left: 8,
+    right: 8,
+    fontSize: 30,
     color: "white",
     fontFamily: "sans-serif",
-    lineHeight: 1.8,
+    lineHeight: 36,
     textAlign: "center",
     fontWeight: 400
   },
diff --git a/src/lib/templates/corazon.js b/src/lib/templates/corazon.js
index 4a68758..28c1692 100644
--- a/src/lib/templates/corazon.js
+++ b/src/lib/templates/corazon.js
@@ -5,41 +5,41 @@ export const corazon = {
   name: "corazon",
   image: "corazon.png",
   heading: {
-    top: 20,
-    height: 2,
-    left: 3,
-    right: 10,
-    fontSize: 2,
+    top: 8,
+    height: 32,
+    left: 8,
+    right: 100,
+    fontSize: 32,
     color: "white",
-    fontFamily: "sans-serif",
-    lineHeight: 2,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "left",
     fontWeight: 700
   },
   title: {
-    top: 145,
-    height: 3,
-    left: 1,
-    right: 1,
-    fontSize: 3,
+    top: 88,
+    height: 64,
+    left: 8,
+    right: 8,
+    fontSize: 32,
     color: "white",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 2.4,
-    textAlign: "right",
-    fontWeight: 700
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
+    textAlign: "center",
+    fontWeight: 300
 
   },
   subtitle: {
-    top: 100,
-    height: 1.5,
-    left: 1,
-    right: 1,
-    fontSize: 2,
+    top: 160,
+    height: 48,
+    left: 8,
+    right: 8,
+    fontSize: 48,
     color: "white",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.5,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 48,
     textAlign: "center",
-    fontWeight: 400
+    fontWeight: 700
   },
   content: {
     top: 480,
@@ -54,34 +54,34 @@ export const corazon = {
     fontWeight: 700
   },
   date: {
-    top: 535,
-    height: 4,
-    left: 8,
-    right: 1,
-    fontSize: 2,
+    top: 540,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
     color: "#fff",
     fontFamily: "'Arial', sans-serif",
-    lineHeight: 2,
+    lineHeight: 32,
     textAlign: "left",
     fontWeight: 700
   },
   time: {
-    top: 595,
-    height: 2,
-    left: 8,
-    right: 1,
-    fontSize: 2,
+    top: 600,
+    height: 32,
+    left: 128,
+    right: 8,
+    fontSize: 32,
     color: "#fff",
     fontFamily: "'Arial', sans-serif",
-    lineHeight: 2,
+    lineHeight: 32,
     textAlign: "left",
     fontWeight: 700
   },
   weekday: {
-    top: 25,
-    height: 1.5,
-    left: 1,
-    right: 10,
+    top: 8,
+    height: 32,
+    left: 8,
+    right: 80,
     fontSize: 0,
     color: "#fff",
     fontFamily: "sans-serif",
@@ -90,26 +90,26 @@ export const corazon = {
     fontWeight: 700
   },
   address: {
-    top: 645,
-    height: 3.6,
-    left: 8,
-    right: 1,
-    fontSize: 1.3,
+    top: 650,
+    height: 48,
+    left: 128,
+    right: 8,
+    fontSize: 24,
     color: "white",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.6,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 24,
     textAlign: "left",
     fontWeight: 400
   },
   city: {
-    top: 25,
-    height: 1.5,
-    left: 8,
-    right: 1,
-    fontSize: 1.5,
+    top: 8,
+    height: 32,
+    left: 80,
+    right: 8,
+    fontSize: 32,
     color: "white",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.6,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 36,
     textAlign: "right",
     fontWeight: 700
   },
diff --git a/src/lib/templates/posits.js b/src/lib/templates/posits.js
index 28676b5..272e20f 100644
--- a/src/lib/templates/posits.js
+++ b/src/lib/templates/posits.js
@@ -17,14 +17,14 @@ export const posits = {
     fontWeight: 400
   },
   title: {
-    top: 430,
-    height: 3,
-    left: 4,
-    right: 4,
-    fontSize: 2,
+    top: 450,
+    height: 32,
+    left: 80,
+    right: 80,
+    fontSize: 32,
     color: "#000",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 2.1,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 38,
     textAlign: "center",
     fontWeight: 700
   },
@@ -54,61 +54,61 @@ export const posits = {
   },
   date: {
     top: 600,
-    height: 4,
-    left: 26.5,
-    right: 2,
-    fontSize: 1.2,
+    height: 48,
+    left: 428,
+    right: 32,
+    fontSize: 20,
     color: "firebrick",
     fontFamily: "sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 22,
     textAlign: "center",
     fontWeight: 700
   },
   time: {
     top: 655,
-    height: 2,
-    left: 26.5,
-    right: 2,
-    fontSize: 1.8,
+    height: 32,
+    left: 428,
+    right: 32,
+    fontSize: 32,
     color: "firebrick",
     fontFamily: "sans-serif",
-    lineHeight: 2,
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 700
   },
   weekday: {
     top: 600,
-    height: 1.5,
+    height: 5,
     left: 18.5,
     right: 5,
-    fontSize: 0,
+    fontSize: 20,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1.8,
+    lineHeight: 28,
     textAlign: "center",
     fontWeight: 700
   },
   address: {
     top: 555,
-    height: 4.5,
-    left: 1.5,
-    right: 23,
-    fontSize: 1.2,
+    height: 96,
+    left: 32,
+    right: 385,
+    fontSize: 18,
     color: "#000",
     fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 24,
     textAlign: "center",
     fontWeight: 400
   },
   city: {
-    top: 655,
-    height: 1.5,
-    left: 2,
-    right: 23,
-    fontSize: 1.2,
+    top: 660,
+    height: 48,
+    left: 32,
+    right: 385,
+    fontSize: 24,
     color: "#000",
     fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 24,
     textAlign: "center",
     fontWeight: 700
   },
diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js
index e8f6cc7..23ba566 100644
--- a/src/lib/templates/verde.js
+++ b/src/lib/templates/verde.js
@@ -6,109 +6,109 @@ export const verde = {
   image: "plantilla_verde.png",
   heading: {
     top: 100,
-    height: 1.2,
-    left: 8,
-    right: 1,
-    fontSize: 1.5,
+    height: 32,
+    left: 140,
+    right: 20,
+    fontSize: 24,
     color: "white",
-    fontFamily: "sans-serif",
-    lineHeight: 1.1,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "left",
-    fontWeight: 400
+    fontWeight: 700
   },
   title: {
     top: 150,
-    height: 6,
-    left: 8,
-    right: 1,
-    fontSize: 3,
+    height: 86,
+    left: 132,
+    right: 16,
+    fontSize: 40,
     color: "white",
-    fontFamily: "Gill Sans, sans-serif",
-    lineHeight: 2.1,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 40,
     textAlign: "center",
-    fontWeight: 400
+    fontWeight: 700
   },
   subtitle: {
     top: 300,
-    height: 3,
-    left: 8,
-    right: 2,
-    fontSize: 1.5,
+    height: 72,
+    left: 132,
+    right: 16,
+    fontSize: 24,
     color: "firebrick",
-    fontFamily: "'Arial', sans-serif",
-    lineHeight: 1.5,
+    fontFamily: "'Alegreya Sans SC', sans-serif",
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 400
   },
   content: {
-    top: 480,
-    height: 8.5,
-    left: 1.5,
-    right: 17,
-    fontSize: 0.8,
+    top: 470,
+    height: 164,
+    left: 32,
+    right: 320,
+    fontSize: 14,
     color: "#222",
-    fontFamily: "sans-serif",
-    lineHeight: 1.1,
+    fontFamily: "'Helvetica', sans-serif",
+    lineHeight: 18,
     textAlign: "left",
     fontWeight: 400
   },
   date: {
-    top: 625,
-    height: 1,
-    left: 18.5,
-    right: 4,
-    fontSize: 1.1,
+    top: 628,
+    height: 32,
+    left: 275,
+    right: 32,
+    fontSize: 18,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1,
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 700
   },
   time: {
-    top: 647,
-    height: 2,
-    left: 18.5,
-    right: 5,
-    fontSize: 1.8,
+    top: 650,
+    height: 32,
+    left: 275,
+    right: 32,
+    fontSize: 32,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 700
   },
   weekday: {
-    top: 600,
-    height: 1.5,
-    left: 18.5,
-    right: 5,
-    fontSize: 1.3,
+    top: 605,
+    height: 32,
+    left: 245,
+    right: 32,
+    fontSize: 24,
     color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1.8,
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 700
   },
   address: {
-    top: 625,
-    height: 2.8,
-    left: 2,
-    right: 20,
-    fontSize: 1,
+    top: 635,
+    height: 48,
+    left: 32,
+    right: 300,
+    fontSize: 18,
     color: "#91b756",
     fontFamily: "sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 22,
     textAlign: "center",
     fontWeight: 700
   },
   city: {
-    top: 675,
-    height: 2,
-    left: 2,
-    right: 20,
-    fontSize: 1.2,
+    top: 690,
+    height: 24,
+    left: 32,
+    right: 300,
+    fontSize: 24,
     color: "#91b756",
     fontFamily: "sans-serif",
-    lineHeight: 1.5,
+    lineHeight: 24,
     textAlign: "center",
     fontWeight: 700
   },
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 351bdc2..935931f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,19 +1,43 @@
 <script>
-    import Header from '$lib/header/Header.svelte';
-    import '../app.css';
+	import { multiplier } from '$lib/stores/store';
+	import Header from '$lib/header/Header.svelte';
+	import '../app.css';
+	import { browser } from '$app/environment';
+
+	let browserType = 'firefox';
+
+	if (browser) {
+		const agent = navigator.userAgent;
+		if (agent.match(/chrome|chromium|crios/i)) {
+			browserType = 'chrome';
+			$multiplier = 1;
+		} else if (agent.match(/firefox|fxios/i)) {
+			browserType = 'firefox';
+			$multiplier = 1;
+		} else if (agent.match(/safari/i)) {
+			browserType = 'safari';
+		} else if (agent.match(/opr\//i)) {
+			browserType = 'opera';
+		} else if (agent.match(/edg/i)) {
+			browserType = 'edge';
+		} else {
+			browserType = 'No browser detection';
+		}
+	}
+
+	console.log('Browser is: ', browserType);
 </script>
 
 <Header />
 <main>
-    <slot />
+	<slot />
 </main>
 
 <style>
-    main {
-	width: 100%;
-	padding: 0;
-	margin: 0 auto;
-	box-sizing: border-box;
-    }
-
+	main {
+		width: 100%;
+		padding: 0;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
 </style>
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 11ece49..22acc17 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -35,7 +35,7 @@
 <style>
 	.main {
 		display: grid;
-		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
+		grid-template-columns: 1fr 616px;
 		grid-gap: 0.5rem;
 		min-height: calc(100vh - 5rem);
 	}
@@ -47,7 +47,6 @@
 
 	.preview {
 		grid-column: 2/3;
-		min-height: 200px;
 		background-color: rgb(240, 238, 240);
 	}
 </style>
diff --git a/static/imagen01_old.png b/static/imagen01_old.png
deleted file mode 100644
index bed49f6..0000000
Binary files a/static/imagen01_old.png and /dev/null differ
diff --git a/static/plantilla_azul.png b/static/plantilla_azul.png
index c739486..ba16f85 100644
Binary files a/static/plantilla_azul.png and b/static/plantilla_azul.png differ
diff --git a/static/svelte-welcome.png b/static/svelte-welcome.png
deleted file mode 100644
index fe7d2d6..0000000
Binary files a/static/svelte-welcome.png and /dev/null differ
diff --git a/static/svelte-welcome.webp b/static/svelte-welcome.webp
deleted file mode 100644
index 6ec1a28..0000000
Binary files a/static/svelte-welcome.webp and /dev/null differ