diff --git a/Makefile b/Makefile
index 2120d17..ef7b8b7 100644
--- a/Makefile
+++ b/Makefile
@@ -20,7 +20,7 @@ articles := $(patsubst %.md,%.html,$(wildcard articles/*.md))
 all: index.html about.html
 
 install:
-	cp -r index.html about.html $(articles) $(style) $(images) $(INSTALLDIR); \
+	cp -r index.html about.html shark.js shark.png dvd-logo.png $(articles) $(style) $(images) $(INSTALLDIR); \
 
 clean:
 	echo '{"articles": []}' > $(article_list); \
@@ -40,7 +40,7 @@ $(articles): %.html: %.md
 
 index.html: index.md $(articles) 
 	# Build index.html with metadata injected from articles_list
-	pandoc $< --template $(template) --css $(style) --metadata-file $(article_list) --highlight-style zenburn --mathml --toc --output $@; \
+	pandoc $< --template $(template) --include-after-body shark.js --css $(style) --metadata-file $(article_list) --highlight-style zenburn --mathml --toc --output $@; \
 
 about.html: about.md
 	pandoc $< --template $(template) --css $(style) --highlight-style zenburn --mathml --toc --output $@
diff --git a/about.html b/about.html
index 58eca52..6aa5408 100644
--- a/about.html
+++ b/about.html
@@ -25,6 +25,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/articles/latex-endeavors.html b/articles/latex-endeavors.html
index eeba541..92f44c6 100644
--- a/articles/latex-endeavors.html
+++ b/articles/latex-endeavors.html
@@ -26,6 +26,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/articles/random-linux-utils.html b/articles/random-linux-utils.html
index c5da3c0..490ee88 100644
--- a/articles/random-linux-utils.html
+++ b/articles/random-linux-utils.html
@@ -90,6 +90,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/articles/rsync-android.html b/articles/rsync-android.html
index 05eb0d1..acff727 100644
--- a/articles/rsync-android.html
+++ b/articles/rsync-android.html
@@ -23,8 +23,9 @@
       vertical-align: middle;
     }
     /* CSS for syntax highlighting */
+    html { -webkit-text-size-adjust: 100%; }
     pre > code.sourceCode { white-space: pre; position: relative; }
-    pre > code.sourceCode > span { line-height: 1.25; }
+    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
     pre > code.sourceCode > span:empty { height: 1.2em; }
     .sourceCode { overflow: visible; }
     code.sourceCode > span { color: inherit; text-decoration: inherit; }
@@ -35,7 +36,7 @@
     }
     @media print {
     pre > code.sourceCode { white-space: pre-wrap; }
-    pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
+    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
     }
     pre.numberSource code
       { counter-reset: source-line 0; }
@@ -89,6 +90,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/dvd-logo.png b/dvd-logo.png
new file mode 100644
index 0000000..7d04e11
Binary files /dev/null and b/dvd-logo.png differ
diff --git a/index.html b/index.html
index 7b0cb90..5595841 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
@@ -88,6 +89,74 @@ rsync to syncronise my library with my Android smartphone.</p>
 </nav>
 
 </section>
+<script>
+let speed = 10;
+let scale = 0.33; // Image scale (I work on 1080p monitor)
+let canvas;
+let ctx;
+let logoColor;
+
+let dvd = {
+    x: 256,
+    y: 354,
+    xspeed: 2,
+    yspeed: 2,
+    img: new Image()
+};
+
+(function main(){
+    canvas = document.getElementById("tv-screen");
+    ctx = canvas.getContext("2d");
+    dvd.img.src = 'shark.png';
+
+    //Draw the "tv screen"
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    pickColor();
+    update();
+})();
+
+function update() {
+    setTimeout(() => {
+        //Draw the canvas background
+        ctx.fillStyle = '#00000000';
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        //Draw DVD Logo and his background
+        //ctx.fillStyle = logoColor;
+        //ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        //Move the logo
+        dvd.x+=dvd.xspeed;
+        dvd.y+=dvd.yspeed;
+        //Check for collision 
+        checkHitBox();
+        update();   
+    }, speed)
+}
+
+//Check for border collision
+function checkHitBox(){
+    if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
+        dvd.xspeed *= -1;
+        pickColor();
+    }
+        
+    if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
+        dvd.yspeed *= -1;
+        pickColor();
+    }    
+}
+
+//Pick a random color in RGB format
+function pickColor(){
+    r = Math.random() * (254 - 0) + 0;
+    g = Math.random() * (254 - 0) + 0;
+    b = Math.random() * (254 - 0) + 0;
+
+    logoColor = 'rgb('+r+','+g+', '+b+')';
+}
+</script>
 <footer id="page-footer">
   <!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> -->
   <p class="cups-light">
diff --git a/pandoc/template.html b/pandoc/template.html
index 6c96ec4..844e32a 100644
--- a/pandoc/template.html
+++ b/pandoc/template.html
@@ -35,6 +35,7 @@ $endif$
 $endif$
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/public_html/eh/eh/eh/eh-eh/about.html b/public_html/eh/eh/eh/eh-eh/about.html
index 58eca52..6aa5408 100644
--- a/public_html/eh/eh/eh/eh-eh/about.html
+++ b/public_html/eh/eh/eh/eh-eh/about.html
@@ -25,6 +25,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/public_html/eh/eh/eh/eh-eh/dvd-logo.png b/public_html/eh/eh/eh/eh-eh/dvd-logo.png
new file mode 100644
index 0000000..7d04e11
Binary files /dev/null and b/public_html/eh/eh/eh/eh-eh/dvd-logo.png differ
diff --git a/public_html/eh/eh/eh/eh-eh/index.html b/public_html/eh/eh/eh/eh-eh/index.html
index 7b0cb90..5595841 100644
--- a/public_html/eh/eh/eh/eh-eh/index.html
+++ b/public_html/eh/eh/eh/eh-eh/index.html
@@ -25,6 +25,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
@@ -88,6 +89,74 @@ rsync to syncronise my library with my Android smartphone.</p>
 </nav>
 
 </section>
+<script>
+let speed = 10;
+let scale = 0.33; // Image scale (I work on 1080p monitor)
+let canvas;
+let ctx;
+let logoColor;
+
+let dvd = {
+    x: 256,
+    y: 354,
+    xspeed: 2,
+    yspeed: 2,
+    img: new Image()
+};
+
+(function main(){
+    canvas = document.getElementById("tv-screen");
+    ctx = canvas.getContext("2d");
+    dvd.img.src = 'shark.png';
+
+    //Draw the "tv screen"
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    pickColor();
+    update();
+})();
+
+function update() {
+    setTimeout(() => {
+        //Draw the canvas background
+        ctx.fillStyle = '#00000000';
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        //Draw DVD Logo and his background
+        //ctx.fillStyle = logoColor;
+        //ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        //Move the logo
+        dvd.x+=dvd.xspeed;
+        dvd.y+=dvd.yspeed;
+        //Check for collision 
+        checkHitBox();
+        update();   
+    }, speed)
+}
+
+//Check for border collision
+function checkHitBox(){
+    if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
+        dvd.xspeed *= -1;
+        pickColor();
+    }
+        
+    if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
+        dvd.yspeed *= -1;
+        pickColor();
+    }    
+}
+
+//Pick a random color in RGB format
+function pickColor(){
+    r = Math.random() * (254 - 0) + 0;
+    g = Math.random() * (254 - 0) + 0;
+    b = Math.random() * (254 - 0) + 0;
+
+    logoColor = 'rgb('+r+','+g+', '+b+')';
+}
+</script>
 <footer id="page-footer">
   <!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> -->
   <p class="cups-light">
diff --git a/public_html/eh/eh/eh/eh-eh/latex-endeavors.html b/public_html/eh/eh/eh/eh-eh/latex-endeavors.html
index eeba541..92f44c6 100644
--- a/public_html/eh/eh/eh/eh-eh/latex-endeavors.html
+++ b/public_html/eh/eh/eh/eh-eh/latex-endeavors.html
@@ -26,6 +26,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/public_html/eh/eh/eh/eh-eh/random-linux-utils.html b/public_html/eh/eh/eh/eh-eh/random-linux-utils.html
index c5da3c0..490ee88 100644
--- a/public_html/eh/eh/eh/eh-eh/random-linux-utils.html
+++ b/public_html/eh/eh/eh/eh-eh/random-linux-utils.html
@@ -90,6 +90,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/public_html/eh/eh/eh/eh-eh/rsync-android.html b/public_html/eh/eh/eh/eh-eh/rsync-android.html
index 05eb0d1..acff727 100644
--- a/public_html/eh/eh/eh/eh-eh/rsync-android.html
+++ b/public_html/eh/eh/eh/eh-eh/rsync-android.html
@@ -23,8 +23,9 @@
       vertical-align: middle;
     }
     /* CSS for syntax highlighting */
+    html { -webkit-text-size-adjust: 100%; }
     pre > code.sourceCode { white-space: pre; position: relative; }
-    pre > code.sourceCode > span { line-height: 1.25; }
+    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
     pre > code.sourceCode > span:empty { height: 1.2em; }
     .sourceCode { overflow: visible; }
     code.sourceCode > span { color: inherit; text-decoration: inherit; }
@@ -35,7 +36,7 @@
     }
     @media print {
     pre > code.sourceCode { white-space: pre-wrap; }
-    pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
+    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
     }
     pre.numberSource code
       { counter-reset: source-line 0; }
@@ -89,6 +90,7 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+<canvas id="tv-screen"></canvas>
 <header id="page-header">
 <ul>
 <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
diff --git a/public_html/eh/eh/eh/eh-eh/shark.js b/public_html/eh/eh/eh/eh-eh/shark.js
new file mode 100644
index 0000000..7310868
--- /dev/null
+++ b/public_html/eh/eh/eh/eh-eh/shark.js
@@ -0,0 +1,68 @@
+<script>
+let speed = 10;
+let scale = 0.33; // Image scale (I work on 1080p monitor)
+let canvas;
+let ctx;
+let logoColor;
+
+let dvd = {
+    x: 256,
+    y: 354,
+    xspeed: 2,
+    yspeed: 2,
+    img: new Image()
+};
+
+(function main(){
+    canvas = document.getElementById("tv-screen");
+    ctx = canvas.getContext("2d");
+    dvd.img.src = 'shark.png';
+
+    //Draw the "tv screen"
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    pickColor();
+    update();
+})();
+
+function update() {
+    setTimeout(() => {
+        //Draw the canvas background
+        ctx.fillStyle = '#00000000';
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        //Draw DVD Logo and his background
+        //ctx.fillStyle = logoColor;
+        //ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        //Move the logo
+        dvd.x+=dvd.xspeed;
+        dvd.y+=dvd.yspeed;
+        //Check for collision 
+        checkHitBox();
+        update();   
+    }, speed)
+}
+
+//Check for border collision
+function checkHitBox(){
+    if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
+        dvd.xspeed *= -1;
+        pickColor();
+    }
+        
+    if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
+        dvd.yspeed *= -1;
+        pickColor();
+    }    
+}
+
+//Pick a random color in RGB format
+function pickColor(){
+    r = Math.random() * (254 - 0) + 0;
+    g = Math.random() * (254 - 0) + 0;
+    b = Math.random() * (254 - 0) + 0;
+
+    logoColor = 'rgb('+r+','+g+', '+b+')';
+}
+</script>
diff --git a/public_html/eh/eh/eh/eh-eh/shark.png b/public_html/eh/eh/eh/eh-eh/shark.png
new file mode 100644
index 0000000..ddab225
Binary files /dev/null and b/public_html/eh/eh/eh/eh-eh/shark.png differ
diff --git a/public_html/eh/eh/eh/eh-eh/style.css b/public_html/eh/eh/eh/eh-eh/style.css
index a76531a..84b246b 100644
--- a/public_html/eh/eh/eh/eh-eh/style.css
+++ b/public_html/eh/eh/eh/eh-eh/style.css
@@ -1,6 +1,6 @@
 :root {
 	--foreground: #1a1a1a;
-	--background: #fdfdfd;
+	--background: #fdfdfdf0;
 	--border: #c9c9c9;
 	--html-background: #e3e3e3;
 	--blockquote-text: #606060;
@@ -12,7 +12,7 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		--foreground: #fdfdfd;
-		--background: #1a1a1a;
+		--background: #1a1a1af0;
 		--border: #4c4c4c;
 		--html-background: #303030;
 		--blockquote-text: #e6e6e6;
@@ -22,6 +22,7 @@
 	}
 }
 
+
 html {
 	color: var(--foreground);
 	/*background: url("recursion.gif");*/
@@ -47,6 +48,13 @@ body {
 	font-kerning: normal;
 }
 
+#tv-screen {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+
 #page-header {
 	display: flex;
 	flex-direction: row;
diff --git a/shark.js b/shark.js
new file mode 100644
index 0000000..7310868
--- /dev/null
+++ b/shark.js
@@ -0,0 +1,68 @@
+<script>
+let speed = 10;
+let scale = 0.33; // Image scale (I work on 1080p monitor)
+let canvas;
+let ctx;
+let logoColor;
+
+let dvd = {
+    x: 256,
+    y: 354,
+    xspeed: 2,
+    yspeed: 2,
+    img: new Image()
+};
+
+(function main(){
+    canvas = document.getElementById("tv-screen");
+    ctx = canvas.getContext("2d");
+    dvd.img.src = 'shark.png';
+
+    //Draw the "tv screen"
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    pickColor();
+    update();
+})();
+
+function update() {
+    setTimeout(() => {
+        //Draw the canvas background
+        ctx.fillStyle = '#00000000';
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        //Draw DVD Logo and his background
+        //ctx.fillStyle = logoColor;
+        //ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
+        //Move the logo
+        dvd.x+=dvd.xspeed;
+        dvd.y+=dvd.yspeed;
+        //Check for collision 
+        checkHitBox();
+        update();   
+    }, speed)
+}
+
+//Check for border collision
+function checkHitBox(){
+    if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
+        dvd.xspeed *= -1;
+        pickColor();
+    }
+        
+    if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
+        dvd.yspeed *= -1;
+        pickColor();
+    }    
+}
+
+//Pick a random color in RGB format
+function pickColor(){
+    r = Math.random() * (254 - 0) + 0;
+    g = Math.random() * (254 - 0) + 0;
+    b = Math.random() * (254 - 0) + 0;
+
+    logoColor = 'rgb('+r+','+g+', '+b+')';
+}
+</script>
diff --git a/shark.png b/shark.png
new file mode 100644
index 0000000..ddab225
Binary files /dev/null and b/shark.png differ
diff --git a/style.css b/style.css
index a76531a..84b246b 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 :root {
 	--foreground: #1a1a1a;
-	--background: #fdfdfd;
+	--background: #fdfdfdf0;
 	--border: #c9c9c9;
 	--html-background: #e3e3e3;
 	--blockquote-text: #606060;
@@ -12,7 +12,7 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		--foreground: #fdfdfd;
-		--background: #1a1a1a;
+		--background: #1a1a1af0;
 		--border: #4c4c4c;
 		--html-background: #303030;
 		--blockquote-text: #e6e6e6;
@@ -22,6 +22,7 @@
 	}
 }
 
+
 html {
 	color: var(--foreground);
 	/*background: url("recursion.gif");*/
@@ -47,6 +48,13 @@ body {
 	font-kerning: normal;
 }
 
+#tv-screen {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+
 #page-header {
 	display: flex;
 	flex-direction: row;
