diff --git a/_includes/footer.njk b/_includes/footer.njk
index 8c0d37b..5785252 100644
--- a/_includes/footer.njk
+++ b/_includes/footer.njk
@@ -11,5 +11,6 @@
 	{% endfor %}
 	{% endif %}
 		<a href="/sitemap/">Sitemap</a>
+		<a href="/special/flying-toasters" style="color: var(--background-color); text-decoration: none;">Fly</a>
 	</p>
 </footer>
diff --git a/content/special/flying-toasters/base.css b/content/special/flying-toasters/base.css
new file mode 100644
index 0000000..e160ee3
--- /dev/null
+++ b/content/special/flying-toasters/base.css
@@ -0,0 +1,38 @@
+/* apply a natural box layout model to all elements */
+*,
+*:before,
+*:after {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+html,
+body {
+	background-color: #111;
+	margin: 0;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
+.visuallyhidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+
+.clearfix:before,
+.clearfix:after {
+	content: " ";
+	display: table;
+}
+
+.clearfix:after {
+	clear: both;
+}
diff --git a/content/special/flying-toasters/img/favicon.png b/content/special/flying-toasters/img/favicon.png
new file mode 100644
index 0000000..9773e3e
Binary files /dev/null and b/content/special/flying-toasters/img/favicon.png differ
diff --git a/content/special/flying-toasters/img/toast0.gif b/content/special/flying-toasters/img/toast0.gif
new file mode 100644
index 0000000..2391bdf
Binary files /dev/null and b/content/special/flying-toasters/img/toast0.gif differ
diff --git a/content/special/flying-toasters/img/toast1.gif b/content/special/flying-toasters/img/toast1.gif
new file mode 100644
index 0000000..ccdb6d0
Binary files /dev/null and b/content/special/flying-toasters/img/toast1.gif differ
diff --git a/content/special/flying-toasters/img/toast2.gif b/content/special/flying-toasters/img/toast2.gif
new file mode 100644
index 0000000..4d8c39d
Binary files /dev/null and b/content/special/flying-toasters/img/toast2.gif differ
diff --git a/content/special/flying-toasters/img/toast3.gif b/content/special/flying-toasters/img/toast3.gif
new file mode 100644
index 0000000..847504a
Binary files /dev/null and b/content/special/flying-toasters/img/toast3.gif differ
diff --git a/content/special/flying-toasters/img/toaster-sprite.gif b/content/special/flying-toasters/img/toaster-sprite.gif
new file mode 100644
index 0000000..f484c00
Binary files /dev/null and b/content/special/flying-toasters/img/toaster-sprite.gif differ
diff --git a/content/special/flying-toasters/index.html b/content/special/flying-toasters/index.html
new file mode 100644
index 0000000..fb0d99e
--- /dev/null
+++ b/content/special/flying-toasters/index.html
@@ -0,0 +1,541 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Flying Toasters Screensaver | After Dark in CSS</title>
+		<meta
+			name="description"
+			content="Experience Flying Toasters, After Dark's most popular Mac screensaver of the 1990s, reinterpreted using modern CSS."
+		/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="shortcut icon" href="./img/favicon.png" />
+		<link rel="stylesheet" href="./base.css" />
+		<style>
+			/* Thanks to Brian Braun: https://github.com/bryanbraun/after-dark-css/ */
+			.audioContainer {
+				align-items: flex-end;
+				display: flex;
+				height: 100%;
+				justify-content: center;
+				padding-bottom: 2rem;
+			}
+			body {
+				background-color: black;
+			}
+			.toaster {
+				position: absolute;
+				width: 64px;
+				height: 64px;
+				background-image: url("./img/toaster-sprite.gif");
+			}
+			.toast {
+				position: absolute;
+				width: 64px;
+				height: 64px;
+				background-image: url("./img/toast1.gif");
+			}
+
+			/**
+     * Toaster Animations
+     *
+     * There are several kinds of toaster animations, marked as t1, t2, & t3.
+     *
+     * T1 is fastest speed
+     * T2 is mid speed & flaps out of sequence with T1
+     * T3 is the common speed
+     * T4 is a delayed batch going at the fastest speed
+     * T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
+     */
+			.t1 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s linear infinite;
+			}
+			.t2 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 16s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 16s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 16s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 16s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 16s linear infinite;
+			}
+			.t3 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s linear infinite;
+			}
+			.t4 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s 5s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s 5s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s 5s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s 5s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 10s 5s linear infinite;
+			}
+			.t5 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 4s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 4s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 4s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 4s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 4s linear infinite;
+			}
+			.t6 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 8s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 8s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 8s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 8s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 8s linear infinite;
+			}
+			.t7 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 12s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 12s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 12s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 12s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 12s linear infinite;
+			}
+			.t8 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 16s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 16s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 16s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 16s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate,
+					fly 24s 16s linear infinite;
+			}
+			.t9 {
+				-webkit-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 20s linear infinite;
+				-moz-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 20s linear infinite;
+				-ms-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 20s linear infinite;
+				-o-animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 20s linear infinite;
+				animation:
+					flap 0.2s steps(4) infinite alternate-reverse,
+					fly 24s 20s linear infinite;
+			}
+			/**
+     * Toast Animations
+     *
+     * There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
+     *
+     * Tst1 is fast
+     * Tst2 is mid speed
+     * Tst3 is the common speed
+     * Tst4 is a delayed batch of toast going at the common speed
+     */
+			.tst1 {
+				-webkit-animation: fly 10s linear infinite;
+				-moz-animation: fly 10s linear infinite;
+				-ms-animation: fly 10s linear infinite;
+				-o-animation: fly 10s linear infinite;
+				animation: fly 10s linear infinite;
+			}
+			.tst2 {
+				-webkit-animation: fly 16s linear infinite;
+				-moz-animation: fly 16s linear infinite;
+				-ms-animation: fly 16s linear infinite;
+				-o-animation: fly 16s linear infinite;
+				animation: fly 16s linear infinite;
+			}
+			.tst3 {
+				-webkit-animation: fly 24s linear infinite;
+				-moz-animation: fly 24s linear infinite;
+				-ms-animation: fly 24s linear infinite;
+				-o-animation: fly 24s linear infinite;
+				animation: fly 24s linear infinite;
+			}
+			.tst4 {
+				-webkit-animation: fly 24s 12s linear infinite;
+				-moz-animation: fly 24s 12s linear infinite;
+				-ms-animation: fly 24s 12s linear infinite;
+				-o-animation: fly 24s 12s linear infinite;
+				animation: fly 24s 12s linear infinite;
+			}
+
+			/**
+     * Starting positions of objects (both toast & toasters).
+     *  - There is a different position for each object to prevent overlapping.
+     *  - We use percentages in order to accommodate for all window dimensions.
+     *  - Use -6% as the smallest amount for remaining off-screen.
+     *  - Organized into reverse "L" shaped batches to keep a constant flow.
+     */
+			/* Batch 1 (-10% to -20%) */
+			/* Top edge, from right to left */
+			.p6 {
+				right: -2%;
+				top: -17%;
+			}
+			.p7 {
+				right: 10%;
+				top: -19%;
+			}
+			.p8 {
+				right: 20%;
+				top: -18%;
+			}
+			.p9 {
+				right: 30%;
+				top: -20%;
+			}
+			.p10 {
+				right: 40%;
+				top: -21%;
+			}
+			.p11 {
+				right: 50%;
+				top: -18%;
+			}
+			.p12 {
+				right: 60%;
+				top: -20%;
+			}
+			/* Right side, from top to bottom */
+			.p13 {
+				right: -17%;
+				top: 10%;
+			}
+			.p14 {
+				right: -19%;
+				top: 20%;
+			}
+			.p15 {
+				right: -21%;
+				top: 30%;
+			}
+			.p16 {
+				right: -23%;
+				top: 50%;
+			}
+			.p17 {
+				right: -25%;
+				top: 70%;
+			}
+
+			/* Batch 2 (-20% to -40%) */
+			/* Top edge, from right to left */
+			.p18 {
+				right: 0%;
+				top: -26%;
+			}
+			.p19 {
+				right: 10%;
+				top: -20%;
+			}
+			.p20 {
+				right: 20%;
+				top: -36%;
+			}
+			.p21 {
+				right: 30%;
+				top: -24%;
+			}
+			.p22 {
+				right: 40%;
+				top: -33%;
+			}
+			.p23 {
+				right: 60%;
+				top: -40%;
+			}
+			/* Right side, from top to bottom */
+			.p24 {
+				right: -26%;
+				top: 10%;
+			}
+			.p25 {
+				right: -36%;
+				top: 30%;
+			}
+			.p26 {
+				right: -29%;
+				top: 50%;
+			}
+
+			/* Batch 3 (-40% to -60%)*/
+			/* Top edge, from right to left */
+			.p27 {
+				right: 0;
+				top: -46%;
+			}
+			.p28 {
+				right: 10%;
+				top: -56%;
+			}
+			.p29 {
+				right: 20%;
+				top: -49%;
+			}
+			.p30 {
+				right: 30%;
+				top: -60%;
+			}
+			/* Right side, from top to bottom */
+			.p31 {
+				right: -46%;
+				top: 10%;
+			}
+			.p32 {
+				right: -56%;
+				top: 20%;
+			}
+			.p33 {
+				right: -49%;
+				top: 30%;
+			}
+
+			/* Flapping animation */
+			@-webkit-keyframes flap {
+				from {
+					background-position: 0px;
+				}
+				to {
+					background-position: -256px;
+				}
+			}
+			@-moz-keyframes flap {
+				from {
+					background-position: 0px;
+				}
+				to {
+					background-position: -256px;
+				}
+			}
+			@-o-keyframes flap {
+				from {
+					background-position: 0px;
+				}
+				to {
+					background-position: -256px;
+				}
+			}
+			@keyframes flap {
+				from {
+					background-position: 0px;
+				}
+				to {
+					background-position: -256px;
+				}
+			}
+
+			/* Gliding animation using translate */
+			/* Moving 1600px, to accomodate for large screens */
+			@-webkit-keyframes fly {
+				from {
+					-webkit-transform: translate(0, 0);
+					-moz-transform: translate(0, 0);
+					-o-transform: translate(0, 0);
+					-ms-transform: translate(0, 0);
+					transform: translate(0, 0);
+				}
+				to {
+					-webkit-transform: translate(-1600px, 1600px);
+					-moz-transform: translate(-1600px, 1600px);
+					-o-transform: translate(-1600px, 1600px);
+					-ms-transform: translate(-1600px, 1600px);
+					transform: translate(-1600px, 1600px);
+				}
+			}
+			@-moz-keyframes fly {
+				from {
+					-webkit-transform: translate(0, 0);
+					-moz-transform: translate(0, 0);
+					-o-transform: translate(0, 0);
+					-ms-transform: translate(0, 0);
+					transform: translate(0, 0);
+				}
+				to {
+					-webkit-transform: translate(-1600px, 1600px);
+					-moz-transform: translate(-1600px, 1600px);
+					-o-transform: translate(-1600px, 1600px);
+					-ms-transform: translate(-1600px, 1600px);
+					transform: translate(-1600px, 1600px);
+				}
+			}
+			@-o-keyframes fly {
+				from {
+					-webkit-transform: translate(0, 0);
+					-moz-transform: translate(0, 0);
+					-o-transform: translate(0, 0);
+					-ms-transform: translate(0, 0);
+					transform: translate(0, 0);
+				}
+				to {
+					-webkit-transform: translate(-1600px, 1600px);
+					-moz-transform: translate(-1600px, 1600px);
+					-o-transform: translate(-1600px, 1600px);
+					-ms-transform: translate(-1600px, 1600px);
+					transform: translate(-1600px, 1600px);
+				}
+			}
+			@keyframes fly {
+				from {
+					-webkit-transform: translate(0, 0);
+					-moz-transform: translate(0, 0);
+					-o-transform: translate(0, 0);
+					-ms-transform: translate(0, 0);
+					transform: translate(0, 0);
+				}
+				to {
+					-webkit-transform: translate(-1600px, 1600px);
+					-moz-transform: translate(-1600px, 1600px);
+					-o-transform: translate(-1600px, 1600px);
+					-ms-transform: translate(-1600px, 1600px);
+					transform: translate(-1600px, 1600px);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="audioContainer">
+			<audio controls autoplay src="./After Dark 3.0 - OMTW.mp3"></audio>
+		</div>
+		<!-- First group of objects -->
+		<div class="toaster t1 p6"></div>
+		<div class="toaster t3 p7"></div>
+		<div class="toast tst1 p8"></div>
+		<div class="toaster t3 p9"></div>
+		<div class="toaster t1 p11"></div>
+		<div class="toaster t3 p12"></div>
+		<div class="toaster t2 p13"></div>
+		<div class="toast tst3 p14"></div>
+		<div class="toast tst2 p16"></div>
+		<div class="toaster t1 p17"></div>
+		<div class="toast tst2 p19"></div>
+		<div class="toast tst3 p20"></div>
+		<div class="toaster t2 p21"></div>
+		<div class="toast tst1 p24"></div>
+		<div class="toaster t1 p22"></div>
+		<div class="toast tst2 p26"></div>
+		<div class="toaster t1 p28"></div>
+		<div class="toast tst2 p30"></div>
+		<div class="toaster t2 p31"></div>
+		<div class="toaster t1 p32"></div>
+		<div class="toast tst3 p33"></div>
+
+		<!-- wave 1 of (fast delayed) objects -->
+		<div class="toaster t4 p27"></div>
+		<div class="toaster t4 p10"></div>
+		<div class="toaster t4 p25"></div>
+		<div class="toaster t4 p29"></div>
+
+		<!-- wave 2 of (delayed) objects -->
+		<div class="toaster t5 p15"></div>
+		<div class="toaster t5 p18"></div>
+		<div class="toaster t5 p22"></div>
+
+		<!-- wave 3 of (delayed) objects -->
+		<div class="toaster t6 p6"></div>
+		<div class="toaster t6 p11"></div>
+		<div class="toaster t6 p15"></div>
+		<div class="toaster t6 p19"></div>
+		<div class="toaster t6 p23"></div>
+
+		<!-- wave 5 of (delayed) objects -->
+		<div class="toast tst4 p10"></div>
+		<div class="toast tst4 p23"></div>
+		<div class="toast tst4 p15"></div>
+		<div class="toaster t7 p7"></div>
+		<div class="toaster t7 p12"></div>
+		<div class="toaster t7 p16"></div>
+		<div class="toaster t7 p20"></div>
+		<div class="toaster t7 p24"></div>
+
+		<!-- wave 6 of (delayed) objects -->
+		<div class="toaster t8 p8"></div>
+		<div class="toaster t8 p13"></div>
+		<div class="toaster t8 p17"></div>
+		<div class="toaster t8 p25"></div>
+
+		<!-- wave 7 of (delayed) objects -->
+		<div class="toaster t9 p14"></div>
+		<div class="toaster t9 p18"></div>
+		<div class="toaster t9 p21"></div>
+		<div class="toaster t9 p26"></div>
+	</body>
+</html>
diff --git a/eleventy.config.js b/eleventy.config.js
index ab1aec1..6af4fe9 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -194,7 +194,9 @@ export default async function (eleventyConfig) {
 
 	// Passthrough
 
-	eleventyConfig.addPassthroughCopy({ "./public/": "/" });
+	eleventyConfig
+		.addPassthroughCopy({ "./public/": "/" })
+		.addPassthroughCopy("./content/special/");
 
 	// Get the first `n` elements of a collection.
 	eleventyConfig.addFilter("head", (array, n) => {
