diff --git a/dist/index.html b/dist/index.html
index 2cf7907..60739d1 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -3,32 +3,7 @@
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<style>
-	body {
-		background-color: #ccc;
-	}
-
-	#qrtext {
-		max-width: 512px;
-		display: block;
-		margin: 0 auto;
-		width:80%;
-		padding: 5px 7px;
-		border: 1px solid #000;
-		border-radius: 10px;
-		background-color: #f0f0f0;
-	}
-	#qrcode {
-		margin: 0 auto;
-		width:256px;
-		height:256px;
-		margin-top:15px;
-		padding: 10px;
-		border: 1px solid #000;
-		border-radius: 10px;
-		background-color: #f0f0f0;
-	}
-</style>
+<link rel="stylesheet" href="qr.css">
 <script src="qr.js"></script>
 <script type="text/javascript">
 var qrcode = null;
diff --git a/dist/qr.css b/dist/qr.css
new file mode 100644
index 0000000..e57f56d
--- /dev/null
+++ b/dist/qr.css
@@ -0,0 +1,24 @@
+body {
+	background-color: #ccc;
+}
+
+#qrtext {
+	max-width: 512px;
+	display: block;
+	margin: 0 auto;
+	width:80%;
+	padding: 5px 7px;
+	border: 1px solid #000;
+	border-radius: 10px;
+	background-color: #f0f0f0;
+}
+#qrcode {
+	margin: 0 auto;
+	width:256px;
+	height:256px;
+	margin-top:15px;
+	padding: 10px;
+	border: 1px solid #000;
+	border-radius: 10px;
+	background-color: #f0f0f0;
+}
