diff --git a/css/app.css b/css/app.css
index 771d1bd..cfed4e3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,3 +1,91 @@
 #maximage div {
     cursor:pointer;
+}
+
+@font-face {
+    font-family: 'Pacifico';
+    src: local('Pacifico Regular'), url(../font/Pacifico-Regular.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Source Code';
+    src: local('Source Code Pro'), url(../font/SourceCodePro-Regular.ttf) format('truetype');
+}
+
+body {
+    color: #fff;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.logo {
+    max-width: 128px;
+    max-height: 128px;
+    background-color: #ffffff;
+    border-radius: 50%;
+    border: 1px solid #222222;
+}
+
+#icon {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    width: 128px;
+    height: 128px;
+}
+
+.hide {
+    display: none;
+}
+
+.list {
+    margin: 5% auto;
+    text-align: center;
+}
+
+.list .item {
+    margin-bottom: 1rem;
+}
+
+.list .item img {
+    width: 512px;
+    border: 1px solid #fff;
+    -webkit-border-radius: 7px;
+    -moz-border-radius: 7px;
+    border-radius: 7px;
+}
+
+#magician h1 {
+    color: #000000;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 15%;
+    font-family: "Pacifico", cursive;
+    font-size: 50pt;
+    font-weight: normal;
+    text-decoration: none;
+}
+
+#developer h1 {
+    color: #ffffff;
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%);
+    top: 50%;
+    font-family: "Source Code", monospace;
+    font-size: 50pt;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.list .magician {
+    color: #ffffff;
+    font-family: "Pacifico", cursive;
+    font-weight: normal;
+}
+
+.list .developer {
+    color: #ffffff;
+    font-family: "Source Code", monospace;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/font/Pacifico-Regular.ttf b/font/Pacifico-Regular.ttf
new file mode 100644
index 0000000..7172fe9
Binary files /dev/null and b/font/Pacifico-Regular.ttf differ
diff --git a/font/SourceCodePro-Regular.ttf b/font/SourceCodePro-Regular.ttf
new file mode 100644
index 0000000..b2cff92
Binary files /dev/null and b/font/SourceCodePro-Regular.ttf differ
diff --git a/index.html b/index.html
index af0641f..f49885f 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
 
     <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen"/>
     <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen"/>
+    <link rel="stylesheet" href="css/app.css" type="text/css" media="screen"/>
 
     <script type="text/javascript" src="js/vendor/jquery-2.2.4.min.js"></script>
     <script type="text/javascript" src="js/vendor/jquery.easing.min.js"></script>
@@ -83,86 +84,6 @@
         });
     </script>
 
-    <style>
-        body {
-            color: #fff;
-            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        }
-
-        .logo {
-            max-width: 128px;
-            max-height: 128px;
-            background-color: #ffffff;
-            border-radius: 50%;
-            border: 1px solid #222222;
-        }
-
-        #icon {
-            position: fixed;
-            right: 1rem;
-            bottom: 1rem;
-            width: 128px;
-            height: 128px;
-        }
-
-        .hide {
-            display: none;
-        }
-
-        .list {
-            margin: 5% auto;
-            text-align: center;
-        }
-
-        .list .item {
-            margin-bottom: 1rem;
-        }
-
-        .list .item img {
-            width: 512px;
-            border: 1px solid #fff;
-            -webkit-border-radius: 7px;
-            -moz-border-radius: 7px;
-            border-radius: 7px;
-        }
-
-        #magician h1 {
-            color: #000000;
-            position: fixed;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: 15%;
-            font-family: "Daniel Black", "Jenna Sue", "TeXGyreChorus", "URW Chancery L", cursive;
-            font-size: 50pt;
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        #developer h1 {
-            color: #ffffff;
-            position: fixed;
-            left: 50%;
-            transform: translate(-50%);
-            top: 50%;
-            font-family: "TeXGyreCursor", "Tlwg Typist", "Courier New", monospace;
-            font-size: 50pt;
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .list .magician {
-            color: #ffffff;
-            font-family: "Daniel Black", "Jenna Sue", "TeXGyreChorus", "URW Chancery L", cursive;
-            font-weight: bold;
-        }
-
-        .list .developer {
-            color: #ffffff;
-            font-family: "TeXGyreCursor", "Tlwg Typist", "Courier New", monospace;
-            font-weight: bold;
-        }
-    </style>
-
     <!-- Piwik -->
     <script type="text/javascript">
         var _paq = _paq || [];