mikufans 编程黑客马拉松

2022-11-20 18:57:39 +08:00
136 changed files with 15154 additions and 13319 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
@@ -8,4 +8,5 @@ out/
 log/*.log
 tmp/**
 node_modules/
-.sass-cache
+.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'))

@@ -328,4 +311,4 @@ gulp.task('serve', () => {

    gulp.watch(['test/*.html'], gulp.series('test'))

-})
+})
--- 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,40 +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">
-				<section>Slide 1</section>
-				<section>Slide 2</section>
-			</div>
-		</div>
+    <!-- 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"
+          >
+          ### 峰悦交易看板

-		<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,
+          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 />

-				// Learn about plugins: https://revealjs.com/plugins/
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
-			});
-		</script>
-	</body>
-</html>
+            <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
+
+            - 开源、稳定、高性能的混合式数据库后端
+            - 能够储存结构化和非结构化的混合式数据
+            - 储存股票时序记录
+            - 超过1000只股票的10年数据纪录
+          </section>
+          <section data-markdown
+                   data-background-image="./images/logo.png"
+            data-background-opacity="0.39"
+            >
+            ### 后端数据源 - RSSHub
+
+            - 活跃开源项目，超过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
+
+              - 开源的专业实时数据监控面板
+              - 组件化配置各个数据源模块
+              - 自定义筛选各类数据源
+              - 跨平台支持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>
+
+    <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,
+
+        // 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;
 			}
@@ -398,12 +378,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
@@ -411,4 +385,4 @@ export default class Keyboard {

 	}

-}
+}
--- 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.
@@ -123,4 +115,4 @@ export default class Pointer {

 	}

-}
+}
--- 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,23 +195,18 @@ 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';
+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/;
--- a/js/utils/device.js
+++ b/js/utils/device.js
@@ -1,8 +1,15 @@
 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

 export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );

-export const isAndroid = /android/gi.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
@@ -279,35 +279,4 @@ 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/plugin/highlight/highlight.esm.js
+++ b/plugin/highlight/highlight.esm.js
--- a/plugin/highlight/highlight.js
+++ b/plugin/highlight/highlight.js
--- a/Show More
+++ b/Show More