mikufans 编程黑客马拉松

2022-11-20 18:57:39 +08:00
142 changed files with 15149 additions and 16436 deletions
--- a/.codespellrc
+++ b/.codespellrc
@@ -1,8 +0,0 @@
-[codespell]
-# Ref: https://github.com/codespell-project/codespell#using-a-config-file
-skip = .git*,node_modules,package-lock.json,*.css,.codespellrc
-check-hidden = true
-# Ignore super long lines -- must be minimized etc, acronyms
-# and some near hit variables
-ignore-regex = ^.{120,}|\b(currentY|FOM)\b
-# ignore-words-list =
--- a/.github/workflows/js.yml
+++ b/.github/workflows/js.yml
@@ -0,0 +1,24 @@
+name: tests
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 14.x, 16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm run build --if-present
+    - run: npm test
+      env:
+        CI: true
--- a/.github/workflows/spellcheck.yml
+++ b/.github/workflows/spellcheck.yml
@@ -1,23 +0,0 @@
-# Codespell configuration is within .codespellrc
---
-name: Spellcheck
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-permissions:
-  contents: read
-
-jobs:
-  codespell:
-    name: Check for spelling errors
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Codespell
-        uses: codespell-project/actions-codespell@v2
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,31 +0,0 @@
-name: Tests
-
-on:
-  - push
-
-permissions:
-  contents: read
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version:
-          - 18
-          - 20
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - run: npm install
-      - run: npm run build --if-present
-      - run: npm test
-        env:
-          CI: true
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ log/*.log
 tmp/**
 node_modules/
 .sass-cache
+dist/*.map
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,7 @@
 /test
 /examples
 .github
+.gulpfile
 .sass-cache
 gulpfile.js
+CONTRIBUTING.md
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,9 +1,10 @@
 ## Contributing
-Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**.
+
+Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.


-### General Questions and Support
-If you have questions about how to use reveal.js the best place to ask is in the [Discussions](https://github.com/hakimel/reveal.js/discussions). Anything that isn't a bug report should be posted as a dicussion instead.
+### Personal Support
+If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).


 ### Bug Reports
@@ -11,10 +12,11 @@ When reporting a bug make sure to include information about which browser and op


 ### Pull Requests
- Should be submitted from a feature/topic branch (not your master)
 - Should follow the coding style of the file you work in, most importantly:
  - Tabs to indent
  - Single-quoted strings
+- Should be made towards the **dev branch**
+- Should be submitted from a feature/topic branch (not your master)


 ### Plugins
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@@ -1,30 +1,28 @@
 <p align="center">
  <a href="https://revealjs.com">
-  <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">
+  <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text.svg" alt="reveal.js" width="450">
  </a>
  <br><br>
  <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
-  <a href="https://slides.com/"><img src="https://static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
+  <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
 </p>

-reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
+reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. [Check out the live demo](https://revealjs.com/).

-The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/).
+The framework comes with a broad range of features including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX support](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and much more.

---
+<h1>
+  <a href="https://revealjs.com/installation" style="font-size: 3em;">Get Started</a>
+</h1>

-Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.
+## Documentation
+The full reveal.js documentation is available at [revealjs.com](https://revealjs.com).

---
+## Online Editor
+Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js.

-### Getting started
- 🚀 [Install reveal.js](https://revealjs.com/installation)
- 👀 [View the demo presentation](https://revealjs.com/demo)
- 📖 [Read the documentation](https://revealjs.com/markup/)
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
+## License

--- 
-<div align="center">
-  MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
-</div>
+MIT licensed
+
+Copyright (C) 2011-2021 Hakim El Hattab, https://hakim.se
--- a/css/layout.scss
+++ b/css/layout.scss
@@ -16,7 +16,7 @@
 	box-sizing: border-box;
 }

-// Text that auto-fits its container
+// Text that auto-fits it's container
 .reveal .r-fit-text {
 	display: inline-block; // https://github.com/rikschennink/fitty#performance
 	white-space: nowrap;
@@ -25,7 +25,6 @@
 // Stack multiple elements on top of each other
 .reveal .r-stack {
 	display: grid;
-	grid-template-rows: 100%;
 }

 .reveal .r-stack > * {
--- a/css/print/paper.scss
+++ b/css/print/paper.scss
@@ -1,30 +1,42 @@
+/* Default Print Stylesheet Template
+   by Rob Glazebrook of CSSnewbie.com
+   Last Updated: June 4, 2008
+
+   Feel free (nay, compelled) to edit, append, and
+   manipulate this file as you see fit. */

@media print {
 	html:not(.print-pdf) {
-		overflow: visible;
+
+		background: #fff;
 		width: auto;
 		height: auto;
+		overflow: visible;

 		body {
-			margin: 0;
+			background: #fff;
+			font-size: 20pt;
+			width: auto;
+			height: auto;
+			border: 0;
+			margin: 0 5%;
 			padding: 0;
 			overflow: visible;
+			float: none !important;
 		}
-	}
-
-	html:not(.print-pdf) .reveal {
-		background: #fff;
-		font-size: 20pt;

+		.nestedarrow,
 		.controls,
+		.fork-reveal,
+		.share-reveal,
 		.state-background,
-		.progress,
-		.backgrounds,
-		.slide-number {
+		.reveal .progress,
+		.reveal .backgrounds,
+		.reveal .slide-number {
 			display: none !important;
 		}

-		p, td, li {
+		body, p, td, li {
 			font-size: 20pt!important;
 			color: #000;
 		}
@@ -37,6 +49,7 @@
 			letter-spacing: normal;
 		}

+		/* Need to reduce the size of the fonts for printing */
 		h1 { font-size: 28pt !important; }
 		h2 { font-size: 24pt !important; }
 		h3 { font-size: 22pt !important; }
@@ -61,19 +74,18 @@
 			margin: 0;
 			text-align: left !important;
 		}
-		pre,
-		table {
+		.reveal pre,
+		.reveal table {
 			margin-left: 0;
 			margin-right: 0;
 		}
-		pre code {
+		.reveal pre code {
 			padding: 20px;
 		}
-		blockquote {
+		.reveal blockquote {
 			margin: 20px 0;
 		}
-
-		.slides {
+		.reveal .slides {
 			position: static !important;
 			width: auto !important;
 			height: auto !important;
@@ -94,7 +106,7 @@

 			perspective-origin: 50% 50%;
 		}
-		.slides section {
+		.reveal .slides section {
 			visibility: visible !important;
 			position: static !important;
 			width: auto !important;
@@ -117,24 +129,19 @@
 			transform: none !important;
 			transition: none !important;
 		}
-		.slides section.stack {
+		.reveal .slides section.stack {
 			padding: 0 !important;
 		}
-		.slides section:last-of-type {
+		.reveal section:last-of-type {
 			page-break-after: avoid !important;
 		}
-		.slides section .fragment {
+		.reveal section .fragment {
 			opacity: 1 !important;
 			visibility: visible !important;

 			transform: none !important;
 		}
-
-		.r-fit-text {
-			white-space: normal !important;
-		}
-
-		section img {
+		.reveal section img {
 			display: block;
 			margin: 15px 0px;
 			background: rgba(255,255,255,1);
@@ -142,11 +149,11 @@
 			box-shadow: none;
 		}

-		section small {
+		.reveal section small {
 			font-size: 0.8em;
 		}

-		.hljs {
+		.reveal .hljs {
 			max-height: 100%;
 			white-space: pre-wrap;
 			word-wrap: break-word;
@@ -154,11 +161,11 @@
 			font-size: 15pt;
 		}

-		.hljs .hljs-ln-numbers {
+		.reveal .hljs .hljs-ln-numbers {
 			white-space: nowrap;
 		}

-		.hljs td {
+		.reveal .hljs td {
 			font-size: inherit !important;
 			color: inherit !important;
 		}
--- a/css/print/pdf.scss
+++ b/css/print/pdf.scss
@@ -5,7 +5,7 @@
 * https://revealjs.com/pdf-export/
 */

-html.reveal-print {
+html.print-pdf {
 	* {
 		-webkit-print-color-adjust: exact;
 	}
@@ -36,6 +36,7 @@ html.reveal-print {

 	.reveal pre code {
 		overflow: hidden !important;
+		font-family: Courier, 'Courier New', monospace !important;
 	}

 	.reveal {
@@ -70,10 +71,6 @@ html.reveal-print {
 		page-break-after: always;
 	}

-	.reveal .slides .pdf-page:last-of-type {
-		page-break-after: avoid;
-	}
-
 	.reveal .slides section {
 		visibility: visible !important;
 		display: block !important;
@@ -103,6 +100,7 @@ html.reveal-print {
 		box-shadow: none;
 	}

+
 	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
 	.reveal .backgrounds {
 		display: none;
@@ -149,7 +147,6 @@ html.reveal-print {
 		display: block;
 		position: absolute;
 		font-size: 14px;
-		visibility: visible;
 	}

 	/* This accessibility tool is not useful in PDF and breaks it visually */
--- a/css/reveal.scss
+++ b/css/reveal.scss
--- a/css/theme/source/beige.scss
+++ b/css/theme/source/beige.scss
@@ -6,7 +6,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -24,13 +23,10 @@ $headingColor: #333;
 $headingTextShadow: none;
 $backgroundColor: #f7f3de;
 $linkColor: #8b743d;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(79, 64, 28, 0.99);
 $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);

-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
 // Background generator
@mixin bodyBackground() {
 	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
--- a/css/theme/source/black-contrast.scss
+++ b/css/theme/source/black-contrast.scss
@@ -1,50 +0,0 @@
-/**
- * Black compact & high contrast reveal.js theme, with headers not in capitals.
- *
- * By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
- *
- * - Keep the source similar to black.css - for easy comparison.
- * - $mainFontSize controls code blocks, too (although under some ratio).
- */
-
-
-// Default mixins and settings -----------------
-@use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-// Include theme-specific fonts
-@import url(./fonts/source-sans-pro/source-sans-pro.css);
-
-
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #000000;
-
-$mainColor: #fff;
-$headingColor: #fff;
-
-$mainFontSize: 42px;
-$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #42affa;
-$linkColorHover: color.scale( $linkColor, $lightness: 15% );
-$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
-
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1.0em;
-
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#000);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------
--- a/css/theme/source/black.scss
+++ b/css/theme/source/black.scss
@@ -6,7 +6,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -30,8 +29,8 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #42affa;
-$linkColorHover: color.scale( $linkColor, $lightness: 15% );
-$selectionBackgroundColor: rgba( $linkColor, 0.75 );
+$linkColorHover: lighten( $linkColor, 15% );
+$selectionBackgroundColor: lighten( $linkColor, 25% );

 $heading1Size: 2.5em;
 $heading2Size: 1.6em;
--- a/css/theme/source/blood.scss
+++ b/css/theme/source/blood.scss
@@ -10,8 +10,7 @@
 *
 */

-// Default mixins and settings -----------------
-@use "sass:color";
+ // Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -41,7 +40,7 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b

 // Links
 $linkColor: $blood;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );

 // Text selection
 $selectionBackgroundColor: $blood;
--- a/css/theme/source/dracula.scss
+++ b/css/theme/source/dracula.scss
@@ -1,107 +0,0 @@
-/**
- * Dracula Dark theme for reveal.js.
- * Based on https://draculatheme.com
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-// Include theme-specific fonts
-@import url(./fonts/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-
-$systemFontsSansSerif: -apple-system,
-					   BlinkMacSystemFont,
-					   avenir next,
-					   avenir,
-					   segoe ui,
-					   helvetica neue,
-					   helvetica,
-					   Cantarell,
-					   Ubuntu,
-					   roboto,
-					   noto,
-					   arial,
-					   sans-serif;
-$systemFontsMono: Menlo,
-				  Consolas,
-				  Monaco,
-				  Liberation Mono,
-				  Lucida Console,
-				  monospace;
-
-/**
- * Dracula colors by Zeno Rocha
- * https://draculatheme.com/contribute
- */
-html * {
-	color-profile: sRGB;
-	rendering-intent: auto;
-}
-
-$background: #282A36;
-$foreground: #F8F8F2;
-$selection: #44475A;
-$comment: #6272A4;
-$red: #FF5555;
-$orange: #FFB86C;
-$yellow: #F1FA8C;
-$green: #50FA7B;
-$purple: #BD93F9;
-$cyan: #8BE9FD;
-$pink: #FF79C6;
-
-
-
-// Override theme settings (see ../template/settings.scss)
-$mainColor: $foreground;
-$headingColor: $purple;
-$headingTextShadow: none;
-$headingTextTransform: none;
-$backgroundColor: $background;
-$linkColor: $pink;
-$linkColorHover: $cyan;
-$selectionBackgroundColor: $selection;
-$inlineCodeColor: $green;
-$listBulletColor: $cyan;
-
-$mainFont: $systemFontsSansSerif;
-$codeFont: "Fira Code", $systemFontsMono;
-
-// Change text colors against light slide backgrounds
-@include light-bg-text-color($background);
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------
-
-// Define additional color effects based on Dracula spec
-// https://spec.draculatheme.com/
-:root {
-	--r-bold-color: #{$orange};
-	--r-italic-color: #{$yellow};
-	--r-inline-code-color: #{$inlineCodeColor};
-	--r-list-bullet-color: #{$listBulletColor};
-}
-
-.reveal {
-	strong, b {
-		color: var(--r-bold-color);
-	}
-	em, i, blockquote {
-		color: var(--r-italic-color);
-	}
-	code {
-		color: var(--r-inline-code-color);
-	}
-	// Dracula colored list bullets and numbers
-	ul, ol {
-		li::marker {
-			color: var(--r-list-bullet-color);
-		}
-	}
-}
-
--- a/css/theme/source/moon.scss
+++ b/css/theme/source/moon.scss
@@ -5,7 +5,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -19,6 +18,10 @@
 /**
 * Solarized colors by Ethan Schoonover
 */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}

 // Solarized colors
 $base03:    #002b36;
@@ -44,7 +47,7 @@ $headingColor: $base2;
 $headingTextShadow: none;
 $backgroundColor: $base03;
 $linkColor: $blue;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $magenta;

 // Change text colors against light slide backgrounds
--- a/css/theme/source/night.scss
+++ b/css/theme/source/night.scss
@@ -6,7 +6,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -22,7 +21,7 @@ $backgroundColor: #111;

 $mainFont: 'Open Sans', sans-serif;
 $linkColor: #e7ad52;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $headingFont: 'Montserrat', Impact, sans-serif;
 $headingTextShadow: none;
 $headingLetterSpacing: -0.03em;
--- a/css/theme/source/serif.scss
+++ b/css/theme/source/serif.scss
@@ -7,7 +7,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -23,12 +22,9 @@ $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: #F0F1EB;
 $linkColor: #51483D;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #26351C;

-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
 .reveal a {
  line-height: 1.3em;
 }
--- a/css/theme/source/simple.scss
+++ b/css/theme/source/simple.scss
@@ -8,7 +8,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -29,12 +28,9 @@ $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: #fff;
 $linkColor: #00008B;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);

-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
 // Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

--- a/css/theme/source/sky.scss
+++ b/css/theme/source/sky.scss
@@ -6,7 +6,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -27,12 +26,9 @@ $headingLetterSpacing: -0.08em;
 $headingTextShadow: none;
 $backgroundColor: #f7fbfc;
 $linkColor: #3b759e;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #134674;

-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
 // Fix links so they are not cut off
 .reveal a {
 	line-height: 1.3em;
--- a/css/theme/source/solarized.scss
+++ b/css/theme/source/solarized.scss
@@ -5,7 +5,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -49,12 +48,9 @@ $headingColor: $base01;
 $headingTextShadow: none;
 $backgroundColor: $base3;
 $linkColor: $blue;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $magenta;

-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
 // Background generator
 // @mixin bodyBackground() {
 // 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
--- a/css/theme/source/white-contrast.scss
+++ b/css/theme/source/white-contrast.scss
@@ -1,53 +0,0 @@
-/**
- * White compact & high contrast reveal.js theme, with headers not in capitals.
- *
- * By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
- *
- * - Keep the source similar to black.css - for easy comparison.
- * - $mainFontSize controls code blocks, too (although under some ratio).
- */
-
-
-// Default mixins and settings -----------------
-@use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-// Include theme-specific fonts
-@import url(./fonts/source-sans-pro/source-sans-pro.css);
-
-
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #fff;
-
-$mainColor: #000;
-$headingColor: #000;
-
-$mainFontSize: 42px;
-$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #2a76dd;
-$linkColorHover: color.scale( $linkColor, $lightness: 15% );
-$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
-
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1.0em;
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------
--- a/css/theme/source/white.scss
+++ b/css/theme/source/white.scss
@@ -6,7 +6,6 @@


 // Default mixins and settings -----------------
-@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -30,17 +29,14 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #2a76dd;
-$linkColorHover: color.scale( $linkColor, $lightness: 15% );
-$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
+$linkColorHover: lighten( $linkColor, 15% );
+$selectionBackgroundColor: lighten( $linkColor, 25% );

 $heading1Size: 2.5em;
 $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;

-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
 // Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

--- a/css/theme/template/exposer.scss
+++ b/css/theme/template/exposer.scss
@@ -1,32 +1,28 @@
-// Exposes theme's variables for easy reuse in CSS for plugin authors
-
-@use "sass:color";
+// Exposes theme's variables for easy re-use in CSS for plugin authors

 :root {
-  --r-background-color: #{$backgroundColor};
-  --r-main-font: #{$mainFont};
-  --r-main-font-size: #{$mainFontSize};
-  --r-main-color: #{$mainColor};
-  --r-block-margin: #{$blockMargin};
-  --r-heading-margin: #{$headingMargin};
-  --r-heading-font: #{$headingFont};
-  --r-heading-color: #{$headingColor};
-  --r-heading-line-height: #{$headingLineHeight};
-  --r-heading-letter-spacing: #{$headingLetterSpacing};
-  --r-heading-text-transform: #{$headingTextTransform};
-  --r-heading-text-shadow: #{$headingTextShadow};
-  --r-heading-font-weight: #{$headingFontWeight};
-  --r-heading1-text-shadow: #{$heading1TextShadow};
-  --r-heading1-size: #{$heading1Size};
-  --r-heading2-size: #{$heading2Size};
-  --r-heading3-size: #{$heading3Size};
-  --r-heading4-size: #{$heading4Size};
-  --r-code-font: #{$codeFont};
-  --r-link-color: #{$linkColor};
-  --r-link-color-dark: #{color.scale( $linkColor, $lightness: -15% )};
-  --r-link-color-hover: #{$linkColorHover};
-  --r-selection-background-color: #{$selectionBackgroundColor};
-  --r-selection-color: #{$selectionColor};
-  --r-overlay-element-bg-color: #{$overlayElementBgColor};
-  --r-overlay-element-fg-color: #{$overlayElementFgColor};
+  --background-color: #{$backgroundColor};
+  --main-font: #{$mainFont};
+  --main-font-size: #{$mainFontSize};
+  --main-color: #{$mainColor};
+  --block-margin: #{$blockMargin};
+  --heading-margin: #{$headingMargin};
+  --heading-font: #{$headingFont};
+  --heading-color: #{$headingColor};
+  --heading-line-height: #{$headingLineHeight};
+  --heading-letter-spacing: #{$headingLetterSpacing};
+  --heading-text-transform: #{$headingTextTransform};
+  --heading-text-shadow: #{$headingTextShadow};
+  --heading-font-weight: #{$headingFontWeight};
+  --heading1-text-shadow: #{$heading1TextShadow};
+  --heading1-size: #{$heading1Size};
+  --heading2-size: #{$heading2Size};
+  --heading3-size: #{$heading3Size};
+  --heading4-size: #{$heading4Size};
+  --code-font: #{$codeFont};
+  --link-color: #{$linkColor};
+  --link-color-dark: #{darken($linkColor , 15% )};
+  --link-color-hover: #{$linkColorHover};
+  --selection-background-color: #{$selectionBackgroundColor};
+  --selection-color: #{$selectionColor};
 }
--- a/css/theme/template/settings.scss
+++ b/css/theme/template/settings.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Base settings for all themes that can optionally be
 // overridden by the super-theme

@@ -34,17 +32,12 @@ $codeFont: monospace;

 // Links and actions
 $linkColor: #13DAEC;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$linkColorHover: lighten( $linkColor, 20% );

 // Text selection
 $selectionBackgroundColor: #FF5E99;
 $selectionColor: #fff;

-// Colors used for UI elements that are overlaid on top of
-// the presentation
-$overlayElementBgColor: 240, 240, 240;
-$overlayElementFgColor: 0, 0, 0;
-
 // Generates the presentation background, can be overridden
 // to return a background image or gradient
@mixin bodyBackground() {
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -8,25 +8,25 @@

 .reveal-viewport {
 	@include bodyBackground();
-	background-color: var(--r-background-color);
+	background-color: var(--background-color);
 }

 .reveal {
-	font-family: var(--r-main-font);
-	font-size: var(--r-main-font-size);
+	font-family: var(--main-font);
+	font-size: var(--main-font-size);
 	font-weight: normal;
-	color: var(--r-main-color);
+	color: var(--main-color);
 }

 .reveal ::selection {
-	color: var(--r-selection-color);
-	background: var(--r-selection-background-color);
+	color: var(--selection-color);
+	background: var(--selection-background-color);
 	text-shadow: none;
 }

 .reveal ::-moz-selection {
-	color: var(--r-selection-color);
-	background: var(--r-selection-background-color);
+	color: var(--selection-color);
+	background: var(--selection-background-color);
 	text-shadow: none;
 }

@@ -46,27 +46,27 @@
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-	margin: var(--r-heading-margin);
-	color: var(--r-heading-color);
+	margin: var(--heading-margin);
+	color: var(--heading-color);

-	font-family: var(--r-heading-font);
-	font-weight: var(--r-heading-font-weight);
-	line-height: var(--r-heading-line-height);
-	letter-spacing: var(--r-heading-letter-spacing);
+	font-family: var(--heading-font);
+	font-weight: var(--heading-font-weight);
+	line-height: var(--heading-line-height);
+	letter-spacing: var(--heading-letter-spacing);

-	text-transform: var(--r-heading-text-transform);
-	text-shadow: var(--r-heading-text-shadow);
+	text-transform: var(--heading-text-transform);
+	text-shadow: var(--heading-text-shadow);

 	word-wrap: break-word;
 }

-.reveal h1 {font-size: var(--r-heading1-size); }
-.reveal h2 {font-size: var(--r-heading2-size); }
-.reveal h3 {font-size: var(--r-heading3-size); }
-.reveal h4 {font-size: var(--r-heading4-size); }
+.reveal h1 {font-size: var(--heading1-size); }
+.reveal h2 {font-size: var(--heading2-size); }
+.reveal h3 {font-size: var(--heading3-size); }
+.reveal h4 {font-size: var(--heading4-size); }

 .reveal h1 {
-	text-shadow: var(--r-heading1-text-shadow);
+	text-shadow: var(--heading1-text-shadow);
 }


@@ -75,7 +75,7 @@
 *********************************************/

 .reveal p {
-	margin: var(--r-block-margin) 0;
+	margin: var(--block-margin) 0;
 	line-height: 1.3;
 }

@@ -150,7 +150,7 @@
 	display: block;
 	position: relative;
 	width: 70%;
-	margin: var(--r-block-margin) auto;
+	margin: var(--block-margin) auto;
 	padding: 5px;

 	font-style: italic;
@@ -170,11 +170,11 @@
 	display: block;
 	position: relative;
 	width: 90%;
-	margin: var(--r-block-margin) auto;
+	margin: var(--block-margin) auto;

 	text-align: left;
 	font-size: 0.55em;
-	font-family: var(--r-code-font);
+	font-family: var(--code-font);
 	line-height: 1.2em;

 	word-wrap: break-word;
@@ -183,7 +183,7 @@
 }

 .reveal code {
-	font-family: var(--r-code-font);
+	font-family: var(--code-font);
 	text-transform: none;
 	tab-size: 2;
 }
@@ -257,7 +257,7 @@
 }

 .reveal img {
-	margin: var(--r-block-margin) 0;
+	margin: var(--block-margin) 0;
 }


@@ -266,19 +266,20 @@
 *********************************************/

 .reveal a {
-	color: var(--r-link-color);
+	color: var(--link-color);
 	text-decoration: none;
 	transition: color .15s ease;
 }
 	.reveal a:hover {
-		color: var(--r-link-color-hover);
+		color: var(--link-color-hover);
 		text-shadow: none;
 		border: none;
 	}

 .reveal .roll span:after {
 	color: #fff;
-	background: var(--r-link-color-dark);
+	// background: darken( var(--link-color), 15% );
+	 background: var(--link-color-dark);

 }

@@ -288,7 +289,7 @@
 *********************************************/

 .reveal .r-frame {
-	border: 4px solid var(--r-main-color);
+	border: 4px solid var(--main-color);
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -297,7 +298,7 @@
 }

 .reveal a:hover .r-frame {
-	border-color: var(--r-link-color);
+	border-color: var(--link-color);
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -307,7 +308,7 @@
 *********************************************/

 .reveal .controls {
-	color: var(--r-link-color);
+	color: var(--link-color);
 }


@@ -317,7 +318,7 @@

 .reveal .progress {
 	background: rgba(0,0,0,0.2);
-	color: var(--r-link-color);
+	color: var(--link-color);
 }

 /*********************************************
@@ -325,6 +326,6 @@
 *********************************************/
 @media print {
    .backgrounds {
-        background-color: var(--r-background-color);
+        background-color: var(--background-color);
    }
 }
--- a/demo.html
+++ b/demo.html
@@ -52,7 +52,7 @@
 						<p>Slides can be nested inside of each other.</p>
 						<p>Use the <em>Space</em> key to navigate through all slides.</p>
 						<br>
-						<a href="#/2/1" class="navigate-down">
+						<a href="#" class="navigate-down">
 							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
@@ -86,7 +86,7 @@

 				<section data-auto-animate>
 					<h2 data-id="code-title">Pretty Code</h2>
-					<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
+					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
 						import React, { useState } from 'react';

 						function Example() {
@@ -101,8 +101,8 @@
 				</section>

 				<section data-auto-animate>
-					<h2 data-id="code-title">With Animations</h2>
-					<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
+					<h2 data-id="code-title">With animations</h2>
+					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
 						import React, { useState } from 'react';

 						function Example() {
@@ -165,9 +165,9 @@
 				</section>
 				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
 					<div class="r-stack">
-						<div data-id="box1" style="background: cyan; width: 300px; height: 300px;"></div>
-						<div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
-						<div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
+						<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
+						<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
+						<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
 					</div>
 					<h2 style="margin-top: 20px;">Auto-Animate</h2>
 				</section>
@@ -181,14 +181,14 @@

 				<section data-markdown>
 					<script type="text/template">
-						## Markdown Support
+						## Markdown support

 						Write content using inline or external Markdown.
 						Instructions and more info available in the [docs](https://revealjs.com/markdown/).

 						```html []
 						<section data-markdown>
-						  ## Markdown Support
+						  ## Markdown support

 						  Write content using inline or external Markdown.
 						  Instructions and more info available in the [docs](https://revealjs.com/markdown/).
@@ -197,25 +197,6 @@
 					</script>
 				</section>

-				<section>
-					<h2>Lightbox</h2>
-					Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
-					<div class="r-hstack" style="gap: 2rem;">
-						<div>
-							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
-								&lt;img src="image.png" data-preview-image="image.png"&gt;
-							</code></pre>
-							<img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
-						</div>
-						<div>
-							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
-								&lt;img src="video.png" data-preview-video="video.mp4"&gt;
-							</code></pre>
-							<img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
-						</div>
-					</div>
-				</section>
-
 				<section>
 					<p>Add the <code>r-fit-text</code> class to auto-size text</p>
 					<h2 class="r-fit-text">FIT TEXT</h2>
@@ -268,17 +249,17 @@
 					<p>
 						reveal.js comes with a few themes built in: <br>
 						<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
-						<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
 					</p>
 				</section>

@@ -292,11 +273,6 @@
 							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
-					<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
-						<h2>Gradient Backgrounds</h2>
-						<pre><code class="hljs html wrap">&lt;section data-background-gradient=
-							"linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
-					</section>
 					<section data-background="https://static.slid.es/reveal/image-placeholder.png">
 						<h2>Image Backgrounds</h2>
 						<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
@@ -305,7 +281,7 @@
 						<h2>Tiled Backgrounds</h2>
 						<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
 					</section>
-					<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
+					<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
 						<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
 							<h2>Video Backgrounds</h2>
 							<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
--- a/dist/reveal.css
+++ b/dist/reveal.css
--- a/dist/reveal.esm.js
+++ b/dist/reveal.esm.js
--- a/dist/reveal.esm.js.map
+++ b/dist/reveal.esm.js.map
--- a/dist/reveal.js
+++ b/dist/reveal.js
--- a/dist/reveal.js.map
+++ b/dist/reveal.js.map
--- a/dist/theme/beige.css
+++ b/dist/theme/beige.css
@@ -13,61 +13,59 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #f7f3de;
-  --r-main-font: Lato, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #333;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: League Gothic, Impact, sans-serif;
-  --r-heading-color: #333;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #8b743d;
-  --r-link-color-dark: rgb(118.15, 98.6, 51.85);
-  --r-link-color-hover: rgb(179.36, 150.84, 82.64);
-  --r-selection-background-color: rgba(79, 64, 28, 0.99);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
+  --background-color: #f7f3de;
+  --main-font: Lato, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #333;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: League Gothic, Impact, sans-serif;
+  --heading-color: #333;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #8b743d;
+  --link-color-dark: #564826;
+  --link-color-hover: #c0a86e;
+  --selection-background-color: rgba(79, 64, 28, 0.99);
+  --selection-color: #fff;
 }

 .reveal-viewport {
-  background: rgb(247, 242, 211);
-  background: -moz-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgb(247, 242, 211)));
-  background: -webkit-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: -o-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: -ms-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background-color: var(--r-background-color);
+  background: #f7f2d3;
+  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
+  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -86,42 +84,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -196,7 +194,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -216,17 +214,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -301,34 +299,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -337,7 +335,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -345,7 +343,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -353,7 +351,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -361,6 +359,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/black-contrast.css
+++ b/dist/theme/black-contrast.css
@@ -1,362 +0,0 @@
-/**
- * Black compact & high contrast reveal.js theme, with headers not in capitals.
- *
- * By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
- *
- * - Keep the source similar to black.css - for easy comparison.
- * - $mainFontSize controls code blocks, too (although under some ratio).
- */
-@import url(./fonts/source-sans-pro/source-sans-pro.css);
-section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #000;
-}
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-:root {
-  --r-background-color: #000000;
-  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-main-font-size: 42px;
-  --r-main-color: #fff;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-heading-color: #fff;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: 600;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 2.5em;
-  --r-heading2-size: 1.6em;
-  --r-heading3-size: 1.3em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #42affa;
-  --r-link-color-dark: rgb(19.8216494845, 155.4536082474, 248.7783505155);
-  --r-link-color-hover: rgb(94.35, 187, 250.75);
-  --r-selection-background-color: rgb(113.25, 195, 251.25);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
-}
-
-.reveal-viewport {
-  background: #000000;
-  background-color: var(--r-background-color);
-}
-
-.reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
-  font-weight: normal;
-  color: var(--r-main-color);
-}
-
-.reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal .slides section,
-.reveal .slides section > section {
-  line-height: 1.3;
-  font-weight: inherit;
-}
-
-/*********************************************
- * HEADERS
- *********************************************/
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
-  word-wrap: break-word;
-}
-
-.reveal h1 {
-  font-size: var(--r-heading1-size);
-}
-
-.reveal h2 {
-  font-size: var(--r-heading2-size);
-}
-
-.reveal h3 {
-  font-size: var(--r-heading3-size);
-}
-
-.reveal h4 {
-  font-size: var(--r-heading4-size);
-}
-
-.reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
-}
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: var(--r-block-margin) 0;
-  line-height: 1.3;
-}
-
-/* Remove trailing margins after titles */
-.reveal h1:last-child,
-.reveal h2:last-child,
-.reveal h3:last-child,
-.reveal h4:last-child,
-.reveal h5:last-child,
-.reveal h6:last-child {
-  margin-bottom: 0;
-}
-
-/* Ensure certain elements are never larger than the slide itself */
-.reveal img,
-.reveal video,
-.reveal iframe {
-  max-width: 95%;
-  max-height: 95%;
-}
-
-.reveal strong,
-.reveal b {
-  font-weight: bold;
-}
-
-.reveal em {
-  font-style: italic;
-}
-
-.reveal ol,
-.reveal dl,
-.reveal ul {
-  display: inline-block;
-  text-align: left;
-  margin: 0 0 0 1em;
-}
-
-.reveal ol {
-  list-style-type: decimal;
-}
-
-.reveal ul {
-  list-style-type: disc;
-}
-
-.reveal ul ul {
-  list-style-type: square;
-}
-
-.reveal ul ul ul {
-  list-style-type: circle;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-  display: block;
-  margin-left: 40px;
-}
-
-.reveal dt {
-  font-weight: bold;
-}
-
-.reveal dd {
-  margin-left: 40px;
-}
-
-.reveal blockquote {
-  display: block;
-  position: relative;
-  width: 70%;
-  margin: var(--r-block-margin) auto;
-  padding: 5px;
-  font-style: italic;
-  background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-
-.reveal blockquote p:first-child,
-.reveal blockquote p:last-child {
-  display: inline-block;
-}
-
-.reveal q {
-  font-style: italic;
-}
-
-.reveal pre {
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: var(--r-block-margin) auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: var(--r-code-font);
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
-}
-
-.reveal code {
-  font-family: var(--r-code-font);
-  text-transform: none;
-  tab-size: 2;
-}
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal;
-}
-
-.reveal .code-wrapper {
-  white-space: normal;
-}
-
-.reveal .code-wrapper code {
-  white-space: pre;
-}
-
-.reveal table {
-  margin: auto;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.reveal table th {
-  font-weight: bold;
-}
-
-.reveal table th,
-.reveal table td {
-  text-align: left;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid;
-}
-
-.reveal table th[align=center],
-.reveal table td[align=center] {
-  text-align: center;
-}
-
-.reveal table th[align=right],
-.reveal table td[align=right] {
-  text-align: right;
-}
-
-.reveal table tbody tr:last-child th,
-.reveal table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.reveal sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-
-.reveal sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-
-.reveal small {
-  display: inline-block;
-  font-size: 0.6em;
-  line-height: 1.2em;
-  vertical-align: top;
-}
-
-.reveal small * {
-  vertical-align: top;
-}
-
-.reveal img {
-  margin: var(--r-block-margin) 0;
-}
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: var(--r-link-color);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.reveal a:hover {
-  color: var(--r-link-color-hover);
-  text-shadow: none;
-  border: none;
-}
-
-.reveal .roll span:after {
-  color: #fff;
-  background: var(--r-link-color-dark);
-}
-
-/*********************************************
- * Frame helper
- *********************************************/
-.reveal .r-frame {
-  border: 4px solid var(--r-main-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-}
-
-.reveal a .r-frame {
-  transition: all 0.15s linear;
-}
-
-.reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: var(--r-background-color);
-  }
-}
--- a/dist/theme/black.css
+++ b/dist/theme/black.css
@@ -12,55 +12,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #191919;
-  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-main-font-size: 42px;
-  --r-main-color: #fff;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-heading-color: #fff;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: 600;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 2.5em;
-  --r-heading2-size: 1.6em;
-  --r-heading3-size: 1.3em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #42affa;
-  --r-link-color-dark: rgb(19.8216494845, 155.4536082474, 248.7783505155);
-  --r-link-color-hover: rgb(94.35, 187, 250.75);
-  --r-selection-background-color: rgba(66, 175, 250, 0.75);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
+  --background-color: #191919;
+  --main-font: Source Sans Pro, Helvetica, sans-serif;
+  --main-font-size: 42px;
+  --main-color: #fff;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --heading-color: #fff;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: none;
+  --heading-font-weight: 600;
+  --heading1-text-shadow: none;
+  --heading1-size: 2.5em;
+  --heading2-size: 1.6em;
+  --heading3-size: 1.3em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #42affa;
+  --link-color-dark: #068de9;
+  --link-color-hover: #8dcffc;
+  --selection-background-color: #bee4fd;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #191919;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -79,42 +77,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -189,7 +187,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -209,17 +207,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -294,34 +292,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -330,7 +328,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -338,7 +336,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -346,7 +344,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -354,6 +352,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/blood.css
+++ b/dist/theme/blood.css
@@ -18,55 +18,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #222;
-  --r-main-font: Ubuntu, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #eee;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Ubuntu, sans-serif;
-  --r-heading-color: #eee;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: 2px 2px 2px #222;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #a23;
-  --r-link-color-dark: rgb(144.5, 28.9, 43.35);
-  --r-link-color-hover: rgb(214.2, 51, 71.4);
-  --r-selection-background-color: #a23;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
+  --background-color: #222;
+  --main-font: Ubuntu, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #eee;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: Ubuntu, sans-serif;
+  --heading-color: #eee;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: 2px 2px 2px #222;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #a23;
+  --link-color-dark: #6a1520;
+  --link-color-hover: #dd5566;
+  --selection-background-color: #a23;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #222;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -85,42 +83,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -195,7 +193,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -215,17 +213,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -300,34 +298,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -336,7 +334,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -344,7 +342,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -352,7 +350,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -360,7 +358,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
 .reveal p {
--- a/dist/theme/dracula.css
+++ b/dist/theme/dracula.css
@@ -1,387 +0,0 @@
-/**
- * Dracula Dark theme for reveal.js.
- * Based on https://draculatheme.com
- */
-@import url(./fonts/league-gothic/league-gothic.css);
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-/**
- * Dracula colors by Zeno Rocha
- * https://draculatheme.com/contribute
- */
-html * {
-  color-profile: sRGB;
-  rendering-intent: auto;
-}
-
-section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #282A36;
-}
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-:root {
-  --r-background-color: #282A36;
-  --r-main-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #F8F8F2;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: League Gothic, Impact, sans-serif;
-  --r-heading-color: #BD93F9;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: none;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-  --r-link-color: #FF79C6;
-  --r-link-color-dark: rgb(255, 64.6, 174.0089552239);
-  --r-link-color-hover: #8BE9FD;
-  --r-selection-background-color: #44475A;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
-}
-
-.reveal-viewport {
-  background: #282A36;
-  background-color: var(--r-background-color);
-}
-
-.reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
-  font-weight: normal;
-  color: var(--r-main-color);
-}
-
-.reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal .slides section,
-.reveal .slides section > section {
-  line-height: 1.3;
-  font-weight: inherit;
-}
-
-/*********************************************
- * HEADERS
- *********************************************/
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
-  word-wrap: break-word;
-}
-
-.reveal h1 {
-  font-size: var(--r-heading1-size);
-}
-
-.reveal h2 {
-  font-size: var(--r-heading2-size);
-}
-
-.reveal h3 {
-  font-size: var(--r-heading3-size);
-}
-
-.reveal h4 {
-  font-size: var(--r-heading4-size);
-}
-
-.reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
-}
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: var(--r-block-margin) 0;
-  line-height: 1.3;
-}
-
-/* Remove trailing margins after titles */
-.reveal h1:last-child,
-.reveal h2:last-child,
-.reveal h3:last-child,
-.reveal h4:last-child,
-.reveal h5:last-child,
-.reveal h6:last-child {
-  margin-bottom: 0;
-}
-
-/* Ensure certain elements are never larger than the slide itself */
-.reveal img,
-.reveal video,
-.reveal iframe {
-  max-width: 95%;
-  max-height: 95%;
-}
-
-.reveal strong,
-.reveal b {
-  font-weight: bold;
-}
-
-.reveal em {
-  font-style: italic;
-}
-
-.reveal ol,
-.reveal dl,
-.reveal ul {
-  display: inline-block;
-  text-align: left;
-  margin: 0 0 0 1em;
-}
-
-.reveal ol {
-  list-style-type: decimal;
-}
-
-.reveal ul {
-  list-style-type: disc;
-}
-
-.reveal ul ul {
-  list-style-type: square;
-}
-
-.reveal ul ul ul {
-  list-style-type: circle;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-  display: block;
-  margin-left: 40px;
-}
-
-.reveal dt {
-  font-weight: bold;
-}
-
-.reveal dd {
-  margin-left: 40px;
-}
-
-.reveal blockquote {
-  display: block;
-  position: relative;
-  width: 70%;
-  margin: var(--r-block-margin) auto;
-  padding: 5px;
-  font-style: italic;
-  background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-
-.reveal blockquote p:first-child,
-.reveal blockquote p:last-child {
-  display: inline-block;
-}
-
-.reveal q {
-  font-style: italic;
-}
-
-.reveal pre {
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: var(--r-block-margin) auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: var(--r-code-font);
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
-}
-
-.reveal code {
-  font-family: var(--r-code-font);
-  text-transform: none;
-  tab-size: 2;
-}
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal;
-}
-
-.reveal .code-wrapper {
-  white-space: normal;
-}
-
-.reveal .code-wrapper code {
-  white-space: pre;
-}
-
-.reveal table {
-  margin: auto;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.reveal table th {
-  font-weight: bold;
-}
-
-.reveal table th,
-.reveal table td {
-  text-align: left;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid;
-}
-
-.reveal table th[align=center],
-.reveal table td[align=center] {
-  text-align: center;
-}
-
-.reveal table th[align=right],
-.reveal table td[align=right] {
-  text-align: right;
-}
-
-.reveal table tbody tr:last-child th,
-.reveal table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.reveal sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-
-.reveal sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-
-.reveal small {
-  display: inline-block;
-  font-size: 0.6em;
-  line-height: 1.2em;
-  vertical-align: top;
-}
-
-.reveal small * {
-  vertical-align: top;
-}
-
-.reveal img {
-  margin: var(--r-block-margin) 0;
-}
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: var(--r-link-color);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.reveal a:hover {
-  color: var(--r-link-color-hover);
-  text-shadow: none;
-  border: none;
-}
-
-.reveal .roll span:after {
-  color: #fff;
-  background: var(--r-link-color-dark);
-}
-
-/*********************************************
- * Frame helper
- *********************************************/
-.reveal .r-frame {
-  border: 4px solid var(--r-main-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-}
-
-.reveal a .r-frame {
-  transition: all 0.15s linear;
-}
-
-.reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: var(--r-background-color);
-  }
-}
-:root {
-  --r-bold-color: #FFB86C;
-  --r-italic-color: #F1FA8C;
-  --r-inline-code-color: #50FA7B;
-  --r-list-bullet-color: #8BE9FD;
-}
-
-.reveal strong, .reveal b {
-  color: var(--r-bold-color);
-}
-.reveal em, .reveal i, .reveal blockquote {
-  color: var(--r-italic-color);
-}
-.reveal code {
-  color: var(--r-inline-code-color);
-}
-.reveal ul li::marker, .reveal ol li::marker {
-  color: var(--r-list-bullet-color);
-}
--- a/dist/theme/league.css
+++ b/dist/theme/league.css
@@ -15,61 +15,59 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #2b2b2b;
-  --r-main-font: Lato, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #eee;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: League Gothic, Impact, sans-serif;
-  --r-heading-color: #eee;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #13DAEC;
-  --r-link-color-dark: rgb(16.15, 185.3, 200.6);
-  --r-link-color-hover: rgb(66.2, 225.4, 239.8);
-  --r-selection-background-color: #FF5E99;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
+  --background-color: #2b2b2b;
+  --main-font: Lato, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #eee;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: League Gothic, Impact, sans-serif;
+  --heading-color: #eee;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+  --heading-font-weight: normal;
+  --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #13DAEC;
+  --link-color-dark: #0d99a5;
+  --link-color-hover: #71e9f4;
+  --selection-background-color: #FF5E99;
+  --selection-color: #fff;
 }

 .reveal-viewport {
-  background: rgb(28, 30, 32);
-  background: -moz-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(85, 90, 95)), color-stop(100%, rgb(28, 30, 32)));
-  background: -webkit-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
-  background: -o-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
-  background: -ms-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
-  background: radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
-  background-color: var(--r-background-color);
+  background: #1c1e20;
+  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
+  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -88,42 +86,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -198,7 +196,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -218,17 +216,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -303,34 +301,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -339,7 +337,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -347,7 +345,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -355,7 +353,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -363,6 +361,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/moon.css
+++ b/dist/theme/moon.css
@@ -7,6 +7,11 @@
 /**
 * Solarized colors by Ethan Schoonover
 */
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto;
+}
+
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
  color: #222;
 }
@@ -15,55 +20,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #002b36;
-  --r-main-font: Lato, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #93a1a1;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: League Gothic, Impact, sans-serif;
-  --r-heading-color: #eee8d5;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #268bd2;
-  --r-link-color-dark: rgb(32.3, 118.15, 178.5);
-  --r-link-color-hover: rgb(77.5161290323, 162.8774193548, 222.8838709677);
-  --r-selection-background-color: #d33682;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
+  --background-color: #002b36;
+  --main-font: Lato, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #93a1a1;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: League Gothic, Impact, sans-serif;
+  --heading-color: #eee8d5;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: none;
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #268bd2;
+  --link-color-dark: #1a6091;
+  --link-color-hover: #78b9e6;
+  --selection-background-color: #d33682;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #002b36;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -82,42 +85,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -192,7 +195,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -212,17 +215,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -297,34 +300,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -333,7 +336,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -341,7 +344,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -349,7 +352,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -357,6 +360,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/night.css
+++ b/dist/theme/night.css
@@ -13,55 +13,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #111;
-  --r-main-font: Open Sans, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #eee;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Montserrat, Impact, sans-serif;
-  --r-heading-color: #eee;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: -0.03em;
-  --r-heading-text-transform: none;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #e7ad52;
-  --r-link-color-dark: rgb(225.2802030457, 153.4573604061, 40.7697969543);
-  --r-link-color-hover: rgb(235.8, 189.4, 116.6);
-  --r-selection-background-color: #e7ad52;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
+  --background-color: #111;
+  --main-font: Open Sans, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #eee;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: Montserrat, Impact, sans-serif;
+  --heading-color: #eee;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: -0.03em;
+  --heading-text-transform: none;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: none;
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #e7ad52;
+  --link-color-dark: #d08a1d;
+  --link-color-hover: #f3d7ac;
+  --selection-background-color: #e7ad52;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #111;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -80,42 +78,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -190,7 +188,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -210,17 +208,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -295,34 +293,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -331,7 +329,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -339,7 +337,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -347,7 +345,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -355,6 +353,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/serif.css
+++ b/dist/theme/serif.css
@@ -16,55 +16,53 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #F0F1EB;
-  --r-main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #000;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
-  --r-heading-color: #383D3D;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: none;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #51483D;
-  --r-link-color-dark: rgb(68.85, 61.2, 51.85);
-  --r-link-color-hover: rgb(122.9830985915, 109.3183098592, 92.6169014085);
-  --r-selection-background-color: #26351C;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
+  --background-color: #F0F1EB;
+  --main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
+  --main-font-size: 40px;
+  --main-color: #000;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
+  --heading-color: #383D3D;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: none;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: none;
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #51483D;
+  --link-color-dark: #25211c;
+  --link-color-hover: #8b7c69;
+  --selection-background-color: #26351C;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #F0F1EB;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -83,42 +81,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -193,7 +191,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -213,17 +211,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -298,34 +296,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -334,7 +332,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -342,7 +340,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -350,7 +348,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -358,6 +356,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/simple.css
+++ b/dist/theme/simple.css
@@ -15,55 +15,53 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #fff;
-  --r-main-font: Lato, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #000;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: News Cycle, Impact, sans-serif;
-  --r-heading-color: #000;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: none;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #00008B;
-  --r-link-color-dark: rgb(0, 0, 118.15);
-  --r-link-color-hover: rgb(0, 0, 213.2);
-  --r-selection-background-color: rgba(0, 0, 0, 0.99);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
+  --background-color: #fff;
+  --main-font: Lato, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #000;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: News Cycle, Impact, sans-serif;
+  --heading-color: #000;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: none;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: none;
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #00008B;
+  --link-color-dark: #00003f;
+  --link-color-hover: #0000f1;
+  --selection-background-color: rgba(0, 0, 0, 0.99);
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #fff;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -82,42 +80,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -192,7 +190,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -212,17 +210,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -297,34 +295,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -333,7 +331,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -341,7 +339,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -349,7 +347,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -357,6 +355,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/sky.css
+++ b/dist/theme/sky.css
@@ -17,32 +17,30 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #f7fbfc;
-  --r-main-font: Open Sans, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #333;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Quicksand, sans-serif;
-  --r-heading-color: #333;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: -0.08em;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #3b759e;
-  --r-link-color-dark: rgb(50.15, 99.45, 134.3);
-  --r-link-color-hover: rgb(84.330875576, 146.9815668203, 191.269124424);
-  --r-selection-background-color: #134674;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
+  --background-color: #f7fbfc;
+  --main-font: Open Sans, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #333;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: Quicksand, sans-serif;
+  --heading-color: #333;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: -0.08em;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: none;
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #3b759e;
+  --link-color-dark: #264c66;
+  --link-color-hover: #74a7cb;
+  --selection-background-color: #134674;
+  --selection-color: #fff;
 }

 .reveal-viewport {
@@ -53,25 +51,25 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
  background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
  background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -90,42 +88,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -200,7 +198,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -220,17 +218,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -305,34 +303,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -341,7 +339,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -349,7 +347,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -357,7 +355,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -365,6 +363,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/solarized.css
+++ b/dist/theme/solarized.css
@@ -16,55 +16,53 @@ html * {
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #fdf6e3;
-  --r-main-font: Lato, sans-serif;
-  --r-main-font-size: 40px;
-  --r-main-color: #657b83;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: League Gothic, Impact, sans-serif;
-  --r-heading-color: #586e75;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: normal;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 3.77em;
-  --r-heading2-size: 2.11em;
-  --r-heading3-size: 1.55em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #268bd2;
-  --r-link-color-dark: rgb(32.3, 118.15, 178.5);
-  --r-link-color-hover: rgb(77.5161290323, 162.8774193548, 222.8838709677);
-  --r-selection-background-color: #d33682;
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
+  --background-color: #fdf6e3;
+  --main-font: Lato, sans-serif;
+  --main-font-size: 40px;
+  --main-color: #657b83;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: League Gothic, Impact, sans-serif;
+  --heading-color: #586e75;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: none;
+  --heading-font-weight: normal;
+  --heading1-text-shadow: none;
+  --heading1-size: 3.77em;
+  --heading2-size: 2.11em;
+  --heading3-size: 1.55em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #268bd2;
+  --link-color-dark: #1a6091;
+  --link-color-hover: #78b9e6;
+  --selection-background-color: #d33682;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #fdf6e3;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -83,42 +81,42 @@ html * {
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -193,7 +191,7 @@ html * {
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -213,17 +211,17 @@ html * {
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -298,34 +296,34 @@ html * {
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -334,7 +332,7 @@ html * {
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -342,7 +340,7 @@ html * {
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -350,7 +348,7 @@ html * {
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -358,6 +356,6 @@ html * {
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/white-contrast.css
+++ b/dist/theme/white-contrast.css
@@ -1,362 +0,0 @@
-/**
- * White compact & high contrast reveal.js theme, with headers not in capitals.
- *
- * By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
- *
- * - Keep the source similar to black.css - for easy comparison.
- * - $mainFontSize controls code blocks, too (although under some ratio).
- */
-@import url(./fonts/source-sans-pro/source-sans-pro.css);
-section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff;
-}
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-:root {
-  --r-background-color: #fff;
-  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-main-font-size: 42px;
-  --r-main-color: #000;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-heading-color: #000;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: 600;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 2.5em;
-  --r-heading2-size: 1.6em;
-  --r-heading3-size: 1.3em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #2a76dd;
-  --r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
-  --r-link-color-hover: rgb(73.95, 138.55, 226.1);
-  --r-selection-background-color: rgb(95.25, 152.25, 229.5);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
-}
-
-.reveal-viewport {
-  background: #fff;
-  background-color: var(--r-background-color);
-}
-
-.reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
-  font-weight: normal;
-  color: var(--r-main-color);
-}
-
-.reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal .slides section,
-.reveal .slides section > section {
-  line-height: 1.3;
-  font-weight: inherit;
-}
-
-/*********************************************
- * HEADERS
- *********************************************/
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
-  word-wrap: break-word;
-}
-
-.reveal h1 {
-  font-size: var(--r-heading1-size);
-}
-
-.reveal h2 {
-  font-size: var(--r-heading2-size);
-}
-
-.reveal h3 {
-  font-size: var(--r-heading3-size);
-}
-
-.reveal h4 {
-  font-size: var(--r-heading4-size);
-}
-
-.reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
-}
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: var(--r-block-margin) 0;
-  line-height: 1.3;
-}
-
-/* Remove trailing margins after titles */
-.reveal h1:last-child,
-.reveal h2:last-child,
-.reveal h3:last-child,
-.reveal h4:last-child,
-.reveal h5:last-child,
-.reveal h6:last-child {
-  margin-bottom: 0;
-}
-
-/* Ensure certain elements are never larger than the slide itself */
-.reveal img,
-.reveal video,
-.reveal iframe {
-  max-width: 95%;
-  max-height: 95%;
-}
-
-.reveal strong,
-.reveal b {
-  font-weight: bold;
-}
-
-.reveal em {
-  font-style: italic;
-}
-
-.reveal ol,
-.reveal dl,
-.reveal ul {
-  display: inline-block;
-  text-align: left;
-  margin: 0 0 0 1em;
-}
-
-.reveal ol {
-  list-style-type: decimal;
-}
-
-.reveal ul {
-  list-style-type: disc;
-}
-
-.reveal ul ul {
-  list-style-type: square;
-}
-
-.reveal ul ul ul {
-  list-style-type: circle;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-  display: block;
-  margin-left: 40px;
-}
-
-.reveal dt {
-  font-weight: bold;
-}
-
-.reveal dd {
-  margin-left: 40px;
-}
-
-.reveal blockquote {
-  display: block;
-  position: relative;
-  width: 70%;
-  margin: var(--r-block-margin) auto;
-  padding: 5px;
-  font-style: italic;
-  background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-
-.reveal blockquote p:first-child,
-.reveal blockquote p:last-child {
-  display: inline-block;
-}
-
-.reveal q {
-  font-style: italic;
-}
-
-.reveal pre {
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: var(--r-block-margin) auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: var(--r-code-font);
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
-}
-
-.reveal code {
-  font-family: var(--r-code-font);
-  text-transform: none;
-  tab-size: 2;
-}
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal;
-}
-
-.reveal .code-wrapper {
-  white-space: normal;
-}
-
-.reveal .code-wrapper code {
-  white-space: pre;
-}
-
-.reveal table {
-  margin: auto;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.reveal table th {
-  font-weight: bold;
-}
-
-.reveal table th,
-.reveal table td {
-  text-align: left;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid;
-}
-
-.reveal table th[align=center],
-.reveal table td[align=center] {
-  text-align: center;
-}
-
-.reveal table th[align=right],
-.reveal table td[align=right] {
-  text-align: right;
-}
-
-.reveal table tbody tr:last-child th,
-.reveal table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.reveal sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-
-.reveal sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-
-.reveal small {
-  display: inline-block;
-  font-size: 0.6em;
-  line-height: 1.2em;
-  vertical-align: top;
-}
-
-.reveal small * {
-  vertical-align: top;
-}
-
-.reveal img {
-  margin: var(--r-block-margin) 0;
-}
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: var(--r-link-color);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.reveal a:hover {
-  color: var(--r-link-color-hover);
-  text-shadow: none;
-  border: none;
-}
-
-.reveal .roll span:after {
-  color: #fff;
-  background: var(--r-link-color-dark);
-}
-
-/*********************************************
- * Frame helper
- *********************************************/
-.reveal .r-frame {
-  border: 4px solid var(--r-main-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-}
-
-.reveal a .r-frame {
-  transition: all 0.15s linear;
-}
-
-.reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: var(--r-background-color);
-  }
-}
--- a/dist/theme/white.css
+++ b/dist/theme/white.css
@@ -12,55 +12,53 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * GLOBAL STYLES
 *********************************************/
 :root {
-  --r-background-color: #fff;
-  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-main-font-size: 42px;
-  --r-main-color: #222;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-heading-color: #222;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: uppercase;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: 600;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 2.5em;
-  --r-heading2-size: 1.6em;
-  --r-heading3-size: 1.3em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #2a76dd;
-  --r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
-  --r-link-color-hover: rgb(73.95, 138.55, 226.1);
-  --r-selection-background-color: rgb(95.25, 152.25, 229.5);
-  --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
+  --background-color: #fff;
+  --main-font: Source Sans Pro, Helvetica, sans-serif;
+  --main-font-size: 42px;
+  --main-color: #222;
+  --block-margin: 20px;
+  --heading-margin: 0 0 20px 0;
+  --heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --heading-color: #222;
+  --heading-line-height: 1.2;
+  --heading-letter-spacing: normal;
+  --heading-text-transform: uppercase;
+  --heading-text-shadow: none;
+  --heading-font-weight: 600;
+  --heading1-text-shadow: none;
+  --heading1-size: 2.5em;
+  --heading2-size: 1.6em;
+  --heading3-size: 1.3em;
+  --heading4-size: 1em;
+  --code-font: monospace;
+  --link-color: #2a76dd;
+  --link-color-dark: #1a53a1;
+  --link-color-hover: #6ca0e8;
+  --selection-background-color: #98bdef;
+  --selection-color: #fff;
 }

 .reveal-viewport {
  background: #fff;
-  background-color: var(--r-background-color);
+  background-color: var(--background-color);
 }

 .reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
  font-weight: normal;
-  color: var(--r-main-color);
+  color: var(--main-color);
 }

 .reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

 .reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
+  color: var(--selection-color);
+  background: var(--selection-background-color);
  text-shadow: none;
 }

@@ -79,42 +77,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
+  margin: var(--heading-margin);
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-weight: var(--heading-font-weight);
+  line-height: var(--heading-line-height);
+  letter-spacing: var(--heading-letter-spacing);
+  text-transform: var(--heading-text-transform);
+  text-shadow: var(--heading-text-shadow);
  word-wrap: break-word;
 }

 .reveal h1 {
-  font-size: var(--r-heading1-size);
+  font-size: var(--heading1-size);
 }

 .reveal h2 {
-  font-size: var(--r-heading2-size);
+  font-size: var(--heading2-size);
 }

 .reveal h3 {
-  font-size: var(--r-heading3-size);
+  font-size: var(--heading3-size);
 }

 .reveal h4 {
-  font-size: var(--r-heading4-size);
+  font-size: var(--heading4-size);
 }

 .reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
+  text-shadow: var(--heading1-text-shadow);
 }

 /*********************************************
 * OTHER
 *********************************************/
 .reveal p {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
  line-height: 1.3;
 }

@@ -189,7 +187,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 70%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
@@ -209,17 +207,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  display: block;
  position: relative;
  width: 90%;
-  margin: var(--r-block-margin) auto;
+  margin: var(--block-margin) auto;
  text-align: left;
  font-size: 0.55em;
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-  font-family: var(--r-code-font);
+  font-family: var(--code-font);
  text-transform: none;
  tab-size: 2;
 }
@@ -294,34 +292,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal img {
-  margin: var(--r-block-margin) 0;
+  margin: var(--block-margin) 0;
 }

 /*********************************************
 * LINKS
 *********************************************/
 .reveal a {
-  color: var(--r-link-color);
+  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
 }

 .reveal a:hover {
-  color: var(--r-link-color-hover);
+  color: var(--link-color-hover);
  text-shadow: none;
  border: none;
 }

 .reveal .roll span:after {
  color: #fff;
-  background: var(--r-link-color-dark);
+  background: var(--link-color-dark);
 }

 /*********************************************
 * Frame helper
 *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--r-main-color);
+  border: 4px solid var(--main-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

@@ -330,7 +328,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }

 .reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
+  border-color: var(--link-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }

@@ -338,7 +336,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 * NAVIGATION CONTROLS
 *********************************************/
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -346,7 +344,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
 .reveal .progress {
  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
+  color: var(--link-color);
 }

 /*********************************************
@@ -354,6 +352,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 *********************************************/
@media print {
  .backgrounds {
-    background-color: var(--r-background-color);
+    background-color: var(--background-color);
  }
 }
--- a/dist/theme/white_contrast_compact_verbatim_headers.css
+++ b/dist/theme/white_contrast_compact_verbatim_headers.css
@@ -1,360 +0,0 @@
-/**
- * White compact & high contrast reveal.js theme, with headers not in capitals.
- *
- * By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
- *
- * - Keep the source similar to black.css - for easy comparison.
- * - $mainFontSize controls code blocks, too (although under some ratio).
- */
-@import url(./fonts/source-sans-pro/source-sans-pro.css);
-section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff;
-}
-
-/*********************************************
- * GLOBAL STYLES
- *********************************************/
-:root {
-  --r-background-color: #fff;
-  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-main-font-size: 25px;
-  --r-main-color: #000;
-  --r-block-margin: 20px;
-  --r-heading-margin: 0 0 20px 0;
-  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --r-heading-color: #000;
-  --r-heading-line-height: 1.2;
-  --r-heading-letter-spacing: normal;
-  --r-heading-text-transform: none;
-  --r-heading-text-shadow: none;
-  --r-heading-font-weight: 450;
-  --r-heading1-text-shadow: none;
-  --r-heading1-size: 2.5em;
-  --r-heading2-size: 1.6em;
-  --r-heading3-size: 1.3em;
-  --r-heading4-size: 1em;
-  --r-code-font: monospace;
-  --r-link-color: #2a76dd;
-  --r-link-color-dark: #1a53a1;
-  --r-link-color-hover: #6ca0e8;
-  --r-selection-background-color: #98bdef;
-  --r-selection-color: #fff;
-}
-
-.reveal-viewport {
-  background: #fff;
-  background-color: var(--r-background-color);
-}
-
-.reveal {
-  font-family: var(--r-main-font);
-  font-size: var(--r-main-font-size);
-  font-weight: normal;
-  color: var(--r-main-color);
-}
-
-.reveal ::selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal ::-moz-selection {
-  color: var(--r-selection-color);
-  background: var(--r-selection-background-color);
-  text-shadow: none;
-}
-
-.reveal .slides section,
-.reveal .slides section > section {
-  line-height: 1.3;
-  font-weight: inherit;
-}
-
-/*********************************************
- * HEADERS
- *********************************************/
-.reveal h1,
-.reveal h2,
-.reveal h3,
-.reveal h4,
-.reveal h5,
-.reveal h6 {
-  margin: var(--r-heading-margin);
-  color: var(--r-heading-color);
-  font-family: var(--r-heading-font);
-  font-weight: var(--r-heading-font-weight);
-  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--r-heading-text-shadow);
-  word-wrap: break-word;
-}
-
-.reveal h1 {
-  font-size: var(--r-heading1-size);
-}
-
-.reveal h2 {
-  font-size: var(--r-heading2-size);
-}
-
-.reveal h3 {
-  font-size: var(--r-heading3-size);
-}
-
-.reveal h4 {
-  font-size: var(--r-heading4-size);
-}
-
-.reveal h1 {
-  text-shadow: var(--r-heading1-text-shadow);
-}
-
-/*********************************************
- * OTHER
- *********************************************/
-.reveal p {
-  margin: var(--r-block-margin) 0;
-  line-height: 1.3;
-}
-
-/* Remove trailing margins after titles */
-.reveal h1:last-child,
-.reveal h2:last-child,
-.reveal h3:last-child,
-.reveal h4:last-child,
-.reveal h5:last-child,
-.reveal h6:last-child {
-  margin-bottom: 0;
-}
-
-/* Ensure certain elements are never larger than the slide itself */
-.reveal img,
-.reveal video,
-.reveal iframe {
-  max-width: 95%;
-  max-height: 95%;
-}
-
-.reveal strong,
-.reveal b {
-  font-weight: bold;
-}
-
-.reveal em {
-  font-style: italic;
-}
-
-.reveal ol,
-.reveal dl,
-.reveal ul {
-  display: inline-block;
-  text-align: left;
-  margin: 0 0 0 1em;
-}
-
-.reveal ol {
-  list-style-type: decimal;
-}
-
-.reveal ul {
-  list-style-type: disc;
-}
-
-.reveal ul ul {
-  list-style-type: square;
-}
-
-.reveal ul ul ul {
-  list-style-type: circle;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-  display: block;
-  margin-left: 40px;
-}
-
-.reveal dt {
-  font-weight: bold;
-}
-
-.reveal dd {
-  margin-left: 40px;
-}
-
-.reveal blockquote {
-  display: block;
-  position: relative;
-  width: 70%;
-  margin: var(--r-block-margin) auto;
-  padding: 5px;
-  font-style: italic;
-  background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-}
-
-.reveal blockquote p:first-child,
-.reveal blockquote p:last-child {
-  display: inline-block;
-}
-
-.reveal q {
-  font-style: italic;
-}
-
-.reveal pre {
-  display: block;
-  position: relative;
-  width: 90%;
-  margin: var(--r-block-margin) auto;
-  text-align: left;
-  font-size: 0.55em;
-  font-family: var(--r-code-font);
-  line-height: 1.2em;
-  word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
-}
-
-.reveal code {
-  font-family: var(--r-code-font);
-  text-transform: none;
-  tab-size: 2;
-}
-
-.reveal pre code {
-  display: block;
-  padding: 5px;
-  overflow: auto;
-  max-height: 400px;
-  word-wrap: normal;
-}
-
-.reveal .code-wrapper {
-  white-space: normal;
-}
-
-.reveal .code-wrapper code {
-  white-space: pre;
-}
-
-.reveal table {
-  margin: auto;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.reveal table th {
-  font-weight: bold;
-}
-
-.reveal table th,
-.reveal table td {
-  text-align: left;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid;
-}
-
-.reveal table th[align=center],
-.reveal table td[align=center] {
-  text-align: center;
-}
-
-.reveal table th[align=right],
-.reveal table td[align=right] {
-  text-align: right;
-}
-
-.reveal table tbody tr:last-child th,
-.reveal table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.reveal sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-
-.reveal sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-
-.reveal small {
-  display: inline-block;
-  font-size: 0.6em;
-  line-height: 1.2em;
-  vertical-align: top;
-}
-
-.reveal small * {
-  vertical-align: top;
-}
-
-.reveal img {
-  margin: var(--r-block-margin) 0;
-}
-
-/*********************************************
- * LINKS
- *********************************************/
-.reveal a {
-  color: var(--r-link-color);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.reveal a:hover {
-  color: var(--r-link-color-hover);
-  text-shadow: none;
-  border: none;
-}
-
-.reveal .roll span:after {
-  color: #fff;
-  background: var(--r-link-color-dark);
-}
-
-/*********************************************
- * Frame helper
- *********************************************/
-.reveal .r-frame {
-  border: 4px solid var(--r-main-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-}
-
-.reveal a .r-frame {
-  transition: all 0.15s linear;
-}
-
-.reveal a:hover .r-frame {
-  border-color: var(--r-link-color);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-}
-
-/*********************************************
- * NAVIGATION CONTROLS
- *********************************************/
-.reveal .controls {
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PROGRESS BAR
- *********************************************/
-.reveal .progress {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--r-link-color);
-}
-
-/*********************************************
- * PRINT BACKGROUND
- *********************************************/
-@media print {
-  .backgrounds {
-    background-color: var(--r-background-color);
-  }
-}
--- a/examples/500-slides.html
+++ b/examples/500-slides.html
@@ -1,526 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-
-		<title>reveal.js - 500 slides</title>
-
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
-		<link rel="stylesheet" href="../dist/reveal.css">
-		<link rel="stylesheet" href="../dist/theme/black.css">
-	</head>
-
-	<body>
-		<div class="reveal">
-			<div class="slides">
-				<section><h1>1</h1></section>
-				<section><h1>2</h1></section>
-				<section><h1>3</h1></section>
-				<section><h1>4</h1></section>
-				<section><h1>5</h1></section>
-				<section><h1>6</h1></section>
-				<section><h1>7</h1></section>
-				<section><h1>8</h1></section>
-				<section><h1>9</h1></section>
-				<section><h1>10</h1></section>
-				<section><h1>11</h1></section>
-				<section><h1>12</h1></section>
-				<section><h1>13</h1></section>
-				<section><h1>14</h1></section>
-				<section><h1>15</h1></section>
-				<section><h1>16</h1></section>
-				<section><h1>17</h1></section>
-				<section><h1>18</h1></section>
-				<section><h1>19</h1></section>
-				<section><h1>20</h1></section>
-				<section><h1>21</h1></section>
-				<section><h1>22</h1></section>
-				<section><h1>23</h1></section>
-				<section><h1>24</h1></section>
-				<section><h1>25</h1></section>
-				<section><h1>26</h1></section>
-				<section><h1>27</h1></section>
-				<section><h1>28</h1></section>
-				<section><h1>29</h1></section>
-				<section><h1>30</h1></section>
-				<section><h1>31</h1></section>
-				<section><h1>32</h1></section>
-				<section><h1>33</h1></section>
-				<section><h1>34</h1></section>
-				<section><h1>35</h1></section>
-				<section><h1>36</h1></section>
-				<section><h1>37</h1></section>
-				<section><h1>38</h1></section>
-				<section><h1>39</h1></section>
-				<section><h1>40</h1></section>
-				<section><h1>41</h1></section>
-				<section><h1>42</h1></section>
-				<section><h1>43</h1></section>
-				<section><h1>44</h1></section>
-				<section><h1>45</h1></section>
-				<section><h1>46</h1></section>
-				<section><h1>47</h1></section>
-				<section><h1>48</h1></section>
-				<section><h1>49</h1></section>
-				<section><h1>50</h1></section>
-				<section><h1>51</h1></section>
-				<section><h1>52</h1></section>
-				<section><h1>53</h1></section>
-				<section><h1>54</h1></section>
-				<section><h1>55</h1></section>
-				<section><h1>56</h1></section>
-				<section><h1>57</h1></section>
-				<section><h1>58</h1></section>
-				<section><h1>59</h1></section>
-				<section><h1>60</h1></section>
-				<section><h1>61</h1></section>
-				<section><h1>62</h1></section>
-				<section><h1>63</h1></section>
-				<section><h1>64</h1></section>
-				<section><h1>65</h1></section>
-				<section><h1>66</h1></section>
-				<section><h1>67</h1></section>
-				<section><h1>68</h1></section>
-				<section><h1>69</h1></section>
-				<section><h1>70</h1></section>
-				<section><h1>71</h1></section>
-				<section><h1>72</h1></section>
-				<section><h1>73</h1></section>
-				<section><h1>74</h1></section>
-				<section><h1>75</h1></section>
-				<section><h1>76</h1></section>
-				<section><h1>77</h1></section>
-				<section><h1>78</h1></section>
-				<section><h1>79</h1></section>
-				<section><h1>80</h1></section>
-				<section><h1>81</h1></section>
-				<section><h1>82</h1></section>
-				<section><h1>83</h1></section>
-				<section><h1>84</h1></section>
-				<section><h1>85</h1></section>
-				<section><h1>86</h1></section>
-				<section><h1>87</h1></section>
-				<section><h1>88</h1></section>
-				<section><h1>89</h1></section>
-				<section><h1>90</h1></section>
-				<section><h1>91</h1></section>
-				<section><h1>92</h1></section>
-				<section><h1>93</h1></section>
-				<section><h1>94</h1></section>
-				<section><h1>95</h1></section>
-				<section><h1>96</h1></section>
-				<section><h1>97</h1></section>
-				<section><h1>98</h1></section>
-				<section><h1>99</h1></section>
-				<section><h1>100</h1></section>
-				<section><h1>101</h1></section>
-				<section><h1>102</h1></section>
-				<section><h1>103</h1></section>
-				<section><h1>104</h1></section>
-				<section><h1>105</h1></section>
-				<section><h1>106</h1></section>
-				<section><h1>107</h1></section>
-				<section><h1>108</h1></section>
-				<section><h1>109</h1></section>
-				<section><h1>110</h1></section>
-				<section><h1>111</h1></section>
-				<section><h1>112</h1></section>
-				<section><h1>113</h1></section>
-				<section><h1>114</h1></section>
-				<section><h1>115</h1></section>
-				<section><h1>116</h1></section>
-				<section><h1>117</h1></section>
-				<section><h1>118</h1></section>
-				<section><h1>119</h1></section>
-				<section><h1>120</h1></section>
-				<section><h1>121</h1></section>
-				<section><h1>122</h1></section>
-				<section><h1>123</h1></section>
-				<section><h1>124</h1></section>
-				<section><h1>125</h1></section>
-				<section><h1>126</h1></section>
-				<section><h1>127</h1></section>
-				<section><h1>128</h1></section>
-				<section><h1>129</h1></section>
-				<section><h1>130</h1></section>
-				<section><h1>131</h1></section>
-				<section><h1>132</h1></section>
-				<section><h1>133</h1></section>
-				<section><h1>134</h1></section>
-				<section><h1>135</h1></section>
-				<section><h1>136</h1></section>
-				<section><h1>137</h1></section>
-				<section><h1>138</h1></section>
-				<section><h1>139</h1></section>
-				<section><h1>140</h1></section>
-				<section><h1>141</h1></section>
-				<section><h1>142</h1></section>
-				<section><h1>143</h1></section>
-				<section><h1>144</h1></section>
-				<section><h1>145</h1></section>
-				<section><h1>146</h1></section>
-				<section><h1>147</h1></section>
-				<section><h1>148</h1></section>
-				<section><h1>149</h1></section>
-				<section><h1>150</h1></section>
-				<section><h1>151</h1></section>
-				<section><h1>152</h1></section>
-				<section><h1>153</h1></section>
-				<section><h1>154</h1></section>
-				<section><h1>155</h1></section>
-				<section><h1>156</h1></section>
-				<section><h1>157</h1></section>
-				<section><h1>158</h1></section>
-				<section><h1>159</h1></section>
-				<section><h1>160</h1></section>
-				<section><h1>161</h1></section>
-				<section><h1>162</h1></section>
-				<section><h1>163</h1></section>
-				<section><h1>164</h1></section>
-				<section><h1>165</h1></section>
-				<section><h1>166</h1></section>
-				<section><h1>167</h1></section>
-				<section><h1>168</h1></section>
-				<section><h1>169</h1></section>
-				<section><h1>170</h1></section>
-				<section><h1>171</h1></section>
-				<section><h1>172</h1></section>
-				<section><h1>173</h1></section>
-				<section><h1>174</h1></section>
-				<section><h1>175</h1></section>
-				<section><h1>176</h1></section>
-				<section><h1>177</h1></section>
-				<section><h1>178</h1></section>
-				<section><h1>179</h1></section>
-				<section><h1>180</h1></section>
-				<section><h1>181</h1></section>
-				<section><h1>182</h1></section>
-				<section><h1>183</h1></section>
-				<section><h1>184</h1></section>
-				<section><h1>185</h1></section>
-				<section><h1>186</h1></section>
-				<section><h1>187</h1></section>
-				<section><h1>188</h1></section>
-				<section><h1>189</h1></section>
-				<section><h1>190</h1></section>
-				<section><h1>191</h1></section>
-				<section><h1>192</h1></section>
-				<section><h1>193</h1></section>
-				<section><h1>194</h1></section>
-				<section><h1>195</h1></section>
-				<section><h1>196</h1></section>
-				<section><h1>197</h1></section>
-				<section><h1>198</h1></section>
-				<section><h1>199</h1></section>
-				<section><h1>200</h1></section>
-				<section><h1>201</h1></section>
-				<section><h1>202</h1></section>
-				<section><h1>203</h1></section>
-				<section><h1>204</h1></section>
-				<section><h1>205</h1></section>
-				<section><h1>206</h1></section>
-				<section><h1>207</h1></section>
-				<section><h1>208</h1></section>
-				<section><h1>209</h1></section>
-				<section><h1>210</h1></section>
-				<section><h1>211</h1></section>
-				<section><h1>212</h1></section>
-				<section><h1>213</h1></section>
-				<section><h1>214</h1></section>
-				<section><h1>215</h1></section>
-				<section><h1>216</h1></section>
-				<section><h1>217</h1></section>
-				<section><h1>218</h1></section>
-				<section><h1>219</h1></section>
-				<section><h1>220</h1></section>
-				<section><h1>221</h1></section>
-				<section><h1>222</h1></section>
-				<section><h1>223</h1></section>
-				<section><h1>224</h1></section>
-				<section><h1>225</h1></section>
-				<section><h1>226</h1></section>
-				<section><h1>227</h1></section>
-				<section><h1>228</h1></section>
-				<section><h1>229</h1></section>
-				<section><h1>230</h1></section>
-				<section><h1>231</h1></section>
-				<section><h1>232</h1></section>
-				<section><h1>233</h1></section>
-				<section><h1>234</h1></section>
-				<section><h1>235</h1></section>
-				<section><h1>236</h1></section>
-				<section><h1>237</h1></section>
-				<section><h1>238</h1></section>
-				<section><h1>239</h1></section>
-				<section><h1>240</h1></section>
-				<section><h1>241</h1></section>
-				<section><h1>242</h1></section>
-				<section><h1>243</h1></section>
-				<section><h1>244</h1></section>
-				<section><h1>245</h1></section>
-				<section><h1>246</h1></section>
-				<section><h1>247</h1></section>
-				<section><h1>248</h1></section>
-				<section><h1>249</h1></section>
-				<section><h1>250</h1></section>
-				<section><h1>251</h1></section>
-				<section><h1>252</h1></section>
-				<section><h1>253</h1></section>
-				<section><h1>254</h1></section>
-				<section><h1>255</h1></section>
-				<section><h1>256</h1></section>
-				<section><h1>257</h1></section>
-				<section><h1>258</h1></section>
-				<section><h1>259</h1></section>
-				<section><h1>260</h1></section>
-				<section><h1>261</h1></section>
-				<section><h1>262</h1></section>
-				<section><h1>263</h1></section>
-				<section><h1>264</h1></section>
-				<section><h1>265</h1></section>
-				<section><h1>266</h1></section>
-				<section><h1>267</h1></section>
-				<section><h1>268</h1></section>
-				<section><h1>269</h1></section>
-				<section><h1>270</h1></section>
-				<section><h1>271</h1></section>
-				<section><h1>272</h1></section>
-				<section><h1>273</h1></section>
-				<section><h1>274</h1></section>
-				<section><h1>275</h1></section>
-				<section><h1>276</h1></section>
-				<section><h1>277</h1></section>
-				<section><h1>278</h1></section>
-				<section><h1>279</h1></section>
-				<section><h1>280</h1></section>
-				<section><h1>281</h1></section>
-				<section><h1>282</h1></section>
-				<section><h1>283</h1></section>
-				<section><h1>284</h1></section>
-				<section><h1>285</h1></section>
-				<section><h1>286</h1></section>
-				<section><h1>287</h1></section>
-				<section><h1>288</h1></section>
-				<section><h1>289</h1></section>
-				<section><h1>290</h1></section>
-				<section><h1>291</h1></section>
-				<section><h1>292</h1></section>
-				<section><h1>293</h1></section>
-				<section><h1>294</h1></section>
-				<section><h1>295</h1></section>
-				<section><h1>296</h1></section>
-				<section><h1>297</h1></section>
-				<section><h1>298</h1></section>
-				<section><h1>299</h1></section>
-				<section><h1>300</h1></section>
-				<section><h1>301</h1></section>
-				<section><h1>302</h1></section>
-				<section><h1>303</h1></section>
-				<section><h1>304</h1></section>
-				<section><h1>305</h1></section>
-				<section><h1>306</h1></section>
-				<section><h1>307</h1></section>
-				<section><h1>308</h1></section>
-				<section><h1>309</h1></section>
-				<section><h1>310</h1></section>
-				<section><h1>311</h1></section>
-				<section><h1>312</h1></section>
-				<section><h1>313</h1></section>
-				<section><h1>314</h1></section>
-				<section><h1>315</h1></section>
-				<section><h1>316</h1></section>
-				<section><h1>317</h1></section>
-				<section><h1>318</h1></section>
-				<section><h1>319</h1></section>
-				<section><h1>320</h1></section>
-				<section><h1>321</h1></section>
-				<section><h1>322</h1></section>
-				<section><h1>323</h1></section>
-				<section><h1>324</h1></section>
-				<section><h1>325</h1></section>
-				<section><h1>326</h1></section>
-				<section><h1>327</h1></section>
-				<section><h1>328</h1></section>
-				<section><h1>329</h1></section>
-				<section><h1>330</h1></section>
-				<section><h1>331</h1></section>
-				<section><h1>332</h1></section>
-				<section><h1>333</h1></section>
-				<section><h1>334</h1></section>
-				<section><h1>335</h1></section>
-				<section><h1>336</h1></section>
-				<section><h1>337</h1></section>
-				<section><h1>338</h1></section>
-				<section><h1>339</h1></section>
-				<section><h1>340</h1></section>
-				<section><h1>341</h1></section>
-				<section><h1>342</h1></section>
-				<section><h1>343</h1></section>
-				<section><h1>344</h1></section>
-				<section><h1>345</h1></section>
-				<section><h1>346</h1></section>
-				<section><h1>347</h1></section>
-				<section><h1>348</h1></section>
-				<section><h1>349</h1></section>
-				<section><h1>350</h1></section>
-				<section><h1>351</h1></section>
-				<section><h1>352</h1></section>
-				<section><h1>353</h1></section>
-				<section><h1>354</h1></section>
-				<section><h1>355</h1></section>
-				<section><h1>356</h1></section>
-				<section><h1>357</h1></section>
-				<section><h1>358</h1></section>
-				<section><h1>359</h1></section>
-				<section><h1>360</h1></section>
-				<section><h1>361</h1></section>
-				<section><h1>362</h1></section>
-				<section><h1>363</h1></section>
-				<section><h1>364</h1></section>
-				<section><h1>365</h1></section>
-				<section><h1>366</h1></section>
-				<section><h1>367</h1></section>
-				<section><h1>368</h1></section>
-				<section><h1>369</h1></section>
-				<section><h1>370</h1></section>
-				<section><h1>371</h1></section>
-				<section><h1>372</h1></section>
-				<section><h1>373</h1></section>
-				<section><h1>374</h1></section>
-				<section><h1>375</h1></section>
-				<section><h1>376</h1></section>
-				<section><h1>377</h1></section>
-				<section><h1>378</h1></section>
-				<section><h1>379</h1></section>
-				<section><h1>380</h1></section>
-				<section><h1>381</h1></section>
-				<section><h1>382</h1></section>
-				<section><h1>383</h1></section>
-				<section><h1>384</h1></section>
-				<section><h1>385</h1></section>
-				<section><h1>386</h1></section>
-				<section><h1>387</h1></section>
-				<section><h1>388</h1></section>
-				<section><h1>389</h1></section>
-				<section><h1>390</h1></section>
-				<section><h1>391</h1></section>
-				<section><h1>392</h1></section>
-				<section><h1>393</h1></section>
-				<section><h1>394</h1></section>
-				<section><h1>395</h1></section>
-				<section><h1>396</h1></section>
-				<section><h1>397</h1></section>
-				<section><h1>398</h1></section>
-				<section><h1>399</h1></section>
-				<section><h1>400</h1></section>
-				<section><h1>401</h1></section>
-				<section><h1>402</h1></section>
-				<section><h1>403</h1></section>
-				<section><h1>404</h1></section>
-				<section><h1>405</h1></section>
-				<section><h1>406</h1></section>
-				<section><h1>407</h1></section>
-				<section><h1>408</h1></section>
-				<section><h1>409</h1></section>
-				<section><h1>410</h1></section>
-				<section><h1>411</h1></section>
-				<section><h1>412</h1></section>
-				<section><h1>413</h1></section>
-				<section><h1>414</h1></section>
-				<section><h1>415</h1></section>
-				<section><h1>416</h1></section>
-				<section><h1>417</h1></section>
-				<section><h1>418</h1></section>
-				<section><h1>419</h1></section>
-				<section><h1>420</h1></section>
-				<section><h1>421</h1></section>
-				<section><h1>422</h1></section>
-				<section><h1>423</h1></section>
-				<section><h1>424</h1></section>
-				<section><h1>425</h1></section>
-				<section><h1>426</h1></section>
-				<section><h1>427</h1></section>
-				<section><h1>428</h1></section>
-				<section><h1>429</h1></section>
-				<section><h1>430</h1></section>
-				<section><h1>431</h1></section>
-				<section><h1>432</h1></section>
-				<section><h1>433</h1></section>
-				<section><h1>434</h1></section>
-				<section><h1>435</h1></section>
-				<section><h1>436</h1></section>
-				<section><h1>437</h1></section>
-				<section><h1>438</h1></section>
-				<section><h1>439</h1></section>
-				<section><h1>440</h1></section>
-				<section><h1>441</h1></section>
-				<section><h1>442</h1></section>
-				<section><h1>443</h1></section>
-				<section><h1>444</h1></section>
-				<section><h1>445</h1></section>
-				<section><h1>446</h1></section>
-				<section><h1>447</h1></section>
-				<section><h1>448</h1></section>
-				<section><h1>449</h1></section>
-				<section><h1>450</h1></section>
-				<section><h1>451</h1></section>
-				<section><h1>452</h1></section>
-				<section><h1>453</h1></section>
-				<section><h1>454</h1></section>
-				<section><h1>455</h1></section>
-				<section><h1>456</h1></section>
-				<section><h1>457</h1></section>
-				<section><h1>458</h1></section>
-				<section><h1>459</h1></section>
-				<section><h1>460</h1></section>
-				<section><h1>461</h1></section>
-				<section><h1>462</h1></section>
-				<section><h1>463</h1></section>
-				<section><h1>464</h1></section>
-				<section><h1>465</h1></section>
-				<section><h1>466</h1></section>
-				<section><h1>467</h1></section>
-				<section><h1>468</h1></section>
-				<section><h1>469</h1></section>
-				<section><h1>470</h1></section>
-				<section><h1>471</h1></section>
-				<section><h1>472</h1></section>
-				<section><h1>473</h1></section>
-				<section><h1>474</h1></section>
-				<section><h1>475</h1></section>
-				<section><h1>476</h1></section>
-				<section><h1>477</h1></section>
-				<section><h1>478</h1></section>
-				<section><h1>479</h1></section>
-				<section><h1>480</h1></section>
-				<section><h1>481</h1></section>
-				<section><h1>482</h1></section>
-				<section><h1>483</h1></section>
-				<section><h1>484</h1></section>
-				<section><h1>485</h1></section>
-				<section><h1>486</h1></section>
-				<section><h1>487</h1></section>
-				<section><h1>488</h1></section>
-				<section><h1>489</h1></section>
-				<section><h1>490</h1></section>
-				<section><h1>491</h1></section>
-				<section><h1>492</h1></section>
-				<section><h1>493</h1></section>
-				<section><h1>494</h1></section>
-				<section><h1>495</h1></section>
-				<section><h1>496</h1></section>
-				<section><h1>497</h1></section>
-				<section><h1>498</h1></section>
-				<section><h1>499</h1></section>
-			</div>
-		</div>
-
-		<script src="../dist/reveal.js"></script>
-		<script>
-			Reveal.initialize({
-				transition: 'linear'
-			});
-		</script>
-	</body>
-</html>
--- a/examples/auto-animate.html
+++ b/examples/auto-animate.html
@@ -125,7 +125,7 @@
 				</section>

 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h3>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h2>
 					<h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>
 					<div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div>
 					<div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
@@ -133,7 +133,7 @@
 					<div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
 				</section>
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h3>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h2>
 					<h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2>
 					<div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div>
 					<div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
@@ -141,7 +141,7 @@
 					<div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
 				</section>
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
 					<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
 					<div data-id="1" style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;"></div>
 					<div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div>
@@ -149,7 +149,7 @@
 					<div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div>
 				</section>
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
 					<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
 					<div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div>
 					<div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
@@ -176,37 +176,6 @@
 					<h3>B2</h3>
 				</section>

-				<section>
-					<section id="stacked-slide-1" data-auto-animate>
-						<a href="#/stacked-slide-1">Slide 1</a><br>
-						<a href="#/stacked-slide-2">Slide 2</a><br>
-						<a href="#/stacked-slide-3">Slide 3</a><br>
-						<a href="#/stacked-slide-4">Slide 4</a><br>
-						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 0px;">A</div>
-					</section>
-					<section id="stacked-slide-2" data-auto-animate>
-						<a href="#/stacked-slide-1">Slide 1</a><br>
-						<a href="#/stacked-slide-2">Slide 2</a><br>
-						<a href="#/stacked-slide-3">Slide 3</a><br>
-						<a href="#/stacked-slide-4">Slide 4</a><br>
-						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 25%;">A</div>
-					</section>
-					<section id="stacked-slide-3" data-auto-animate>
-						<a href="#/stacked-slide-1">Slide 1</a><br>
-						<a href="#/stacked-slide-2">Slide 2</a><br>
-						<a href="#/stacked-slide-3">Slide 3</a><br>
-						<a href="#/stacked-slide-4">Slide 4</a><br>
-						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 50%;">A</div>
-					</section>
-					<section id="stacked-slide-4" data-auto-animate>
-						<a href="#/stacked-slide-1">Slide 1</a><br>
-						<a href="#/stacked-slide-2">Slide 2</a><br>
-						<a href="#/stacked-slide-3">Slide 3</a><br>
-						<a href="#/stacked-slide-4">Slide 4</a><br>
-						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 75%;">A</div>
-					</section>
-				</section>
-
 			</div>

 		</div>
--- a/examples/backgrounds.html
+++ b/examples/backgrounds.html
@@ -89,7 +89,7 @@
 					<h2>Same background twice (2/2)</h2>
 				</section>

-				<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
+				<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
 					<h2>Video background</h2>
 				</section>

--- a/examples/layout-helpers.html
+++ b/examples/layout-helpers.html
@@ -123,7 +123,7 @@

 				<section id="vstack">
 					<h2>VStack</h2>
-					<p>Stacks multiple elements vertically.</p>
+					<p>Stacks multiple elements horizontally.</p>
 					<pre><code class="html" data-trim data-line-numbers>
 					  <div class="r-vstack">
 					    &lt;img width="450" height="300" src="..."&gt;
--- a/examples/lightbox.html
+++ b/examples/lightbox.html
@@ -1,144 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-	<head>
-		<meta charset="utf-8">
-
-		<title>reveal.js - Ligthbox</title>
-
-		<link rel="stylesheet" href="../dist/reveal.css">
-		<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
-
-		<style>
-			.reveal {
-				font-size: 24px;
-			}
-			.reveal figure {
-				margin: 0 0 1rem 0;
-				text-align: left;
-			}
-			.reveal figure img,
-			.reveal figure video {
-				margin: 0.25rem 0 0 0;
-			}
-			figcaption, a {
-				font-size: 16px;
-			}
-		</style>
-	</head>
-
-	<body>
-
-		<div class="reveal">
-
-			<div class="slides">
-
-				<section>
-
-					<h2>Preview Overlays</h2>
-
-					<div class="r-hstack items-start">
-						<div class="r-vstack items-start">
-							<h5>Images</h5>
-							<figure>
-								<figcaption>Preview with default settings:</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image>
-							</figure>
-							<figure>
-								<figcaption>Preview with data-preview-fit="contain"</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
-							</figure>
-							<figure>
-								<figcaption>Preview with data-preview-fit="cover"</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="cover">
-							</figure>
-							<figure>
-								<figcaption>Preview another image (c)</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/b.png" data-preview-image="https://static.slid.es/images/alphabet/v1/c.png">
-							</figure>
-							<a href="#" data-preview-image="https://static.slid.es/images/alphabet/v1/x.png">
-								Preview image from a link.
-							</a>
-						</div>
-
-						<div style="width: 1px; height: 30vh; margin: 0 3rem;background-color: #999;"></div>
-
-						<div class="r-vstack items-start">
-							<h5>Videos</h5>
-							<figure>
-								<figcaption>Preview video</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/x.png" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
-							</figure>
-							<figure>
-								<figcaption>Preview video</figcaption>
-								<video height="50" src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video></video>
-							</figure>
-							<a href="#" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
-								Preview video from a link.
-							</a>
-						</div>
-
-						<div style="width: 1px; height: 30vh; margin: 0 3rem;background-color: #999;"></div>
-
-						<div class="r-vstack items-start">
-							<h5>Iframes</h5>
-							<a href="https://hakim.se">https://hakim.se | data-preview-link</a>
-							<a data-preview-link href="https://hakim.se">https://hakim.se | data-preview-link</a>
-							<br />
-							<a data-preview-link="false" href="https://hakim.se">https://hakim.se | data-preview-link=false</a>
-							<br />
-							<figure>
-								<figcaption>Preview link from an image</figcaption>
-								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-link="https://hakim.se">
-							</figure>
-						</div>
-					</div>
-
-				</section>
-
-				<section style="text-align: left;">
-
-					<h2>Lightbox</h2>
-
-					<div class="r-hstack items-start justify-start">
-						<div class="r-vstack items-start">
-							<h5>Images</h5>
-							<figure>
-								<img height="100" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
-							</figure>
-						</div>
-
-						<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
-
-						<div class="r-vstack items-start">
-							<h5>Videos</h5>
-							<figure>
-								<video height="100" src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video></video>
-							</figure>
-						</div>
-
-						<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
-
-						<div class="r-vstack items-start">
-							<h5>Iframes</h5>
-							<a style="font-size: 28px;" data-preview-link href="https://hakim.se">https://hakim.se</a>
-						</div>
-					</div>
-
-				</section>
-
-			</div>
-
-		</div>
-
-		<script src="../dist/reveal.js"></script>
-		<script>
-			Reveal.initialize({
-				previewLinks: false,
-				width: 1280,
-				height: 720
-			});
-		</script>
-
-	</body>
-</html>
--- a/examples/markdown.html
+++ b/examples/markdown.html
@@ -21,8 +21,8 @@
                <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
                <section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>

-                <!-- Slides are separated by three dashes (the default) -->
-                <section data-markdown>
+                <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
+                <section data-markdown data-separator="---">
                    <script type="text/template">
                        ## Demo 1
                        Slide 1
@@ -35,7 +35,7 @@
                    </script>
                </section>

-                <!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
+                <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
                <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
                    <script type="text/template">
                        ## Demo 2
@@ -53,8 +53,8 @@
                    </script>
                </section>

-                <!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
-                <section data-markdown data-separator="$x">
+                <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
+                <section data-markdown>
                    <script type="text/template">
                        A

@@ -99,42 +99,13 @@
                    </script>
                </section>

-                <!-- add optional line count offset, in this case 287 -->
-                <section data-markdown>
-                    <script type="text/template">
-                        ## echo.c
-
-                        ```c [287: 2|4,6]
-                        /* All of the options in this arg are valid, so handle them. */
-                        p = arg + 1;
-                        do {
-                            if (*p == 'n')
-                                nflag = 0;
-                            if (*p == 'e')
-                                eflag = '\\';
-                        } while (*++p); 
-                        ```
-                        [source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
-                    </script>
-                </section>
-
                <!-- Images -->
                <section data-markdown>
                    <script type="text/template">
-                        ![Sample image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
+                        ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
                    </script>
                </section>

-                <!-- Math -->
-                <section data-markdown>
-					## The Lorenz Equations
-					`\[\begin{aligned}
-					\dot{x} &amp; = \sigma(y-x) \\
-					\dot{y} &amp; = \rho x - y - xz \\
-					\dot{z} &amp; = -\beta z + xy
-					\end{aligned} \]`
-                </section>
-
            </div>
 		</div>

@@ -142,7 +113,6 @@
        <script src="../plugin/markdown/markdown.js"></script>
        <script src="../plugin/highlight/highlight.js"></script>
        <script src="../plugin/notes/notes.js"></script>
-        <script src="../plugin/math/math.js"></script>

 		<script>

@@ -152,7 +122,7 @@
 				history: true,
 				center: true,

-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
 			});

 		</script>
--- a/examples/markdown.md
+++ b/examples/markdown.md
@@ -31,11 +31,6 @@ Content 3.1
 Content 3.2


-## External 3.3 (Image)
+## External 3.3

-![External Image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
-
-
-## External 3.4 (Math)
-
-`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`
+![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
--- a/examples/math.html
+++ b/examples/math.html
@@ -20,7 +20,7 @@

 				<section>
 					<h2>reveal.js Math Plugin</h2>
-					<p>Render math with KaTeX, MathJax 2 or MathJax 3</p>
+					<p>A thin wrapper for MathJax</p>
 				</section>

 				<section>
@@ -182,7 +182,8 @@
 				history: true,
 				transition: 'linear',

-				mathjax2: {
+				math: {
+					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
 					config: 'TeX-AMS_HTML-full',
 					TeX: {
 						Macros: {
@@ -192,13 +193,7 @@
 					}
 				},

-				// There are three typesetters available
-				// RevealMath.MathJax2 (default)
-				// RevealMath.MathJax3
-				// RevealMath.KaTeX
-				//
-				// More info at https://revealjs.com/math/
-				plugins: [ RevealMath.MathJax2 ]
+				plugins: [ RevealMath ]
 			});
 		</script>

--- a/examples/media.html
+++ b/examples/media.html
@@ -33,10 +33,10 @@

 				<section>
 					<h2>Video</h2>
-					<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-autoplay></video>
+					<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
 				</section>

-				<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
+				<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
 					<h2>Background Video</h2>
 				</section>

--- a/examples/scroll.html
+++ b/examples/scroll.html
@@ -1,120 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-	<head>
-		<meta charset="utf-8">
-
-		<title>reveal.js - Scroll View</title>
-
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
-		<link rel="stylesheet" href="../dist/reset.css">
-		<link rel="stylesheet" href="../dist/reveal.css">
-		<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
-    <link rel="stylesheet" href="../plugin/highlight/monokai.css">
-	</head>
-
-	<body>
-
-		<div class="reveal">
-
-			<div class="slides">
-
-				<section><h1>Scroll View</h1></section>
-				<section data-background="indigo">
-					<h2>Scroll triggered fragments</h2>
-					<ul>
-						<li class="fragment fade-left">Step one</li>
-						<li class="fragment fade-left">Step two</li>
-						<li class="fragment fade-left">Step three</li>
-					</ul>
-				</section>
-				<section data-background-color="#fff"><h2>Scrollbar inverts<br>based on slide bg</h2></section>
-				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
-					<h2>Auto-Animate</h2>
-					<p>Scroll triggered auto-animations 😍</p>
-					<div class="r-hstack justify-center">
-						<div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
-						<div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
-						<div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
-					</div>
-				</section>
-				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
-					<div class="r-hstack justify-center">
-						<div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
-						<div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
-						<div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
-					</div>
-					<h2 style="margin-top: 20px;">Auto-Animate</h2>
-				</section>
-				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
-					<div class="r-stack">
-						<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
-						<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
-						<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
-					</div>
-					<h2 style="margin-top: 20px;">Auto-Animate</h2>
-				</section>
-				<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)" id="gradient-bg">
-					<h2 data-id="code-title">Code highlights,<br />meet scroll triggers</h2>
-					<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
-						import React, { useState } from 'react';
-
-						function Example() {
-						  const [count, setCount] = useState(0);
-
-						  return (
-						    <div>
-						      <p>You clicked {count} times</p>
-						      <button onClick={() => setCount(count + 1)}>
-						        Click me
-						      </button>
-						    </div>
-						  );
-						}
-
-						function SecondExample() {
-						  const [count, setCount] = useState(0);
-
-						  return (
-						    <div>
-						      <p>You clicked {count} times</p>
-						      <button onClick={() => setCount(count + 1)}>
-						        Click me
-						      </button>
-						    </div>
-						  );
-						}
-					</script></code></pre>
-				</section>
-				<section class="stack">
-          <section data-background="https://static.slid.es/reveal/image-placeholder.png" id="image-bg">
-            <h2>Image Backgrounds</h2>
-          </section>
-          <section data-background-video-muted data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
-            <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
-              <h2>Video background</h2>
-            </div>
-          </section>
-        </section>
-				<section><h2>The end</h2></section>
-
-			</div>
-
-		</div>
-
-		<script src="../dist/reveal.js"></script>
-		<script src="../plugin/notes/notes.js"></script>
-		<script src="../plugin/markdown/markdown.js"></script>
-		<script src="../plugin/highlight/highlight.js"></script>
-		<script>
-			Reveal.initialize({
-				view: 'scroll',
-				hash: true,
-
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
-			});
-		</script>
-
-	</body>
-</html>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,20 +1,22 @@
-const fs = require('fs');
 const pkg = require('./package.json')
+const path = require('path')
 const glob = require('glob')
 const yargs = require('yargs')
+const colors = require('colors')
 const through = require('through2');
 const qunit = require('node-qunit-puppeteer')

 const {rollup} = require('rollup')
-const terser = require('@rollup/plugin-terser')
+const {terser} = require('rollup-plugin-terser')
 const babel = require('@rollup/plugin-babel').default
 const commonjs = require('@rollup/plugin-commonjs')
 const resolve = require('@rollup/plugin-node-resolve').default
 const sass = require('sass')

 const gulp = require('gulp')
+const tap = require('gulp-tap')
 const zip = require('gulp-zip')
-const header = require('gulp-header-comment')
+const header = require('gulp-header')
 const eslint = require('gulp-eslint')
 const minify = require('gulp-clean-css')
 const connect = require('gulp-connect')
@@ -22,23 +24,14 @@ const autoprefixer = require('gulp-autoprefixer')

 const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
-const host = yargs.argv.host || 'localhost'

-const cssLicense = `
-reveal.js ${pkg.version}
-${pkg.homepage}
-MIT licensed
-
-Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
-`;
-
-const jsLicense = `/*!
- * reveal.js ${pkg.version}
- * ${pkg.homepage}
- * MIT licensed
- *
- * Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
- */\n`;
+const banner = `/*!
+* reveal.js ${pkg.version}
+* ${pkg.homepage}
+* MIT licensed
+*
+* Copyright (C) 2020 Hakim El Hattab, https://hakim.se
+*/\n`

 // Prevents warnings from opening too many test pages
 process.setMaxListeners(20);
@@ -67,11 +60,11 @@ const babelConfig = {
 // polyfilling older browsers and a larger bundle.
 const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
 babelConfigESM.presets[0][1].targets = { browsers: [
-    'last 2 Chrome versions',
-    'last 2 Safari versions',
-    'last 2 iOS versions',
-    'last 2 Firefox versions',
-    'last 2 Edge versions',
+    'last 2 Chrome versions', 'not Chrome < 60',
+    'last 2 Safari versions', 'not Safari < 10.1',
+    'last 2 iOS versions', 'not iOS < 10.3',
+    'last 2 Firefox versions', 'not Firefox < 60',
+    'last 2 Edge versions', 'not Edge < 16',
 ] };

 let cache = {};
@@ -94,7 +87,7 @@ gulp.task('js-es5', () => {
            name: 'Reveal',
            file: './dist/reveal.js',
            format: 'umd',
-            banner: jsLicense,
+            banner: banner,
            sourcemap: true
        });
    });
@@ -116,7 +109,7 @@ gulp.task('js-es6', () => {
        return bundle.write({
            file: './dist/reveal.esm.js',
            format: 'es',
-            banner: jsLicense,
+            banner: banner,
            sourcemap: true
        });
    });
@@ -169,12 +162,12 @@ function compileSass() {
    const transformedFile = vinylFile.clone();

    sass.render({
-        silenceDeprecations: ['legacy-js-api'],
        data: transformedFile.contents.toString(),
-        file: transformedFile.path,
+        includePaths: ['css/', 'css/theme/template']
    }, ( err, result ) => {
        if( err ) {
-            callback(err);
+            console.log( vinylFile.path );
+            console.log( err.formatted );
        }
        else {
            transformedFile.extname = '.css';
@@ -193,7 +186,7 @@ gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
    .pipe(compileSass())
    .pipe(autoprefixer())
    .pipe(minify({compatibility: 'ie9'}))
-    .pipe(header(cssLicense))
+    .pipe(header(banner))
    .pipe(gulp.dest('./dist')))

 gulp.task('css', gulp.parallel('css-themes', 'css-core'))
@@ -203,7 +196,7 @@ gulp.task('qunit', () => {
    let serverConfig = {
        root,
        port: 8009,
-        host: 'localhost',
+        host: '0.0.0.0',
        name: 'test-server'
    }

@@ -220,7 +213,7 @@ gulp.task('qunit', () => {
                targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`,
                timeout: 20000,
                redirectConsole: false,
-                puppeteerArgs: ['--allow-file-access-from-files', '--no-sandbox']
+                puppeteerArgs: ['--allow-file-access-from-files']
            })
                .then(result => {
                    if( result.stats.failed > 0 ) {
@@ -275,25 +268,20 @@ gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))

 gulp.task('build', gulp.parallel('js', 'css', 'plugins'))

-gulp.task('package', gulp.series(async () => {
+gulp.task('package', gulp.series('default', () =>

-    let dirs = [
+    gulp.src([
        './index.html',
        './dist/**',
+        './lib/**',
+        './images/**',
        './plugin/**',
-        './*/*.md'
-    ];
+        './**.md'
+    ]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))

-    if (fs.existsSync('./lib')) dirs.push('./lib/**');
-    if (fs.existsSync('./images')) dirs.push('./images/**');
-    if (fs.existsSync('./slides')) dirs.push('./slides/**');
+))

-    return gulp.src( dirs, { base: './', encoding: false } )
-    .pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
-
-}))
-
-gulp.task('reload', () => gulp.src(['index.html'])
+gulp.task('reload', () => gulp.src(['*.html', '*.md'])
    .pipe(connect.reload()));

 gulp.task('serve', () => {
@@ -301,23 +289,18 @@ gulp.task('serve', () => {
    connect.server({
        root: root,
        port: port,
-        host: host,
+        host: '0.0.0.0',
        livereload: true
    })

-    const slidesRoot = root.endsWith('/') ? root : root + '/'
-    gulp.watch([
-        slidesRoot + '**/*.html',
-        slidesRoot + '**/*.md',
-        `!${slidesRoot}**/node_modules/**`, // ignore node_modules
-    ], gulp.series('reload'))
+    gulp.watch(['*.html', '*.md'], gulp.series('reload'))

-    gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
+    gulp.watch(['js/**'], gulp.series('js', 'reload', 'test'))

-    gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
+    gulp.watch(['plugin/**/plugin.js'], gulp.series('plugins', 'reload'))

    gulp.watch([
-        'css/theme/source/**/*.{sass,scss}',
+        'css/theme/source/*.{sass,scss}',
        'css/theme/template/*.{sass,scss}',
    ], gulp.series('css-themes', 'reload'))

--- a/images/avatar.jpg
+++ b/images/avatar.jpg
--- a/images/elephant.png
+++ b/images/elephant.png
--- a/images/grafana_logo-web-white-text.svg
+++ b/images/grafana_logo-web-white-text.svg
--- a/images/heimoshuiyu.jpg
+++ b/images/heimoshuiyu.jpg
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/mikufans.jpg
+++ b/images/mikufans.jpg
--- a/images/photo_2022-11-20_17-55-46.jpg
+++ b/images/photo_2022-11-20_17-55-46.jpg
--- a/images/tg_image_1349760345.jpeg
+++ b/images/tg_image_1349760345.jpeg
--- a/images/workflow.svg
+++ b/images/workflow.svg
--- a/index.html
+++ b/index.html
@@ -1,122 +1,131 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />

-		<title>reveal.js</title>
+    <title>reveal.js</title>

-		<link rel="stylesheet" href="dist/reset.css">
-		<link rel="stylesheet" href="dist/reveal.css">
-		<link rel="stylesheet" href="dist/theme/black.css">
+    <link rel="stylesheet" href="dist/reset.css" />
+    <link rel="stylesheet" href="dist/reveal.css" />
+    <link rel="stylesheet" href="dist/theme/black.css" />

-		<!-- Theme used for syntax highlighted code -->
-		<link rel="stylesheet" href="plugin/highlight/monokai.css">
-	</head>
-	<body>
-		<div class="reveal">
-			<div class="slides">
-				<!-- Slide 1: Title -->
-				<section>
-					<h1>PostgreSQL JSONB Performance Optimization</h1>
-					<h2>A Comprehensive Survey</h2>
-					<p>
-						<small>陈永源 225002025</small>
-					</p>
-					<aside class="notes">
-						"Hello everyone! Today we will talk about PostgreSQL JSONB performance optimization. 
-						Nowaday jsonb is a very import driver of PostgreSQL, postgresql became the most popular database
-						when the jsonb was asdd. most programming language support json. developer likes to use json.
-						Howevery when you trys to store json in trad database, you need to defind the schma, the relationship.
-						and there alwasy will be conflict between developer and DBA.
-						when storeaged in jsonb, you don't need to worry about the schema, That's why developer love to use json database. and we needs to understand the perform of jsonb.
-					</aside>
-				</section>
+    <!-- Theme used for syntax highlighted code -->
+    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
+  </head>
+  <body>
+    <div class="reveal">
+      <div class="slides">
+	      <section data-markdown
+                 data-background-image="./images/mikufans.jpg"
+            data-background-opacity="0.39"
+            data-background-color="white"
+          >
+          ### 峰悦交易看板

-				<section>
-					<h2>The TOAST Threshold Problem</h2>
-					<img src="paper/1.png" alt="TOAST Performance Degradation" style="height: 400px; margin: 0 auto;">
-					<div class="r-vstack">
-						<p><strong>The 2KB Critical Threshold</strong></p>
-						<ul>
-							<li>Before TOAST: Constant access time</li>
-							<li>After TOAST: Linear degradation</li>
-							<li>3 additional buffer reads per access</li>
-						</ul>
-					</div>
-					<aside class="notes">
-						"Let's talk about one of the most important concepts in JSONB performance: the TOAST threshold. TOAST stands for 'The Oversized-Attribute Storage Technique' - it's PostgreSQL's way of handling large data. The key thing to understand is the 2KB threshold. When your JSONB document is smaller than 2KB, access time remains constant regardless of size. But once it crosses 2KB, PostgreSQL moves the data to TOAST storage, and performance degrades linearly. Each access now requires 3 additional buffer reads: two for the TOAST index and one for the actual data. This explains why developers often report sudden performance drops when their JSON documents grow beyond this threshold."
-					</aside>
-				</section>
+          By `mikufans`
+        </section>
+          <section
+              data-background-image="./images/tg_image_1349760345.jpeg"
+              data-background-size="contain"
+            >
+            <img src="./images/photo_2022-11-20_17-55-46.jpg" width="400" />
+          </section>
+        <section 
+                 data-background-image="./images/workflow.svg"
+                 data-background-size="contain"
+          >
+          <div style="padding: 3em; background-color: rgba(0,0,0,0.39);">
+            整体架构图
+            <br />

-				<section>
-					<h2>JSONB Operator Performance</h2>
-					<img src="paper/2.png" alt="JSONB Operator Performance" style="height: 900px; margin: 0 auto;">
-					<aside class="notes">
-						"This chart shows the performance characteristics of different JSONB operators in PostgreSQL. There are several ways to access data in JSONB: the arrow operator (->), the hash arrow operator (->>), subscripting, and JSON path functions. What we see here is very interesting: for small JSONB documents under 2KB, the arrow operator performs well at the root level. But as document size increases and nesting levels go deeper, performance varies significantly. Subscripting tends to be the fastest for large documents, while JSON path functions are the slowest but most flexible for complex queries. The key takeaway is that your choice of operator matters, especially for large, nested JSONB documents."
-					</aside>
-				</section>
+            <small>全部模块采用 Docker 容器化部署</small>
+          </div>
+        </section>
+        <section>
+          <section data-markdown
+            data-background-image="./images/elephant.png"
+            data-background-opacity="0.39"
+            data-background-size="cover"
+            >
+            ### 后端数据库 - PostgreSQL

-				<section>
-					<h2>Partial Update Challenges</h2>
-					<div class="r-vstack">
-						<div class="fragment fade-up">
-							<h3>Current Limitations</h3>
-							<ul>
-								<li>TOAST treats JSONB as atomic BLOB</li>
-								<li>Full document rewrites for small changes</li>
-								<li>WAL write amplification</li>
-							</ul>
-						</div>
-						<div class="fragment fade-up">
-							<h3>Emerging Solutions</h3>
-							<ul>
-								<li>Partial decompression: 5-10x faster</li>
-								<li>In-place updates: 10-50x improvement</li>
-								<li>Shared TOAST: 90% WAL reduction</li>
-							</ul>
-						</div>
-					</div>
-					<aside class="notes">
-						"One of the biggest challenges with JSONB today is partial updates. Currently, PostgreSQL treats JSONB as an atomic BLOB from TOAST's perspective. This means even if you want to update just one small key in a large JSONB document, PostgreSQL has to rewrite the entire document. This causes significant WAL write amplification - you generate much more write-ahead logging than necessary. The good news is that there are emerging solutions. Partial decompression can give us 5-10x performance improvements. In-place updates can provide 10-50x improvements. And something called shared TOAST can reduce WAL traffic by up to 90%. These optimizations are crucial for making JSONB truly efficient for OLTP workloads."
-					</aside>
-				</section>
+            - 开源、稳定、高性能的混合式数据库后端
+            - 能够储存结构化和非结构化的混合式数据
+            - 储存股票时序记录
+            - 超过1000只股票的10年数据纪录
+          </section>
+          <section data-markdown
+                   data-background-image="./images/logo.png"
+            data-background-opacity="0.39"
+            >
+            ### 后端数据源 - RSSHub

-				<section>
-					<h2>Advanced Optimization Techniques</h2>
-					<img src="paper/3.png" alt="JSONB Optimization Techniques" style="height: 900px; margin: 0 auto;">
-					<aside class="notes">
-						"This slide shows various optimization techniques being developed for JSONB. The graph demonstrates performance improvements through different approaches. Key techniques include partial decompression - where only the parts of JSONB you need are decompressed rather than the entire document. Sorted-keys means sorte the key by their length, so the access time of a key is O(logN), not linear. Array slicing optimizate read of large slice. After adding these optimization, we most access pattern execution time reduce a lot.
-					</aside>
-				</section>
+            - 活跃开源项目，超过8000个commit
+            - 聚合超过数十家金融平台的新闻、文章、评论
+          </section>
+            <section data-markdown
+                     data-background-image="./images/grafana_logo-web-white-text.svg"
+                     data-background-size="contain"
+            data-background-opacity="0.39"
+              >
+              ### 前端数据面板 - Grafana

-				<section>
-					<h2>PostgreSQL JSONB vs MongoDB</h2>
-					<img src="paper/4.png" alt="PostgreSQL vs MongoDB Performance" style="height: 900px; margin: 0 auto;">
-					<aside class="notes">
-						"Now let's compare PostgreSQL JSONB with MongoDB, MongoDB is the most popular document database. The results here are quite interesing. First they start at time same level. After applying these optimization. the execution time is halfed. After turn on parallel processing, postgresql is significant faster than MongoDB. But we know mongodb is very memory hungry. So we give more memory to mongodb, we increase the memory from 4G to 16G, the mongodb perfrom better but still, postgresql win."
-					</aside>
-				</section>
+              - 开源的专业实时数据监控面板
+              - 组件化配置各个数据源模块
+              - 自定义筛选各类数据源
+              - 跨平台支持PC、手机，自适应屏幕大小
+              - 设置监控警告事件，及时处理突发情况
+            </section>
+        </section>
+        <section>
+          <section>
+            <h3>DEMO !</h3>
+            <a href="https://baka.link/zv2w" target="_blank">Snapshot https://baka.link/zv2w</a>
+            <small>
+              <p>or</p>
+            <a href="https://home.bakaawt.com:3000/d/BKKLA5dVz/feng-yue-jiao-yi-kan-ban">
+              https://home.bakaawt.com:3000/d/BKKLA5dVz/feng-yue-jiao-yi-kan-ban
+            </a></small>
+          </section>
+        </section>
+        <section>
+          <div>
+            <h2>Creators</h2>
+            <div style="display: flex; justify-content: space-evenly;">
+              <div style="display: flex; flex-direction: column;">
+                <img src="./images/avatar.jpg" width="200" style="border-radius: 50%;" />
+                <span>艾文韬</span>
+              </div>
+              <div style="display: flex; flex-direction: column;">
+                <img src="./images/heimoshuiyu.jpg" width="200" style="border-radius: 50%;" />
+                <span>陈永源</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>

-			</div>
-		</div>
+    <script src="dist/reveal.js"></script>
+    <script src="plugin/notes/notes.js"></script>
+    <script src="plugin/markdown/markdown.js"></script>
+    <script src="plugin/highlight/highlight.js"></script>
+    <script>
+      // More info about initialization & config:
+      // - https://revealjs.com/initialization/
+      // - https://revealjs.com/config/
+      Reveal.initialize({
+        hash: true,
+        heigh: 1920,
+        wdith: 1080,

-		<script src="dist/reveal.js"></script>
-		<script src="plugin/notes/notes.js"></script>
-		<script src="plugin/markdown/markdown.js"></script>
-		<script src="plugin/highlight/highlight.js"></script>
-		<script>
-			// More info about initialization & config:
-			// - https://revealjs.com/initialization/
-			// - https://revealjs.com/config/
-			Reveal.initialize({
-				width: 1920,
-				height: 1080,
-				hash: true,
-
-				// Learn about plugins: https://revealjs.com/plugins/
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
-			});
-		</script>
-	</body>
+        // Learn about plugins: https://revealjs.com/plugins/
+        plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
+      });
+    </script>
+  </body>
 </html>
--- a/js/config.js
+++ b/js/config.js
@@ -15,10 +15,7 @@ export default {
 	minScale: 0.2,
 	maxScale: 2.0,

-	// Display presentation control arrows.
-	// - true: Display controls on all screens
-	// - false: Hide controls on all screens
-	// - "speaker-only": Only display controls in the speaker view
+	// Display presentation control arrows
 	controls: true,

 	// Help the user learn the controls by providing hints, for example by
@@ -68,16 +65,13 @@ export default {
 	// Flags if we should monitor the hash and change slides accordingly
 	respondToHashChanges: true,

-	// Enable support for jump-to-slide navigation shortcuts
-	jumpToSlide: true,
-
 	// Push each slide change to the browser history.  Implies `hash: true`
 	history: false,

 	// Enable keyboard shortcuts for navigation
 	keyboard: true,

-	// Optional function that blocks keyboard events when returning false
+	// Optional function that blocks keyboard events when retuning false
 	//
 	// If you set this to 'focused', we will only capture keyboard events
 	// for embedded decks when they are in focus
@@ -168,9 +162,6 @@ export default {
 	// - false:  All iframes with data-src will be loaded only when visible
 	preloadIframes: null,

-	// Prevent embedded iframes from automatically focusing on themselves
-	preventIframeAutoFocus: true,
-
 	// Can be used to globally disable auto-animation
 	autoAnimate: true,

@@ -262,36 +253,6 @@ export default {
 	parallaxBackgroundHorizontal: null,
 	parallaxBackgroundVertical: null,

-	// Can be used to initialize reveal.js in one of the following views:
-	// - print:   Render the presentation so that it can be printed to PDF
-	// - scroll:  Show the presentation as a tall scrollable page with scroll
-	//            triggered animations
-	view: null,
-
-	// Adjusts the height of each slide in the scroll view.
-	// - full:       Each slide is as tall as the viewport
-	// - compact:    Slides are as small as possible, allowing multiple slides
-	//               to be visible in parallel on tall devices
-	scrollLayout: 'full',
-
-	// Control how scroll snapping works in the scroll view.
-	// - false:   	No snapping, scrolling is continuous
-	// - proximity:  Snap when close to a slide
-	// - mandatory:  Always snap to the closest slide
-	//
-	// Only applies to presentations in scroll view.
-	scrollSnap: 'mandatory',
-
-	// Enables and configure the scroll view progress bar.
-	// - 'auto':    Show the scrollbar while scrolling, hide while idle
-	// - true:      Always show the scrollbar
-	// - false:     Never show the scrollbar
-	scrollProgress: 'auto',
-
-	// Automatically activate the scroll view when we the viewport falls
-	// below the given width.
-	scrollActivationWidth: 435,
-
 	// The maximum number of pages a single slide can expand onto when printing
 	// to PDF, unlimited by default
 	pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
@@ -323,10 +284,6 @@ export default {
 	// Time before the cursor is hidden (in ms)
 	hideCursorTime: 5000,

-	// Should we automatically sort and set indices for fragments
-	// at each sync? (See Reveal.sync)
-	sortFragmentsOnSync: true,
-
 	// Script dependencies to load
 	dependencies: [],

--- a/js/controllers/autoanimate.js
+++ b/js/controllers/autoanimate.js
@@ -31,13 +31,10 @@ export default class AutoAnimate {
 		let toSlideIndex = allSlides.indexOf( toSlide );
 		let fromSlideIndex = allSlides.indexOf( fromSlide );

-		// Ensure that;
-		// 1. Both slides exist.
-		// 2. Both slides are auto-animate targets with the same
-		//    data-auto-animate-id value (including null if absent on both).
-		// 3. data-auto-animate-restart isn't set on the physically latter
-		//    slide (independent of slide direction).
-		if( fromSlide && toSlide && fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
+		// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
+		// (including null if absent on both) and that data-auto-animate-restart isn't set on the
+		// physically latter slide (independent of slide direction)
+		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
 				&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) 
 				&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {

@@ -53,19 +50,11 @@ export default class AutoAnimate {
 			// Flag the navigation direction, needed for fragment buildup
 			animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';

-			// If the from-slide is hidden because it has moved outside
-			// the view distance, we need to temporarily show it while
-			// measuring
-			let fromSlideIsHidden = fromSlide.style.display === 'none';
-			if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;
-
 			// Inject our auto-animate styles for this transition
 			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
 				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
 			} );

-			if( fromSlideIsHidden ) fromSlide.style.display = 'none';
-
 			// Animate unmatched elements, if enabled
 			if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {

@@ -178,12 +167,28 @@ export default class AutoAnimate {
 		let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
 			toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );

+		// Maintain fragment visibility for matching elements when
+		// we're navigating forwards, this way the viewer won't need
+		// to step through the same fragments twice
 		if( to.classList.contains( 'fragment' ) ) {

 			// Don't auto-animate the opacity of fragments to avoid
 			// conflicts with fragment animations
 			delete toProps.styles['opacity'];

+			if( from.classList.contains( 'fragment' ) ) {
+
+				let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
+				let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
+
+				// Only skip the fragment if the fragment animation style
+				// remains unchanged
+				if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {
+					to.classList.add( 'visible', 'disabled' );
+				}
+
+			}
+
 		}

 		// If translation and/or scaling are enabled, css transform
@@ -386,14 +391,7 @@ export default class AutoAnimate {
 				value = { value: style.to, explicitValue: true };
 			}
 			else {
-				// Use a unitless value for line-height so that it inherits properly
-				if( style.property === 'line-height' ) {
-					value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
-				}
-
-				if( isNaN(value) ) {
-					value = computedStyles[style.property];
-				}
+				value = computedStyles[style.property];
 			}

 			if( value !== '' ) {
@@ -448,14 +446,14 @@ export default class AutoAnimate {
 		const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
 		const mediaNodes = 'img, video, iframe';

-		// Explicit matches via data-id
+		// Eplicit matches via data-id
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
 			return node.nodeName + ':::' + node.getAttribute( 'data-id' );
 		} );

 		// Text
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
-			return node.nodeName + ':::' + node.textContent.trim();
+			return node.nodeName + ':::' + node.innerText;
 		} );

 		// Media
@@ -465,10 +463,11 @@ export default class AutoAnimate {

 		// Code
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
-			return node.nodeName + ':::' + node.textContent.trim();
+			return node.nodeName + ':::' + node.innerText;
 		} );

 		pairs.forEach( pair => {
+
 			// Disable scale transformations on text nodes, we transition
 			// each individual text property instead
 			if( matches( pair.from, textNodes ) ) {
@@ -491,7 +490,7 @@ export default class AutoAnimate {
 				} );

 				// Line numbers
-				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {
+				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-line[data-line-number]', node => {
 					return node.getAttribute( 'data-line-number' );
 				}, {
 					scale: false,
@@ -560,14 +559,14 @@ export default class AutoAnimate {

 			// Retrieve the 'from' element
 			if( fromMatches[key] ) {
-				const primaryIndex = toMatches[key].length - 1;
+				const pimaryIndex = toMatches[key].length - 1;
 				const secondaryIndex = fromMatches[key].length - 1;

 				// If there are multiple identical from elements, retrieve
 				// the one at the same index as our to-element.
-				if( fromMatches[key][ primaryIndex ] ) {
-					fromElement = fromMatches[key][ primaryIndex ];
-					fromMatches[key][ primaryIndex ] = null;
+				if( fromMatches[key][ pimaryIndex ] ) {
+					fromElement = fromMatches[key][ pimaryIndex ];
+					fromMatches[key][ pimaryIndex ] = null;
 				}
 				// If there are no matching from-elements at the same index,
 				// use the last one.
@@ -595,7 +594,7 @@ export default class AutoAnimate {
 	 * fading of unmatched elements is turned on, these elements
 	 * will fade when going between auto-animate slides.
 	 *
-	 * Note that parents of auto-animate targets are NOT considered
+	 * Note that parents of auto-animate targets are NOT considerd
 	 * unmatched since fading them would break the auto-animation.
 	 *
 	 * @param {HTMLElement} rootElement
--- a/js/controllers/backgrounds.js
+++ b/js/controllers/backgrounds.js
@@ -122,7 +122,6 @@ export default class Backgrounds {
 			backgroundVideo: slide.getAttribute( 'data-background-video' ),
 			backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
 			backgroundColor: slide.getAttribute( 'data-background-color' ),
-			backgroundGradient: slide.getAttribute( 'data-background-gradient' ),
 			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
 			backgroundPosition: slide.getAttribute( 'data-background-position' ),
 			backgroundTransition: slide.getAttribute( 'data-background-transition' ),
@@ -151,7 +150,7 @@ export default class Backgrounds {

 		if( data.background ) {
 			// Auto-wrap image urls in url(...)
-			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\s]|$)/gi.test( data.background ) ) {
+			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
 				slide.setAttribute( 'data-background-image', data.background );
 			}
 			else {
@@ -162,14 +161,13 @@ export default class Backgrounds {
 		// Create a hash for this combination of background settings.
 		// This is used to determine when two slide backgrounds are
 		// the same.
-		if( data.background || data.backgroundColor || data.backgroundGradient || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
+		if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
 			element.setAttribute( 'data-background-hash', data.background +
 															data.backgroundSize +
 															data.backgroundImage +
 															data.backgroundVideo +
 															data.backgroundIframe +
 															data.backgroundColor +
-															data.backgroundGradient +
 															data.backgroundRepeat +
 															data.backgroundPosition +
 															data.backgroundTransition +
@@ -179,7 +177,6 @@ export default class Backgrounds {
 		// Additional and optional background properties
 		if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
 		if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
-		if( data.backgroundGradient ) element.style.backgroundImage = data.backgroundGradient;
 		if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );

 		if( dataPreload ) element.setAttribute( 'data-preload', '' );
@@ -190,30 +187,10 @@ export default class Backgrounds {
 		if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
 		if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;

-		const contrastClass = this.getContrastClass( slide );
-
-		if( typeof contrastClass === 'string' ) {
-			slide.classList.add( contrastClass );
-		}
-
-	}
-
-	/**
-	 * Returns a class name that can be applied to a slide to indicate
-	 * if it has a light or dark background.
-	 *
-	 * @param {*} slide
-	 *
-	 * @returns {string|null}
-	 */
-	getContrastClass( slide ) {
-
-		const element = slide.slideBackgroundElement;
-
 		// If this slide has a background color, we add a class that
 		// signals if it is light or dark. If the slide has no background
 		// color, no class will be added
-		let contrastColor = slide.getAttribute( 'data-background-color' );
+		let contrastColor = data.backgroundColor;

 		// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
 		if( !contrastColor || !colorToRgb( contrastColor ) ) {
@@ -231,32 +208,14 @@ export default class Backgrounds {
 			// an element with no background
 			if( rgb && rgb.a !== 0 ) {
 				if( colorBrightness( contrastColor ) < 128 ) {
-					return 'has-dark-background';
+					slide.classList.add( 'has-dark-background' );
 				}
 				else {
-					return 'has-light-background';
+					slide.classList.add( 'has-light-background' );
 				}
 			}
 		}

-		return null;
-
-	}
-
-	/**
-	 * Bubble the 'has-light-background'/'has-dark-background' classes.
-	 */
-	bubbleSlideContrastClassToElement( slide, target ) {
-
-		[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {
-			if( slide.classList.contains( classToBubble ) ) {
-				target.classList.add( classToBubble );
-			}
-			else {
-				target.classList.remove( classToBubble );
-			}
-		}, this );
-
 	}

 	/**
@@ -268,15 +227,14 @@ export default class Backgrounds {
 	 */
 	update( includeAll = false ) {

-		let config = this.Reveal.getConfig();
 		let currentSlide = this.Reveal.getCurrentSlide();
 		let indices = this.Reveal.getIndices();

 		let currentBackground = null;

 		// Reverse past/future classes when in RTL mode
-		let horizontalPast = config.rtl ? 'future' : 'past',
-			horizontalFuture = config.rtl ? 'past' : 'future';
+		let horizontalPast = this.Reveal.getConfig().rtl ? 'future' : 'past',
+			horizontalFuture = this.Reveal.getConfig().rtl ? 'past' : 'future';

 		// Update the classes of all backgrounds to match the
 		// states of their slides (past/present/future)
@@ -302,12 +260,10 @@ export default class Backgrounds {

 					backgroundv.classList.remove( 'past', 'present', 'future' );

-					const indexv = typeof indices.v === 'number' ? indices.v : 0;
-
-					if( v < indexv ) {
+					if( v < indices.v ) {
 						backgroundv.classList.add( 'past' );
 					}
-					else if ( v > indexv ) {
+					else if ( v > indices.v ) {
 						backgroundv.classList.add( 'future' );
 					}
 					else {
@@ -322,53 +278,15 @@ export default class Backgrounds {

 		} );

-		// The previous background may refer to a DOM element that has
-		// been removed after a presentation is synced & bgs are recreated
-		if( this.previousBackground && !this.previousBackground.closest( 'body' ) ) {
-			this.previousBackground = null;
-		}
-
-		if( currentBackground && this.previousBackground ) {
-
-			// Don't transition between identical backgrounds. This
-			// prevents unwanted flicker.
-			let previousBackgroundHash = this.previousBackground.getAttribute( 'data-background-hash' );
-			let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
-
-			if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
-				this.element.classList.add( 'no-transition' );
-
-				// If multiple slides have the same background video, carry
-				// the <video> element forward so that it plays continuously
-				// across multiple slides
-				const currentVideo = currentBackground.querySelector( 'video' );
-				const previousVideo = this.previousBackground.querySelector( 'video' );
-
-				if( currentVideo && previousVideo ) {
-
-					const currentVideoParent = currentVideo.parentNode;
-					const previousVideoParent = previousVideo.parentNode;
-
-					// Swap the two videos
-					previousVideoParent.appendChild( currentVideo );
-					currentVideoParent.appendChild( previousVideo );
-
-				}
-			}
-
-		}
-
-		const backgroundChanged = currentBackground !== this.previousBackground;
-
 		// Stop content inside of previous backgrounds
-		if( backgroundChanged && this.previousBackground ) {
+		if( this.previousBackground ) {

 			this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );

 		}

 		// Start content in the current background
-		if( backgroundChanged && currentBackground ) {
+		if( currentBackground ) {

 			this.Reveal.slideContent.startEmbeddedContent( currentBackground );

@@ -386,6 +304,14 @@ export default class Backgrounds {

 			}

+			// Don't transition between identical backgrounds. This
+			// prevents unwanted flicker.
+			let previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;
+			let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
+			if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
+				this.element.classList.add( 'no-transition' );
+			}
+
 			this.previousBackground = currentBackground;

 		}
@@ -393,13 +319,20 @@ export default class Backgrounds {
 		// If there's a background brightness flag for this slide,
 		// bubble it to the .reveal container
 		if( currentSlide ) {
-			this.bubbleSlideContrastClassToElement( currentSlide, this.Reveal.getRevealElement() );
+			[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {
+				if( currentSlide.classList.contains( classToBubble ) ) {
+					this.Reveal.getRevealElement().classList.add( classToBubble );
+				}
+				else {
+					this.Reveal.getRevealElement().classList.remove( classToBubble );
+				}
+			}, this );
 		}

 		// Allow the first background to apply without transition
 		setTimeout( () => {
 			this.element.classList.remove( 'no-transition' );
-		}, 10 );
+		}, 1 );

 	}

@@ -461,10 +394,4 @@ export default class Backgrounds {

 	}

-	destroy() {
-
-		this.element.remove();
-
-	}
-
 }
--- a/js/controllers/controls.js
+++ b/js/controllers/controls.js
@@ -1,4 +1,4 @@
-import { queryAll, enterFullscreen } from '../utils/util.js'
+import { queryAll } from '../utils/util.js'
 import { isAndroid } from '../utils/device.js'

 /**
@@ -12,7 +12,6 @@ import { isAndroid } from '../utils/device.js'
 * - .navigate-left
 * - .navigate-next
 * - .navigate-prev
- * - .enter-fullscreen
 */
 export default class Controls {

@@ -26,7 +25,6 @@ export default class Controls {
 		this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );
 		this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );
 		this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );
-		this.onEnterFullscreen = this.onEnterFullscreen.bind( this );

 	}

@@ -52,7 +50,6 @@ export default class Controls {
 		this.controlsDown = queryAll( revealElement, '.navigate-down' );
 		this.controlsPrev = queryAll( revealElement, '.navigate-prev' );
 		this.controlsNext = queryAll( revealElement, '.navigate-next' );
-		this.controlsFullscreen = queryAll( revealElement, '.enter-fullscreen' );

 		// The left, right and down arrows in the standard reveal.js controls
 		this.controlsRightArrow = this.element.querySelector( '.navigate-right' );
@@ -66,10 +63,7 @@ export default class Controls {
 	 */
 	configure( config, oldConfig ) {

-		this.element.style.display = (
-			config.controls &&
-			(config.controls !== 'speaker-only' || this.Reveal.isSpeakerNotes())
-		) ? 'block' : 'none';
+		this.element.style.display = config.controls ? 'block' : 'none';

 		this.element.setAttribute( 'data-controls-layout', config.controlsLayout );
 		this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
@@ -83,10 +77,9 @@ export default class Controls {
 		let pointerEvents = [ 'touchstart', 'click' ];

 		// Only support touch for Android, fixes double navigations in
-		// stock browser. Use touchend for it to be considered a valid
-		// user interaction (so we're allowed to autoplay media).
+		// stock browser
 		if( isAndroid ) {
-			pointerEvents = [ 'touchend' ];
+			pointerEvents = [ 'touchstart' ];
 		}

 		pointerEvents.forEach( eventName => {
@@ -96,21 +89,19 @@ export default class Controls {
 			this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );
 			this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );
 			this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );
-			this.controlsFullscreen.forEach( el => el.addEventListener( eventName, this.onEnterFullscreen, false ) );
 		} );

 	}

 	unbind() {

-		[ 'touchstart', 'touchend', 'click' ].forEach( eventName => {
+		[ 'touchstart', 'click' ].forEach( eventName => {
 			this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );
 			this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );
 			this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );
 			this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );
 			this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );
 			this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );
-			this.controlsFullscreen.forEach( el => el.removeEventListener( eventName, this.onEnterFullscreen, false ) );
 		} );

 	}
@@ -150,14 +141,9 @@ export default class Controls {
 			if( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
 			if( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );

-			const isVerticalStack = this.Reveal.isVerticalSlide( currentSlide );
-			const hasVerticalSiblings = isVerticalStack &&
-																	currentSlide.parentElement &&
-																	currentSlide.parentElement.querySelectorAll( ':scope > section' ).length > 1;
-
 			// Apply fragment decorators to directional buttons based on
 			// what slide axis they are in
-			if( isVerticalStack && hasVerticalSiblings ) {
+			if( this.Reveal.isVerticalSlide( currentSlide ) ) {
 				if( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
 				if( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
 			}
@@ -202,13 +188,6 @@ export default class Controls {
 		}
 	}

-	destroy() {
-
-		this.unbind();
-		this.element.remove();
-
-	}
-
 	/**
 	 * Event handlers for navigation control buttons.
 	 */
@@ -276,13 +255,5 @@ export default class Controls {

 	}

-	onEnterFullscreen( event ) {
-
-		const config = this.Reveal.getConfig();
-		const viewport = this.Reveal.getViewportElement();
-
-		enterFullscreen( config.embedded ? viewport : viewport.parentElement );
-
-	}

 }
--- a/js/controllers/focus.js
+++ b/js/controllers/focus.js
@@ -79,12 +79,6 @@ export default class Focus {

 	}

-	destroy() {
-
-		this.Reveal.getRevealElement().classList.remove( 'focused' );
-
-	}
-
 	onRevealPointerDown( event ) {

 		this.focus();
--- a/js/controllers/fragments.js
+++ b/js/controllers/fragments.js
@@ -174,23 +174,24 @@ export default class Fragments {
 	 *
 	 * @return {{shown: array, hidden: array}}
 	 */
-	update( index, fragments, slide = this.Reveal.getCurrentSlide() ) {
+	update( index, fragments ) {

 		let changedFragments = {
 			shown: [],
 			hidden: []
 		};

-		if( slide && this.Reveal.getConfig().fragments ) {
+		let currentSlide = this.Reveal.getCurrentSlide();
+		if( currentSlide && this.Reveal.getConfig().fragments ) {

-			fragments = fragments || this.sort( slide.querySelectorAll( '.fragment' ) );
+			fragments = fragments || this.sort( currentSlide.querySelectorAll( '.fragment' ) );

 			if( fragments.length ) {

 				let maxIndex = 0;

 				if( typeof index !== 'number' ) {
-					let currentFragment = this.sort( slide.querySelectorAll( '.fragment.visible' ) ).pop();
+					let currentFragment = this.sort( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();
 					if( currentFragment ) {
 						index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
 					}
@@ -251,32 +252,12 @@ export default class Fragments {
 				// the current fragment index.
 				index = typeof index === 'number' ? index : -1;
 				index = Math.max( Math.min( index, maxIndex ), -1 );
-				slide.setAttribute( 'data-fragment', index );
+				currentSlide.setAttribute( 'data-fragment', index );

 			}

 		}

-		if( changedFragments.hidden.length ) {
-			this.Reveal.dispatchEvent({
-				type: 'fragmenthidden',
-				data: {
-					fragment: changedFragments.hidden[0],
-					fragments: changedFragments.hidden
-				}
-			});
-		}
-
-		if( changedFragments.shown.length ) {
-			this.Reveal.dispatchEvent({
-				type: 'fragmentshown',
-				data: {
-					fragment: changedFragments.shown[0],
-					fragments: changedFragments.shown
-				}
-			});
-		}
-
 		return changedFragments;

 	}
@@ -331,6 +312,26 @@ export default class Fragments {

 				let changedFragments = this.update( index, fragments );

+				if( changedFragments.hidden.length ) {
+					this.Reveal.dispatchEvent({
+						type: 'fragmenthidden',
+						data: {
+							fragment: changedFragments.hidden[0],
+							fragments: changedFragments.hidden
+						}
+					});
+				}
+
+				if( changedFragments.shown.length ) {
+					this.Reveal.dispatchEvent({
+						type: 'fragmentshown',
+						data: {
+							fragment: changedFragments.shown[0],
+							fragments: changedFragments.shown
+						}
+					});
+				}
+
 				this.Reveal.controls.update();
 				this.Reveal.progress.update();

--- a/js/controllers/jumptoslide.js
+++ b/js/controllers/jumptoslide.js
@@ -1,197 +0,0 @@
-import {
-	SLIDE_NUMBER_FORMAT_CURRENT,
-	SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL
-} from "../utils/constants";
-
-/**
- * Makes it possible to jump to a slide by entering its
- * slide number or id.
- */
-export default class JumpToSlide {
-
-	constructor( Reveal ) {
-
-		this.Reveal = Reveal;
-
-		this.onInput = this.onInput.bind( this );
-		this.onBlur = this.onBlur.bind( this );
-		this.onKeyDown = this.onKeyDown.bind( this );
-
-	}
-
-	render() {
-
-		this.element = document.createElement( 'div' );
-		this.element.className = 'jump-to-slide';
-
-    this.jumpInput = document.createElement( 'input' );
-    this.jumpInput.type = 'text';
-    this.jumpInput.className = 'jump-to-slide-input';
-    this.jumpInput.placeholder = 'Jump to slide';
-		this.jumpInput.addEventListener( 'input', this.onInput );
-		this.jumpInput.addEventListener( 'keydown', this.onKeyDown );
-		this.jumpInput.addEventListener( 'blur', this.onBlur );
-
-    this.element.appendChild( this.jumpInput );
-
-	}
-
-	show() {
-
-		this.indicesOnShow = this.Reveal.getIndices();
-
-		this.Reveal.getRevealElement().appendChild( this.element );
-		this.jumpInput.focus();
-
-	}
-
-	hide() {
-
-		if( this.isVisible() ) {
-			this.element.remove();
-			this.jumpInput.value = '';
-
-			clearTimeout( this.jumpTimeout );
-			delete this.jumpTimeout;
-		}
-
-	}
-
-	isVisible() {
-
-		return !!this.element.parentNode;
-
-	}
-
-	/**
-	 * Parses the current input and jumps to the given slide.
-	 */
-	jump() {
-
-		clearTimeout( this.jumpTimeout );
-		delete this.jumpTimeout;
-
-		let query = this.jumpInput.value.trim( '' );
-		let indices;
-
-		// When slide numbers are formatted to be a single linear number
-		// (instead of showing a separate horizontal/vertical index) we
-		// use the same format for slide jumps
-		if( /^\d+$/.test( query ) ) {
-			const slideNumberFormat = this.Reveal.getConfig().slideNumber;
-			if( slideNumberFormat === SLIDE_NUMBER_FORMAT_CURRENT || slideNumberFormat === SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL ) {
-				const slide = this.Reveal.getSlides()[ parseInt( query, 10 ) - 1 ];
-				if( slide ) {
-					indices = this.Reveal.getIndices( slide );
-				}
-			}
-		}
-
-		if( !indices ) {
-			// If the query uses "horizontal.vertical" format, convert to
-			// "horizontal/vertical" so that our URL parser can understand
-			if( /^\d+\.\d+$/.test( query ) ) {
-				query = query.replace( '.', '/' );
-			}
-
-			indices = this.Reveal.location.getIndicesFromHash( query, { oneBasedIndex: true } );
-		}
-
-		// Still no valid index? Fall back on a text search
-		if( !indices && /\S+/i.test( query ) && query.length > 1 ) {
-			indices = this.search( query );
-		}
-
-		if( indices && query !== '' ) {
-			this.Reveal.slide( indices.h, indices.v, indices.f );
-			return true;
-		}
-		else {
-			this.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );
-			return false;
-		}
-
-	}
-
-	jumpAfter( delay ) {
-
-		clearTimeout( this.jumpTimeout );
-		this.jumpTimeout = setTimeout( () => this.jump(), delay );
-
-	}
-
-	/**
-	 * A lofi search that looks for the given query in all
-	 * of our slides and returns the first match.
-	 */
-	search( query ) {
-
-		const regex = new RegExp( '\\b' + query.trim() + '\\b', 'i' );
-
-		const slide = this.Reveal.getSlides().find( ( slide ) => {
-			return regex.test( slide.innerText );
-		} );
-
-		if( slide ) {
-			return this.Reveal.getIndices( slide );
-		}
-		else {
-			return null;
-		}
-
-	}
-
-	/**
-	 * Reverts back to the slide we were on when jump to slide was
-	 * invoked.
-	 */
-	cancel() {
-
-		this.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );
-		this.hide();
-
-	}
-
-	confirm() {
-
-		this.jump();
-		this.hide();
-
-	}
-
-	destroy() {
-
-		this.jumpInput.removeEventListener( 'input', this.onInput );
-		this.jumpInput.removeEventListener( 'keydown', this.onKeyDown );
-		this.jumpInput.removeEventListener( 'blur', this.onBlur );
-
-		this.element.remove();
-
-	}
-
-	onKeyDown( event ) {
-
-		if( event.keyCode === 13 ) {
-			this.confirm();
-		}
-		else if( event.keyCode === 27 ) {
-			this.cancel();
-
-			event.stopImmediatePropagation();
-		}
-
-	}
-
-	onInput( event ) {
-
-		this.jumpAfter( 200 );
-
-	}
-
-	onBlur() {
-
-		setTimeout( () => this.hide(), 1 );
-
-	}
-
-}
--- a/js/controllers/keyboard.js
+++ b/js/controllers/keyboard.js
@@ -17,6 +17,7 @@ export default class Keyboard {
 		this.bindings = {};

 		this.onDocumentKeyDown = this.onDocumentKeyDown.bind( this );
+		this.onDocumentKeyPress = this.onDocumentKeyPress.bind( this );

 	}

@@ -31,18 +32,17 @@ export default class Keyboard {
 		}
 		else {
 			this.shortcuts['N  ,  SPACE']   = 'Next slide';
-			this.shortcuts['P  ,  Shift SPACE']             = 'Previous slide';
+			this.shortcuts['P']             = 'Previous slide';
 			this.shortcuts['&#8592;  ,  H'] = 'Navigate left';
 			this.shortcuts['&#8594;  ,  L'] = 'Navigate right';
 			this.shortcuts['&#8593;  ,  K'] = 'Navigate up';
 			this.shortcuts['&#8595;  ,  J'] = 'Navigate down';
 		}

-		this.shortcuts['Alt + &#8592;/&#8593/&#8594;/&#8595;']        = 'Navigate without fragments';
-		this.shortcuts['Shift + &#8592;/&#8593/&#8594;/&#8595;']      = 'Jump to first/last slide';
+		this.shortcuts['Home  ,  Shift &#8592;']        = 'First slide';
+		this.shortcuts['End  ,  Shift &#8594;']         = 'Last slide';
 		this.shortcuts['B  ,  .']                       = 'Pause';
 		this.shortcuts['F']                             = 'Fullscreen';
-		this.shortcuts['G']                             = 'Jump to slide';
 		this.shortcuts['ESC, O']                        = 'Slide overview';

 	}
@@ -53,6 +53,7 @@ export default class Keyboard {
 	bind() {

 		document.addEventListener( 'keydown', this.onDocumentKeyDown, false );
+		document.addEventListener( 'keypress', this.onDocumentKeyPress, false );

 	}

@@ -62,6 +63,7 @@ export default class Keyboard {
 	unbind() {

 		document.removeEventListener( 'keydown', this.onDocumentKeyDown, false );
+		document.removeEventListener( 'keypress', this.onDocumentKeyPress, false );

 	}

@@ -132,6 +134,20 @@ export default class Keyboard {

 	}

+	/**
+	 * Handler for the document level 'keypress' event.
+	 *
+	 * @param {object} event
+	 */
+	onDocumentKeyPress( event ) {
+
+		// Check if the pressed key is question mark
+		if( event.shiftKey && event.charCode === 63 ) {
+			this.Reveal.toggleHelp();
+		}
+
+	}
+
 	/**
 	 * Handler for the document level 'keydown' event.
 	 *
@@ -166,11 +182,13 @@ export default class Keyboard {
 		let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
 		let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);

-		// Whitelist certain modifiers for slide navigation shortcuts
-		let keyCodeUsesModifier = [32, 37, 38, 39, 40, 63, 78, 80, 191].indexOf( event.keyCode ) !== -1;
+		// Whitelist specific modified + keycode combinations
+		let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
+		let firstSlideShortcut = event.shiftKey && keyCode === 37;
+		let lastSlideShortcut = event.shiftKey && keyCode === 39;

 		// Prevent all other events when a modifier is pressed
-		let unusedModifier = 	!( keyCodeUsesModifier && event.shiftKey || event.altKey ) &&
+		let unusedModifier = 	!prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut &&
 								( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );

 		// Disregard the event if there's a focused element or a
@@ -178,7 +196,7 @@ export default class Keyboard {
 		if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;

 		// While paused only allow resume keyboard events; 'b', 'v', '.'
-		let resumeKeyCodes = [66,86,190,191,112];
+		let resumeKeyCodes = [66,86,190,191];
 		let key;

 		// Custom key bindings for togglePause should be able to resume
@@ -190,10 +208,6 @@ export default class Keyboard {
 			}
 		}

-		if( this.Reveal.isOverlayOpen() && !["Escape", "f", "c", "b", "."].includes(event.key) ) {
-			return false;
-		}
-
 		if( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {
 			return false;
 		}
@@ -263,68 +277,52 @@ export default class Keyboard {

 			// P, PAGE UP
 			if( keyCode === 80 || keyCode === 33 ) {
-				this.Reveal.prev({skipFragments: event.altKey});
+				this.Reveal.prev();
 			}
 			// N, PAGE DOWN
 			else if( keyCode === 78 || keyCode === 34 ) {
-				this.Reveal.next({skipFragments: event.altKey});
+				this.Reveal.next();
 			}
 			// H, LEFT
 			else if( keyCode === 72 || keyCode === 37 ) {
-				if( event.shiftKey ) {
+				if( firstSlideShortcut ) {
 					this.Reveal.slide( 0 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					if( config.rtl ) {
-						this.Reveal.next({skipFragments: event.altKey});
-					}
-					else {
-						this.Reveal.prev({skipFragments: event.altKey});
-					}
+					this.Reveal.prev();
 				}
 				else {
-					this.Reveal.left({skipFragments: event.altKey});
+					this.Reveal.left();
 				}
 			}
 			// L, RIGHT
 			else if( keyCode === 76 || keyCode === 39 ) {
-				if( event.shiftKey ) {
-					this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
+				if( lastSlideShortcut ) {
+					this.Reveal.slide( Number.MAX_VALUE );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					if( config.rtl ) {
-						this.Reveal.prev({skipFragments: event.altKey});
-					}
-					else {
-						this.Reveal.next({skipFragments: event.altKey});
-					}
+					this.Reveal.next();
 				}
 				else {
-					this.Reveal.right({skipFragments: event.altKey});
+					this.Reveal.right();
 				}
 			}
 			// K, UP
 			else if( keyCode === 75 || keyCode === 38 ) {
-				if( event.shiftKey ) {
-					this.Reveal.slide( undefined, 0 );
-				}
-				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.prev({skipFragments: event.altKey});
+				if( !this.Reveal.overview.isActive() && useLinearMode ) {
+					this.Reveal.prev();
 				}
 				else {
-					this.Reveal.up({skipFragments: event.altKey});
+					this.Reveal.up();
 				}
 			}
 			// J, DOWN
 			else if( keyCode === 74 || keyCode === 40 ) {
-				if( event.shiftKey ) {
-					this.Reveal.slide( undefined, Number.MAX_VALUE );
-				}
-				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.next({skipFragments: event.altKey});
+				if( !this.Reveal.overview.isActive() && useLinearMode ) {
+					this.Reveal.next();
 				}
 				else {
-					this.Reveal.down({skipFragments: event.altKey});
+					this.Reveal.down();
 				}
 			}
 			// HOME
@@ -333,7 +331,7 @@ export default class Keyboard {
 			}
 			// END
 			else if( keyCode === 35 ) {
-				this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
+				this.Reveal.slide( Number.MAX_VALUE );
 			}
 			// SPACE
 			else if( keyCode === 32 ) {
@@ -341,14 +339,14 @@ export default class Keyboard {
 					this.Reveal.overview.deactivate();
 				}
 				if( event.shiftKey ) {
-					this.Reveal.prev({skipFragments: event.altKey});
+					this.Reveal.prev();
 				}
 				else {
-					this.Reveal.next({skipFragments: event.altKey});
+					this.Reveal.next();
 				}
 			}
 			// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
-			else if( [58, 59, 66, 86, 190].includes( keyCode ) || ( keyCode === 191 && !event.shiftKey ) ) {
+			else if( keyCode === 58 || keyCode === 59 || keyCode === 66 || keyCode === 86 || keyCode === 190 || keyCode === 191 ) {
 				this.Reveal.togglePause();
 			}
 			// F
@@ -357,28 +355,10 @@ export default class Keyboard {
 			}
 			// A
 			else if( keyCode === 65 ) {
-				if( config.autoSlideStoppable ) {
+				if ( config.autoSlideStoppable ) {
 					this.Reveal.toggleAutoSlide( autoSlideWasPaused );
 				}
 			}
-			// G
-			else if( keyCode === 71 ) {
-				if( config.jumpToSlide ) {
-					this.Reveal.toggleJumpToSlide();
-				}
-			}
-			// C
-			else if( keyCode === 67 && this.Reveal.isOverlayOpen() ) {
-				this.Reveal.closeOverlay();
-			}
-			// ?
-			else if( ( keyCode === 63 || keyCode === 191 ) && event.shiftKey ) {
-				this.Reveal.toggleHelp();
-			}
-			// F1
-			else if( keyCode === 112 ) {
-				this.Reveal.toggleHelp();
-			}
 			else {
 				triggered = false;
 			}
@@ -399,12 +379,6 @@ export default class Keyboard {
 			event.preventDefault && event.preventDefault();
 		}

-		// Enter to exit overview mode
-		else if (keyCode === 13 && this.Reveal.overview.isActive()) {
-			this.Reveal.overview.deactivate();
-			event.preventDefault && event.preventDefault();
-		}
-
 		// If auto-sliding is enabled we need to cue up
 		// another timeout
 		this.Reveal.cueAutoSlide();
--- a/js/controllers/location.js
+++ b/js/controllers/location.js
@@ -3,10 +3,6 @@
 */
 export default class Location {

-	// The minimum number of milliseconds that must pass between
-	// calls to history.replaceState
-	MAX_REPLACE_STATE_FREQUENCY = 1000
-
 	constructor( Reveal ) {

 		this.Reveal = Reveal;
@@ -14,8 +10,6 @@ export default class Location {
 		// Delays updates to the URL due to a Chrome thumbnailer bug
 		this.writeURLTimeout = 0;

-		this.replaceStateTimestamp = 0;
-
 		this.onWindowHashChange = this.onWindowHashChange.bind( this );

 	}
@@ -33,23 +27,24 @@ export default class Location {
 	}

 	/**
-	 * Returns the slide indices for the given hash link.
-	 *
-	 * @param {string} [hash] the hash string that we want to
-	 * find the indices for
-	 *
-	 * @returns slide indices or null
+	 * Reads the current URL (hash) and navigates accordingly.
 	 */
-	getIndicesFromHash( hash=window.location.hash, options={} ) {
+	readURL() {
+
+		let config = this.Reveal.getConfig();
+		let indices = this.Reveal.getIndices();
+		let currentSlide = this.Reveal.getCurrentSlide();
+
+		let hash = window.location.hash;

 		// Attempt to parse the hash as either an index or name
-		let name = hash.replace( /^#\/?/, '' );
-		let bits = name.split( '/' );
+		let bits = hash.slice( 2 ).split( '/' ),
+			name = hash.replace( /#\/?/gi, '' );

 		// If the first bit is not fully numeric and there is a name we
 		// can assume that this is a named link
 		if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {
-			let slide;
+			let element;

 			let f;

@@ -60,23 +55,30 @@ export default class Location {
 				name = name.split( '/' ).shift();
 			}

-			// Ensure the named link is a valid HTML id or data-id attribute
+			// Ensure the named link is a valid HTML ID attribute
 			try {
-				const decodedName = decodeURIComponent( name );
-				slide = (
-					document.getElementById( decodedName ) ||
-					document.querySelector( `[data-id="${decodedName}"]` )
-				).closest('.slides section');
+				element = document.getElementById( decodeURIComponent( name ) );
 			}
 			catch ( error ) { }

-			if( slide ) {
-				return { ...this.Reveal.getIndices( slide ), f };
+			// Ensure that we're not already on a slide with the same name
+			let isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false;
+
+			if( element ) {
+				// If the slide exists and is not the current slide...
+				if ( !isSameNameAsCurrentSlide || typeof f !== 'undefined' ) {
+					// ...find the position of the named slide and navigate to it
+					let slideIndices = this.Reveal.getIndices( element );
+					this.Reveal.slide( slideIndices.h, slideIndices.v, f );
+				}
+			}
+			// If the slide doesn't exist, navigate to the current slide
+			else {
+				this.Reveal.slide( indices.h || 0, indices.v || 0 );
 			}
 		}
 		else {
-			const config = this.Reveal.getConfig();
-			let hashIndexBase = config.hashOneBasedIndex || options.oneBasedIndex ? 1 : 0;
+			let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;

 			// Read the index components of the hash
 			let h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,
@@ -90,32 +92,10 @@ export default class Location {
 				}
 			}

-			return { h, v, f };
-		}
-
-		// The hash couldn't be parsed or no matching named link was found
-		return null
-
-	}
-
-	/**
-	 * Reads the current URL (hash) and navigates accordingly.
-	 */
-	readURL() {
-
-		const currentIndices = this.Reveal.getIndices();
-		const newIndices = this.getIndicesFromHash();
-
-		if( newIndices ) {
-			if( ( newIndices.h !== currentIndices.h || newIndices.v !== currentIndices.v || newIndices.f !== undefined ) ) {
-					this.Reveal.slide( newIndices.h, newIndices.v, newIndices.f );
+			if( h !== indices.h || v !== indices.v || f !== undefined ) {
+				this.Reveal.slide( h, v, f );
 			}
 		}
-		// If no new indices are available, we're trying to navigate to
-		// a slide hash that does not exist
-		else {
-			this.Reveal.slide( currentIndices.h || 0, currentIndices.v || 0 );
-		}

 	}

@@ -143,7 +123,7 @@ export default class Location {
 			let hash = this.getHash();

 			// If we're configured to push to history OR the history
-			// API is not available.
+			// API is not avaialble.
 			if( config.history ) {
 				window.location.hash = hash;
 			}
@@ -152,10 +132,10 @@ export default class Location {
 			else if( config.hash ) {
 				// If the hash is empty, don't add it to the URL
 				if( hash === '/' ) {
-					this.debouncedReplaceState( window.location.pathname + window.location.search );
+					window.history.replaceState( null, null, window.location.pathname + window.location.search );
 				}
 				else {
-					this.debouncedReplaceState( '#' + hash );
+					window.history.replaceState( null, null, '#' + hash );
 				}
 			}
 			// UPDATE: The below nuking of all hash changes breaks
@@ -173,26 +153,6 @@ export default class Location {

 	}

-	replaceState( url ) {
-
-		window.history.replaceState( null, null, url );
-		this.replaceStateTimestamp = Date.now();
-
-	}
-
-	debouncedReplaceState( url ) {
-
-		clearTimeout( this.replaceStateTimeout );
-
-		if( Date.now() - this.replaceStateTimestamp > this.MAX_REPLACE_STATE_FREQUENCY ) {
-			this.replaceState( url );
-		}
-		else {
-			this.replaceStateTimeout = setTimeout( () => this.replaceState( url ), this.MAX_REPLACE_STATE_FREQUENCY );
-		}
-
-	}
-
 	/**
 	 * Return a hash URL that will resolve to the given slide location.
 	 *
--- a/js/controllers/notes.js
+++ b/js/controllers/notes.js
@@ -1,5 +1,5 @@
 /**
- * Handles the showing of speaker notes
+ * Handles the showing and 
 */
 export default class Notes {

@@ -38,12 +38,10 @@ export default class Notes {
 	 */
 	update() {

-		if( this.Reveal.getConfig().showNotes &&
-			this.element && this.Reveal.getCurrentSlide() &&
-			!this.Reveal.isScrollView() &&
-			!this.Reveal.isPrintView()
-		) {
+		if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.print.isPrintingPDF() ) {
+
 			this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
+
 		}

 	}
@@ -56,11 +54,7 @@ export default class Notes {
 	 */
 	updateVisibility() {

-		if( this.Reveal.getConfig().showNotes &&
-			this.hasNotes() &&
-			!this.Reveal.isScrollView() &&
-			!this.Reveal.isPrintView()
-		) {
+		if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) {
 			this.Reveal.getRevealElement().classList.add( 'show-notes' );
 		}
 		else {
@@ -95,7 +89,7 @@ export default class Notes {
 	 * Retrieves the speaker notes from a slide. Notes can be
 	 * defined in two ways:
 	 * 1. As a data-notes attribute on the slide <section>
-	 * 2. With <aside class="notes"> elements inside the slide
+	 * 2. As an <aside class="notes"> inside of the slide
 	 *
 	 * @param {HTMLElement} [slide=currentSlide]
 	 * @return {(string|null)}
@@ -107,20 +101,14 @@ export default class Notes {
 			return slide.getAttribute( 'data-notes' );
 		}

-		// ... or using <aside class="notes"> elements
-		let notesElements = slide.querySelectorAll( 'aside.notes' );
-		if( notesElements ) {
-			return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
+		// ... or using an <aside class="notes"> element
+		let notesElement = slide.querySelector( 'aside.notes' );
+		if( notesElement ) {
+			return notesElement.innerHTML;
 		}

 		return null;

 	}

-	destroy() {
-
-		this.element.remove();
-
-	}
-
 }
--- a/js/controllers/overlay.js
+++ b/js/controllers/overlay.js
@@ -1,389 +0,0 @@
-/**
- * Handles the display of reveal.js' overlay elements used
- * to preview iframes, images & videos.
- */
-export default class Overlay {
-
-	constructor( Reveal ) {
-
-		this.Reveal = Reveal;
-
-		this.onSlidesClicked = this.onSlidesClicked.bind( this );
-
-		this.iframeTriggerSelector = null;
-		this.mediaTriggerSelector = '[data-preview-image], [data-preview-video]';
-
-		this.stateProps = ['previewIframe', 'previewImage', 'previewVideo', 'previewFit'];
-		this.state = {};
-
-	}
-
-	update() {
-
-		// Enable link previews globally
-		if( this.Reveal.getConfig().previewLinks ) {
-			this.iframeTriggerSelector = 'a[href]:not([data-preview-link=false]), [data-preview-link]:not(a):not([data-preview-link=false])';
-		}
-		// Enable link previews for individual elements
-		else {
-			this.iframeTriggerSelector = '[data-preview-link]:not([data-preview-link=false])';
-		}
-
-		const hasLinkPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.iframeTriggerSelector ).length > 0;
-		const hasMediaPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.mediaTriggerSelector ).length > 0;
-
-		// Only add the listener when there are previewable elements in the slides
-		if( hasLinkPreviews || hasMediaPreviews ) {
-			this.Reveal.getSlidesElement().addEventListener( 'click', this.onSlidesClicked, false );
-		}
-		else {
-			this.Reveal.getSlidesElement().removeEventListener( 'click', this.onSlidesClicked, false );
-		}
-
-	}
-
-	createOverlay( className ) {
-
-		this.dom = document.createElement( 'div' );
-		this.dom.classList.add( 'r-overlay' );
-		this.dom.classList.add( className );
-
-		this.viewport = document.createElement( 'div' );
-		this.viewport.classList.add( 'r-overlay-viewport' );
-
-		this.dom.appendChild( this.viewport );
-		this.Reveal.getRevealElement().appendChild( this.dom );
-
-	}
-
-	/**
-	 * Opens a lightbox that previews the target URL.
-	 *
-	 * @param {string} url - url for lightbox iframe src
-	 */
-	previewIframe( url ) {
-
-		this.close();
-
-		this.state = { previewIframe: url };
-
-		this.createOverlay( 'r-overlay-preview' );
-		this.dom.dataset.state = 'loading';
-
-		this.viewport.innerHTML =
-			`<header class="r-overlay-header">
-				<a class="r-overlay-button r-overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
-				<button class="r-overlay-button r-overlay-close"><span class="icon"></span></button>
-			</header>
-			<div class="r-overlay-spinner"></div>
-			<div class="r-overlay-content">
-				<iframe src="${url}"></iframe>
-				<small class="r-overlay-content-inner">
-					<span class="r-overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
-				</small>
-			</div>`;
-
-		this.dom.querySelector( 'iframe' ).addEventListener( 'load', event => {
-			this.dom.dataset.state = 'loaded';
-		}, false );
-
-		this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
-			this.close();
-			event.preventDefault();
-		}, false );
-
-		this.dom.querySelector( '.r-overlay-external' ).addEventListener( 'click', event => {
-			this.close();
-		}, false );
-
-		this.Reveal.dispatchEvent({ type: 'previewiframe', data: { url } });
-
-	}
-
-	/**
-	 * Opens a lightbox window that provides a larger view of the
-	 * given image/video.
-	 *
-	 * @param {string} url - url to the image/video to preview
-	 * @param {image|video} mediaType
-	 * @param {string} [fitMode] - the fit mode to use for the preview
-	 */
-	previewMedia( url, mediaType, fitMode ) {
-
-		if( mediaType !== 'image' && mediaType !== 'video' ) {
-			console.warn( 'Please specify a valid media type to preview (image|video)' );
-			return;
-		}
-
-		this.close();
-
-		fitMode = fitMode || 'scale-down';
-
-		this.createOverlay( 'r-overlay-preview' );
-		this.dom.dataset.state = 'loading';
-		this.dom.dataset.previewFit = fitMode;
-
-		this.viewport.innerHTML =
-			`<header class="r-overlay-header">
-				<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
-			</header>
-			<div class="r-overlay-spinner"></div>
-			<div class="r-overlay-content"></div>`;
-
-		const contentElement = this.dom.querySelector( '.r-overlay-content' );
-
-		if( mediaType === 'image' ) {
-
-			this.state = { previewImage: url, previewFit: fitMode }
-
-			const img = document.createElement( 'img', {} );
-			img.src = url;
-			contentElement.appendChild( img );
-
-			img.addEventListener( 'load', () => {
-				this.dom.dataset.state = 'loaded';
-			}, false );
-
-			img.addEventListener( 'error', () => {
-				this.dom.dataset.state = 'error';
-				contentElement.innerHTML =
-						`<span class="r-overlay-error">Unable to load image.</span>`
-			}, false );
-
-			// Hide image overlays when clicking outside the overlay
-			this.dom.style.cursor = 'zoom-out';
-			this.dom.addEventListener( 'click', ( event ) => {
-				this.close();
-			}, false );
-
-			this.Reveal.dispatchEvent({ type: 'previewimage', data: { url } });
-
-		}
-		else if( mediaType === 'video' ) {
-
-			this.state = { previewVideo: url, previewFit: fitMode }
-
-			const video = document.createElement( 'video' );
-			video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
-			video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
-			video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
-			video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
-			video.playsInline = true;
-			video.src = url;
-			contentElement.appendChild( video );
-
-			video.addEventListener( 'loadeddata', () => {
-				this.dom.dataset.state = 'loaded';
-			}, false );
-
-			video.addEventListener( 'error', () => {
-				this.dom.dataset.state = 'error';
-				contentElement.innerHTML =
-					`<span class="r-overlay-error">Unable to load video.</span>`;
-			}, false );
-
-			this.Reveal.dispatchEvent({ type: 'previewvideo', data: { url } });
-
-		}
-		else {
-			throw new Error( 'Please specify a valid media type to preview' );
-		}
-
-		this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', ( event ) => {
-			this.close();
-			event.preventDefault();
-		}, false );
-
-	}
-
-	previewImage( url, fitMode ) {
-
-		this.previewMedia( url, 'image', fitMode );
-
-	}
-
-	previewVideo( url, fitMode ) {
-
-		this.previewMedia( url, 'video', fitMode );
-
-	}
-
-	/**
-	 * Open or close help overlay window.
-	 *
-	 * @param {Boolean} [override] Flag which overrides the
-	 * toggle logic and forcibly sets the desired state. True means
-	 * help is open, false means it's closed.
-	 */
-	toggleHelp( override ) {
-
-		if( typeof override === 'boolean' ) {
-			override ? this.showHelp() : this.close();
-		}
-		else {
-			if( this.dom ) {
-				this.close();
-			}
-			else {
-				this.showHelp();
-			}
-		}
-	}
-
-	/**
-	 * Opens an overlay window with help material.
-	 */
-	showHelp() {
-
-		if( this.Reveal.getConfig().help ) {
-
-			this.close();
-
-			this.createOverlay( 'r-overlay-help' );
-
-			let html = '<p class="title">Keyboard Shortcuts</p>';
-
-			let shortcuts = this.Reveal.keyboard.getShortcuts(),
-				bindings = this.Reveal.keyboard.getBindings();
-
-			html += '<table><th>KEY</th><th>ACTION</th>';
-			for( let key in shortcuts ) {
-				html += `<tr><td>${key}</td><td>${shortcuts[ key ]}</td></tr>`;
-			}
-
-			// Add custom key bindings that have associated descriptions
-			for( let binding in bindings ) {
-				if( bindings[binding].key && bindings[binding].description ) {
-					html += `<tr><td>${bindings[binding].key}</td><td>${bindings[binding].description}</td></tr>`;
-				}
-			}
-
-			html += '</table>';
-
-			this.viewport.innerHTML = `
-				<header class="r-overlay-header">
-					<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
-				</header>
-				<div class="r-overlay-content">
-					<div class="r-overlay-help-content">${html}</div>
-				</div>
-			`;
-
-			this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
-				this.close();
-				event.preventDefault();
-			}, false );
-
-			this.Reveal.dispatchEvent({ type: 'showhelp' });
-
-		}
-
-	}
-
-	isOpen() {
-
-		return !!this.dom;
-
-	}
-
-	/**
-	 * Closes any currently open overlay.
-	 */
-	close() {
-
-		if( this.dom ) {
-			this.dom.remove();
-			this.dom = null;
-
-			this.state = {};
-
-			this.Reveal.dispatchEvent({ type: 'closeoverlay' });
-
-			return true;
-		}
-
-		return false;
-
-	}
-
-	getState() {
-
-		return this.state;
-
-	}
-
-	setState( state ) {
-
-		// Ignore the incoming state if none of the preview related
-		// props have changed
-		if( this.stateProps.every( key => this.state[ key ] === state[ key ] ) ) {
-			return;
-		}
-
-		if( state.previewIframe ) {
-			this.previewIframe( state.previewIframe );
-		}
-		else if( state.previewImage ) {
-			this.previewImage( state.previewImage, state.previewFit );
-		}
-		else if( state.previewVideo ) {
-			this.previewVideo( state.previewVideo, state.previewFit );
-		}
-		else {
-			this.close();
-		}
-
-	}
-
-	onSlidesClicked( event ) {
-
-		const target = event.target;
-
-		const linkTarget = target.closest( this.iframeTriggerSelector );
-		const mediaTarget = target.closest( this.mediaTriggerSelector );
-
-		// Was an iframe lightbox trigger clicked?
-		if( linkTarget ) {
-			if( event.metaKey || event.shiftKey || event.altKey ) {
-				// Let the browser handle meta keys naturally so users can cmd+click
-				return;
-			}
-			let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
-			if( url ) {
-				this.previewIframe( url );
-				event.preventDefault();
-			}
-		}
-		// Was a media lightbox trigger clicked?
-		else if( mediaTarget ) {
-			if( mediaTarget.hasAttribute( 'data-preview-image' ) ) {
-				let url = mediaTarget.dataset.previewImage || mediaTarget.getAttribute( 'src' );
-				if( url ) {
-					this.previewImage( url, mediaTarget.dataset.previewFit );
-					event.preventDefault();
-				}
-			}
-			else if( mediaTarget.hasAttribute( 'data-preview-video' ) ) {
-				let url = mediaTarget.dataset.previewVideo || mediaTarget.getAttribute( 'src' );
-				if( !url ) {
-					let source = mediaTarget.querySelector( 'source' );
-					if( source ) {
-						url = source.getAttribute( 'src' );
-					}
-				}
-				if( url ) {
-					this.previewVideo( url, mediaTarget.dataset.previewFit );
-					event.preventDefault();
-				}
-			}
-		}
-
-	}
-
-	destroy() {
-
-		this.close();
-
-	}
-
-}
--- a/js/controllers/overview.js
+++ b/js/controllers/overview.js
@@ -24,7 +24,7 @@ export default class Overview {
 	activate() {

 		// Only proceed if enabled in config
-		if( this.Reveal.getConfig().overview && !this.Reveal.isScrollView() && !this.isActive() ) {
+		if( this.Reveal.getConfig().overview && !this.isActive() ) {

 			this.active = true;

--- a/js/controllers/plugins.js
+++ b/js/controllers/plugins.js
@@ -12,7 +12,7 @@ export default class Plugins {
 		// Flags our current state (idle -> loading -> loaded)
 		this.state = 'idle';

-		// An id:instance map of currently registered plugins
+		// An id:instance map of currently registed plugins
 		this.registeredPlugins = {};

 		this.asyncDependencies = [];
@@ -171,7 +171,7 @@ export default class Plugins {
 	/**
 	 * Registers a new plugin with this reveal.js instance.
 	 *
-	 * reveal.js waits for all registered plugins to initialize
+	 * reveal.js waits for all regisered plugins to initialize
 	 * before considering itself ready, as long as the plugin
 	 * is registered before calling `Reveal.initialize()`.
 	 */
@@ -238,17 +238,4 @@ export default class Plugins {

 	}

-	destroy() {
-
-		Object.values( this.registeredPlugins ).forEach( plugin => {
-			if( typeof plugin.destroy === 'function' ) {
-				plugin.destroy();
-			}
-		} );
-
-		this.registeredPlugins = {};
-		this.asyncDependencies = [];
-
-	}
-
 }
--- a/js/controllers/pointer.js
+++ b/js/controllers/pointer.js
@@ -27,10 +27,12 @@ export default class Pointer {
 	configure( config, oldConfig ) {

 		if( config.mouseWheel ) {
-			document.addEventListener( 'wheel', this.onDocumentMouseScroll, false );
+			document.addEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
+			document.addEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
 		}
 		else {
-			document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
+			document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
+			document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
 		}

 		// Auto-hide the mouse pointer when its inactive
@@ -73,16 +75,6 @@ export default class Pointer {

 	}

-	destroy() {
-
-		this.showCursor();
-
-		document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
-		document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
-		document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
-
-	}
-
 	/**
 	 * Called whenever there is mouse input at the document level
 	 * to determine if the cursor is active or not.
--- a/js/controllers/printview.js
+++ b/js/controllers/printview.js
@@ -4,7 +4,7 @@ import { queryAll, createStyleSheet } from '../utils/util.js'
 /**
 * Setups up our presentation for printing/exporting to PDF.
 */
-export default class PrintView {
+export default class Print {

 	constructor( Reveal ) {

@@ -16,13 +16,13 @@ export default class PrintView {
 	 * Configures the presentation for printing to a static
 	 * PDF.
 	 */
-	async activate() {
+	async setupPDF() {

 		const config = this.Reveal.getConfig();
 		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )

 		// Compute slide numbers now, before we start duplicating slides
-		const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
+		const doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );

 		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );

@@ -42,23 +42,18 @@ export default class PrintView {
 		// Limit the size of certain elements to the dimensions of the slide
 		createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );

-		document.documentElement.classList.add( 'reveal-print', 'print-pdf' );
+		document.documentElement.classList.add( 'print-pdf' );
 		document.body.style.width = pageWidth + 'px';
 		document.body.style.height = pageHeight + 'px';

-		const viewportElement = this.Reveal.getViewportElement();
-		let presentationBackground;
-		if( viewportElement ) {
-			const viewportStyles = window.getComputedStyle( viewportElement );
-			if( viewportStyles && viewportStyles.background ) {
-				presentationBackground = viewportStyles.background;
-			}
-		}
-
 		// Make sure stretch elements fit on slide
 		await new Promise( requestAnimationFrame );
 		this.Reveal.layoutSlideContents( slideWidth, slideHeight );

+		// Re-run the slide layout so that r-fit-text is applied based on
+		// the printed slide size
+		slides.forEach( slide => this.Reveal.slideContent.layout( slide ) );
+
 		// Batch scrollHeight access to prevent layout thrashing
 		await new Promise( requestAnimationFrame );

@@ -66,7 +61,6 @@ export default class PrintView {

 		const pages = [];
 		const pageContainer = slides[0].parentNode;
-		let slideNumber = 1;

 		// Slide and slide background layout
 		slides.forEach( function( slide, index ) {
@@ -96,13 +90,6 @@ export default class PrintView {

 				page.className = 'pdf-page';
 				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
-
-				// Copy the presentation-wide background to each individual
-				// page when printing
-				if( presentationBackground ) {
-					page.style.background = presentationBackground;
-				}
-
 				page.appendChild( slide );

 				// Position the slide inside of the page
@@ -110,8 +97,6 @@ export default class PrintView {
 				slide.style.top = top + 'px';
 				slide.style.width = slideWidth + 'px';

-				this.Reveal.slideContent.layout( slide );
-
 				if( slide.slideBackgroundElement ) {
 					page.insertBefore( slide.slideBackgroundElement, slide );
 				}
@@ -145,12 +130,13 @@ export default class PrintView {

 				}

-				// Inject page numbers if `slideNumbers` are enabled
-				if( injectPageNumbers ) {
+				// Inject slide numbers if `slideNumbers` are enabled
+				if( doingSlideNumbers ) {
+					const slideNumber = index + 1;
 					const numberElement = document.createElement( 'div' );
 					numberElement.classList.add( 'slide-number' );
 					numberElement.classList.add( 'slide-number-pdf' );
-					numberElement.innerHTML = slideNumber++;
+					numberElement.innerHTML = slideNumber;
 					page.appendChild( numberElement );
 				}

@@ -164,7 +150,7 @@ export default class PrintView {

 					let previousFragmentStep;

-					fragmentGroups.forEach( function( fragments, index ) {
+					fragmentGroups.forEach( function( fragments ) {

 						// Remove 'current-fragment' from the previous group
 						if( previousFragmentStep ) {
@@ -180,14 +166,6 @@ export default class PrintView {

 						// Create a separate page for the current fragment state
 						const clonedPage = page.cloneNode( true );
-
-						// Inject unique page numbers for fragments
-						if( injectPageNumbers ) {
-							const numberElement = clonedPage.querySelector( '.slide-number-pdf' );
-							const fragmentNumber = index + 1;
-							numberElement.innerHTML += '.' + fragmentNumber;
-						}
-
 						pages.push( clonedPage );

 						previousFragmentStep = fragments;
@@ -217,22 +195,17 @@ export default class PrintView {

 		pages.forEach( page => pageContainer.appendChild( page ) );

-		// Re-run JS-based content layout after the slide is added to page DOM
-		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
-
 		// Notify subscribers that the PDF layout is good to go
 		this.Reveal.dispatchEvent({ type: 'pdf-ready' });

-		viewportElement.classList.remove( 'loading-scroll-mode' );
-
 	}

 	/**
-	 * Checks if the print mode is/should be activated.
+	 * Checks if this instance is being used to print a PDF.
 	 */
-	isActive() {
+	isPrintingPDF() {

-		return this.Reveal.getConfig().view === 'print';
+		return ( /print-pdf/gi ).test( window.location.search );

 	}

--- a/js/controllers/progress.js
+++ b/js/controllers/progress.js
@@ -101,10 +101,5 @@ export default class Progress {

 	}

-	destroy() {
-
-		this.element.remove();
-
-	}

 }
--- a/js/controllers/scrollview.js
+++ b/js/controllers/scrollview.js
@@ -1,923 +0,0 @@
-import { HORIZONTAL_SLIDES_SELECTOR, HORIZONTAL_BACKGROUNDS_SELECTOR } from '../utils/constants.js'
-import { queryAll } from '../utils/util.js'
-
-const HIDE_SCROLLBAR_TIMEOUT = 500;
-const MAX_PROGRESS_SPACING = 4;
-const MIN_PROGRESS_SEGMENT_HEIGHT = 6;
-const MIN_PLAYHEAD_HEIGHT = 8;
-
-/**
- * The scroll view lets you read a reveal.js presentation
- * as a linear scrollable page.
- */
-export default class ScrollView {
-
-	constructor( Reveal ) {
-
-		this.Reveal = Reveal;
-
-		this.active = false;
-		this.activatedCallbacks = [];
-
-		this.onScroll = this.onScroll.bind( this );
-
-	}
-
-	/**
-	 * Activates the scroll view. This rearranges the presentation DOM
-	 * by—among other things—wrapping each slide in a page element.
-	 */
-	activate() {
-
-		if( this.active ) return;
-
-		const stateBeforeActivation = this.Reveal.getState();
-
-		this.active = true;
-
-		// Store the full presentation HTML so that we can restore it
-		// when/if the scroll view is deactivated
-		this.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML;
-
-		const horizontalSlides = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_SLIDES_SELECTOR );
-		const horizontalBackgrounds = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_BACKGROUNDS_SELECTOR );
-
-		this.viewportElement.classList.add( 'loading-scroll-mode', 'reveal-scroll' );
-
-		let presentationBackground;
-
-		const viewportStyles = window.getComputedStyle( this.viewportElement );
-		if( viewportStyles && viewportStyles.background ) {
-			presentationBackground = viewportStyles.background;
-		}
-
-		const pageElements = [];
-		const pageContainer = horizontalSlides[0].parentNode;
-
-		let previousSlide;
-
-		// Creates a new page element and appends the given slide/bg
-		// to it.
-		const createPageElement = ( slide, h, v, isVertical ) => {
-
-			let contentContainer;
-
-			// If this slide is part of an auto-animation sequence, we
-			// group it under the same page element as the previous slide
-			if( previousSlide && this.Reveal.shouldAutoAnimateBetween( previousSlide, slide ) ) {
-				contentContainer = document.createElement( 'div' );
-				contentContainer.className = 'scroll-page-content scroll-auto-animate-page';
-				contentContainer.style.display = 'none';
-				previousSlide.closest( '.scroll-page-content' ).parentNode.appendChild( contentContainer );
-			}
-			else {
-				// Wrap the slide in a page element and hide its overflow
-				// so that no page ever flows onto another
-				const page = document.createElement( 'div' );
-				page.className = 'scroll-page';
-				pageElements.push( page );
-
-				// This transfers over the background of the vertical stack containing
-				// the slide if it exists. Otherwise, it uses the presentation-wide
-				// background.
-				if( isVertical && horizontalBackgrounds.length > h ) {
-					const slideBackground = horizontalBackgrounds[h];
-					const pageBackground = window.getComputedStyle( slideBackground );
-
-					if( pageBackground && pageBackground.background ) {
-						page.style.background = pageBackground.background;
-					}
-					else if( presentationBackground ) {
-						page.style.background = presentationBackground;
-					}
-				} else if( presentationBackground ) {
-					page.style.background = presentationBackground;
-				}
-
-				const stickyContainer = document.createElement( 'div' );
-				stickyContainer.className = 'scroll-page-sticky';
-				page.appendChild( stickyContainer );
-
-				contentContainer = document.createElement( 'div' );
-				contentContainer.className = 'scroll-page-content';
-				stickyContainer.appendChild( contentContainer );
-			}
-
-			contentContainer.appendChild( slide );
-
-			slide.classList.remove( 'past', 'future' );
-			slide.setAttribute( 'data-index-h', h );
-			slide.setAttribute( 'data-index-v', v );
-
-			if( slide.slideBackgroundElement ) {
-				slide.slideBackgroundElement.remove( 'past', 'future' );
-				contentContainer.insertBefore( slide.slideBackgroundElement, slide );
-			}
-
-			previousSlide = slide;
-
-		}
-
-		// Slide and slide background layout
-		horizontalSlides.forEach( ( horizontalSlide, h ) => {
-
-			if( this.Reveal.isVerticalStack( horizontalSlide ) ) {
-				horizontalSlide.querySelectorAll( 'section' ).forEach( ( verticalSlide, v ) => {
-					createPageElement( verticalSlide, h, v, true );
-				});
-			}
-			else {
-				createPageElement( horizontalSlide, h, 0 );
-			}
-
-		}, this );
-
-		this.createProgressBar();
-
-		// Remove leftover stacks
-		queryAll( this.Reveal.getRevealElement(), '.stack' ).forEach( stack => stack.remove() );
-
-		// Add our newly created pages to the DOM
-		pageElements.forEach( page => pageContainer.appendChild( page ) );
-
-		// Re-run JS-based content layout after the slide is added to page DOM
-		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
-
-		this.Reveal.layout();
-		this.Reveal.setState( stateBeforeActivation );
-
-		this.activatedCallbacks.forEach( callback => callback() );
-		this.activatedCallbacks = [];
-
-		this.restoreScrollPosition();
-
-		this.viewportElement.classList.remove( 'loading-scroll-mode' );
-		this.viewportElement.addEventListener( 'scroll', this.onScroll, { passive: true } );
-
-	}
-
-	/**
-	 * Deactivates the scroll view and restores the standard slide-based
-	 * presentation.
-	 */
-	deactivate() {
-
-		if( !this.active ) return;
-
-		const stateBeforeDeactivation = this.Reveal.getState();
-
-		this.active = false;
-
-		this.viewportElement.removeEventListener( 'scroll', this.onScroll );
-		this.viewportElement.classList.remove( 'reveal-scroll' );
-
-		this.removeProgressBar();
-
-		this.Reveal.getSlidesElement().innerHTML = this.slideHTMLBeforeActivation;
-		this.Reveal.sync();
-		this.Reveal.setState( stateBeforeDeactivation );
-
-		this.slideHTMLBeforeActivation = null;
-
-	}
-
-	toggle( override ) {
-
-		if( typeof override === 'boolean' ) {
-			override ? this.activate() : this.deactivate();
-		}
-		else {
-			this.isActive() ? this.deactivate() : this.activate();
-		}
-
-	}
-
-	/**
-	 * Checks if the scroll view is currently active.
-	 */
-	isActive() {
-
-		return this.active;
-
-	}
-
-	/**
-	 * Renders the progress bar component.
-	 */
-	createProgressBar() {
-
-		this.progressBar = document.createElement( 'div' );
-		this.progressBar.className = 'scrollbar';
-
-		this.progressBarInner = document.createElement( 'div' );
-		this.progressBarInner.className = 'scrollbar-inner';
-		this.progressBar.appendChild( this.progressBarInner );
-
-		this.progressBarPlayhead = document.createElement( 'div' );
-		this.progressBarPlayhead.className = 'scrollbar-playhead';
-		this.progressBarInner.appendChild( this.progressBarPlayhead );
-
-		this.viewportElement.insertBefore( this.progressBar, this.viewportElement.firstChild );
-
-		const handleDocumentMouseMove	= ( event ) => {
-
-			let progress = ( event.clientY - this.progressBarInner.getBoundingClientRect().top ) / this.progressBarHeight;
-			progress = Math.max( Math.min( progress, 1 ), 0 );
-
-			this.viewportElement.scrollTop = progress * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight );
-
-		};
-
-		const handleDocumentMouseUp = ( event ) => {
-
-			this.draggingProgressBar = false;
-			this.showProgressBar();
-
-			document.removeEventListener( 'mousemove', handleDocumentMouseMove );
-			document.removeEventListener( 'mouseup', handleDocumentMouseUp );
-
-		};
-
-		const handleMouseDown = ( event ) => {
-
-			event.preventDefault();
-
-			this.draggingProgressBar = true;
-
-			document.addEventListener( 'mousemove', handleDocumentMouseMove );
-			document.addEventListener( 'mouseup', handleDocumentMouseUp );
-
-			handleDocumentMouseMove( event );
-
-		};
-
-		this.progressBarInner.addEventListener( 'mousedown', handleMouseDown );
-
-	}
-
-	removeProgressBar() {
-
-		if( this.progressBar ) {
-			this.progressBar.remove();
-			this.progressBar = null;
-		}
-
-	}
-
-	layout() {
-
-		if( this.isActive() ) {
-			this.syncPages();
-			this.syncScrollPosition();
-		}
-
-	}
-
-	/**
-	 * Updates our pages to match the latest configuration and
-	 * presentation size.
-	 */
-	syncPages() {
-
-		const config = this.Reveal.getConfig();
-
-		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
-		const scale = this.Reveal.getScale();
-		const useCompactLayout = config.scrollLayout === 'compact';
-
-		const viewportHeight = this.viewportElement.offsetHeight;
-		const compactHeight = slideSize.height * scale;
-		const pageHeight = useCompactLayout ? compactHeight : viewportHeight;
-
-		// The height that needs to be scrolled between scroll triggers
-		this.scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;
-
-		this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
-		this.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : '';
-
-		// This will hold all scroll triggers used to show/hide slides
-		this.slideTriggers = [];
-
-		const pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.scroll-page' ) );
-
-		this.pages = pageElements.map( pageElement => {
-			const page = this.createPage({
-				pageElement,
-				slideElement: pageElement.querySelector( 'section' ),
-				stickyElement: pageElement.querySelector( '.scroll-page-sticky' ),
-				contentElement: pageElement.querySelector( '.scroll-page-content' ),
-				backgroundElement: pageElement.querySelector( '.slide-background' ),
-				autoAnimateElements: pageElement.querySelectorAll( '.scroll-auto-animate-page' ),
-				autoAnimatePages: []
-			});
-
-			page.pageElement.style.setProperty( '--slide-height', config.center === true ? 'auto' : slideSize.height + 'px' );
-
-			this.slideTriggers.push({
-				page: page,
-				activate: () => this.activatePage( page ),
-				deactivate: () => this.deactivatePage( page )
-			});
-
-			// Create scroll triggers that show/hide fragments
-			this.createFragmentTriggersForPage( page );
-
-			// Create scroll triggers for triggering auto-animate steps
-			if( page.autoAnimateElements.length > 0 ) {
-				this.createAutoAnimateTriggersForPage( page );
-			}
-
-			let totalScrollTriggerCount = Math.max( page.scrollTriggers.length - 1, 0 );
-
-			// Each auto-animate step may include its own scroll triggers
-			// for fragments, ensure we count those as well
-			totalScrollTriggerCount += page.autoAnimatePages.reduce( ( total, page ) => {
-				return total + Math.max( page.scrollTriggers.length - 1, 0 );
-			}, page.autoAnimatePages.length );
-
-			// Clean up from previous renders
-			page.pageElement.querySelectorAll( '.scroll-snap-point' ).forEach( el => el.remove() );
-
-			// Create snap points for all scroll triggers
-			// - Can't be absolute in FF
-			// - Can't be 0-height in Safari
-			// - Can't use snap-align on parent in Safari because then
-			//   inner triggers won't work
-			for( let i = 0; i < totalScrollTriggerCount + 1; i++ ) {
-				const triggerStick = document.createElement( 'div' );
-				triggerStick.className = 'scroll-snap-point';
-				triggerStick.style.height = this.scrollTriggerHeight + 'px';
-				triggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start';
-				page.pageElement.appendChild( triggerStick );
-
-				if( i === 0 ) {
-					triggerStick.style.marginTop = -this.scrollTriggerHeight + 'px';
-				}
-			}
-
-			// In the compact layout, only slides with scroll triggers cover the
-			// full viewport height. This helps avoid empty gaps before or after
-			// a sticky slide.
-			if( useCompactLayout && page.scrollTriggers.length > 0 ) {
-				page.pageHeight = viewportHeight;
-				page.pageElement.style.setProperty( '--page-height', viewportHeight + 'px' );
-			}
-			else {
-				page.pageHeight = pageHeight;
-				page.pageElement.style.removeProperty( '--page-height' );
-			}
-
-			// Add scroll padding based on how many scroll triggers we have
-			page.scrollPadding = this.scrollTriggerHeight * totalScrollTriggerCount;
-
-			// The total height including scrollable space
-			page.totalHeight = page.pageHeight + page.scrollPadding;
-
-			// This is used to pad the height of our page in CSS
-			page.pageElement.style.setProperty( '--page-scroll-padding', page.scrollPadding + 'px' );
-
-			// If this is a sticky page, stick it to the vertical center
-			if( totalScrollTriggerCount > 0 ) {
-				page.stickyElement.style.position = 'sticky';
-				page.stickyElement.style.top = Math.max( ( viewportHeight - page.pageHeight ) / 2, 0 ) + 'px';
-			}
-			else {
-				page.stickyElement.style.position = 'relative';
-				page.pageElement.style.scrollSnapAlign = page.pageHeight < viewportHeight ? 'center' : 'start';
-			}
-
-			return page;
-		} );
-
-		this.setTriggerRanges();
-
-		/*
-		console.log(this.slideTriggers.map( t => {
-			return {
-				range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`,
-				triggers: t.page.scrollTriggers.map( t => {
-					return `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`
-				}).join( ', ' ),
-			}
-		}))
-		*/
-
-		this.viewportElement.setAttribute( 'data-scrollbar', config.scrollProgress );
-
-		if( config.scrollProgress && this.totalScrollTriggerCount > 1 ) {
-			// Create the progress bar if it doesn't already exist
-			if( !this.progressBar ) this.createProgressBar();
-
-			this.syncProgressBar();
-		}
-		else {
-			this.removeProgressBar();
-		}
-
-	}
-
-	/**
-	 * Calculates and sets the scroll range for all of our scroll
-	 * triggers.
-	 */
-	setTriggerRanges() {
-
-		// Calculate the total number of scroll triggers
-		this.totalScrollTriggerCount = this.slideTriggers.reduce( ( total, trigger ) => {
-			return total + Math.max( trigger.page.scrollTriggers.length, 1 );
-		}, 0 );
-
-		let rangeStart = 0;
-
-		// Calculate the scroll range of each scroll trigger on a scale
-		// of 0-1
-		this.slideTriggers.forEach( ( trigger, i ) => {
-			trigger.range = [
-				rangeStart,
-				rangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount
-			];
-
-			const scrollTriggerSegmentSize = ( trigger.range[1] - trigger.range[0] ) / trigger.page.scrollTriggers.length;
-			// Set the range for each inner scroll trigger
-			trigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => {
-				scrollTrigger.range = [
-					rangeStart + i * scrollTriggerSegmentSize,
-					rangeStart + ( i + 1 ) * scrollTriggerSegmentSize
-				];
-			} );
-
-			rangeStart = trigger.range[1];
-		} );
-
-		// Ensure the last trigger extends to the end of the page, otherwise
-		// rounding errors can cause the last trigger to end at 0.999999...
-		this.slideTriggers[this.slideTriggers.length - 1].range[1] = 1;
-
-	}
-
-	/**
-	 * Creates one scroll trigger for each fragments in the given page.
-	 *
-	 * @param {*} page
-	 */
-	createFragmentTriggersForPage( page, slideElement ) {
-
-		slideElement = slideElement || page.slideElement;
-
-		// Each fragment 'group' is an array containing one or more
-		// fragments. Multiple fragments that appear at the same time
-		// are part of the same group.
-		const fragmentGroups = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment' ), true );
-
-		// Create scroll triggers that show/hide fragments
-		if( fragmentGroups.length ) {
-			page.fragments = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment:not(.disabled)' ) );
-			page.scrollTriggers.push(
-				// Trigger for the initial state with no fragments visible
-				{
-					activate: () => {
-						this.Reveal.fragments.update( -1, page.fragments, slideElement );
-					}
-				}
-			);
-
-			// Triggers for each fragment group
-			fragmentGroups.forEach( ( fragments, i ) => {
-				page.scrollTriggers.push({
-					activate: () => {
-						this.Reveal.fragments.update( i, page.fragments, slideElement );
-					}
-				});
-			} );
-		}
-
-
-		return page.scrollTriggers.length;
-
-	}
-
-	/**
-	 * Creates scroll triggers for the auto-animate steps in the
-	 * given page.
-	 *
-	 * @param {*} page
-	 */
-	createAutoAnimateTriggersForPage( page ) {
-
-		if( page.autoAnimateElements.length > 0 ) {
-
-			// Triggers for each subsequent auto-animate slide
-			this.slideTriggers.push( ...Array.from( page.autoAnimateElements ).map( ( autoAnimateElement, i ) => {
-				let autoAnimatePage = this.createPage({
-					slideElement: autoAnimateElement.querySelector( 'section' ),
-					contentElement: autoAnimateElement,
-					backgroundElement: autoAnimateElement.querySelector( '.slide-background' )
-				});
-
-				// Create fragment scroll triggers for the auto-animate slide
-				this.createFragmentTriggersForPage( autoAnimatePage, autoAnimatePage.slideElement );
-
-				page.autoAnimatePages.push( autoAnimatePage );
-
-				// Return our slide trigger
-				return {
-					page: autoAnimatePage,
-					activate: () => this.activatePage( autoAnimatePage ),
-					deactivate: () => this.deactivatePage( autoAnimatePage )
-				};
-			}));
-		}
-
-	}
-
-	/**
-	 * Helper method for creating a page definition and adding
-	 * required fields. A "page" is a slide or auto-animate step.
-	 */
-	createPage( page ) {
-
-		page.scrollTriggers = [];
-		page.indexh = parseInt( page.slideElement.getAttribute( 'data-index-h' ), 10 );
-		page.indexv = parseInt( page.slideElement.getAttribute( 'data-index-v' ), 10 );
-
-		return page;
-
-	}
-
-	/**
-	 * Rerenders progress bar segments so that they match the current
-	 * reveal.js config and size.
-	 */
-	syncProgressBar() {
-
-		this.progressBarInner.querySelectorAll( '.scrollbar-slide' ).forEach( slide => slide.remove() );
-
-		const scrollHeight = this.viewportElement.scrollHeight;
-		const viewportHeight = this.viewportElement.offsetHeight;
-		const viewportHeightFactor = viewportHeight / scrollHeight;
-
-		this.progressBarHeight = this.progressBarInner.offsetHeight;
-		this.playheadHeight = Math.max( viewportHeightFactor * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
-		this.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight;
-
-		const progressSegmentHeight = viewportHeight / scrollHeight * this.progressBarHeight;
-		const spacing = Math.min( progressSegmentHeight / 8, MAX_PROGRESS_SPACING );
-
-		this.progressBarPlayhead.style.height = this.playheadHeight - spacing + 'px';
-
-		// Don't show individual segments if they're too small
-		if( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) {
-
-			this.slideTriggers.forEach( slideTrigger => {
-
-				const { page } = slideTrigger;
-
-				// Visual representation of a slide
-				page.progressBarSlide = document.createElement( 'div' );
-				page.progressBarSlide.className = 'scrollbar-slide';
-				page.progressBarSlide.style.top = slideTrigger.range[0] * this.progressBarHeight + 'px';
-				page.progressBarSlide.style.height = ( slideTrigger.range[1] - slideTrigger.range[0] ) * this.progressBarHeight - spacing + 'px';
-				page.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 );
-				this.progressBarInner.appendChild( page.progressBarSlide );
-
-				// Visual representations of each scroll trigger
-				page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
-
-					const triggerElement = document.createElement( 'div' );
-					triggerElement.className = 'scrollbar-trigger';
-					triggerElement.style.top = ( trigger.range[0] - slideTrigger.range[0] ) * this.progressBarHeight + 'px';
-					triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px';
-					page.progressBarSlide.appendChild( triggerElement );
-
-					if( i === 0 ) triggerElement.style.display = 'none';
-
-					return triggerElement;
-
-				} );
-
-			} );
-
-		}
-		else {
-
-			this.pages.forEach( page => page.progressBarSlide = null );
-
-		}
-
-	}
-
-	/**
-	 * Reads the current scroll position and updates our active
-	 * trigger states accordingly.
-	 */
-	syncScrollPosition() {
-
-		const viewportHeight = this.viewportElement.offsetHeight;
-		const viewportHeightFactor = viewportHeight / this.viewportElement.scrollHeight;
-
-		const scrollTop = this.viewportElement.scrollTop;
-		const scrollHeight = this.viewportElement.scrollHeight - viewportHeight
-		const scrollProgress = Math.max( Math.min( scrollTop / scrollHeight, 1 ), 0 );
-		const scrollProgressMid = Math.max( Math.min( ( scrollTop + viewportHeight / 2 ) / this.viewportElement.scrollHeight, 1 ), 0 );
-
-		let activePage;
-
-		this.slideTriggers.forEach( ( trigger ) => {
-			const { page } = trigger;
-
-			const shouldPreload = scrollProgress >= trigger.range[0] - viewportHeightFactor*2 &&
-														scrollProgress <= trigger.range[1] + viewportHeightFactor*2;
-
-			// Load slides that are within the preload range
-			if( shouldPreload && !page.loaded ) {
-				page.loaded = true;
-				this.Reveal.slideContent.load( page.slideElement );
-			}
-			else if( page.loaded ) {
-				page.loaded = false;
-				this.Reveal.slideContent.unload( page.slideElement );
-			}
-
-			// If we're within this trigger range, activate it
-			if( scrollProgress >= trigger.range[0] && scrollProgress <= trigger.range[1] ) {
-				this.activateTrigger( trigger );
-				activePage = trigger.page;
-			}
-			// .. otherwise deactivate
-			else if( trigger.active ) {
-				this.deactivateTrigger( trigger );
-			}
-		} );
-
-		// Each page can have its own scroll triggers, check if any of those
-		// need to be activated/deactivated
-		if( activePage ) {
-			activePage.scrollTriggers.forEach( ( trigger ) => {
-				if( scrollProgressMid >= trigger.range[0] && scrollProgressMid <= trigger.range[1] ) {
-					this.activateTrigger( trigger );
-				}
-				else if( trigger.active ) {
-					this.deactivateTrigger( trigger );
-				}
-			} );
-		}
-
-		// Update our visual progress indication
-		this.setProgressBarValue( scrollTop / ( this.viewportElement.scrollHeight - viewportHeight ) );
-
-	}
-
-	/**
-	 * Moves the progress bar playhead to the specified position.
-	 *
-	 * @param {number} progress 0-1
-	 */
-	setProgressBarValue( progress ) {
-
-		if( this.progressBar ) {
-
-			this.progressBarPlayhead.style.transform = `translateY(${progress * this.progressBarScrollableHeight}px)`;
-
-			this.getAllPages()
-				.filter( page => page.progressBarSlide )
-				.forEach( ( page ) => {
-					page.progressBarSlide.classList.toggle( 'active', page.active === true );
-
-					page.scrollTriggers.forEach( ( trigger, i ) => {
-						page.scrollTriggerElements[i].classList.toggle( 'active', page.active === true && trigger.active === true );
-					} );
-				} );
-
-			this.showProgressBar();
-
-		}
-
-	}
-
-	/**
-	 * Show the progress bar and, if configured, automatically hide
-	 * it after a delay.
-	 */
-	showProgressBar() {
-
-		this.progressBar.classList.add( 'visible' );
-
-		clearTimeout( this.hideProgressBarTimeout );
-
-		if( this.Reveal.getConfig().scrollProgress === 'auto' && !this.draggingProgressBar ) {
-
-			this.hideProgressBarTimeout = setTimeout( () => {
-				if( this.progressBar ) {
-					this.progressBar.classList.remove( 'visible' );
-				}
-			}, HIDE_SCROLLBAR_TIMEOUT );
-
-		}
-
-	}
-
-	/**
-	 * Scroll to the previous page.
-	 */
-	prev() {
-
-		this.viewportElement.scrollTop -= this.scrollTriggerHeight;
-
-	}
-
-	/**
-	 * Scroll to the next page.
-	 */
-	next() {
-
-		this.viewportElement.scrollTop += this.scrollTriggerHeight;
-
-	}
-
-	/**
-	 * Scrolls the given slide element into view.
-	 *
-	 * @param {HTMLElement} slideElement
-	 */
-	scrollToSlide( slideElement ) {
-
-		// If the scroll view isn't active yet, queue this action
-		if( !this.active ) {
-			this.activatedCallbacks.push( () => this.scrollToSlide( slideElement ) );
-		}
-		else {
-			// Find the trigger for this slide
-			const trigger = this.getScrollTriggerBySlide( slideElement );
-
-			if( trigger ) {
-				// Use the trigger's range to calculate the scroll position
-				this.viewportElement.scrollTop = trigger.range[0] * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight );
-			}
-		}
-
-	}
-
-	/**
-	 * Persists the current scroll position to session storage
-	 * so that it can be restored.
-	 */
-	storeScrollPosition() {
-
-		clearTimeout( this.storeScrollPositionTimeout );
-
-		this.storeScrollPositionTimeout = setTimeout( () => {
-			sessionStorage.setItem( 'reveal-scroll-top', this.viewportElement.scrollTop );
-			sessionStorage.setItem( 'reveal-scroll-origin', location.origin + location.pathname );
-
-			this.storeScrollPositionTimeout = null;
-		}, 50 );
-
-	}
-
-	/**
-	 * Restores the scroll position when a deck is reloader.
-	 */
-	restoreScrollPosition() {
-
-		const scrollPosition = sessionStorage.getItem( 'reveal-scroll-top' );
-		const scrollOrigin = sessionStorage.getItem( 'reveal-scroll-origin' );
-
-		if( scrollPosition && scrollOrigin === location.origin + location.pathname ) {
-			this.viewportElement.scrollTop = parseInt( scrollPosition, 10 );
-		}
-
-	}
-
-	/**
-	 * Activates the given page and starts its embedded content
-	 * if there is any.
-	 *
-	 * @param {object} page
-	 */
-	activatePage( page ) {
-
-		if( !page.active ) {
-
-			page.active = true;
-
-			const { slideElement, backgroundElement, contentElement, indexh, indexv } = page;
-
-			contentElement.style.display = 'block';
-
-			slideElement.classList.add( 'present' );
-
-			if( backgroundElement ) {
-				backgroundElement.classList.add( 'present' );
-			}
-
-			this.Reveal.setCurrentScrollPage( slideElement, indexh, indexv );
-			this.Reveal.backgrounds.bubbleSlideContrastClassToElement( slideElement, this.viewportElement );
-
-			// If this page is part of an auto-animation there will be one
-			// content element per auto-animated page. We need to show the
-			// current page and hide all others.
-			Array.from( contentElement.parentNode.querySelectorAll( '.scroll-page-content' ) ).forEach( sibling => {
-				if( sibling !== contentElement ) {
-					sibling.style.display = 'none';
-				}
-			});
-
-		}
-
-	}
-
-	/**
-	 * Deactivates the page after it has been visible.
-	 *
-	 * @param {object} page
-	 */
-	deactivatePage( page ) {
-
-		if( page.active ) {
-
-			page.active = false;
-			if( page.slideElement ) page.slideElement.classList.remove( 'present' );
-			if( page.backgroundElement ) page.backgroundElement.classList.remove( 'present' );
-
-		}
-
-	}
-
-	activateTrigger( trigger ) {
-
-		if( !trigger.active ) {
-			trigger.active = true;
-			trigger.activate();
-		}
-
-	}
-
-	deactivateTrigger( trigger ) {
-
-		if( trigger.active ) {
-			trigger.active = false;
-
-			if( trigger.deactivate ) {
-				trigger.deactivate();
-			}
-		}
-
-	}
-
-	/**
-	 * Retrieve a slide by its original h/v index (i.e. the indices the
-	 * slide had before being linearized).
-	 *
-	 * @param {number} h
-	 * @param {number} v
-	 * @returns {HTMLElement}
-	 */
-	getSlideByIndices( h, v ) {
-
-		const page = this.getAllPages().find( page => {
-			return page.indexh === h && page.indexv === v;
-		} );
-
-		return page ? page.slideElement : null;
-
-	}
-
-	/**
-	 * Retrieve a list of all scroll triggers for the given slide
-	 * DOM element.
-	 *
-	 * @param {HTMLElement} slide
-	 * @returns {Array}
-	 */
-	getScrollTriggerBySlide( slide ) {
-
-		return this.slideTriggers.find( trigger => trigger.page.slideElement === slide );
-
-	}
-
-	/**
-	 * Get a list of all pages in the scroll view. This includes
-	 * both top-level slides and auto-animate steps.
-	 *
-	 * @returns {Array}
-	 */
-	getAllPages() {
-
-		return this.pages.flatMap( page => [page, ...(page.autoAnimatePages || [])] );
-
-	}
-
-	onScroll() {
-
-		this.syncScrollPosition();
-		this.storeScrollPosition();
-
-	}
-
-	get viewportElement() {
-
-		return this.Reveal.getViewportElement();
-
-	}
-
-}
--- a/js/controllers/slidecontent.js
+++ b/js/controllers/slidecontent.js
@@ -1,4 +1,5 @@
-import { extend, queryAll, closest, getMimeTypeFromFile, encodeRFC3986URI } from '../utils/util.js'
+import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
+import { extend, queryAll, closest } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'

 import fitty from 'fitty';
@@ -9,15 +10,11 @@ import fitty from 'fitty';
 */
 export default class SlideContent {

-	allowedToPlay = true;
-
 	constructor( Reveal ) {

 		this.Reveal = Reveal;

 		this.startEmbeddedIframe = this.startEmbeddedIframe.bind( this );
-		this.preventIframeAutoFocus = this.preventIframeAutoFocus.bind( this );
-		this.ensureMobileMediaPlaying = this.ensureMobileMediaPlaying.bind( this );

 	}

@@ -29,10 +26,6 @@ export default class SlideContent {
 	 */
 	shouldPreload( element ) {

-		if( this.Reveal.isScrollView() ) {
-			return true;
-		}
-
 		// Prefer an explicit global preload setting
 		let preload = this.Reveal.getConfig().preloadIframes;

@@ -55,25 +48,14 @@ export default class SlideContent {
 	load( slide, options = {} ) {

 		// Show the slide element
-		const displayValue = this.Reveal.getConfig().display;
-		if( displayValue.includes('!important') ) {
-			const value = displayValue.replace(/\s*!important\s*$/, '').trim();
-			slide.style.setProperty('display', value, 'important');
-		} else {
-			slide.style.display = displayValue;
-		}
+		slide.style.display = this.Reveal.getConfig().display;

-		// Media and iframe elements with data-src attributes
+		// Media elements with data-src attributes
 		queryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {
-			const isIframe = element.tagName === 'IFRAME';
-			if( !isIframe || this.shouldPreload( element ) ) {
+			if( element.tagName !== 'IFRAME' || this.shouldPreload( element ) ) {
 				element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
 				element.setAttribute( 'data-lazy-loaded', '' );
 				element.removeAttribute( 'data-src' );
-
-				if( isIframe ) {
-					element.addEventListener( 'load', this.preventIframeAutoFocus );
-				}
 			}
 		} );

@@ -120,28 +102,19 @@ export default class SlideContent {

 				// Images
 				if( backgroundImage ) {
-					// base64
-					if(  /^data:/.test( backgroundImage.trim() ) ) {
-						backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
-					}
-					// URL(s)
-					else {
-						backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
-							// Decode URL(s) that are already encoded first
-							let decoded = decodeURI(background.trim());
-							return `url(${encodeRFC3986URI(decoded)})`;
-						}).join( ',' );
-					}
+					backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
+						return `url(${encodeURI(background.trim())})`;
+					}).join( ',' );
 				}
 				// Videos
-				else if ( backgroundVideo ) {
+				else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
 					let video = document.createElement( 'video' );

 					if( backgroundVideoLoop ) {
 						video.setAttribute( 'loop', '' );
 					}

-					if( backgroundVideoMuted || this.Reveal.isSpeakerNotes() ) {
+					if( backgroundVideoMuted ) {
 						video.muted = true;
 					}

@@ -157,15 +130,7 @@ export default class SlideContent {

 					// Support comma separated lists of video sources
 					backgroundVideo.split( ',' ).forEach( source => {
-						const sourceElement = document.createElement( 'source' );
-						sourceElement.setAttribute( 'src', source );
-
-						let type = getMimeTypeFromFile( source );
-						if( type ) {
-							sourceElement.setAttribute( 'type', type );
-						}
-
-						video.appendChild( sourceElement );
+						video.innerHTML += '<source src="'+ source +'">';
 					} );

 					backgroundContent.appendChild( video );
@@ -209,14 +174,15 @@ export default class SlideContent {
 	}

 	/**
-	 * Applies JS-dependent layout helpers for the scope.
+	 * Applies JS-dependent layout helpers for the given slide,
+	 * if there are any.
 	 */
-	layout( scopeElement ) {
+	layout( slide ) {

 		// Autosize text with the r-fit-text class based on the
 		// size of its container. This needs to happen after the
 		// slide is visible in order to measure the text.
-		Array.from( scopeElement.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
+		Array.from( slide.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
 			fitty( element, {
 				minSize: 24,
 				maxSize: this.Reveal.getConfig().height * 0.8,
@@ -295,9 +261,7 @@ export default class SlideContent {
 	 */
 	startEmbeddedContent( element ) {

-		if( element ) {
-
-			const isSpeakerNotesWindow = this.Reveal.isSpeakerNotes();
+		if( element && !this.Reveal.isSpeakerNotes() ) {

 			// Restart GIFs
 			queryAll( element, 'img[src$=".gif"]' ).forEach( el => {
@@ -323,9 +287,6 @@ export default class SlideContent {

 				if( autoplay && typeof el.play === 'function' ) {

-					// In the speaker view we only auto-play muted media
-					if( isSpeakerNotesWindow && !el.muted ) return;
-
 					// If the media is ready, start playback
 					if( el.readyState > 1 ) {
 						this.startEmbeddedMedia( { target: el } );
@@ -335,16 +296,10 @@ export default class SlideContent {
 					else if( isMobile ) {
 						let promise = el.play();

-						el.addEventListener( 'canplay', this.ensureMobileMediaPlaying );
-
 						// If autoplay does not work, ensure that the controls are visible so
 						// that the viewer can start the media on their own
 						if( promise && typeof promise.catch === 'function' && el.controls === false ) {
-							promise
-							.then( () => {
-								this.allowedToPlay = true;
-							})
-							.catch( () => {
+							promise.catch( () => {
 								el.controls = true;

 								// Once the video does start playing, hide the controls again
@@ -363,72 +318,32 @@ export default class SlideContent {
 				}
 			} );

-			// Don't play iframe content in the speaker view since we can't
-			// guarantee that it's muted
-			if( !isSpeakerNotesWindow ) {
+			// Normal iframes
+			queryAll( element, 'iframe[src]' ).forEach( el => {
+				if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
+					return;
+				}

-				// Normal iframes
-				queryAll( element, 'iframe[src]' ).forEach( el => {
-					if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
-						return;
-					}
+				this.startEmbeddedIframe( { target: el } );
+			} );

-					this.startEmbeddedIframe( { target: el } );
-				} );
+			// Lazy loading iframes
+			queryAll( element, 'iframe[data-src]' ).forEach( el => {
+				if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
+					return;
+				}

-				// Lazy loading iframes
-				queryAll( element, 'iframe[data-src]' ).forEach( el => {
-					if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
-						return;
-					}
-
-					if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
-						el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
-						el.addEventListener( 'load', this.startEmbeddedIframe );
-						el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
-					}
-				} );
-
-			}
+				if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
+					el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
+					el.addEventListener( 'load', this.startEmbeddedIframe );
+					el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
+				}
+			} );

 		}

 	}

-	/**
-	 * Ensure that an HTMLMediaElement is playing on mobile devices.
-	 *
-	 * This is a workaround for a bug in mobile Safari where
-	 * the media fails to display if many videos are started
-	 * at the same moment. When this happens, Mobile Safari
-	 * reports the video is playing, and the current time
-	 * advances, but nothing is visible.
-	 *
-	 * @param {Event} event
-	 */
-	ensureMobileMediaPlaying( event ) {
-
-		const el = event.target;
-
-		// Ignore this check incompatible browsers
-		if( typeof el.getVideoPlaybackQuality !== 'function' ) {
-			return;
-		}
-
-		setTimeout( () => {
-
-			const playing = el.paused === false;
-			const totalFrames = el.getVideoPlaybackQuality().totalVideoFrames;
-
-			if( playing && totalFrames === 0 ) {
-				el.load();
-				el.play();
-			}
-
-		}, 1000 );
-
-	}
-
 	/**
 	 * Starts playing an embedded video/audio element after
 	 * it has finished loading.
@@ -441,23 +356,8 @@ export default class SlideContent {
 			isVisible  		= !!closest( event.target, '.present' );

 		if( isAttachedToDOM && isVisible ) {
-			// Don't restart if media is already playing
-			if( event.target.paused || event.target.ended ) {
-				event.target.currentTime = 0;
-				const promise = event.target.play();
-
-				if( promise && typeof promise.catch === 'function' ) {
-					promise
-						.then( () => {
-							this.allowedToPlay = true;
-						} )
-						.catch( ( error ) => {
-							if( error.name === 'NotAllowedError' ) {
-								this.allowedToPlay = false;
-							}
-						} );
-				}
-			}
+			event.target.currentTime = 0;
+			event.target.play();
 		}

 		event.target.removeEventListener( 'loadeddata', this.startEmbeddedMedia );
@@ -474,8 +374,6 @@ export default class SlideContent {

 		let iframe = event.target;

-		this.preventIframeAutoFocus( event );
-
 		if( iframe && iframe.contentWindow ) {

 			let isAttachedToDOM = !!closest( event.target, 'html' ),
@@ -530,17 +428,12 @@ export default class SlideContent {
 				if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {
 					el.setAttribute('data-paused-by-reveal', '');
 					el.pause();
-
-					if( isMobile ) {
-						el.removeEventListener( 'canplay', this.ensureMobileMediaPlaying );
-					}
 				}
 			} );

 			// Generic postMessage API for non-lazy loaded iframes
 			queryAll( element, 'iframe' ).forEach( el => {
 				if( el.contentWindow ) el.contentWindow.postMessage( 'slide:stop', '*' );
-				el.removeEventListener( 'load', this.preventIframeAutoFocus );
 				el.removeEventListener( 'load', this.startEmbeddedIframe );
 			});

@@ -571,46 +464,4 @@ export default class SlideContent {

 	}

-	/**
-	 * Checks whether media playback is blocked by the browser. This
-	 * typically happens when media playback is initiated without a
-	 * direct user interaction.
-	 */
-	isNotAllowedToPlay() {
-
-		return !this.allowedToPlay;
-
-	}
-
-	/**
-	 * Prevents iframes from automatically focusing themselves.
-	 *
-	 * @param {Event} event
-	 */
-	preventIframeAutoFocus( event ) {
-
-		const iframe = event.target;
-
-		console.log(111)
-
-		if( iframe && this.Reveal.getConfig().preventIframeAutoFocus ) {
-
-			let elapsed = 0;
-			const interval = 100;
-			const maxTime = 1000;
-			const checkFocus = () => {
-				if( document.activeElement === iframe ) {
-					document.activeElement.blur();
-				} else if( elapsed < maxTime ) {
-					elapsed += interval;
-					setTimeout( checkFocus, interval );
-				}
-			};
-
-			setTimeout( checkFocus, interval );
-
-		}
-
-	}
-
 }
--- a/js/controllers/slidenumber.js
+++ b/js/controllers/slidenumber.js
@@ -1,10 +1,3 @@
-import {
-	SLIDE_NUMBER_FORMAT_CURRENT,
-	SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL,
-	SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL,
-	SLIDE_NUMBER_FORMAT_HORIZONTAL_SLASH_VERTICAL
-} from "../utils/constants";
-
 /**
 * Handles the display of reveal.js' optional slide number.
 */
@@ -30,7 +23,7 @@ export default class SlideNumber {
 	configure( config, oldConfig ) {

 		let slideNumberDisplay = 'none';
-		if( config.slideNumber && !this.Reveal.isPrintView() ) {
+		if( config.slideNumber && !this.Reveal.isPrintingPDF() ) {
 			if( config.showSlideNumber === 'all' ) {
 				slideNumberDisplay = 'block';
 			}
@@ -63,7 +56,7 @@ export default class SlideNumber {

 		let config = this.Reveal.getConfig();
 		let value;
-		let format = SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL;
+		let format = 'h.v';

 		if ( typeof config.slideNumber === 'function' ) {
 			value = config.slideNumber( slide );
@@ -76,7 +69,7 @@ export default class SlideNumber {
 			// If there are ONLY vertical slides in this deck, always use
 			// a flattened slide number
 			if( !/c/.test( format ) && this.Reveal.getHorizontalSlides().length === 1 ) {
-				format = SLIDE_NUMBER_FORMAT_CURRENT;
+				format = 'c';
 			}

 			// Offset the current slide number by 1 to make it 1-indexed
@@ -84,16 +77,16 @@ export default class SlideNumber {

 			value = [];
 			switch( format ) {
-				case SLIDE_NUMBER_FORMAT_CURRENT:
+				case 'c':
 					value.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset );
 					break;
-				case SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL:
+				case 'c/t':
 					value.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset, '/', this.Reveal.getTotalSlides() );
 					break;
 				default:
 					let indices = this.Reveal.getIndices( slide );
 					value.push( indices.h + horizontalOffset );
-					let sep = format === SLIDE_NUMBER_FORMAT_HORIZONTAL_SLASH_VERTICAL ? '/' : '.';
+					let sep = format === 'h/v' ? '/' : '.';
 					if( this.Reveal.isVerticalSlide( slide ) ) value.push( sep, indices.v + 1 );
 			}
 		}
@@ -130,10 +123,4 @@ export default class SlideNumber {

 	}

-	destroy() {
-
-		this.element.remove();
-
-	}
-
 }
--- a/js/controllers/touch.js
+++ b/js/controllers/touch.js
@@ -84,7 +84,7 @@ export default class Touch {
 	isSwipePrevented( target ) {

 		// Prevent accidental swipes when scrubbing timelines
-		if( matches( target, 'video[controls], audio[controls]' ) ) return true;
+		if( matches( target, 'video, audio' ) ) return true;

 		while( target && typeof target.hasAttribute === 'function' ) {
 			if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
@@ -103,8 +103,6 @@ export default class Touch {
 	 */
 	onTouchStart( event ) {

-		this.touchCaptured = false;
-
 		if( this.isSwipePrevented( event.target ) ) return true;

 		this.touchStartX = event.touches[0].clientX;
@@ -216,14 +214,6 @@ export default class Touch {
 	 */
 	onTouchEnd( event ) {

-		// Media playback is only allowed as a direct result of a
-		// user interaction. Some mobile devices do not consider a
-		// 'touchmove' to be a direct user action. If this is the
-		// case, we fall back to starting playback here instead.
-		if( this.touchCaptured && this.Reveal.slideContent.isNotAllowedToPlay() ) {
-			this.Reveal.startEmbeddedContent( this.Reveal.getCurrentSlide() );
-		}
-
 		this.touchCaptured = false;

 	}
--- a/js/reveal.js
+++ b/js/reveal.js
--- a/js/utils/color.js
+++ b/js/utils/color.js
@@ -29,9 +29,9 @@ export const colorToRgb = ( color ) => {
 	if( hex6 && hex6[1] ) {
 		hex6 = hex6[1];
 		return {
-			r: parseInt( hex6.slice( 0, 2 ), 16 ),
-			g: parseInt( hex6.slice( 2, 4 ), 16 ),
-			b: parseInt( hex6.slice( 4, 6 ), 16 )
+			r: parseInt( hex6.substr( 0, 2 ), 16 ),
+			g: parseInt( hex6.substr( 2, 2 ), 16 ),
+			b: parseInt( hex6.substr( 4, 2 ), 16 )
 		};
 	}

@@ -44,7 +44,7 @@ export const colorToRgb = ( color ) => {
 		};
 	}

-	let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
+	let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
 	if( rgba ) {
 		return {
 			r: parseInt( rgba[1], 10 ),
--- a/js/utils/constants.js
+++ b/js/utils/constants.js
@@ -2,16 +2,9 @@
 export const SLIDES_SELECTOR = '.slides section';
 export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
 export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
-export const HORIZONTAL_BACKGROUNDS_SELECTOR = '.backgrounds>.slide-background';

 // Methods that may not be invoked via the postMessage API
-export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;
+export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/;

 // Regex for retrieving the fragment style from a class attribute
 export const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;
-
-// Slide number formats
-export const SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL = 'h.v';
-export const SLIDE_NUMBER_FORMAT_HORIZONTAL_SLASH_VERTICAL = 'h/v';
-export const SLIDE_NUMBER_FORMAT_CURRENT = 'c';
-export const SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL = 'c/t';
--- a/js/utils/device.js
+++ b/js/utils/device.js
@@ -1,4 +1,5 @@
 const UA = navigator.userAgent;
+const testElement = document.createElement( 'div' );

 export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
 						( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS
@@ -6,3 +7,9 @@ export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
 export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );

 export const isAndroid = /android/gi.test( UA );
+
+// Flags if we should use zoom instead of transform to scale
+// up slides. Zoom produces crisper results but has a lot of
+// xbrowser quirks so we only use it in whitelisted browsers.
+export const supportsZoom = 'zoom' in testElement.style && !isMobile &&
+				( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );
--- a/js/utils/util.js
+++ b/js/utils/util.js
@@ -280,34 +280,3 @@ export const getRemainingHeight = ( element, height = 0 ) => {
 	return height;

 }
-
-const fileExtensionToMimeMap = {
-	'mp4': 'video/mp4',
-	'm4a': 'video/mp4',
-	'ogv': 'video/ogg',
-	'mpeg': 'video/mpeg',
-	'webm': 'video/webm'
-}
-
-/**
- * Guess the MIME type for common file formats.
- */
-export const getMimeTypeFromFile = ( filename='' ) => {
-	return fileExtensionToMimeMap[filename.split('.').pop()]
-}
-
-/**
- * Encodes a string for RFC3986-compliant URL format.
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986
- *
- * @param {string} url
- */
-export const encodeRFC3986URI = ( url='' ) => {
-	return encodeURI(url)
-	  .replace(/%5B/g, "[")
-	  .replace(/%5D/g, "]")
-	  .replace(
-		/[!'()*]/g,
-		(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
-	  );
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "reveal.js",
-  "version": "5.2.1",
+  "version": "4.1.1",
  "description": "The HTML Presentation Framework",
  "homepage": "https://revealjs.com",
  "subdomain": "revealjs",
@@ -22,7 +22,7 @@
    "url": "git://github.com/hakimel/reveal.js.git"
  },
  "engines": {
-    "node": ">=18.0.0"
+    "node": ">=10.0.0"
  },
  "keywords": [
    "reveal",
@@ -30,43 +30,35 @@
    "presentation"
  ],
  "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "babel-plugin-transform-html-import-to-string": "2.0.0",
+    "@babel/core": "^7.14.3",
+    "@babel/eslint-parser": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "babel-plugin-transform-html-import-to-string": "0.0.1",
    "colors": "^1.4.0",
-    "core-js": "^3.33.1",
-    "fitty": "^2.3.7",
-    "glob": "^10.3.10",
-    "gulp": "^5.0.0",
-    "gulp-autoprefixer": "^8.0.0",
-    "gulp-clean-css": "^4.3.0",
+    "core-js": "^3.12.1",
+    "fitty": "^2.3.0",
+    "glob": "^7.1.7",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-clean-css": "^4.2.0",
    "gulp-connect": "^5.7.0",
    "gulp-eslint": "^6.0.0",
-    "gulp-header-comment": "^0.10.0",
-    "gulp-zip": "^5.1.0",
-    "highlight.js": "^11.9.0",
-    "marked": "^4.3.0",
-    "node-qunit-puppeteer": "^2.2.0",
-    "through2": "^4.0.2",
-    "qunit": "^2.22.0",
-    "rollup": "^4.1.5",
-    "sass": "^1.79.4",
-    "yargs": "^17.7.2"
+    "gulp-header": "^2.0.9",
+    "gulp-tap": "^2.0.0",
+    "gulp-zip": "^4.2.0",
+    "highlight.js": "^10.0.3",
+    "marked": "^2.0.3",
+    "node-qunit-puppeteer": "^2.0.1",
+    "qunit": "^2.10.0",
+    "rollup": "^2.48.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.32.13",
+    "yargs": "^15.1.0"
  },
-  "overrides": {
-    "gulp-connect": {
-      "send": "0.19.0"
-    },
-    "gulp-header-comment": {
-      "moment": "2.30.1"
-    }
-  },
-  "browserslist": "> 2%, not dead",
+  "browserslist": "> 0.5%, IE 11, not dead",
  "eslintConfig": {
    "env": {
      "browser": true,
--- a/Performance.vtt
+++ b/Performance.vtt
--- a/paper/1.png
+++ b/paper/1.png
--- a/Show More
+++ b/Show More