Reworks the 404 page !

404.html

@@ -4,10 +4,17 @@ title: 404 — Not Found
 permalink: /404.html
 ---
 
-<h1 id="title_404">This page does not exist :confused:</h1>
+<img id="image_404" class="fadeIn" src="" alt="404 - This page does not exist">
+
+<script>
+	document.getElementById('image_404').src = "/img/404_" + (Math.floor(Math.random() * 6) + 1) + ".jpg";
+</script>
 
 <p>
-	It looks like you are lost, young traveler !
+	It looks like you are lost, young traveler :confused:
 	<br />
 	Fortunately, I've set for you the top and navigation bars in that inter-dimensional breach as well :wink:
+	<br />
+	<br />
+	Alternatively, you can also keep refreshing this page and contemplate the beautiful art-works made by my little darling :heart:
 </p>

css/style.css

@@ -204,9 +204,53 @@ ul.posts a {
   margin-top: 40px;
 }
 
-#title_404 {
-  margin: 80px 0 80px 0;
-  font-size: 200%;
+#image_404 {
+  max-width: 100%;
+  margin: 20px auto 20px auto;
+  transition: .3s ease-in-out;
+  -webkit-transition: .3s ease-in-out;
+}
+
+.fadeIn {
+  visibility: visible;
+  animation: fade-in 1s ease;
+  -webkit-backface-visibility: hidden;
+  -webkit-animation: fade-in 1s ease;
+  -moz-animation: fade-in ease-in-out 1s both;
+  -ms-animation: fade-in ease-in-out 1s both;
+  -o-animation: fade-in ease-in-out 1s both;
+}
+@-webkit-keyframes fade-in{
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fade-in { 
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-o-keyframes fade-in { 
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade-in { 
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 img.emoji {