diff --git a/.prettierignore b/.prettierignore
index dce2e68c..baf6cb1b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,6 @@
-**/*
+**/*.html
+
 js/**/*.js
-plugin/**/*.js
\ No newline at end of file
+plugin/**/*.js
+test/**/*.md
+examples/**/*.md
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index df657d98..f4f82ddb 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-	"useTabs": false,
+	"useTabs": true,
 	"tabWidth": 2,
 	"trailingComma": "es5",
 	"printWidth": 100,
diff --git a/README.md b/README.md
index 290e3770..66e56a30 100644
--- a/README.md
+++ b/README.md
@@ -18,13 +18,15 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
 ---
 
 ### 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)
 
---- 
+---
+
 <div align="center">
   MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
 </div>
diff --git a/css/layout.scss b/css/layout.scss
index 5d0536f9..1c3b1cae 100644
--- a/css/layout.scss
+++ b/css/layout.scss
@@ -38,7 +38,8 @@
 .reveal .r-hstack {
 	display: flex;
 
-	img, video {
+	img,
+	video {
 		min-width: 0;
 		min-height: 0;
 		object-fit: contain;
@@ -58,13 +59,31 @@
 }
 
 // Naming based on tailwindcss
-.reveal .items-stretch { align-items: stretch; }
-.reveal .items-start { align-items: flex-start; }
-.reveal .items-center { align-items: center; }
-.reveal .items-end { align-items: flex-end; }
+.reveal .items-stretch {
+	align-items: stretch;
+}
+.reveal .items-start {
+	align-items: flex-start;
+}
+.reveal .items-center {
+	align-items: center;
+}
+.reveal .items-end {
+	align-items: flex-end;
+}
 
-.reveal .justify-between { justify-content: space-between; }
-.reveal .justify-around { justify-content: space-around; }
-.reveal .justify-start { justify-content: flex-start; }
-.reveal .justify-center { justify-content: center; }
-.reveal .justify-end { justify-content: flex-end; }
+.reveal .justify-between {
+	justify-content: space-between;
+}
+.reveal .justify-around {
+	justify-content: space-around;
+}
+.reveal .justify-start {
+	justify-content: flex-start;
+}
+.reveal .justify-center {
+	justify-content: center;
+}
+.reveal .justify-end {
+	justify-content: flex-end;
+}
diff --git a/css/print/paper.scss b/css/print/paper.scss
index 32fab8a4..fbf5f00e 100644
--- a/css/print/paper.scss
+++ b/css/print/paper.scss
@@ -1,4 +1,3 @@
-
 @media print {
 	html:not(.print-pdf) {
 		overflow: visible;
@@ -24,25 +23,46 @@
 			display: none !important;
 		}
 
-		p, td, li {
-			font-size: 20pt!important;
+		p,
+		td,
+		li {
+			font-size: 20pt !important;
 			color: #000;
 		}
 
-		h1,h2,h3,h4,h5,h6 {
-			color: #000!important;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: #000 !important;
 			height: auto;
 			line-height: normal;
 			text-align: left;
 			letter-spacing: normal;
 		}
 
-		h1 { font-size: 28pt !important; }
-		h2 { font-size: 24pt !important; }
-		h3 { font-size: 22pt !important; }
-		h4 { font-size: 22pt !important; font-variant: small-caps; }
-		h5 { font-size: 21pt !important; }
-		h6 { font-size: 20pt !important; font-style: italic; }
+		h1 {
+			font-size: 28pt !important;
+		}
+		h2 {
+			font-size: 24pt !important;
+		}
+		h3 {
+			font-size: 22pt !important;
+		}
+		h4 {
+			font-size: 22pt !important;
+			font-variant: small-caps;
+		}
+		h5 {
+			font-size: 21pt !important;
+		}
+		h6 {
+			font-size: 20pt !important;
+			font-style: italic;
+		}
 
 		a:link,
 		a:visited {
@@ -51,7 +71,10 @@
 			text-decoration: underline;
 		}
 
-		ul, ol, div, p {
+		ul,
+		ol,
+		div,
+		p {
 			visibility: visible;
 			position: static;
 			width: auto;
@@ -137,7 +160,7 @@
 		section img {
 			display: block;
 			margin: 15px 0px;
-			background: rgba(255,255,255,1);
+			background: rgba(255, 255, 255, 1);
 			border: 1px solid #666;
 			box-shadow: none;
 		}
diff --git a/css/print/pdf.scss b/css/print/pdf.scss
index 0a1c2bf6..0c240385 100644
--- a/css/print/pdf.scss
+++ b/css/print/pdf.scss
@@ -135,7 +135,7 @@ html.reveal-print {
 	}
 
 	/* Layout option which makes notes appear on a separate page */
-	.reveal .speaker-notes-pdf[data-layout="separate-page"] {
+	.reveal .speaker-notes-pdf[data-layout='separate-page'] {
 		position: relative;
 		color: inherit;
 		background-color: transparent;
diff --git a/css/reset.css b/css/reset.css
index e2385390..c800b110 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -3,6 +3,7 @@
    License: none (public domain)
 */
 
+/* prettier-ignore */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -23,8 +24,8 @@ time, mark, audio, video {
   font: inherit;
   vertical-align: baseline;
 }
-/* HTML5 display-role reset for older browsers */
+/* prettier-ignore */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, main, menu, nav, section {
   display: block;
-}
\ No newline at end of file
+}
diff --git a/css/reveal.scss b/css/reveal.scss
index 7ed5a194..fb4711ff 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -13,8 +13,8 @@
  * PRINT STYLES
  *********************************************/
 
- @use 'print/pdf.scss';
- @use 'print/paper.scss';
+@use 'print/pdf.scss';
+@use 'print/paper.scss';
 
 /*********************************************
  * GLOBAL STYLES
@@ -62,13 +62,12 @@ html.reveal-full-page {
 	transform: none !important;
 }
 
-
 /*********************************************
  * VIEW FRAGMENTS
  *********************************************/
 
 .reveal .fragment {
-	transition: all .2s ease;
+	transition: all 0.2s ease;
 
 	&:not(.custom) {
 		opacity: 0;
@@ -91,7 +90,7 @@ html.reveal-full-page {
 	visibility: inherit;
 
 	&.visible {
-		transform: scale( 1.3 );
+		transform: scale(1.3);
 	}
 }
 
@@ -100,12 +99,12 @@ html.reveal-full-page {
 	visibility: inherit;
 
 	&.visible {
-		transform: scale( 0.7 );
+		transform: scale(0.7);
 	}
 }
 
 .reveal .fragment.zoom-in {
-	transform: scale( 0.1 );
+	transform: scale(0.1);
 
 	&.visible {
 		transform: none;
@@ -208,18 +207,18 @@ html.reveal-full-page {
 	opacity: 1;
 	visibility: inherit;
 }
-	.reveal .fragment.highlight-red.visible {
-		color: #ff2c2d
-	}
-	.reveal .fragment.highlight-green.visible {
-		color: #17ff2e;
-	}
-	.reveal .fragment.highlight-blue.visible {
-		color: #1b91ff;
-	}
+.reveal .fragment.highlight-red.visible {
+	color: #ff2c2d;
+}
+.reveal .fragment.highlight-green.visible {
+	color: #17ff2e;
+}
+.reveal .fragment.highlight-blue.visible {
+	color: #1b91ff;
+}
 
 .reveal .fragment.highlight-current-red.current-fragment {
-	color: #ff2c2d
+	color: #ff2c2d;
 }
 .reveal .fragment.highlight-current-green.current-fragment {
 	color: #17ff2e;
@@ -228,15 +227,14 @@ html.reveal-full-page {
 	color: #1b91ff;
 }
 
-
 /*********************************************
  * DEFAULT ELEMENT STYLES
  *********************************************/
 
 /* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */
 .reveal:after {
-  content: '';
-  font-style: italic;
+	content: '';
+	font-style: italic;
 }
 
 .reveal iframe {
@@ -248,27 +246,56 @@ html.reveal-full-page {
 	position: relative;
 }
 
-
 /*********************************************
  * CONTROLS
  *********************************************/
 
 @keyframes bounce-right {
-	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
-	20% {transform: translateX(10px);}
-	30% {transform: translateX(-5px);}
+	0%,
+	10%,
+	25%,
+	40%,
+	50% {
+		transform: translateX(0);
+	}
+	20% {
+		transform: translateX(10px);
+	}
+	30% {
+		transform: translateX(-5px);
+	}
 }
 
 @keyframes bounce-left {
-	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
-	20% {transform: translateX(-10px);}
-	30% {transform: translateX(5px);}
+	0%,
+	10%,
+	25%,
+	40%,
+	50% {
+		transform: translateX(0);
+	}
+	20% {
+		transform: translateX(-10px);
+	}
+	30% {
+		transform: translateX(5px);
+	}
 }
 
 @keyframes bounce-down {
-	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
-	20% {transform: translateY(10px);}
-	30% {transform: translateY(-5px);}
+	0%,
+	10%,
+	25%,
+	40%,
+	50% {
+		transform: translateY(0);
+	}
+	20% {
+		transform: translateY(10px);
+	}
+	30% {
+		transform: translateY(-5px);
+	}
 }
 
 $controlArrowSize: 3.6em;
@@ -279,13 +306,15 @@ $controlsArrowAngle: 45deg;
 $controlsArrowAngleHover: 40deg;
 $controlsArrowAngleActive: 36deg;
 
-@mixin controlsArrowTransform( $angle ) {
+@mixin controlsArrowTransform($angle) {
 	&:before {
-		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength) * 0.5)
+			translateY(($controlArrowSize - $controlArrowThickness) * 0.5) rotate($angle);
 	}
 
 	&:after {
-		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength) * 0.5)
+			translateY(($controlArrowSize - $controlArrowThickness) * 0.5) rotate(-$angle);
 	}
 }
 
@@ -309,10 +338,8 @@ $controlsArrowAngleActive: 36deg;
 		outline: 0;
 		cursor: pointer;
 		color: currentColor;
-		transform: scale(.9999);
-		transition: color 0.2s ease,
-					opacity 0.2s ease,
-					transform 0.2s ease;
+		transform: scale(0.9999);
+		transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
 		z-index: 2; // above slides
 		pointer-events: auto;
 		font-size: inherit;
@@ -321,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
 		opacity: 0;
 
 		-webkit-appearance: none;
-		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	}
 
 	.controls-arrow:before,
@@ -332,11 +359,11 @@ $controlsArrowAngleActive: 36deg;
 		left: 0;
 		width: $controlArrowLength;
 		height: $controlArrowThickness;
-		border-radius: $controlArrowThickness*0.5;
+		border-radius: $controlArrowThickness * 0.5;
 		background-color: currentColor;
 
 		transition: all 0.15s ease, background-color 0.8s ease;
-		transform-origin: math.div(math.floor(($controlArrowThickness*0.5)*10), 10) 50%;
+		transform-origin: math.div(math.floor(($controlArrowThickness * 0.5) * 10), 10) 50%;
 		will-change: transform;
 	}
 
@@ -345,21 +372,21 @@ $controlsArrowAngleActive: 36deg;
 		width: $controlArrowSize;
 		height: $controlArrowSize;
 
-		@include controlsArrowTransform( $controlsArrowAngle );
+		@include controlsArrowTransform($controlsArrowAngle);
 
 		&:hover {
-			@include controlsArrowTransform( $controlsArrowAngleHover );
+			@include controlsArrowTransform($controlsArrowAngleHover);
 		}
 
 		&:active {
-			@include controlsArrowTransform( $controlsArrowAngleActive );
+			@include controlsArrowTransform($controlsArrowAngleActive);
 		}
 	}
 
 	.navigate-left {
-		right: $controlArrowSize + $controlArrowSpacing*2;
-		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
-		transform: translateX( -10px );
+		right: $controlArrowSize + $controlArrowSpacing * 2;
+		bottom: $controlArrowSpacing + $controlArrowSize * 0.5;
+		transform: translateX(-10px);
 
 		&.highlight {
 			animation: bounce-left 2s 50 both ease-out;
@@ -368,11 +395,11 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-right {
 		right: 0;
-		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
-		transform: translateX( 10px );
+		bottom: $controlArrowSpacing + $controlArrowSize * 0.5;
+		transform: translateX(10px);
 
 		.controls-arrow {
-			transform: rotate( 180deg );
+			transform: rotate(180deg);
 		}
 
 		&.highlight {
@@ -381,23 +408,23 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-up {
-		right: $controlArrowSpacing + $controlArrowSize*0.5;
-		bottom: $controlArrowSpacing*2 + $controlArrowSize;
-		transform: translateY( -10px );
+		right: $controlArrowSpacing + $controlArrowSize * 0.5;
+		bottom: $controlArrowSpacing * 2 + $controlArrowSize;
+		transform: translateY(-10px);
 
 		.controls-arrow {
-			transform: rotate( 90deg );
+			transform: rotate(90deg);
 		}
 	}
 
 	.navigate-down {
-		right: $controlArrowSpacing + $controlArrowSize*0.5;
+		right: $controlArrowSpacing + $controlArrowSize * 0.5;
 		bottom: -$controlArrowSpacing;
 		padding-bottom: $controlArrowSpacing;
-		transform: translateY( 10px );
+		transform: translateY(10px);
 
 		.controls-arrow {
-			transform: rotate( -90deg );
+			transform: rotate(-90deg);
 		}
 
 		&.highlight {
@@ -408,7 +435,7 @@ $controlsArrowAngleActive: 36deg;
 	// Back arrow style: "faded":
 	// Deemphasize backwards navigation arrows in favor of drawing
 	// attention to forwards navigation
-	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
+	&[data-controls-back-arrows='faded'] .navigate-up.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -418,7 +445,7 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show arrows for backwards navigation
-	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+	&[data-controls-back-arrows='hidden'] .navigate-up.enabled {
 		opacity: 0;
 		visibility: hidden;
 	}
@@ -446,7 +473,7 @@ $controlsArrowAngleActive: 36deg;
 .reveal:not(.rtl) .controls {
 	// Back arrow style: "faded":
 	// Deemphasize left arrow
-	&[data-controls-back-arrows="faded"] .navigate-left.enabled {
+	&[data-controls-back-arrows='faded'] .navigate-left.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -456,7 +483,7 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show left arrow
-	&[data-controls-back-arrows="hidden"] .navigate-left.enabled {
+	&[data-controls-back-arrows='hidden'] .navigate-left.enabled {
 		opacity: 0;
 		visibility: hidden;
 	}
@@ -465,7 +492,7 @@ $controlsArrowAngleActive: 36deg;
 .reveal.rtl .controls {
 	// Back arrow style: "faded":
 	// Deemphasize right arrow in RTL mode
-	&[data-controls-back-arrows="faded"] .navigate-right.enabled  {
+	&[data-controls-back-arrows='faded'] .navigate-right.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -475,25 +502,25 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show right arrow in RTL mode
-	&[data-controls-back-arrows="hidden"] .navigate-right.enabled {
+	&[data-controls-back-arrows='hidden'] .navigate-right.enabled {
 		opacity: 0;
 		visibility: hidden;
 	}
 }
 
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-up,
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-down {
 	display: none;
 }
 
 // Adjust the layout when there are no vertical slides
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-left,
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
 	bottom: $controlArrowSpacing;
 	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
 }
 
-.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
+.reveal[data-navigation-mode='linear'].has-horizontal-slides .navigate-right,
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
 	bottom: $controlArrowSpacing;
 	right: 0.5em;
@@ -520,17 +547,16 @@ $controlsArrowAngleActive: 36deg;
 // Disable active states on touch devices
 .reveal.no-hover .controls .controls-arrow:hover,
 .reveal.no-hover .controls .controls-arrow:active {
-	@include controlsArrowTransform( $controlsArrowAngle );
+	@include controlsArrowTransform($controlsArrowAngle);
 }
 
 // Edge aligned controls layout
 @media screen and (min-width: 500px) {
-
 	.reveal-viewport {
 		--r-controls-spacing: 0.8em;
 	}
 
-	.reveal .controls[data-controls-layout="edges"] {
+	.reveal .controls[data-controls-layout='edges'] {
 		& {
 			top: 0;
 			right: 0;
@@ -549,31 +575,29 @@ $controlsArrowAngleActive: 36deg;
 		.navigate-left {
 			top: 50%;
 			left: var(--r-controls-spacing);
-			margin-top: -$controlArrowSize*0.5;
+			margin-top: -$controlArrowSize * 0.5;
 		}
 
 		.navigate-right {
 			top: 50%;
 			right: var(--r-controls-spacing);
-			margin-top: -$controlArrowSize*0.5;
+			margin-top: -$controlArrowSize * 0.5;
 		}
 
 		.navigate-up {
 			top: var(--r-controls-spacing);
 			left: 50%;
-			margin-left: -$controlArrowSize*0.5;
+			margin-left: -$controlArrowSize * 0.5;
 		}
 
 		.navigate-down {
 			bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em);
 			left: 50%;
-			margin-left: -$controlArrowSize*0.5;
+			margin-left: -$controlArrowSize * 0.5;
 		}
 	}
-
 }
 
-
 /*********************************************
  * PROGRESS BAR
  *********************************************/
@@ -587,27 +611,27 @@ $controlsArrowAngleActive: 36deg;
 	left: 0;
 	z-index: 10;
 
-	background-color: rgba( 0, 0, 0, 0.2 );
+	background-color: rgba(0, 0, 0, 0.2);
 	color: #fff;
 }
-	.reveal .progress:after {
-		content: '';
-		display: block;
-		position: absolute;
-		height: 10px;
-		width: 100%;
-		top: -10px;
-	}
-	.reveal .progress span {
-		display: block;
-		height: 100%;
-		width: 100%;
+.reveal .progress:after {
+	content: '';
+	display: block;
+	position: absolute;
+	height: 10px;
+	width: 100%;
+	top: -10px;
+}
+.reveal .progress span {
+	display: block;
+	height: 100%;
+	width: 100%;
 
-		background-color: currentColor;
-		transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		transform-origin: 0 0;
-		transform: scaleX(0);
-	}
+	background-color: currentColor;
+	transition: transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+	transform-origin: 0 0;
+	transform: scaleX(0);
+}
 
 /*********************************************
  * SLIDE NUMBER
@@ -623,7 +647,7 @@ $controlsArrowAngleActive: 36deg;
 	font-size: 12px;
 	line-height: 1;
 	color: #fff;
-	background-color: rgba( 0, 0, 0, 0.4 );
+	background-color: rgba(0, 0, 0, 0.4);
 	padding: 5px;
 }
 
@@ -675,12 +699,12 @@ $controlsArrowAngleActive: 36deg;
 	perspective-origin: 50% 40%;
 }
 
-.reveal .slides>section {
+.reveal .slides > section {
 	perspective: 600px;
 }
 
-.reveal .slides>section,
-.reveal .slides>section>section {
+.reveal .slides > section,
+.reveal .slides > section > section {
 	display: none;
 	position: absolute;
 	width: 100%;
@@ -688,46 +712,46 @@ $controlsArrowAngleActive: 36deg;
 
 	z-index: 10;
 	transform-style: flat;
-	transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-				transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-				visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-				opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985),
+		transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985),
+		visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985),
+		opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
 }
 
 /* Global transition speed settings */
-.reveal[data-transition-speed="fast"] .slides section {
+.reveal[data-transition-speed='fast'] .slides section {
 	transition-duration: 400ms;
 }
-.reveal[data-transition-speed="slow"] .slides section {
+.reveal[data-transition-speed='slow'] .slides section {
 	transition-duration: 1200ms;
 }
 
 /* Slide-specific transition speed overrides */
-.reveal .slides section[data-transition-speed="fast"] {
+.reveal .slides section[data-transition-speed='fast'] {
 	transition-duration: 400ms;
 }
-.reveal .slides section[data-transition-speed="slow"] {
+.reveal .slides section[data-transition-speed='slow'] {
 	transition-duration: 1200ms;
 }
 
-.reveal .slides>section.stack {
+.reveal .slides > section.stack {
 	padding-top: 0;
 	padding-bottom: 0;
 	pointer-events: none;
 	height: 100%;
 }
 
-.reveal .slides>section.present,
-.reveal .slides>section>section.present {
+.reveal .slides > section.present,
+.reveal .slides > section > section.present {
 	display: block;
 	z-index: 11;
 	opacity: 1;
 }
 
-.reveal .slides>section:empty,
-.reveal .slides>section>section:empty,
-.reveal .slides>section[data-background-interactive],
-.reveal .slides>section>section[data-background-interactive] {
+.reveal .slides > section:empty,
+.reveal .slides > section > section:empty,
+.reveal .slides > section[data-background-interactive],
+.reveal .slides > section > section[data-background-interactive] {
 	pointer-events: none;
 }
 
@@ -738,68 +762,67 @@ $controlsArrowAngleActive: 36deg;
 }
 
 /* Don't allow interaction with invisible slides */
-.reveal .slides>section:not(.present),
-.reveal .slides>section>section:not(.present) {
+.reveal .slides > section:not(.present),
+.reveal .slides > section > section:not(.present) {
 	pointer-events: none;
 }
 
-.reveal.overview .slides>section,
-.reveal.overview .slides>section>section {
+.reveal.overview .slides > section,
+.reveal.overview .slides > section > section {
 	pointer-events: auto;
 }
 
-.reveal .slides>section.past,
-.reveal .slides>section.future,
-.reveal .slides>section.past>section,
-.reveal .slides>section.future>section,
-.reveal .slides>section>section.past,
-.reveal .slides>section>section.future {
+.reveal .slides > section.past,
+.reveal .slides > section.future,
+.reveal .slides > section.past > section,
+.reveal .slides > section.future > section,
+.reveal .slides > section > section.past,
+.reveal .slides > section > section.future {
 	opacity: 0;
 }
 
-
 /*********************************************
  * Mixins for readability of transitions
  *********************************************/
 
 @mixin transition-global($style) {
-	.reveal .slides section[data-transition=#{$style}],
+	.reveal .slides section[data-transition='#{$style}'],
 	.reveal.#{$style} .slides section:not([data-transition]) {
 		@content;
 	}
 }
 @mixin transition-stack($style) {
-	.reveal .slides section[data-transition=#{$style}].stack,
+	.reveal .slides section[data-transition='#{$style}'].stack,
 	.reveal.#{$style} .slides section.stack {
 		@content;
 	}
 }
 @mixin transition-horizontal-past($style) {
-	.reveal .slides>section[data-transition=#{$style}].past,
-	.reveal .slides>section[data-transition~=#{$style}-out].past,
-	.reveal.#{$style} .slides>section:not([data-transition]).past {
+	.reveal .slides > section[data-transition='#{$style}'].past,
+	.reveal .slides > section[data-transition~='#{$style}-out'].past,
+	.reveal.#{$style} .slides > section:not([data-transition]).past {
 		@content;
 	}
 }
 @mixin transition-horizontal-future($style) {
-	.reveal .slides>section[data-transition=#{$style}].future,
-	.reveal .slides>section[data-transition~=#{$style}-in].future,
-	.reveal.#{$style} .slides>section:not([data-transition]).future {
+	.reveal .slides > section[data-transition='#{$style}'].future,
+	.reveal .slides > section[data-transition~='#{$style}-in'].future,
+	.reveal.#{$style} .slides > section:not([data-transition]).future {
 		@content;
 	}
 }
 
 @mixin transition-vertical-past($style) {
-	.reveal .slides>section>section[data-transition=#{$style}].past,
-	.reveal .slides>section>section[data-transition~=#{$style}-out].past,
-	.reveal.#{$style} .slides>section>section:not([data-transition]).past {
+	.reveal .slides > section > section[data-transition='#{$style}'].past,
+	.reveal .slides > section > section[data-transition~='#{$style}-out'].past,
+	.reveal.#{$style} .slides > section > section:not([data-transition]).past {
 		@content;
 	}
 }
 @mixin transition-vertical-future($style) {
-	.reveal .slides>section>section[data-transition=#{$style}].future,
-	.reveal .slides>section>section[data-transition~=#{$style}-in].future,
-	.reveal.#{$style} .slides>section>section:not([data-transition]).future {
+	.reveal .slides > section > section[data-transition='#{$style}'].future,
+	.reveal .slides > section > section[data-transition~='#{$style}-in'].future,
+	.reveal.#{$style} .slides > section > section:not([data-transition]).future {
 		@content;
 	}
 }
@@ -869,7 +892,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 }
 
-
 /*********************************************
  * ZOOM TRANSITION
  *********************************************/
@@ -892,7 +914,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: scale(0.2);
 }
 
-
 /*********************************************
  * CUBE TRANSITION
  *
@@ -912,63 +933,62 @@ $controlsArrowAngleActive: 36deg;
 	box-sizing: border-box;
 	transform-style: preserve-3d;
 }
-	.reveal.center.cube .slides section {
-		min-height: 0;
-	}
-	.reveal.cube .slides section:not(.stack):before {
-		content: '';
-		position: absolute;
-		display: block;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		top: 0;
-		background: rgba(0,0,0,0.1);
-		border-radius: 4px;
-		transform: translateZ( -20px );
-	}
-	.reveal.cube .slides section:not(.stack):after {
-		content: '';
-		position: absolute;
-		display: block;
-		width: 90%;
-		height: 30px;
-		left: 5%;
-		bottom: 0;
-		background: none;
-		z-index: 1;
+.reveal.center.cube .slides section {
+	min-height: 0;
+}
+.reveal.cube .slides section:not(.stack):before {
+	content: '';
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 4px;
+	transform: translateZ(-20px);
+}
+.reveal.cube .slides section:not(.stack):after {
+	content: '';
+	position: absolute;
+	display: block;
+	width: 90%;
+	height: 30px;
+	left: 5%;
+	bottom: 0;
+	background: none;
+	z-index: 1;
 
-		border-radius: 4px;
-		box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
-		transform: translateZ(-90px) rotateX( 65deg );
-	}
+	border-radius: 4px;
+	box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);
+	transform: translateZ(-90px) rotateX(65deg);
+}
 
-.reveal.cube .slides>section.stack {
+.reveal.cube .slides > section.stack {
 	padding: 0;
 	background: none;
 }
 
-.reveal.cube .slides>section.past {
+.reveal.cube .slides > section.past {
 	transform-origin: 100% 0%;
 	transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 }
 
-.reveal.cube .slides>section.future {
+.reveal.cube .slides > section.future {
 	transform-origin: 0% 0%;
 	transform: translate3d(100%, 0, 0) rotateY(90deg);
 }
 
-.reveal.cube .slides>section>section.past {
+.reveal.cube .slides > section > section.past {
 	transform-origin: 0% 100%;
 	transform: translate3d(0, -100%, 0) rotateX(90deg);
 }
 
-.reveal.cube .slides>section>section.future {
+.reveal.cube .slides > section > section.future {
 	transform-origin: 0% 0%;
 	transform: translate3d(0, 100%, 0) rotateX(-90deg);
 }
 
-
 /*********************************************
  * PAGE TRANSITION
  *
@@ -988,81 +1008,78 @@ $controlsArrowAngleActive: 36deg;
 	box-sizing: border-box;
 	transform-style: preserve-3d;
 }
-	.reveal.page .slides section.past {
-		z-index: 12;
-	}
-	.reveal.page .slides section:not(.stack):before {
-		content: '';
-		position: absolute;
-		display: block;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		top: 0;
-		background: rgba(0,0,0,0.1);
-		transform: translateZ( -20px );
-	}
-	.reveal.page .slides section:not(.stack):after {
-		content: '';
-		position: absolute;
-		display: block;
-		width: 90%;
-		height: 30px;
-		left: 5%;
-		bottom: 0;
-		background: none;
-		z-index: 1;
+.reveal.page .slides section.past {
+	z-index: 12;
+}
+.reveal.page .slides section:not(.stack):before {
+	content: '';
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	background: rgba(0, 0, 0, 0.1);
+	transform: translateZ(-20px);
+}
+.reveal.page .slides section:not(.stack):after {
+	content: '';
+	position: absolute;
+	display: block;
+	width: 90%;
+	height: 30px;
+	left: 5%;
+	bottom: 0;
+	background: none;
+	z-index: 1;
 
-		border-radius: 4px;
-		box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+	border-radius: 4px;
+	box-shadow: 0px 95px 25px rgba(0, 0, 0, 0.2);
 
-		transform: translateZ(-90px) rotateX( 65deg );
+	transform: translateZ(-90px) rotateX( 65deg );
 	}
 
-.reveal.page .slides>section.stack {
+.reveal.page .slides > section.stack {
 	padding: 0;
 	background: none;
 }
 
-.reveal.page .slides>section.past {
+.reveal.page .slides > section.past {
 	transform-origin: 0% 0%;
 	transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 }
 
-.reveal.page .slides>section.future {
+.reveal.page .slides > section.future {
 	transform-origin: 100% 0%;
 	transform: translate3d(0, 0, 0);
 }
 
-.reveal.page .slides>section>section.past {
+.reveal.page .slides > section > section.past {
 	transform-origin: 0% 0%;
 	transform: translate3d(0, -40%, 0) rotateX(80deg);
 }
 
-.reveal.page .slides>section>section.future {
+.reveal.page .slides > section > section.future {
 	transform-origin: 0% 100%;
 	transform: translate3d(0, 0, 0);
 }
 
-
 /*********************************************
  * FADE TRANSITION
  *********************************************/
 
-.reveal .slides section[data-transition=fade],
+.reveal .slides section[data-transition='fade'],
 .reveal.fade .slides section:not([data-transition]),
-.reveal.fade .slides>section>section:not([data-transition]) {
+.reveal.fade .slides > section > section:not([data-transition]) {
 	transform: none;
 	transition: opacity 0.5s;
 }
 
-
 .reveal.fade.overview .slides section,
-.reveal.fade.overview .slides>section>section {
+.reveal.fade.overview .slides > section > section {
 	transition: none;
 }
 
-
 /*********************************************
  * NO TRANSITION
  *********************************************/
@@ -1072,7 +1089,6 @@ $controlsArrowAngleActive: 36deg;
 	transition: none;
 }
 
-
 /*********************************************
  * PAUSED MODE
  *********************************************/
@@ -1113,7 +1129,6 @@ $controlsArrowAngleActive: 36deg;
 	opacity: 1;
 }
 
-
 /*********************************************
  * FALLBACK
  *********************************************/
@@ -1128,7 +1143,6 @@ $controlsArrowAngleActive: 36deg;
 	transform: none !important;
 }
 
-
 /*********************************************
  * PER-SLIDE BACKGROUNDS
  *********************************************/
@@ -1141,44 +1155,44 @@ $controlsArrowAngleActive: 36deg;
 	left: 0;
 	perspective: 600px;
 }
-	.reveal .slide-background {
-		display: none;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-		visibility: hidden;
-		overflow: hidden;
+.reveal .slide-background {
+	display: none;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	visibility: hidden;
+	overflow: hidden;
 
-		background-color: rgba( 0, 0, 0, 0 );
+	background-color: rgba(0, 0, 0, 0);
 
-		transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	}
+	transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+}
 
-	.reveal .slide-background-content {
-		position: absolute;
-		width: 100%;
-		height: 100%;
+.reveal .slide-background-content {
+	position: absolute;
+	width: 100%;
+	height: 100%;
 
-		background-position: 50% 50%;
-		background-repeat: no-repeat;
-		background-size: cover;
-	}
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
 
-	.reveal .slide-background.stack {
-		display: block;
-	}
+.reveal .slide-background.stack {
+	display: block;
+}
 
-	.reveal .slide-background.present {
-		opacity: 1;
-		visibility: visible;
-		z-index: 2;
-	}
+.reveal .slide-background.present {
+	opacity: 1;
+	visibility: visible;
+	z-index: 2;
+}
 
-	.print-pdf .reveal .slide-background {
-		opacity: 1 !important;
-		visibility: visible !important;
-	}
+.print-pdf .reveal .slide-background {
+	opacity: 1 !important;
+	visibility: visible !important;
+}
 
 /* Video backgrounds */
 .reveal .slide-background video {
@@ -1191,142 +1205,209 @@ $controlsArrowAngleActive: 36deg;
 	left: 0;
 	object-fit: cover;
 }
-	.reveal .slide-background[data-background-size="contain"] video {
-		object-fit: contain;
-	}
+.reveal .slide-background[data-background-size='contain'] video {
+	object-fit: contain;
+}
 
 /* Immediate transition style */
-.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]),
-.reveal>.backgrounds .slide-background[data-background-transition=none] {
+.reveal[data-background-transition='none']
+	> .backgrounds
+	.slide-background:not([data-background-transition]),
+.reveal > .backgrounds .slide-background[data-background-transition='none'] {
 	transition: none;
 }
 
 /* Slide */
-.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
-.reveal>.backgrounds .slide-background[data-background-transition=slide] {
+.reveal[data-background-transition='slide']
+	> .backgrounds
+	.slide-background:not([data-background-transition]),
+.reveal > .backgrounds .slide-background[data-background-transition='slide'] {
 	opacity: 1;
 }
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
-	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
-		transform: translate(-100%, 0);
-	}
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]),
-	.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
-		transform: translate(100%, 0);
-	}
-
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
-	.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
-		transform: translate(0, -100%);
-	}
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
-	.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
-		transform: translate(0, 100%);
-	}
+.reveal[data-background-transition='slide']
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='slide'] {
+	transform: translate(-100%, 0);
+}
+.reveal[data-background-transition='slide']
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='slide'] {
+	transform: translate(100%, 0);
+}
 
+.reveal[data-background-transition='slide']
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='slide'] {
+	transform: translate(0, -100%);
+}
+.reveal[data-background-transition='slide']
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='slide'] {
+	transform: translate(0, 100%);
+}
 
 /* Convex */
-.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]),
-.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
+.reveal[data-background-transition='convex']
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
-.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]),
-.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
+.reveal[data-background-transition='convex']
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 }
 
-.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
-.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
+.reveal[data-background-transition='convex']
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
 }
-.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
-.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
+.reveal[data-background-transition='convex']
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='convex'] {
 	opacity: 0;
 	transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
 }
 
-
 /* Concave */
-.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]),
-.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
+.reveal[data-background-transition='concave']
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]),
-.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
+.reveal[data-background-transition='concave']
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
-.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
-.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
+.reveal[data-background-transition='concave']
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
 }
-.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
-.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
+.reveal[data-background-transition='concave']
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='concave'] {
 	opacity: 0;
 	transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
 }
 
 /* Zoom */
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]),
-.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
+.reveal[data-background-transition='zoom']
+	> .backgrounds
+	.slide-background:not([data-background-transition]),
+.reveal > .backgrounds .slide-background[data-background-transition='zoom'] {
 	transition-timing-function: ease;
 }
 
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]),
-.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
+.reveal[data-background-transition='zoom']
+	> .backgrounds
+	.slide-background.past:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.past[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(16);
 }
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]),
-.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
+.reveal[data-background-transition='zoom']
+	> .backgrounds
+	.slide-background.future:not([data-background-transition]),
+.reveal > .backgrounds .slide-background.future[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(0.2);
 }
 
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
-.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
+.reveal[data-background-transition='zoom']
+	> .backgrounds
+	.slide-background
+	> .slide-background.past:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.past[data-background-transition='zoom'] {
 	opacity: 0;
-		visibility: hidden;
-		transform: scale(16);
+	visibility: hidden;
+	transform: scale(16);
 }
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
-.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
+.reveal[data-background-transition='zoom']
+	> .backgrounds
+	.slide-background
+	> .slide-background.future:not([data-background-transition]),
+.reveal
+	> .backgrounds
+	.slide-background
+	> .slide-background.future[data-background-transition='zoom'] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(0.2);
 }
 
-
 /* Global transition speed settings */
-.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
+.reveal[data-transition-speed='fast'] > .backgrounds .slide-background {
 	transition-duration: 400ms;
 }
-.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
+.reveal[data-transition-speed='slow'] > .backgrounds .slide-background {
 	transition-duration: 1200ms;
 }
 
-
 /*********************************************
  * AUTO ANIMATE
  *********************************************/
 
-.reveal [data-auto-animate-target^="unmatched"] {
+.reveal [data-auto-animate-target^='unmatched'] {
 	will-change: opacity;
 }
 
-.reveal section[data-auto-animate]:not(.stack):not([data-auto-animate="running"]) [data-auto-animate-target^="unmatched"] {
+.reveal
+	section[data-auto-animate]:not(.stack):not([data-auto-animate='running'])
+	[data-auto-animate-target^='unmatched'] {
 	opacity: 0;
 }
 
-
 /*********************************************
  * OVERVIEW
  *********************************************/
@@ -1360,7 +1441,7 @@ $controlsArrowAngleActive: 36deg;
 	.slides section:before {
 		display: none !important;
 	}
-	.slides>section.stack {
+	.slides > section.stack {
 		padding: 0;
 		top: 0 !important;
 		background: none;
@@ -1377,7 +1458,7 @@ $controlsArrowAngleActive: 36deg;
 		visibility: visible;
 
 		// This can't be applied to the slide itself in Safari
-		outline: 10px solid rgba(150,150,150,0.1);
+		outline: 10px solid rgba(150, 150, 150, 0.1);
 		outline-offset: 10px;
 	}
 
@@ -1398,7 +1479,6 @@ $controlsArrowAngleActive: 36deg;
 	transition: none;
 }
 
-
 /*********************************************
  * RTL SUPPORT
  *********************************************/
@@ -1437,14 +1517,13 @@ $controlsArrowAngleActive: 36deg;
 }
 
 /* Global transition speed settings */
-.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
+.reveal.has-parallax-background[data-transition-speed='fast'] .backgrounds {
 	transition-duration: 400ms;
 }
-.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
+.reveal.has-parallax-background[data-transition-speed='slow'] .backgrounds {
 	transition-duration: 1200ms;
 }
 
-
 /*********************************************
  * OVERLAY FOR LINK PREVIEWS AND HELP
  *********************************************/
@@ -1689,7 +1768,7 @@ $controlsArrowAngleActive: 36deg;
 	z-index: 30;
 	cursor: pointer;
 	transition: all 400ms ease;
-	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .reveal.overview .playback {
@@ -1697,7 +1776,6 @@ $controlsArrowAngleActive: 36deg;
 	visibility: hidden;
 }
 
-
 /*********************************************
  * CODE HIGHLGIHTING
  *********************************************/
@@ -1728,7 +1806,7 @@ $controlsArrowAngleActive: 36deg;
 }
 
 .reveal .hljs.has-highlights.fragment {
-	transition: all .2s ease;
+	transition: all 0.2s ease;
 }
 
 .reveal .hljs:not(:first-child).fragment {
@@ -1746,7 +1824,6 @@ $controlsArrowAngleActive: 36deg;
 	height: 100%;
 }
 
-
 /*********************************************
  * ROLLING LINKS
  *********************************************/
@@ -1760,10 +1837,10 @@ $controlsArrowAngleActive: 36deg;
 	perspective: 400px;
 	perspective-origin: 50% 50%;
 }
-	.reveal .roll:hover {
-		background: none;
-		text-shadow: none;
-	}
+.reveal .roll:hover {
+	background: none;
+	text-shadow: none;
+}
 .reveal .roll span {
 	display: block;
 	position: relative;
@@ -1775,10 +1852,10 @@ $controlsArrowAngleActive: 36deg;
 	transform-style: preserve-3d;
 	backface-visibility: hidden;
 }
-	.reveal .roll:hover span {
-	    background: rgba(0,0,0,0.5);
-	    transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
-	}
+.reveal .roll:hover span {
+	background: rgba(0, 0, 0, 0.5);
+	transform: translate3d(0px, 0px, -45px) rotateX(90deg);
+}
 .reveal .roll span:after {
 	content: attr(data-title);
 
@@ -1789,10 +1866,9 @@ $controlsArrowAngleActive: 36deg;
 	padding: 0 2px;
 	backface-visibility: hidden;
 	transform-origin: 50% 0%;
-	transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+	transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
 }
 
-
 /*********************************************
  * SPEAKER NOTES
  *********************************************/
@@ -1809,7 +1885,7 @@ $notesWidthPercent: 25%;
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
+	width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent, 100))) * 1%;
 	height: 100%;
 	top: 0;
 	left: 100%;
@@ -1817,7 +1893,7 @@ $notesWidthPercent: 25%;
 	z-index: 1;
 	font-size: 18px;
 	line-height: 1.4;
-	border: 1px solid rgba( 0, 0, 0, 0.05 );
+	border: 1px solid rgba(0, 0, 0, 0.05);
 	color: #222;
 	background-color: #f5f5f5;
 	overflow: auto;
@@ -1843,7 +1919,6 @@ $notesWidthPercent: 25%;
 	}
 }
 
-
 .reveal.show-notes {
 	max-width: 100% - $notesWidthPercent;
 	overflow: visible;
@@ -1893,18 +1968,17 @@ $notesWidthPercent: 25%;
 	}
 }
 
-
 /*********************************************
  * JUMP-TO-SLIDE COMPONENT
  *********************************************/
 
- .reveal .jump-to-slide {
+.reveal .jump-to-slide {
 	position: absolute;
 	top: 15px;
 	left: 15px;
 	z-index: 30;
 	font-size: 32px;
-	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .reveal .jump-to-slide-input {
@@ -1930,7 +2004,6 @@ $notesWidthPercent: 25%;
 	outline: none;
 }
 
-
 /*********************************************
  * ZOOM PLUGIN
  *********************************************/
@@ -1954,7 +2027,6 @@ $notesWidthPercent: 25%;
 	visibility: hidden;
 }
 
-
 /*********************************************
  * SCROLL VIEW
  *********************************************/
@@ -2068,15 +2140,15 @@ $notesWidthPercent: 25%;
 }
 
 // Chromium
-.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar,
-.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar {
-  display: none;
+.reveal-viewport.reveal-scroll[data-scrollbar='true']::-webkit-scrollbar,
+.reveal-viewport.reveal-scroll[data-scrollbar='auto']::-webkit-scrollbar {
+	display: none;
 }
 
 // Firefox
-.reveal-viewport.reveal-scroll[data-scrollbar="true"],
-.reveal-viewport.reveal-scroll[data-scrollbar="auto"] {
-  scrollbar-width: none;
+.reveal-viewport.reveal-scroll[data-scrollbar='true'],
+.reveal-viewport.reveal-scroll[data-scrollbar='auto'] {
+	scrollbar-width: none;
 }
 
 .reveal.has-dark-background,
@@ -2142,7 +2214,7 @@ $notesWidthPercent: 25%;
 		height: 100%;
 		top: 0;
 		left: -50%;
-		background: rgba( 0, 0, 0, 0 );
+		background: rgba(0, 0, 0, 0);
 		z-index: -1;
 	}
 
@@ -2182,8 +2254,7 @@ $notesWidthPercent: 25%;
 	}
 
 	.scrollbar-slide.active .scrollbar-trigger ~ .scrollbar-trigger.active:after {
-		transform: translate(calc( var(--r-scrollbar-width) * -2), 0);
+		transform: translate(calc(var(--r-scrollbar-width) * -2), 0);
 		background-color: rgba(var(--r-overlay-element-bg-color), 1);
 	}
 }
-
diff --git a/css/theme/README.md b/css/theme/README.md
index c156d001..be953ecc 100644
--- a/css/theme/README.md
+++ b/css/theme/README.md
@@ -4,17 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep
 
 ## Creating a Theme
 
-To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build:styles`.
+To create your own theme, start by duplicating a `.scss` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build:styles`.
 
 Each theme file follows the same structure:
 
-1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
-Shared utility functions.
+1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**  
+   Shared utility functions.
 
-2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
-Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.
+2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**  
+   Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.
 
-3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
-The template theme file which will generate final CSS output based on the currently defined variables.
+3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**  
+   The template theme file which will generate final CSS output based on the currently defined variables.
 
-4. **Optionally add custom fonts and/or additional styles**
\ No newline at end of file
+4. **Optionally add custom fonts and/or additional styles**
diff --git a/css/theme/beige.scss b/css/theme/beige.scss
index e218d5ad..e6d4ff31 100644
--- a/css/theme/beige.scss
+++ b/css/theme/beige.scss
@@ -4,49 +4,55 @@
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #8b743d;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #f7f3de,
-		$background: radial-gradient( rgba(255,255,255,1), rgba(247,242,211,1) ),
+@use 'template/settings' with (
+	$background-color: #f7f3de,
+	$background: radial-gradient(rgba(255, 255, 255, 1), rgba(247, 242, 211, 1)),
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$main-font-size: 42px,
+	$main-color: #333,
 
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $main-font-size: 42px,
-    $main-color: #333,
+	$heading-color: #333,
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$heading-font-weight: 600,
 
-    $heading-color: #333,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $heading-font-weight: 600,
+	$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-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,.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)},
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
-
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
-
-    $selection-color: #333,
-    $selection-background-color: color.scale( $active-color, $lightness: 35% ),
-
-		$overlay-element-bg-color: #{0, 0, 0},
-    $overlay-element-fg-color: #{240, 240, 240}
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 20%),
+	$selection-color: #333,
+	$selection-background-color: color.scale($active-color, $lightness: 35%),
+	$overlay-element-bg-color: '0 0 0',
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // 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");
+@import url('./fonts/league-gothic/league-gothic.css');
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.dark-bg-text-color(#fff);
diff --git a/css/theme/black-contrast.scss b/css/theme/black-contrast.scss
index 7928e712..5db65ac1 100644
--- a/css/theme/black-contrast.scss
+++ b/css/theme/black-contrast.scss
@@ -8,40 +8,39 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #42affa;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #000,
+@use 'template/settings' with (
+	$background-color: #000,
 
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $main-font-size: 42px,
-    $main-color: #fff,
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$main-font-size: 42px,
+	$main-color: #fff,
 
-    $heading-color: #fff,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $heading-font-weight: 600,
+	$heading-color: #fff,
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$heading-font-weight: 600,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
-
-    $selection-color: #fff,
-    $selection-background-color: color.scale( $active-color, $lightness: -35% )
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 15%),
+	$selection-color: #fff,
+	$selection-background-color: color.scale($active-color, $lightness: -35%)
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#000);
diff --git a/css/theme/black.scss b/css/theme/black.scss
index 648eed17..0decde40 100644
--- a/css/theme/black.scss
+++ b/css/theme/black.scss
@@ -5,40 +5,39 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #42affa;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #191919,
+@use 'template/settings' with (
+	$background-color: #191919,
 
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $main-font-size: 42px,
-    $main-color: #fff,
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$main-font-size: 42px,
+	$main-color: #fff,
 
-    $heading-color: #fff,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $heading-font-weight: 600,
+	$heading-color: #fff,
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$heading-font-weight: 600,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
-
-    $selection-color: #fff,
-    $selection-background-color: color.scale( $active-color, $lightness: -35% )
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 15%),
+	$selection-color: #fff,
+	$selection-background-color: color.scale($active-color, $lightness: -35%)
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);
diff --git a/css/theme/blood.scss b/css/theme/blood.scss
index 66cbbeb3..b9831224 100644
--- a/css/theme/blood.scss
+++ b/css/theme/blood.scss
@@ -11,54 +11,63 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $coal: #222;
 $active-color: #a23;
 $code-background-color: #23241f;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: $coal,
+@use 'template/variables' with (
+	$background-color: $coal,
 
-    $main-font: #{Ubuntu, 'sans-serif'},
-    $main-color: #eee,
+	$main-font: 'Ubuntu, sans-serif',
+	$main-color: #eee,
 
-    $heading-font: #{Ubuntu, 'sans-serif'},
-    $heading-text-shadow: 2px 2px 2px $coal,
+	$heading-font: 'Ubuntu, sans-serif',
+	$heading-text-shadow: 2px 2px 2px $coal,
 
-    $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,.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)},
+	$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)},
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
-
-    $selection-background-color: $active-color,
-    $selection-color: #fff
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 20%),
+	$selection-background-color: $active-color,
+	$selection-color: #fff
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Fonts
-@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic');
 
 // Invert text color when the background is light
 @include mixins.light-bg-text-color(#222);
 
 .reveal p {
-  font-weight: 300;
-  text-shadow: 1px 1px $coal;
+	font-weight: 300;
+	text-shadow: 1px 1px $coal;
 }
 
 section.has-light-background {
-  p,
-  h1,
-  h2,
-  h3,
-  h4 {
-    text-shadow: none;
-  }
+	p,
+	h1,
+	h2,
+	h3,
+	h4 {
+		text-shadow: none;
+	}
 }
 
 .reveal h1,
@@ -67,15 +76,15 @@ section.has-light-background {
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  font-weight: 700;
+	font-weight: 700;
 }
 
 .reveal p code {
-    background-color: $code-background-color;
-    display: inline-block;
-    border-radius: 7px;
+	background-color: $code-background-color;
+	display: inline-block;
+	border-radius: 7px;
 }
 
 .reveal small code {
-  vertical-align: baseline;
+	vertical-align: baseline;
 }
diff --git a/css/theme/dracula.scss b/css/theme/dracula.scss
index 411e5a82..d5ac3337 100644
--- a/css/theme/dracula.scss
+++ b/css/theme/dracula.scss
@@ -4,85 +4,65 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 // 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;
 
-$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;
-
-$background: #282A36;
-$foreground: #F8F8F2;
-$selection: #44475A;
-$comment: #6272A4;
-$red: #FF5555;
-$orange: #FFB86C;
-$yellow: #F1FA8C;
-$green: #50FA7B;
-$purple: #BD93F9;
-$cyan: #8BE9FD;
-$pink: #FF79C6;
+$background: #282a36;
+$foreground: #f8f8f2;
+$selection: #44475a;
+$comment: #6272a4;
+$red: #ff5555;
+$orange: #ffb86c;
+$yellow: #f1fa8c;
+$green: #50fa7b;
+$purple: #bd93f9;
+$cyan: #8be9fd;
+$pink: #ff79c6;
 
 $mainFont: $systemFontsSansSerif;
-$codeFont: "Fira Code", $systemFontsMono;
+$codeFont: 'Fira Code', $systemFontsMono;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #191919,
+@use 'template/settings' with (
+	$background-color: #191919,
 
-    $main-font: $mainFont,
-    $main-font-size: 42px,
-    $main-color: $foreground,
+	$main-font: $mainFont,
+	$main-font-size: 42px,
+	$main-color: $foreground,
 
-		$code-font: $codeFont,
+	$code-font: $codeFont,
 
-    $heading-color: $purple,
-    $heading-font: $mainFont,
-    $heading-font-weight: 600,
-		$heading-text-transform: none,
+	$heading-color: $purple,
+	$heading-font: $mainFont,
+	$heading-font-weight: 600,
+	$heading-text-transform: none,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $link-color: $pink,
-    $link-color-hover: $cyan,
+	$link-color: $pink,
+	$link-color-hover: $cyan,
 
-    $selection-color: #fff,
-    $selection-background-color: $selection
+	$selection-color: #fff,
+	$selection-background-color: $selection
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color($background);
 
-
 // Define additional color effects based on Dracula spec
 // https://spec.draculatheme.com/
 :root {
@@ -97,20 +77,23 @@ $codeFont: "Fira Code", $systemFontsMono;
  * https://draculatheme.com/contribute
  */
 .reveal {
-	strong, b {
+	strong,
+	b {
 		color: var(--r-bold-color);
 	}
-	em, i, blockquote {
+	em,
+	i,
+	blockquote {
 		color: var(--r-italic-color);
 	}
 	code {
 		color: var(--r-inline-code-color);
 	}
 	// Dracula colored list bullets and numbers
-	ul, ol {
+	ul,
+	ol {
 		li::marker {
 			color: var(--r-list-bullet-color);
 		}
 	}
 }
-
diff --git a/css/theme/league.scss b/css/theme/league.scss
index 24215731..8c9c542f 100644
--- a/css/theme/league.scss
+++ b/css/theme/league.scss
@@ -7,25 +7,33 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
-
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-		$background: radial-gradient( rgba(85,90,95,1), rgba(28,30,32,1) ),
-    $background-color: rgba(28,30,32,1),
-
-		$heading-text-shadow: #{0px 0px 6px rgba(0,0,0,0.2)},
-		$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,.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)},
+@use 'template/settings' with (
+	$background: radial-gradient(rgba(85, 90, 95, 1), rgba(28, 30, 32, 1)),
+	$background-color: rgba(28, 30, 32, 1),
+	$heading-text-shadow: #{0px 0px 6px rgba(0, 0, 0, 0.2)},
+	$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)}
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // 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");
+@import url('./fonts/league-gothic/league-gothic.css');
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
-@include mixins.light-bg-text-color(#222);
\ No newline at end of file
+@include mixins.light-bg-text-color(#222);
diff --git a/css/theme/moon.scss b/css/theme/moon.scss
index 966d41d6..970636ec 100644
--- a/css/theme/moon.scss
+++ b/css/theme/moon.scss
@@ -4,50 +4,49 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 // Solarized colors by Ethan Schoonover
-$base03:    #002b36;
-$base02:    #073642;
-$base01:    #586e75;
-$base00:    #657b83;
-$base0:     #839496;
-$base1:     #93a1a1;
-$base2:     #eee8d5;
-$base3:     #fdf6e3;
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;;
+$base03: #002b36;
+$base02: #073642;
+$base01: #586e75;
+$base00: #657b83;
+$base0: #839496;
+$base1: #93a1a1;
+$base2: #eee8d5;
+$base3: #fdf6e3;
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #dc322f;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;
 
 $active-color: $blue;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: $base03,
+@use 'template/settings' with (
+	$background-color: $base03,
 
-    $main-color: $base1,
-    $heading-color: $base2,
+	$main-color: $base1,
+	$heading-color: $base2,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
-
-    $selection-color: #fff,
-    $selection-background-color: $magenta
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 20%),
+	$selection-color: #fff,
+	$selection-background-color: $magenta
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
 // 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");
+@import url('./fonts/league-gothic/league-gothic.css');
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);
diff --git a/css/theme/night.scss b/css/theme/night.scss
index 31e0eaad..c02bc3f1 100644
--- a/css/theme/night.scss
+++ b/css/theme/night.scss
@@ -5,36 +5,35 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #e7ad52;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #111,
+@use 'template/settings' with (
+	$background-color: #111,
 
-    $main-font: #{'Open Sans', sans-serif},
-    $main-color: #fff,
+	$main-font: "'Open Sans', sans-serif",
+	$main-color: #fff,
 
-    $heading-color: #fff,
-    $heading-font: #{'Montserrat', Impact, sans-serif},
-    $heading-text-transform: none,
-    $heading-letter-spacing: -0.03em,
+	$heading-color: #fff,
+	$heading-font: "'Montserrat', Impact, sans-serif",
+	$heading-text-transform: none,
+	$heading-letter-spacing: -0.03em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
-
-    $selection-color: #111,
-    $selection-background-color: $active-color
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 20%),
+	$selection-color: #111,
+	$selection-background-color: $active-color
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic');
 
 // Change text colors against light slide backgrounds
 @include mixins.light-bg-text-color(#222);
diff --git a/css/theme/serif.scss b/css/theme/serif.scss
index f60eef78..d3e7a447 100644
--- a/css/theme/serif.scss
+++ b/css/theme/serif.scss
@@ -6,43 +6,42 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
-$active-color: #51483D;
+$active-color: #51483d;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #F0F1EB,
+@use 'template/settings' with (
+	$background-color: #f0f1eb,
 
-    $main-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
-    $main-font-size: 42px,
-    $main-color: #000,
+	$main-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
+	$main-font-size: 42px,
+	$main-color: #000,
 
-    $heading-color: #383D3D,
-    $heading-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
-    $heading-font-weight: 600,
-    $heading-text-transform: none,
+	$heading-color: #383d3d,
+	$heading-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
+	$heading-font-weight: 600,
+	$heading-text-transform: none,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 25% ),
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 25%),
+	$selection-color: #fff,
+	$selection-background-color: $active-color,
 
-    $selection-color: #fff,
-    $selection-background-color: $active-color,
-
-    $overlay-element-bg-color: #{0, 0, 0},
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-bg-color: '0 0 0',
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text colors against light slide backgrounds
 @include mixins.dark-bg-text-color(#fff);
 
 .reveal a {
-  line-height: 1.3em;
+	line-height: 1.3em;
 }
diff --git a/css/theme/simple.scss b/css/theme/simple.scss
index 3b776301..2c55008a 100644
--- a/css/theme/simple.scss
+++ b/css/theme/simple.scss
@@ -7,43 +7,42 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
-$active-color: #00008B;
+$active-color: #00008b;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #fff,
+@use 'template/settings' with (
+	$background-color: #fff,
 
-    $main-color: #000,
-    $main-font: #{'Lato', sans-serif},
+	$main-color: #000,
+	$main-font: "'Lato', sans-serif",
 
-    $heading-color: #000,
-    $heading-font: #{'News Cycle', Impact, sans-serif},
-    $heading-font-weight: 600,
+	$heading-color: #000,
+	$heading-font: "'News Cycle', Impact, sans-serif",
+	$heading-font-weight: 600,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 20%),
+	$selection-color: #fff,
+	$selection-background-color: $active-color,
 
-    $selection-color: #fff,
-    $selection-background-color: $active-color,
-
-    $overlay-element-bg-color: #{0, 0, 0},
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-bg-color: '0, 0, 0',
+	$overlay-element-fg-color: '240, 240, 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700");
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
+@import url('https://fonts.googleapis.com/css?family=News+Cycle:400,700');
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);
diff --git a/css/theme/sky.scss b/css/theme/sky.scss
index 69d5877d..091f15a2 100644
--- a/css/theme/sky.scss
+++ b/css/theme/sky.scss
@@ -5,39 +5,38 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #2a76dd;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-		$background: radial-gradient( #f7fbfc, #add9e4 ),
-    $background-color: #f7fbfc,
+@use 'template/settings' with (
+	$background: radial-gradient(#f7fbfc, #add9e4),
+	$background-color: #f7fbfc,
 
-    $main-color: #333,
-    $main-font: #{'Open Sans', sans-serif},
+	$main-color: #333,
+	$main-font: "'Open Sans', sans-serif",
 
-    $heading-color: #333,
-    $heading-font: #{'Quicksand', sans-serif},
-		$heading-letter-spacing: -0.05em,
+	$heading-color: #333,
+	$heading-font: "'Quicksand', sans-serif",
+	$heading-letter-spacing: -0.05em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 15%),
+	$selection-color: #fff,
+	$selection-background-color: $active-color,
 
-    $selection-color: #fff,
-    $selection-background-color: $active-color,
-
-    $overlay-element-bg-color: #{0, 0, 0},
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-bg-color: '0 0 0',
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic");
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
+@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);
diff --git a/css/theme/solarized.scss b/css/theme/solarized.scss
index 4b1c1d6a..89d01c0d 100644
--- a/css/theme/solarized.scss
+++ b/css/theme/solarized.scss
@@ -4,52 +4,51 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 // Solarized colors by Ethan Schoonover
-$base03:    #002b36;
-$base02:    #073642;
-$base01:    #586e75;
-$base00:    #657b83;
-$base0:     #839496;
-$base1:     #93a1a1;
-$base2:     #eee8d5;
-$base3:     #fdf6e3;
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;
+$base03: #002b36;
+$base02: #073642;
+$base01: #586e75;
+$base00: #657b83;
+$base0: #839496;
+$base1: #93a1a1;
+$base2: #eee8d5;
+$base3: #fdf6e3;
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #dc322f;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;
 
 $active-color: $blue;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: $base3,
+@use 'template/settings' with (
+	$background-color: $base3,
 
-    $main-color: $base00,
-    $heading-color: $base01,
+	$main-color: $base00,
+	$heading-color: $base01,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 20%),
+	$selection-color: #fff,
+	$selection-background-color: $magenta,
 
-    $selection-color: #fff,
-    $selection-background-color: $magenta,
-
-    $overlay-element-bg-color: #{0, 0, 0},
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-bg-color: '0 0 0',
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // 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");
+@import url('./fonts/league-gothic/league-gothic.css');
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);
diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss
index 5736c818..942f3f18 100644
--- a/css/theme/template/mixins.scss
+++ b/css/theme/template/mixins.scss
@@ -1,15 +1,27 @@
-@mixin light-bg-text-color( $color ) {
+@mixin light-bg-text-color($color) {
 	section.has-light-background {
-		&, h1, h2, h3, h4, h5, h6 {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: $color;
 		}
 	}
 }
 
-@mixin dark-bg-text-color( $color ) {
+@mixin dark-bg-text-color($color) {
 	section.has-dark-background {
-		&, h1, h2, h3, h4, h5, h6 {
+		&,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: $color;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss
index 4f01f0b5..2b1b0757 100644
--- a/css/theme/template/settings.scss
+++ b/css/theme/template/settings.scss
@@ -32,12 +32,12 @@ $heading1-text-shadow: none !default;
 $heading1-size: 3.77em !default;
 $heading2-size: 2.11em !default;
 $heading3-size: 1.55em !default;
-$heading4-size: 1.00em !default;
+$heading4-size: 1em !default;
 
 $code-font: monospace !default;
 
 // Links and actions
-$link-color: #13DAEC !default;
+$link-color: #13daec !default;
 $link-color-dark: color.scale($link-color, $lightness: -15%) !default;
 $link-color-hover: color.scale($link-color, $lightness: 20%) !default;
 
@@ -52,47 +52,47 @@ $overlay-element-fg-color: 0, 0, 0 !default;
 
 // Expose all variables to the DOM
 :root {
-  // Background of the presentation
-  --r-background: #{$background};
-  --r-background-color: #{$background-color};
+	// Background of the presentation
+	--r-background: #{$background};
+	--r-background-color: #{$background-color};
 
-  // Primary/body text
-  --r-main-font: #{$main-font};
-  --r-main-font-size: #{$main-font-size};
-  --r-main-color: #{$main-color};
+	// Primary/body text
+	--r-main-font: #{$main-font};
+	--r-main-font-size: #{$main-font-size};
+	--r-main-color: #{$main-color};
 
-  // Vertical spacing between blocks of text
-  --r-block-margin: #{$block-margin};
+	// Vertical spacing between blocks of text
+	--r-block-margin: #{$block-margin};
 
-  // Headings
-  --r-heading-margin: #{$heading-margin};
-  --r-heading-font: #{$heading-font};
-  --r-heading-color: #{$heading-color};
-  --r-heading-line-height: #{$heading-line-height};
-  --r-heading-letter-spacing: #{$heading-letter-spacing};
-  --r-heading-text-transform: #{$heading-text-transform};
-  --r-heading-text-shadow: #{$heading-text-shadow};
-  --r-heading-font-weight: #{$heading-font-weight};
-  --r-heading1-text-shadow: #{$heading1-text-shadow};
+	// Headings
+	--r-heading-margin: #{$heading-margin};
+	--r-heading-font: #{$heading-font};
+	--r-heading-color: #{$heading-color};
+	--r-heading-line-height: #{$heading-line-height};
+	--r-heading-letter-spacing: #{$heading-letter-spacing};
+	--r-heading-text-transform: #{$heading-text-transform};
+	--r-heading-text-shadow: #{$heading-text-shadow};
+	--r-heading-font-weight: #{$heading-font-weight};
+	--r-heading1-text-shadow: #{$heading1-text-shadow};
 
-  --r-heading1-size: #{$heading1-size};
-  --r-heading2-size: #{$heading2-size};
-  --r-heading3-size: #{$heading3-size};
-  --r-heading4-size: #{$heading4-size};
+	--r-heading1-size: #{$heading1-size};
+	--r-heading2-size: #{$heading2-size};
+	--r-heading3-size: #{$heading3-size};
+	--r-heading4-size: #{$heading4-size};
 
-  --r-code-font: #{$code-font};
+	--r-code-font: #{$code-font};
 
-  // Links and actions
-  --r-link-color: #{$link-color};
-  --r-link-color-dark: #{$link-color-dark};
-  --r-link-color-hover: #{$link-color-hover};
+	// Links and actions
+	--r-link-color: #{$link-color};
+	--r-link-color-dark: #{$link-color-dark};
+	--r-link-color-hover: #{$link-color-hover};
 
-  // Text selection
-  --r-selection-background-color: #{$selection-background-color};
-  --r-selection-color: #{$selection-color};
+	// Text selection
+	--r-selection-background-color: #{$selection-background-color};
+	--r-selection-color: #{$selection-color};
 
-  // Colors used for UI elements that are overlaid on top of
-  // the presentation
-  --r-overlay-element-bg-color: #{$overlay-element-bg-color};
-  --r-overlay-element-fg-color: #{$overlay-element-fg-color};
-}
\ No newline at end of file
+	// Colors used for UI elements that are overlaid on top of
+	// the presentation
+	--r-overlay-element-bg-color: #{$overlay-element-bg-color};
+	--r-overlay-element-fg-color: #{$overlay-element-fg-color};
+}
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 13ce44b0..8940a377 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -29,7 +29,7 @@
 }
 
 .reveal .slides section,
-.reveal .slides section>section {
+.reveal .slides section > section {
 	line-height: 1.3;
 	font-weight: inherit;
 }
@@ -58,16 +58,23 @@
 	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(--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
  *********************************************/
@@ -153,12 +160,12 @@
 
 	font-style: italic;
 	background: rgba(255, 255, 255, 0.05);
-	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+	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 blockquote p:first-child,
-	.reveal blockquote p:last-child {
-		display: inline-block;
-	}
 
 .reveal q {
 	font-style: italic;
@@ -219,13 +226,13 @@
 	border-bottom: 1px solid;
 }
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
+.reveal table th[align='center'],
+.reveal table td[align='center'] {
 	text-align: center;
 }
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
+.reveal table th[align='right'],
+.reveal table td[align='right'] {
 	text-align: right;
 }
 
@@ -258,7 +265,6 @@
 	margin: var(--r-block-margin) 0;
 }
 
-
 /*********************************************
  * LINKS
  *********************************************/
@@ -266,21 +272,20 @@
 .reveal a {
 	color: var(--r-link-color);
 	text-decoration: none;
-	transition: color .15s ease;
+	transition: color 0.15s ease;
+}
+.reveal a:hover {
+	color: var(--r-link-color-hover);
+	text-shadow: none;
+	border: none;
 }
-	.reveal a:hover {
-		color: var(--r-link-color-hover);
-		text-shadow: none;
-		border: none;
-	}
 
 .reveal .roll span:after {
 	color: #fff;
+	// background: darken( var(--r-link-color), 15% );
 	background: var(--r-link-color-dark);
-
 }
 
-
 /*********************************************
  * Frame helper
  *********************************************/
@@ -291,7 +296,7 @@
 }
 
 .reveal a .r-frame {
-	transition: all .15s linear;
+	transition: all 0.15s linear;
 }
 
 .reveal a:hover .r-frame {
@@ -299,7 +304,6 @@
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
-
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
@@ -308,21 +312,20 @@
 	color: var(--r-link-color);
 }
 
-
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 
 .reveal .progress {
-	background: rgba(0,0,0,0.2);
+	background: rgba(0, 0, 0, 0.2);
 	color: var(--r-link-color);
 }
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
- @media print {
-    .backgrounds {
-        background-color: var(--r-background-color);
-    }
+@media print {
+	.backgrounds {
+		background-color: var(--r-background-color);
+	}
 }
diff --git a/css/theme/white-contrast.scss b/css/theme/white-contrast.scss
index 34dc1af7..f434a9b6 100644
--- a/css/theme/white-contrast.scss
+++ b/css/theme/white-contrast.scss
@@ -8,43 +8,42 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #2a76dd;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #fff,
+@use 'template/settings' with (
+	$background-color: #fff,
 
-    $main-font: "'Source Sans Pro', Helvetica, sans-serif",
-    $main-font-size: 42px,
-    $main-color: #000,
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$main-font-size: 42px,
+	$main-color: #000,
 
-    $heading-color: #000,
-    $heading-font: "'Source Sans Pro', Helvetica, sans-serif",
-    $heading-font-weight: 600,
+	$heading-color: #000,
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$heading-font-weight: 600,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 15%),
+	$selection-color: #fff,
+	$selection-background-color: $active-color,
 
-    $selection-color: #fff,
-    $selection-background-color: $active-color,
-
-    $overlay-element-bg-color: "0, 0, 0",
-    $overlay-element-fg-color: "240, 240, 240"
+	$overlay-element-bg-color: '0, 0, 0',
+	$overlay-element-fg-color: '240, 240, 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);
diff --git a/css/theme/white.scss b/css/theme/white.scss
index 28b6fd4e..dbc3ab27 100644
--- a/css/theme/white.scss
+++ b/css/theme/white.scss
@@ -5,43 +5,42 @@
  */
 
 // Load utils
-@use "sass:color";
-@use "template/mixins" as mixins;
+@use 'sass:color';
+@use 'template/mixins' as mixins;
 
 $active-color: #2a76dd;
 
 // Inject theme variables (with some overrides)
-@use "template/settings" with (
-    $background-color: #fff,
+@use 'template/settings' with (
+	$background-color: #fff,
 
-    $main-color: #222,
-    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $main-font-size: 42px,
+	$main-color: #222,
+	$main-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$main-font-size: 42px,
 
-    $heading-color: #222,
-    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
-    $heading-font-weight: 600,
+	$heading-color: #222,
+	$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
+	$heading-font-weight: 600,
 
-    $heading1-size: 2.5em,
-    $heading2-size: 1.6em,
-    $heading3-size: 1.3em,
-    $heading4-size: 1.0em,
+	$heading1-size: 2.5em,
+	$heading2-size: 1.6em,
+	$heading3-size: 1.3em,
+	$heading4-size: 1em,
 
-    $link-color: $active-color,
-    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+	$link-color: $active-color,
+	$link-color-hover: color.scale($active-color, $lightness: 15%),
+	$selection-color: #fff,
+	$selection-background-color: $active-color,
 
-    $selection-color: #fff,
-    $selection-background-color: $active-color,
-
-    $overlay-element-bg-color: #{0, 0, 0},
-    $overlay-element-fg-color: #{240, 240, 240}
+	$overlay-element-bg-color: '0 0 0',
+	$overlay-element-fg-color: '240 240 240'
 );
 
 // Inject the theme template
-@use "template/theme";
+@use 'template/theme';
 
 // Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+@import url('./fonts/source-sans-pro/source-sans-pro.css');
 
 // Change text when the background is inverted
 @include mixins.dark-bg-text-color(#fff);
diff --git a/js/config.ts b/js/config.ts
index 73cb718c..1e478b47 100644
--- a/js/config.ts
+++ b/js/config.ts
@@ -1,743 +1,743 @@
 interface Config {
-	/**
-	 * The "normal" size of the presentation, aspect ratio will be preserved
-	 * when the presentation is scaled to fit different resolutions
-	 *
-	 * @defaultValue 960
-	 */
-	width?: number | string;
-
-	/**
-	 * The "normal" size of the presentation, aspect ratio will be preserved
-	 * when the presentation is scaled to fit different resolutions
-	 *
-	 * @defaultValue 700
-	 */
-	height?: number | string;
-
-	/**
-	 * Factor of the display size that should remain empty around the content
-	 *
-	 * @defaultValue 0.04
-	 */
-	margin?: number;
-
-	/**
-	 * Bounds for smallest/largest possible scale to apply to content
-	 *
-	 * @defaultValue 0.2
-	 */
-	minScale?: number;
-
-	/**
-	 *
-	 * @defaultValue 2.0
-	 */
-	maxScale?: number;
-
-	/**
-	 * 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
-	 *
-	 * @defaultValue true
-	 */
-	controls?: boolean | 'speaker-only';
-
-	/**
-	 * Help the user learn the controls by providing hints, for example by
-	 * bouncing the down arrow when they first encounter a vertical slide
-	 *
-	 * @defaultValue true
-	 */
-	controlsTutorial?: boolean;
-
-	/**
-	 * Determines where controls appear, "edges" or "bottom-right"
-	 *
-	 * @defaultValue 'bottom-right'
-	 */
-	controlsLayout?: 'edges' | 'bottom-right';
-
-	/**
-	 * Visibility rule for backwards navigation arrows; "faded", "hidden"
-	 * or "visible"
-	 *
-	 * @defaultValue 'faded'
-	 */
-	controlsBackArrows?: 'faded' | 'hidden' | 'visible';
-
-	/**
-	 * Display a presentation progress bar
-	 *
-	 * @defaultValue true
-	 */
-	progress?: boolean;
-
-	/**
-	 * Display the page number of the current slide
-	 * - true:    Show slide number
-	 * - false:   Hide slide number
-	 *
-	 * Can optionally be set as a string that specifies the number formatting:
-	 * - "h.v":	  Horizontal . vertical slide number (default)
-	 * - "h/v":	  Horizontal / vertical slide number
-	 * - "c":	  Flattened slide number
-	 * - "c/t":	  Flattened slide number / total slides
-	 *
-	 * Alternatively, you can provide a function that returns the slide
-	 * number for the current slide. The function should take in a slide
-	 * object and return an array with one string [slideNumber] or
-	 * three strings [n1,delimiter,n2]. See #formatSlideNumber().
-	 *
-	 * @defaultValue false
-	 */
-	slideNumber?:
-		| boolean
-		| 'h.v'
-		| 'h/v'
-		| 'c'
-		| 'c/t'
-		| ((slide: any) => string | [string, string, string]);
-
-	/**
-	 * Can be used to limit the contexts in which the slide number appears
-	 * - "all":      Always show the slide number
-	 * - "print":    Only when printing to PDF
-	 * - "speaker":  Only in the speaker view
-	 *
-	 * @defaultValue 'all'
-	 */
-	showSlideNumber?: 'all' | 'print' | 'speaker';
-
-	/**
-	 * Use 1 based indexing for # links to match slide number (default is zero
-	 * based)
-	 *
-	 * @defaultValue false
-	 */
-	hashOneBasedIndex?: boolean;
-
-	/**
-	 * Add the current slide number to the URL hash so that reloading the
-	 * page/copying the URL will return you to the same slide
-	 *
-	 * @defaultValue false
-	 */
-	hash?: boolean;
-
-	/**
-	 * Flags if we should monitor the hash and change slides accordingly
-	 *
-	 * @defaultValue true
-	 */
-	respondToHashChanges?: boolean;
-
-	/**
-	 * Enable support for jump-to-slide navigation shortcuts
-	 *
-	 * @defaultValue true
-	 */
-	jumpToSlide?: boolean;
-
-	/**
-	 * Push each slide change to the browser history. Implies `hash: true`
-	 *
-	 * @defaultValue false
-	 */
-	history?: boolean;
-
-	/**
-	 * Enable keyboard shortcuts for navigation
-	 *
-	 * @defaultValue true
-	 */
-	keyboard?: boolean;
-
-	/**
-	 * Optional function that blocks keyboard events when returning false
-	 *
-	 * If you set this to 'focused', we will only capture keyboard events
-	 * for embedded decks when they are in focus
-	 *
-	 * @defaultValue null
-	 */
-	keyboardCondition?: null | 'focused' | ((event: KeyboardEvent) => boolean);
-
-	/**
-	 * Disables the default reveal.js slide layout (scaling and centering)
-	 * so that you can use custom CSS layout
-	 *
-	 * @defaultValue false
-	 */
-	disableLayout?: boolean;
-
-	/**
-	 * Enable the slide overview mode
-	 *
-	 * @defaultValue true
-	 */
-	overview?: boolean;
-
-	/**
-	 * Vertical centering of slides
-	 *
-	 * @defaultValue true
-	 */
-	center?: boolean;
-
-	/**
-	 * Enables touch navigation on devices with touch input
-	 *
-	 * @defaultValue true
-	 */
-	touch?: boolean;
-
-	/**
-	 * Loop the presentation
-	 *
-	 * @defaultValue false
-	 */
-	loop?: boolean;
-
-	/**
-	 * Change the presentation direction to be RTL
-	 *
-	 * @defaultValue false
-	 */
-	rtl?: boolean;
-
-	/**
-	 * Changes the behavior of our navigation directions.
-	 *
-	 * "default"
-	 * Left/right arrow keys step between horizontal slides, up/down
-	 * arrow keys step between vertical slides. Space key steps through
-	 * all slides (both horizontal and vertical).
-	 *
-	 * "linear"
-	 * Removes the up/down arrows. Left/right arrows step through all
-	 * slides (both horizontal and vertical).
-	 *
-	 * "grid"
-	 * When this is enabled, stepping left/right from a vertical stack
-	 * to an adjacent vertical stack will land you at the same vertical
-	 * index.
-	 *
-	 * Consider a deck with six slides ordered in two vertical stacks:
-	 * 1.1    2.1
-	 * 1.2    2.2
-	 * 1.3    2.3
-	 *
-	 * If you're on slide 1.3 and navigate right, you will normally move
-	 * from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
-	 * from 1.3 -> 2.3.
-	 *
-	 * @defaultValue 'default'
-	 */
-	navigationMode?: 'default' | 'linear' | 'grid';
-
-	/**
-	 * Randomizes the order of slides each time the presentation loads
-	 *
-	 * @defaultValue false
-	 */
-	shuffle?: boolean;
-
-	/**
-	 * Turns fragments on and off globally
-	 *
-	 * @defaultValue true
-	 */
-	fragments?: boolean;
-
-	/**
-	 * Flags whether to include the current fragment in the URL,
-	 * so that reloading brings you to the same fragment position
-	 *
-	 * @defaultValue true
-	 */
-	fragmentInURL?: boolean;
-
-	/**
-	 * Flags if the presentation is running in an embedded mode,
-	 * i.e. contained within a limited portion of the screen
-	 *
-	 * @defaultValue false
-	 */
-	embedded?: boolean;
-
-	/**
-	 * Flags if we should show a help overlay when the question-mark
-	 * key is pressed
-	 *
-	 * @defaultValue true
-	 */
-	help?: boolean;
-
-	/**
-	 * Flags if it should be possible to pause the presentation (blackout)
-	 *
-	 * @defaultValue true
-	 */
-	pause?: boolean;
-
-	/**
-	 * Flags if speaker notes should be visible to all viewers
-	 *
-	 * @defaultValue false
-	 */
-	showNotes?: boolean;
-
-	/**
-	 * Flags if slides with data-visibility="hidden" should be kept visible
-	 *
-	 * @defaultValue false
-	 */
-	showHiddenSlides?: boolean;
-
-	/**
-	 * Global override for autoplaying embedded media (video/audio/iframe)
-	 * - null:   Media will only autoplay if data-autoplay is present
-	 * - true:   All media will autoplay, regardless of individual setting
-	 * - false:  No media will autoplay, regardless of individual setting
-	 *
-	 * @defaultValue null
-	 */
-	autoPlayMedia?: null | boolean;
-
-	/**
-	 * Global override for preloading lazy-loaded iframes
-	 * - null:   Iframes with data-src AND data-preload will be loaded when within
-	 *           the viewDistance, iframes with only data-src will be loaded when visible
-	 * - true:   All iframes with data-src will be loaded when within the viewDistance
-	 * - false:  All iframes with data-src will be loaded only when visible
-	 *
-	 * @defaultValue null
-	 */
-	preloadIframes?: null | boolean;
-
-	/**
-	 * Can be used to globally disable auto-animation
-	 *
-	 * @defaultValue true
-	 */
-	autoAnimate?: boolean;
-
-	/**
-	 * Optionally provide a custom element matcher that will be
-	 * used to dictate which elements we can animate between.
-	 *
-	 * @defaultValue null
-	 */
-	autoAnimateMatcher?: null | Function;
-
-	/**
-	 * Default settings for our auto-animate transitions, can be
-	 * overridden per-slide or per-element via data arguments
-	 *
-	 * @defaultValue 'ease'
-	 */
-	autoAnimateEasing?: 'ease' | string;
-
-	/**
-	 * Number of seconds to animate each element.
-	 *
-	 * @defaultValue 1.0
-	 */
-	autoAnimateDuration?: number;
-
-	/**
-	 * Should unmatched elements be faded in?
-	 *
-	 * @defaultValue true
-	 */
-	autoAnimateUnmatched?: boolean;
-
-	/**
-	 * CSS properties that can be auto-animated. Position & scale
-	 * is matched separately so there's no need to include styles
-	 * like top/right/bottom/left, width/height or margin.
-	 *
-	 * @defaultValue ['opacity', 'color', 'background-color', 'padding', 'font-size', 'line-height', 'letter-spacing', 'border-width', 'border-color', 'border-radius', 'outline', 'outline-offset']
-	 */
-	autoAnimateStyles?: string[];
-
-	/**
-	 * Controls automatic progression to the next slide
-	 * - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
-	 *           is present on the current slide or fragment
-	 * - 1+:     All slides will progress automatically at the given interval
-	 * - false:  No auto-sliding, even if data-autoslide is present
-	 *
-	 * @defaultValue 0
-	 */
-	autoSlide?: number | false;
-
-	/**
-	 * Stop auto-sliding after user input
-	 *
-	 * @defaultValue true
-	 */
-	autoSlideStoppable?: boolean;
-
-	/**
-	 * Use this method for navigation when auto-sliding (defaults to navigateNext)
-	 *
-	 * @defaultValue null
-	 */
-	autoSlideMethod?: null | Function;
-
-	/**
-	 * Specify the average time in seconds that you think you will spend
-	 * presenting each slide. This is used to show a pacing timer in the
-	 * speaker view
-	 *
-	 * @defaultValue null
-	 */
-	defaultTiming?: null;
-
-	/**
-	 * Enable slide navigation via mouse wheel
-	 *
-	 * @defaultValue false
-	 */
-	mouseWheel?: boolean;
-
-	/**
-	 * Opens links in an iframe preview overlay
-	 * Add `data-preview-link` and `data-preview-link="false"` to customize each link
-	 * individually
-	 *
-	 * @defaultValue false
-	 */
-	previewLinks?: boolean;
-
-	/**
-	 * Exposes the reveal.js API through window.postMessage
-	 *
-	 * @defaultValue true
-	 */
-	postMessage?: boolean;
-
-	/**
-	 * Dispatches all reveal.js events to the parent window through postMessage
-	 *
-	 * @defaultValue false
-	 */
-	postMessageEvents?: boolean;
-
-	/**
-	 * Focuses body when page changes visibility to ensure keyboard shortcuts work
-	 *
-	 * @defaultValue true
-	 */
-	focusBodyOnPageVisibilityChange?: boolean;
-
-	/**
-	 * Transition style
-	 *
-	 * @defaultValue 'slide'
-	 */
-	transition?: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom';
-
-	/**
-	 * Transition speed
-	 *
-	 * @defaultValue 'default'
-	 */
-	transitionSpeed?: 'default' | 'fast' | 'slow';
-
-	/**
-	 * Transition style for full page slide backgrounds
-	 *
-	 * @defaultValue 'fade'
-	 */
-	backgroundTransition?: 'fade' | 'none' | 'slide' | 'convex' | 'concave' | 'zoom';
-
-	/**
-	 * Parallax background image
-	 *
-	 * @defaultValue ''
-	 */
-	parallaxBackgroundImage?: null | string; // CSS syntax, e.g. "a.jpg"
-
-	/**
-	 * Parallax background size
-	 *
-	 * @defaultValue ''
-	 */
-	parallaxBackgroundSize?: null | string; // CSS syntax, e.g. "3000px 2000px"
-
-	/**
-	 * Parallax background repeat
-	 *
-	 * @defaultValue ''
-	 */
-	parallaxBackgroundRepeat?: null | string; // repeat/repeat-x/repeat-y/no-repeat/initial/inherit
-
-	/**
-	 * Parallax background position
-	 *
-	 * @defaultValue ''
-	 */
-	parallaxBackgroundPosition?: null | string; // CSS syntax, e.g. "top left"
-
-	/**
-	 * Amount of pixels to move the parallax background per slide step
-	 *
-	 * @defaultValue null
-	 */
-	parallaxBackgroundHorizontal?: null | number;
-	/**
-	 *
-	 * @defaultValue null
-	 */
-	parallaxBackgroundVertical?: null | number;
-
-	/**
-	 * 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
-	 *
-	 * @defaultValue null
-	 */
-	view?: null | 'print' | 'scroll';
-
-	/**
-	 * 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
-	 *
-	 * @defaultValue 'full'
-	 */
-	scrollLayout?: 'full' | 'compact';
-
-	/**
-	 * 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.
-	 *
-	 * @defaultValue 'mandatory'
-	 */
-	scrollSnap?: false | 'proximity' | 'mandatory';
-
-	/**
-	 * Enables and configures the scroll view progress bar.
-	 * - 'auto':    Show the scrollbar while scrolling, hide while idle
-	 * - true:      Always show the scrollbar
-	 * - false:     Never show the scrollbar
-	 *
-	 * @defaultValue 'auto'
-	 */
-	scrollProgress?: 'auto' | boolean;
-
-	/**
-	 * Automatically activate the scroll view when we the viewport falls
-	 * below the given width.
-	 *
-	 * @defaultValue 435
-	 */
-	scrollActivationWidth?: number;
-
-	/**
-	 * The maximum number of pages a single slide can expand onto when printing
-	 * to PDF, unlimited by default
-	 *
-	 * @defaultValue Number.POSITIVE_INFINITY
-	 */
-	pdfMaxPagesPerSlide?: number;
-
-	/**
-	 * Prints each fragment on a separate slide
-	 *
-	 * @defaultValue true
-	 */
-	pdfSeparateFragments?: boolean;
-
-	/**
-	 * Offset used to reduce the height of content within exported PDF pages.
-	 * This exists to account for environment differences based on how you
-	 * print to PDF. CLI printing options, like phantomjs and wkpdf, can end
-	 * on precisely the total height of the document whereas in-browser
-	 * printing has to end one pixel before.
-	 *
-	 * @defaultValue -1
-	 */
-	pdfPageHeightOffset?: number;
-
-	/**
-	 * Number of slides away from the current that are visible
-	 *
-	 * @defaultValue 3
-	 */
-	viewDistance?: number;
-
-	/**
-	 * Number of slides away from the current that are visible on mobile
-	 * devices. It is advisable to set this to a lower number than
-	 * viewDistance in order to save resources.
-	 *
-	 * @defaultValue 2
-	 */
-	mobileViewDistance?: number;
-
-	/**
-	 * The display mode that will be used to show slides
-	 *
-	 * @defaultValue 'block'
-	 */
-	display?: string;
-
-	/**
-	 * Hide cursor if inactive
-	 *
-	 * @defaultValue true
-	 */
-	hideInactiveCursor?: boolean;
-
-	/**
-	 * Time before the cursor is hidden (in ms)
-	 *
-	 * @defaultValue 5000
-	 */
-	hideCursorTime?: number;
-
-	/**
-	 * Should we automatically sort and set indices for fragments
-	 * at each sync? (See Reveal.sync)
-	 *
-	 * @defaultValue true
-	 */
-	sortFragmentsOnSync?: boolean;
-
-	/**
-	 * Script dependencies to load
-	 *
-	 * @defaultValue []
-	 */
-	dependencies?: any[];
-
-	/**
-	 * Plugin objects to register and use for this presentation
-	 *
-	 * @defaultValue []
-	 */
-	plugins?: any[];
-};
+  /**
+   * The "normal" size of the presentation, aspect ratio will be preserved
+   * when the presentation is scaled to fit different resolutions
+   *
+   * @defaultValue 960
+   */
+  width?: number | string;
+
+  /**
+   * The "normal" size of the presentation, aspect ratio will be preserved
+   * when the presentation is scaled to fit different resolutions
+   *
+   * @defaultValue 700
+   */
+  height?: number | string;
+
+  /**
+   * Factor of the display size that should remain empty around the content
+   *
+   * @defaultValue 0.04
+   */
+  margin?: number;
+
+  /**
+   * Bounds for smallest/largest possible scale to apply to content
+   *
+   * @defaultValue 0.2
+   */
+  minScale?: number;
+
+  /**
+   *
+   * @defaultValue 2.0
+   */
+  maxScale?: number;
+
+  /**
+   * Display presentation control arrows
+	 * - true: Display controls in all views
+	 * - false: Hide controls in all views
+	 * - 'speaker-only': Display controls only in the speaker view
+   *
+   * @defaultValue true
+   */
+  controls?: boolean | 'speaker-only';
+
+  /**
+   * Help the user learn the controls by providing hints, for example by
+   * bouncing the down arrow when they first encounter a vertical slide
+   *
+   * @defaultValue true
+   */
+  controlsTutorial?: boolean;
+
+  /**
+   * Determines where controls appear, "edges" or "bottom-right"
+   *
+   * @defaultValue 'bottom-right'
+   */
+  controlsLayout?: 'edges' | 'bottom-right';
+
+  /**
+   * Visibility rule for backwards navigation arrows; "faded", "hidden"
+   * or "visible"
+   *
+   * @defaultValue 'faded'
+   */
+  controlsBackArrows?: 'faded' | 'hidden' | 'visible';
+
+  /**
+   * Display a presentation progress bar
+   *
+   * @defaultValue true
+   */
+  progress?: boolean;
+
+  /**
+   * Display the page number of the current slide
+   * - true:    Show slide number
+   * - false:   Hide slide number
+   *
+   * Can optionally be set as a string that specifies the number formatting:
+   * - "h.v":	  Horizontal . vertical slide number (default)
+   * - "h/v":	  Horizontal / vertical slide number
+   * - "c":	  Flattened slide number
+   * - "c/t":	  Flattened slide number / total slides
+   *
+   * Alternatively, you can provide a function that returns the slide
+   * number for the current slide. The function should take in a slide
+   * object and return an array with one string [slideNumber] or
+   * three strings [n1,delimiter,n2]. See #formatSlideNumber().
+   *
+   * @defaultValue false
+   */
+  slideNumber?:
+    | boolean
+    | 'h.v'
+    | 'h/v'
+    | 'c'
+    | 'c/t'
+    | ((slide: any) => string | [string, string, string]);
+
+  /**
+   * Can be used to limit the contexts in which the slide number appears
+   * - "all":      Always show the slide number
+   * - "print":    Only when printing to PDF
+   * - "speaker":  Only in the speaker view
+   *
+   * @defaultValue 'all'
+   */
+  showSlideNumber?: 'all' | 'print' | 'speaker';
+
+  /**
+   * Use 1 based indexing for # links to match slide number (default is zero
+   * based)
+   *
+   * @defaultValue false
+   */
+  hashOneBasedIndex?: boolean;
+
+  /**
+   * Add the current slide number to the URL hash so that reloading the
+   * page/copying the URL will return you to the same slide
+   *
+   * @defaultValue false
+   */
+  hash?: boolean;
+
+  /**
+   * Flags if we should monitor the hash and change slides accordingly
+   *
+   * @defaultValue true
+   */
+  respondToHashChanges?: boolean;
+
+  /**
+   * Enable support for jump-to-slide navigation shortcuts
+   *
+   * @defaultValue true
+   */
+  jumpToSlide?: boolean;
+
+  /**
+   * Push each slide change to the browser history. Implies `hash: true`
+   *
+   * @defaultValue false
+   */
+  history?: boolean;
+
+  /**
+   * Enable keyboard shortcuts for navigation
+   *
+   * @defaultValue true
+   */
+  keyboard?: boolean;
+
+  /**
+   * Optional function that blocks keyboard events when returning false
+   *
+   * If you set this to 'focused', we will only capture keyboard events
+   * for embedded decks when they are in focus
+   *
+   * @defaultValue null
+   */
+  keyboardCondition?: null | 'focused' | ((event: KeyboardEvent) => boolean);
+
+  /**
+   * Disables the default reveal.js slide layout (scaling and centering)
+   * so that you can use custom CSS layout
+   *
+   * @defaultValue false
+   */
+  disableLayout?: boolean;
+
+  /**
+   * Enable the slide overview mode
+   *
+   * @defaultValue true
+   */
+  overview?: boolean;
+
+  /**
+   * Vertical centering of slides
+   *
+   * @defaultValue true
+   */
+  center?: boolean;
+
+  /**
+   * Enables touch navigation on devices with touch input
+   *
+   * @defaultValue true
+   */
+  touch?: boolean;
+
+  /**
+   * Loop the presentation
+   *
+   * @defaultValue false
+   */
+  loop?: boolean;
+
+  /**
+   * Change the presentation direction to be RTL
+   *
+   * @defaultValue false
+   */
+  rtl?: boolean;
+
+  /**
+   * Changes the behavior of our navigation directions.
+   *
+   * "default"
+   * Left/right arrow keys step between horizontal slides, up/down
+   * arrow keys step between vertical slides. Space key steps through
+   * all slides (both horizontal and vertical).
+   *
+   * "linear"
+   * Removes the up/down arrows. Left/right arrows step through all
+   * slides (both horizontal and vertical).
+   *
+   * "grid"
+   * When this is enabled, stepping left/right from a vertical stack
+   * to an adjacent vertical stack will land you at the same vertical
+   * index.
+   *
+   * Consider a deck with six slides ordered in two vertical stacks:
+   * 1.1    2.1
+   * 1.2    2.2
+   * 1.3    2.3
+   *
+   * If you're on slide 1.3 and navigate right, you will normally move
+   * from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
+   * from 1.3 -> 2.3.
+   *
+   * @defaultValue 'default'
+   */
+  navigationMode?: 'default' | 'linear' | 'grid';
+
+  /**
+   * Randomizes the order of slides each time the presentation loads
+   *
+   * @defaultValue false
+   */
+  shuffle?: boolean;
+
+  /**
+   * Turns fragments on and off globally
+   *
+   * @defaultValue true
+   */
+  fragments?: boolean;
+
+  /**
+   * Flags whether to include the current fragment in the URL,
+   * so that reloading brings you to the same fragment position
+   *
+   * @defaultValue true
+   */
+  fragmentInURL?: boolean;
+
+  /**
+   * Flags if the presentation is running in an embedded mode,
+   * i.e. contained within a limited portion of the screen
+   *
+   * @defaultValue false
+   */
+  embedded?: boolean;
+
+  /**
+   * Flags if we should show a help overlay when the question-mark
+   * key is pressed
+   *
+   * @defaultValue true
+   */
+  help?: boolean;
+
+  /**
+   * Flags if it should be possible to pause the presentation (blackout)
+   *
+   * @defaultValue true
+   */
+  pause?: boolean;
+
+  /**
+   * Flags if speaker notes should be visible to all viewers
+   *
+   * @defaultValue false
+   */
+  showNotes?: boolean;
+
+  /**
+   * Flags if slides with data-visibility="hidden" should be kept visible
+   *
+   * @defaultValue false
+   */
+  showHiddenSlides?: boolean;
+
+  /**
+   * Global override for autoplaying embedded media (video/audio/iframe)
+   * - null:   Media will only autoplay if data-autoplay is present
+   * - true:   All media will autoplay, regardless of individual setting
+   * - false:  No media will autoplay, regardless of individual setting
+   *
+   * @defaultValue null
+   */
+  autoPlayMedia?: null | boolean;
+
+  /**
+   * Global override for preloading lazy-loaded iframes
+   * - null:   Iframes with data-src AND data-preload will be loaded when within
+   *           the viewDistance, iframes with only data-src will be loaded when visible
+   * - true:   All iframes with data-src will be loaded when within the viewDistance
+   * - false:  All iframes with data-src will be loaded only when visible
+   *
+   * @defaultValue null
+   */
+  preloadIframes?: null | boolean;
+
+  /**
+   * Can be used to globally disable auto-animation
+   *
+   * @defaultValue true
+   */
+  autoAnimate?: boolean;
+
+  /**
+   * Optionally provide a custom element matcher that will be
+   * used to dictate which elements we can animate between.
+   *
+   * @defaultValue null
+   */
+  autoAnimateMatcher?: null | Function;
+
+  /**
+   * Default settings for our auto-animate transitions, can be
+   * overridden per-slide or per-element via data arguments
+   *
+   * @defaultValue 'ease'
+   */
+  autoAnimateEasing?: 'ease' | string;
+
+  /**
+   * Number of seconds to animate each element.
+   *
+   * @defaultValue 1.0
+   */
+  autoAnimateDuration?: number;
+
+  /**
+   * Should unmatched elements be faded in?
+   *
+   * @defaultValue true
+   */
+  autoAnimateUnmatched?: boolean;
+
+  /**
+   * CSS properties that can be auto-animated. Position & scale
+   * is matched separately so there's no need to include styles
+   * like top/right/bottom/left, width/height or margin.
+   *
+   * @defaultValue ['opacity', 'color', 'background-color', 'padding', 'font-size', 'line-height', 'letter-spacing', 'border-width', 'border-color', 'border-radius', 'outline', 'outline-offset']
+   */
+  autoAnimateStyles?: string[];
+
+  /**
+   * Controls automatic progression to the next slide
+   * - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
+   *           is present on the current slide or fragment
+   * - 1+:     All slides will progress automatically at the given interval
+   * - false:  No auto-sliding, even if data-autoslide is present
+   *
+   * @defaultValue 0
+   */
+  autoSlide?: number | false;
+
+  /**
+   * Stop auto-sliding after user input
+   *
+   * @defaultValue true
+   */
+  autoSlideStoppable?: boolean;
+
+  /**
+   * Use this method for navigation when auto-sliding (defaults to navigateNext)
+   *
+   * @defaultValue null
+   */
+  autoSlideMethod?: null | Function;
+
+  /**
+   * Specify the average time in seconds that you think you will spend
+   * presenting each slide. This is used to show a pacing timer in the
+   * speaker view
+   *
+   * @defaultValue null
+   */
+  defaultTiming?: null;
+
+  /**
+   * Enable slide navigation via mouse wheel
+   *
+   * @defaultValue false
+   */
+  mouseWheel?: boolean;
+
+  /**
+   * Opens links in an iframe preview overlay
+   * Add `data-preview-link` and `data-preview-link="false"` to customize each link
+   * individually
+   *
+   * @defaultValue false
+   */
+  previewLinks?: boolean;
+
+  /**
+   * Exposes the reveal.js API through window.postMessage
+   *
+   * @defaultValue true
+   */
+  postMessage?: boolean;
+
+  /**
+   * Dispatches all reveal.js events to the parent window through postMessage
+   *
+   * @defaultValue false
+   */
+  postMessageEvents?: boolean;
+
+  /**
+   * Focuses body when page changes visibility to ensure keyboard shortcuts work
+   *
+   * @defaultValue true
+   */
+  focusBodyOnPageVisibilityChange?: boolean;
+
+  /**
+   * Transition style
+   *
+   * @defaultValue 'slide'
+   */
+  transition?: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom';
+
+  /**
+   * Transition speed
+   *
+   * @defaultValue 'default'
+   */
+  transitionSpeed?: 'default' | 'fast' | 'slow';
+
+  /**
+   * Transition style for full page slide backgrounds
+   *
+   * @defaultValue 'fade'
+   */
+  backgroundTransition?: 'fade' | 'none' | 'slide' | 'convex' | 'concave' | 'zoom';
+
+  /**
+   * Parallax background image
+   *
+   * @defaultValue ''
+   */
+  parallaxBackgroundImage?: null | string; // CSS syntax, e.g. "a.jpg"
+
+  /**
+   * Parallax background size
+   *
+   * @defaultValue ''
+   */
+  parallaxBackgroundSize?: null | string; // CSS syntax, e.g. "3000px 2000px"
+
+  /**
+   * Parallax background repeat
+   *
+   * @defaultValue ''
+   */
+  parallaxBackgroundRepeat?: null | string; // repeat/repeat-x/repeat-y/no-repeat/initial/inherit
+
+  /**
+   * Parallax background position
+   *
+   * @defaultValue ''
+   */
+  parallaxBackgroundPosition?: null | string; // CSS syntax, e.g. "top left"
+
+  /**
+   * Amount of pixels to move the parallax background per slide step
+   *
+   * @defaultValue null
+   */
+  parallaxBackgroundHorizontal?: null | number;
+  /**
+   *
+   * @defaultValue null
+   */
+  parallaxBackgroundVertical?: null | number;
+
+  /**
+   * 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
+   *
+   * @defaultValue null
+   */
+  view?: null | 'print' | 'scroll';
+
+  /**
+   * 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
+   *
+   * @defaultValue 'full'
+   */
+  scrollLayout?: 'full' | 'compact';
+
+  /**
+   * 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.
+   *
+   * @defaultValue 'mandatory'
+   */
+  scrollSnap?: false | 'proximity' | 'mandatory';
+
+  /**
+   * Enables and configures the scroll view progress bar.
+   * - 'auto':    Show the scrollbar while scrolling, hide while idle
+   * - true:      Always show the scrollbar
+   * - false:     Never show the scrollbar
+   *
+   * @defaultValue 'auto'
+   */
+  scrollProgress?: 'auto' | boolean;
+
+  /**
+   * Automatically activate the scroll view when we the viewport falls
+   * below the given width.
+   *
+   * @defaultValue 435
+   */
+  scrollActivationWidth?: number;
+
+  /**
+   * The maximum number of pages a single slide can expand onto when printing
+   * to PDF, unlimited by default
+   *
+   * @defaultValue Number.POSITIVE_INFINITY
+   */
+  pdfMaxPagesPerSlide?: number;
+
+  /**
+   * Prints each fragment on a separate slide
+   *
+   * @defaultValue true
+   */
+  pdfSeparateFragments?: boolean;
+
+  /**
+   * Offset used to reduce the height of content within exported PDF pages.
+   * This exists to account for environment differences based on how you
+   * print to PDF. CLI printing options, like phantomjs and wkpdf, can end
+   * on precisely the total height of the document whereas in-browser
+   * printing has to end one pixel before.
+   *
+   * @defaultValue -1
+   */
+  pdfPageHeightOffset?: number;
+
+  /**
+   * Number of slides away from the current that are visible
+   *
+   * @defaultValue 3
+   */
+  viewDistance?: number;
+
+  /**
+   * Number of slides away from the current that are visible on mobile
+   * devices. It is advisable to set this to a lower number than
+   * viewDistance in order to save resources.
+   *
+   * @defaultValue 2
+   */
+  mobileViewDistance?: number;
+
+  /**
+   * The display mode that will be used to show slides
+   *
+   * @defaultValue 'block'
+   */
+  display?: string;
+
+  /**
+   * Hide cursor if inactive
+   *
+   * @defaultValue true
+   */
+  hideInactiveCursor?: boolean;
+
+  /**
+   * Time before the cursor is hidden (in ms)
+   *
+   * @defaultValue 5000
+   */
+  hideCursorTime?: number;
+
+  /**
+   * Should we automatically sort and set indices for fragments
+   * at each sync? (See Reveal.sync)
+   *
+   * @defaultValue true
+   */
+  sortFragmentsOnSync?: boolean;
+
+  /**
+   * Script dependencies to load
+   *
+   * @defaultValue []
+   */
+  dependencies?: any[];
+
+  /**
+   * Plugin objects to register and use for this presentation
+   *
+   * @defaultValue []
+   */
+  plugins?: any[];
+}
 
 /**
  * The default reveal.js config object.
  */
 const defaultConfig: Config = {
-	width: 960,
-	height: 700,
-	margin: 0.04,
-	minScale: 0.2,
-	maxScale: 2.0,
+  width: 960,
+  height: 700,
+  margin: 0.04,
+  minScale: 0.2,
+  maxScale: 2.0,
 
-	controls: true,
-	controlsTutorial: true,
-	controlsLayout: 'bottom-right',
-	controlsBackArrows: 'faded',
-	progress: true,
+  controls: true,
+  controlsTutorial: true,
+  controlsLayout: 'bottom-right',
+  controlsBackArrows: 'faded',
+  progress: true,
 
-	slideNumber: false,
-	showSlideNumber: 'all',
-	hashOneBasedIndex: false,
-	hash: false,
-	respondToHashChanges: true,
-	jumpToSlide: true,
-	history: false,
-	keyboard: true,
-	keyboardCondition: null,
-	disableLayout: false,
-	overview: true,
-	center: true,
-	touch: true,
-	loop: false,
-	rtl: false,
-	navigationMode: 'default',
-	shuffle: false,
-	fragments: true,
-	fragmentInURL: true,
-	embedded: false,
-	help: true,
-	pause: true,
-	showNotes: false,
-	showHiddenSlides: false,
-	autoPlayMedia: null,
-	preloadIframes: null,
-	mouseWheel: false,
-	previewLinks: false,
-	viewDistance: 3,
-	mobileViewDistance: 2,
-	display: 'block',
-	hideInactiveCursor: true,
-	hideCursorTime: 5000,
-	sortFragmentsOnSync: true,
+  slideNumber: false,
+  showSlideNumber: 'all',
+  hashOneBasedIndex: false,
+  hash: false,
+  respondToHashChanges: true,
+  jumpToSlide: true,
+  history: false,
+  keyboard: true,
+  keyboardCondition: null,
+  disableLayout: false,
+  overview: true,
+  center: true,
+  touch: true,
+  loop: false,
+  rtl: false,
+  navigationMode: 'default',
+  shuffle: false,
+  fragments: true,
+  fragmentInURL: true,
+  embedded: false,
+  help: true,
+  pause: true,
+  showNotes: false,
+  showHiddenSlides: false,
+  autoPlayMedia: null,
+  preloadIframes: null,
+  mouseWheel: false,
+  previewLinks: false,
+  viewDistance: 3,
+  mobileViewDistance: 2,
+  display: 'block',
+  hideInactiveCursor: true,
+  hideCursorTime: 5000,
+  sortFragmentsOnSync: true,
 
-	autoAnimate: true,
-	autoAnimateMatcher: null,
-	autoAnimateEasing: 'ease',
-	autoAnimateDuration: 1.0,
-	autoAnimateUnmatched: true,
+  autoAnimate: true,
+  autoAnimateMatcher: null,
+  autoAnimateEasing: 'ease',
+  autoAnimateDuration: 1.0,
+  autoAnimateUnmatched: true,
 
-	autoAnimateStyles: [
-		'opacity',
-		'color',
-		'background-color',
-		'padding',
-		'font-size',
-		'line-height',
-		'letter-spacing',
-		'border-width',
-		'border-color',
-		'border-radius',
-		'outline',
-		'outline-offset',
-	],
+  autoAnimateStyles: [
+    'opacity',
+    'color',
+    'background-color',
+    'padding',
+    'font-size',
+    'line-height',
+    'letter-spacing',
+    'border-width',
+    'border-color',
+    'border-radius',
+    'outline',
+    'outline-offset',
+  ],
 
-	autoSlide: 0,
-	autoSlideStoppable: true,
-	autoSlideMethod: null,
-	defaultTiming: null,
+  autoSlide: 0,
+  autoSlideStoppable: true,
+  autoSlideMethod: null,
+  defaultTiming: null,
 
-	postMessage: true,
-	postMessageEvents: false,
+  postMessage: true,
+  postMessageEvents: false,
 
-	focusBodyOnPageVisibilityChange: true,
+  focusBodyOnPageVisibilityChange: true,
 
-	transition: 'slide',
-	transitionSpeed: 'default',
-	backgroundTransition: 'fade',
+  transition: 'slide',
+  transitionSpeed: 'default',
+  backgroundTransition: 'fade',
 
-	parallaxBackgroundImage: '',
-	parallaxBackgroundSize: '',
-	parallaxBackgroundRepeat: '',
-	parallaxBackgroundPosition: '',
-	parallaxBackgroundHorizontal: null,
-	parallaxBackgroundVertical: null,
+  parallaxBackgroundImage: '',
+  parallaxBackgroundSize: '',
+  parallaxBackgroundRepeat: '',
+  parallaxBackgroundPosition: '',
+  parallaxBackgroundHorizontal: null,
+  parallaxBackgroundVertical: null,
 
-	view: null,
+  view: null,
 
-	scrollLayout: 'full',
-	scrollSnap: 'mandatory',
-	scrollProgress: 'auto',
-	scrollActivationWidth: 435,
+  scrollLayout: 'full',
+  scrollSnap: 'mandatory',
+  scrollProgress: 'auto',
+  scrollActivationWidth: 435,
 
-	pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
-	pdfSeparateFragments: true,
-	pdfPageHeightOffset: -1,
+  pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
+  pdfSeparateFragments: true,
+  pdfPageHeightOffset: -1,
 
-	dependencies: [],
-	plugins: [],
+  dependencies: [],
+  plugins: [],
 };
 
 export type { Config };
diff --git a/js/index.ts b/js/index.ts
index e78fca25..6190bb9e 100644
--- a/js/index.ts
+++ b/js/index.ts
@@ -14,8 +14,8 @@ import Deck, { VERSION } from './reveal.js';
  * });
  */
 let Reveal: {
-	initialize: (options?: Config) => Promise<void>;
-	[key: string]: any;
+  initialize: (options?: Config) => Promise<void>;
+  [key: string]: any;
 } = Deck;
 
 /**
@@ -35,13 +35,13 @@ type RevealApiFunction = (...args: any[]) => any;
 let enqueuedAPICalls: RevealApiFunction[] = [];
 
 Reveal.initialize = (options?: Config) => {
-	// Create our singleton reveal.js instance
-	Object.assign(Reveal, new Deck(document.querySelector('.reveal'), options));
+  // Create our singleton reveal.js instance
+  Object.assign(Reveal, new Deck(document.querySelector('.reveal'), options));
 
-	// Invoke any enqueued API calls
-	enqueuedAPICalls.map((method) => method(Reveal));
+  // Invoke any enqueued API calls
+  enqueuedAPICalls.map((method) => method(Reveal));
 
-	return Reveal.initialize();
+  return Reveal.initialize();
 };
 
 /**
@@ -51,11 +51,11 @@ Reveal.initialize = (options?: Config) => {
  * of them when Reveal.initialize is called.
  */
 ['configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin'].forEach(
-	(method) => {
-		Reveal[method] = (...args: any) => {
-			enqueuedAPICalls.push((deck) => deck[method].call(null, ...args));
-		};
-	}
+  (method) => {
+    Reveal[method] = (...args: any) => {
+      enqueuedAPICalls.push((deck) => deck[method].call(null, ...args));
+    };
+  }
 );
 
 Reveal.isReady = () => false;
diff --git a/package.json b/package.json
index 6c1f5b54..f12676a1 100644
--- a/package.json
+++ b/package.json
@@ -1,128 +1,128 @@
 {
-  "name": "reveal.js",
-  "version": "5.2.1",
-  "description": "The HTML Presentation Framework",
-  "homepage": "https://revealjs.com",
-  "subdomain": "revealjs",
-  "license": "MIT",
-  "main": "dist/reveal.js",
-  "module": "dist/reveal.mjs",
-  "types": "dist/reveal.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/reveal.mjs",
-      "require": "./dist/reveal.js",
-      "default": "./dist/reveal.js"
-    },
-    "./reveal.css": "./dist/reveal.css",
-    "./reset.css": "./dist/reset.css",
-    "./theme/*": "./dist/theme/*",
-    "./plugin/highlight": {
-      "import": "./dist/plugin/highlight.mjs",
-      "require": "./dist/plugin/highlight.js",
-      "default": "./dist/plugin/highlight.js"
-    },
-    "./plugin/markdown": {
-      "import": "./dist/plugin/markdown.mjs",
-      "require": "./dist/plugin/markdown.js",
-      "default": "./dist/plugin/markdown.js"
-    },
-    "./plugin/math": {
-      "import": "./dist/plugin/math.mjs",
-      "require": "./dist/plugin/math.js",
-      "default": "./dist/plugin/math.js"
-    },
-    "./plugin/notes": {
-      "import": "./dist/plugin/notes.mjs",
-      "require": "./dist/plugin/notes.js",
-      "default": "./dist/plugin/notes.js"
-    },
-    "./plugin/search": {
-      "import": "./dist/plugin/search.mjs",
-      "require": "./dist/plugin/search.js",
-      "default": "./dist/plugin/search.js"
-    },
-    "./plugin/zoom": {
-      "import": "./dist/plugin/zoom.mjs",
-      "require": "./dist/plugin/zoom.js",
-      "default": "./dist/plugin/zoom.js"
-    }
-  },
-  "scripts": {
-    "dev": "npm run start",
-    "start": "vite --port 8000",
-    "build:core": "tsc && vite build && vite build -c vite.config.styles.ts",
-    "build:styles": "vite build -c vite.config.styles.ts",
-    "build": "tsc && vite build && vite build -c vite.config.styles.ts && vite build -c plugin/highlight/vite.config.ts && vite build -c plugin/markdown/vite.config.ts && vite build -c plugin/math/vite.config.ts && vite build -c plugin/notes/vite.config.ts && vite build -c plugin/search/vite.config.ts && vite build -c plugin/zoom/vite.config.ts",
-    "test": "node test.js"
-  },
-  "author": {
-    "name": "Hakim El Hattab",
-    "email": "hakim.elhattab@gmail.com",
-    "web": "https://hakim.se"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/hakimel/reveal.js.git"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "keywords": [
-    "reveal",
-    "slides",
-    "presentation"
-  ],
-  "devDependencies": {
-    "fitty": "^2.4.2",
-    "glob": "^10.3.10",
-    "highlight.js": "^11.10.0",
-    "marked": "^4.3.0",
-    "node-qunit-puppeteer": "^2.2.0",
-    "qunit": "^2.22.0",
-    "sass": "^1.80.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.4.9",
-    "vite-plugin-dts": "^4.2.4"
-  },
-  "browserslist": "> 2%, not dead",
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "es6": true
-    },
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "sourceType": "module",
-      "allowImportExportEverywhere": true,
-      "requireConfigFile": false
-    },
-    "globals": {
-      "module": false,
-      "console": false,
-      "unescape": false,
-      "define": false,
-      "exports": false
-    },
-    "rules": {
-      "curly": 0,
-      "eqeqeq": 2,
-      "wrap-iife": [
-        2,
-        "any"
-      ],
-      "no-use-before-define": [
-        2,
-        {
-          "functions": false
-        }
-      ],
-      "new-cap": 2,
-      "no-caller": 2,
-      "dot-notation": 0,
-      "no-eq-null": 2,
-      "no-unused-expressions": 0
-    }
-  }
+	"name": "reveal.js",
+	"version": "5.0.5",
+	"description": "The HTML Presentation Framework",
+	"homepage": "https://revealjs.com",
+	"subdomain": "revealjs",
+	"license": "MIT",
+	"main": "dist/reveal.js",
+	"module": "dist/reveal.mjs",
+	"types": "dist/reveal.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/reveal.mjs",
+			"require": "./dist/reveal.js",
+			"default": "./dist/reveal.js"
+		},
+		"./reveal.css": "./dist/reveal.css",
+		"./reset.css": "./dist/reset.css",
+		"./theme/*": "./dist/theme/*",
+		"./plugin/highlight": {
+			"import": "./dist/plugin/highlight.mjs",
+			"require": "./dist/plugin/highlight.js",
+			"default": "./dist/plugin/highlight.js"
+		},
+		"./plugin/markdown": {
+			"import": "./dist/plugin/markdown.mjs",
+			"require": "./dist/plugin/markdown.js",
+			"default": "./dist/plugin/markdown.js"
+		},
+		"./plugin/math": {
+			"import": "./dist/plugin/math.mjs",
+			"require": "./dist/plugin/math.js",
+			"default": "./dist/plugin/math.js"
+		},
+		"./plugin/notes": {
+			"import": "./dist/plugin/notes.mjs",
+			"require": "./dist/plugin/notes.js",
+			"default": "./dist/plugin/notes.js"
+		},
+		"./plugin/search": {
+			"import": "./dist/plugin/search.mjs",
+			"require": "./dist/plugin/search.js",
+			"default": "./dist/plugin/search.js"
+		},
+		"./plugin/zoom": {
+			"import": "./dist/plugin/zoom.mjs",
+			"require": "./dist/plugin/zoom.js",
+			"default": "./dist/plugin/zoom.js"
+		}
+	},
+	"scripts": {
+		"dev": "npm run start",
+		"start": "vite --port 8000",
+		"build:core": "tsc && vite build && vite build -c vite.config.styles.ts",
+		"build:styles": "vite build -c vite.config.styles.ts",
+		"build": "tsc && vite build && vite build -c vite.config.styles.ts && vite build -c plugin/highlight/vite.config.ts && vite build -c plugin/markdown/vite.config.ts && vite build -c plugin/math/vite.config.ts && vite build -c plugin/notes/vite.config.ts && vite build -c plugin/search/vite.config.ts && vite build -c plugin/zoom/vite.config.ts",
+		"test": "node test.js"
+	},
+	"author": {
+		"name": "Hakim El Hattab",
+		"email": "hakim.elhattab@gmail.com",
+		"web": "https://hakim.se"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/hakimel/reveal.js.git"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"keywords": [
+		"reveal",
+		"slides",
+		"presentation"
+	],
+	"devDependencies": {
+		"fitty": "^2.4.2",
+		"glob": "^10.3.10",
+		"highlight.js": "^11.10.0",
+		"marked": "^4.3.0",
+		"node-qunit-puppeteer": "^2.2.0",
+		"qunit": "^2.22.0",
+		"sass": "^1.80.2",
+		"typescript": "^5.2.2",
+		"vite": "^5.4.9",
+		"vite-plugin-dts": "^4.2.4"
+	},
+	"browserslist": "> 2%, not dead",
+	"eslintConfig": {
+		"env": {
+			"browser": true,
+			"es6": true
+		},
+		"parser": "@babel/eslint-parser",
+		"parserOptions": {
+			"sourceType": "module",
+			"allowImportExportEverywhere": true,
+			"requireConfigFile": false
+		},
+		"globals": {
+			"module": false,
+			"console": false,
+			"unescape": false,
+			"define": false,
+			"exports": false
+		},
+		"rules": {
+			"curly": 0,
+			"eqeqeq": 2,
+			"wrap-iife": [
+				2,
+				"any"
+			],
+			"no-use-before-define": [
+				2,
+				{
+					"functions": false
+				}
+			],
+			"new-cap": 2,
+			"no-caller": 2,
+			"dot-notation": 0,
+			"no-eq-null": 2,
+			"no-unused-expressions": 0
+		}
+	}
 }
diff --git a/plugin/markdown/vite.config.ts b/plugin/markdown/vite.config.ts
index ea3cc6d4..db7979c7 100644
--- a/plugin/markdown/vite.config.ts
+++ b/plugin/markdown/vite.config.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
 import { appendExtension } from '../../vite.config.ts';
 
 // Once Vite supports multiple entries for plugins, this build can
@@ -15,8 +15,8 @@ export default defineConfig({
         'plugin/markdown': resolve(__dirname, 'index.js'),
       },
       name: 'RevealMarkdown',
-      fileName: appendExtension
-    }
+      fileName: appendExtension,
+    },
   },
   plugins: [],
-})
+});
diff --git a/plugin/math/vite.config.ts b/plugin/math/vite.config.ts
index 4fab0edd..621b5582 100644
--- a/plugin/math/vite.config.ts
+++ b/plugin/math/vite.config.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
 import { appendExtension } from '../../vite.config.ts';
 
 // Once Vite supports multiple entries for plugins, this build can
@@ -15,8 +15,8 @@ export default defineConfig({
         'plugin/math': resolve(__dirname, 'index.js'),
       },
       name: 'RevealMath',
-      fileName: appendExtension
-    }
+      fileName: appendExtension,
+    },
   },
   plugins: [],
-})
+});
diff --git a/public/plugin/highlight/zenburn.css b/public/plugin/highlight/zenburn.css
index 07be5020..96b01007 100644
--- a/public/plugin/highlight/zenburn.css
+++ b/public/plugin/highlight/zenburn.css
@@ -70,7 +70,6 @@ based on dark.css by Ivan Sagalaev
   color: #7f9f7f;
 }
 
-
 .hljs-emphasis {
   font-style: italic;
 }
diff --git a/test.js b/test.js
index beec2b5e..a704d08e 100644
--- a/test.js
+++ b/test.js
@@ -13,70 +13,70 @@ const combinedResults = { passed: 0, failed: 0, total: 0, runtime: 0 };
 
 // Create and start Vite server
 const startServer = async () => {
-  const server = await createServer({
-    root: __dirname,
-    server: {
-      port: 8009,
-    },
-  });
-  await server.listen();
-  return server;
+	const server = await createServer({
+		root: __dirname,
+		server: {
+			port: 8009,
+		},
+	});
+	await server.listen();
+	return server;
 };
 
 // Run tests
 const runTests = async (server) => {
-  await Promise.all(
-    testFiles.map(async (file) => {
-      const qunitArgs = {
-        targetUrl: `http://localhost:8009/${file}`,
-        timeout: 30000,
-        redirectConsole: false,
-        puppeteerArgs: ['--allow-file-access-from-files'],
-      };
+	await Promise.all(
+		testFiles.map(async (file) => {
+			const qunitArgs = {
+				targetUrl: `http://localhost:8009/${file}`,
+				timeout: 30000,
+				redirectConsole: false,
+				puppeteerArgs: ['--allow-file-access-from-files'],
+			};
 
-      try {
-        const result = await runQunitPuppeteer(qunitArgs);
-        combinedResults.passed += result.stats.passed;
-        combinedResults.failed += result.stats.failed;
-        combinedResults.total += result.stats.total;
-        combinedResults.runtime += result.stats.runtime;
+			try {
+				const result = await runQunitPuppeteer(qunitArgs);
+				combinedResults.passed += result.stats.passed;
+				combinedResults.failed += result.stats.failed;
+				combinedResults.total += result.stats.total;
+				combinedResults.runtime += result.stats.runtime;
 
-        if (result.stats.failed > 0) {
-          console.log(
-            `${'!'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
-              result.stats.runtime
-            }ms`.red
-          );
-          printFailedTests(result, console);
-        } else {
-          console.log(
-            `${'✔'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
-              result.stats.runtime
-            }ms`.green
-          );
-        }
-      } catch (error) {
-        console.error(`Error running tests for ${file}:`, error);
-      }
-    })
-  );
+				if (result.stats.failed > 0) {
+					console.log(
+						`${'!'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
+							result.stats.runtime
+						}ms`.red
+					);
+					printFailedTests(result, console);
+				} else {
+					console.log(
+						`${'✔'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
+							result.stats.runtime
+						}ms`.green
+					);
+				}
+			} catch (error) {
+				console.error(`Error running tests for ${file}:`, error);
+			}
+		})
+	);
 
-  console.log(
-    `\n${combinedResults.passed}/${combinedResults.total} tests passed, ${combinedResults.failed} failed, ${combinedResults.runtime}ms runtime`
-  );
+	console.log(
+		`\n${combinedResults.passed}/${combinedResults.total} tests passed, ${combinedResults.failed} failed, ${combinedResults.runtime}ms runtime`
+	);
 
-  // Exit with status code 1 if any tests failed, otherwise exit with 0
-  process.exit(combinedResults.failed > 0 ? 1 : 0);
+	// Exit with status code 1 if any tests failed, otherwise exit with 0
+	process.exit(combinedResults.failed > 0 ? 1 : 0);
 };
 
 // Main execution
 (async () => {
-  try {
-    const server = await startServer();
-    await runTests(server);
-    await server.close();
-  } catch (error) {
-    console.error('An error occurred:', error);
-    process.exit(1);
-  }
+	try {
+		const server = await startServer();
+		await runTests(server);
+		await server.close();
+	} catch (error) {
+		console.error('An error occurred:', error);
+		process.exit(1);
+	}
 })();
diff --git a/tsconfig.json b/tsconfig.json
index 2273ec98..eb0855c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["js"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["js"],
+	"references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 97ede7ee..1caabefc 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,11 +1,11 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"strict": true
+	},
+	"include": ["vite.config.ts"]
 }
diff --git a/vite.config.styles.ts b/vite.config.styles.ts
index e4242524..fc160473 100644
--- a/vite.config.styles.ts
+++ b/vite.config.styles.ts
@@ -4,34 +4,34 @@ import fs from 'fs';
 
 // List all theme files in the css/theme directory
 const themeFiles = fs
-  .readdirSync(resolve(__dirname, 'css/theme'))
-  .filter((file) => file.endsWith('.scss'));
+	.readdirSync(resolve(__dirname, 'css/theme'))
+	.filter((file) => file.endsWith('.scss'));
 const themeEntries = themeFiles.reduce((acc, file) => {
-  acc[`theme/${file.replace('.scss', '')}`] = resolve(__dirname, `css/theme/${file}`);
-  return acc;
+	acc[`theme/${file.replace('.scss', '')}`] = resolve(__dirname, `css/theme/${file}`);
+	return acc;
 }, {});
 
 export default defineConfig({
-  root: './',
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern-compiler'
-      }
-    }
-  },
-  build: {
-    emptyOutDir: false,
-    cssCodeSplit: true,
-    lib: {
-      formats: ['es'],
-      entry: {
-        reveal: resolve(__dirname, 'css/reveal.scss'),
-        reset: resolve(__dirname, 'css/reset.css'),
+	root: './',
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: 'modern-compiler',
+			},
+		},
+	},
+	build: {
+		emptyOutDir: false,
+		cssCodeSplit: true,
+		lib: {
+			formats: ['es'],
+			entry: {
+				reveal: resolve(__dirname, 'css/reveal.scss'),
+				reset: resolve(__dirname, 'css/reset.css'),
 
-        ...themeEntries,
-      },
-    },
-  },
-  plugins: [],
+				...themeEntries,
+			},
+		},
+	},
+	plugins: [],
 });
diff --git a/vite.config.ts b/vite.config.ts
index 3e7e03d1..48719510 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,43 +4,43 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
 export const appendExtension = (format: ModuleFormat, name: String): string => {
-  if (format === 'es') {
-    return `${name}.mjs`;
-  } else {
-    return `${name}.js`;
-  }
+	if (format === 'es') {
+		return `${name}.mjs`;
+	} else {
+		return `${name}.js`;
+	}
 };
 
 export default defineConfig({
-  build: {
-    emptyOutDir: true,
-    lib: {
-      formats: ['es', 'umd'],
-      entry: resolve(__dirname, 'js/index.ts'),
-      name: 'Reveal',
-      fileName: (format, entryName) => {
-        return appendExtension(format, 'reveal');
-      },
-    },
-    rollupOptions: {
-      output: {
-        assetFileNames: 'reveal.[ext]',
-      },
-    },
-  },
-  resolve: {
-    alias: {
-      // Matches the exported paths in package.json
-      'reveal.js/plugin': './plugin',
-      'reveal.js': '/js',
-    },
-  },
-  plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern-compiler'
-      }
-    }
-  },
+	build: {
+		emptyOutDir: true,
+		lib: {
+			formats: ['es', 'umd'],
+			entry: resolve(__dirname, 'js/index.ts'),
+			name: 'Reveal',
+			fileName: (format, entryName) => {
+				return appendExtension(format, 'reveal');
+			},
+		},
+		rollupOptions: {
+			output: {
+				assetFileNames: 'reveal.[ext]',
+			},
+		},
+	},
+	resolve: {
+		alias: {
+			// Matches the exported paths in package.json
+			'reveal.js/plugin': './plugin',
+			'reveal.js': '/js',
+		},
+	},
+	plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: 'modern-compiler',
+			},
+		},
+	},
 });