diff --git a/src/app.css b/src/app.css
index 2a2a434..0e0c8d6 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,22 +4,15 @@
   margin: 0;
   padding: 0;
   font-size: 16px;
+  font-family: 'Arial', sans-serif;
+}
+
+html {
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 :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;
+  font-family: Arial, sans-serif;
 }
 
 body {
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..b3890d1 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,8 @@
 <style>
 	.heading {
 		position: absolute;
-		font-variant: small-caps;
+		/* font-variant: small-caps; */
+		text-transform: uppercase;
 		overflow: hidden;
 	}
 </style>
diff --git a/src/lib/components/Subtitle.svelte b/src/lib/components/Subtitle.svelte
index 6c565e4..60772b3 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}
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..527885e 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;
 
     "
 	>
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/header/Header.svelte b/src/lib/header/Header.svelte
index c9aceb6..9d9517c 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -10,7 +10,6 @@
 	}
 	h1 {
 		text-align: left;
-		font-size: 2rem;
 		font-weight: 700;
 		color: firebrick;
 		font-family: 'Ubuntu', sans-serif;
@@ -21,5 +20,6 @@
 		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 875606e..76c844c 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;
+		/* 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;
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/verde.js b/src/lib/templates/verde.js
index e8f6cc7..fbb8e1c 100644
--- a/src/lib/templates/verde.js
+++ b/src/lib/templates/verde.js
@@ -6,49 +6,49 @@ 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: "'Helvetica', sans-serif",
+    lineHeight: 32,
     textAlign: "left",
     fontWeight: 400
   },
   title: {
     top: 150,
-    height: 6,
-    left: 8,
-    right: 1,
-    fontSize: 3,
+    height: 86,
+    left: 132,
+    right: 16,
+    fontSize: 32,
     color: "white",
-    fontFamily: "Gill Sans, sans-serif",
-    lineHeight: 2.1,
+    fontFamily: "'Helvetica', sans-serif",
+    lineHeight: 40,
     textAlign: "center",
     fontWeight: 400
   },
   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: "'Helvetica', sans-serif",
+    lineHeight: 32,
     textAlign: "center",
     fontWeight: 400
   },
   content: {
     top: 480,
-    height: 8.5,
-    left: 1.5,
-    right: 17,
-    fontSize: 0.8,
+    height: 240,
+    left: 32,
+    right: 320,
+    fontSize: 16,
     color: "#222",
-    fontFamily: "sans-serif",
-    lineHeight: 1.1,
+    fontFamily: "'Helvetica', sans-serif",
+    lineHeight: 24,
     textAlign: "left",
     fontWeight: 400
   },
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 b36a5e3..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: 1fr 600px;
+		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>