further refinements to overlay styles

css/reveal.scss

@@ -1440,7 +1440,7 @@ $overlayHeaderPadding: 5px;
 	height: 100%;
 	z-index: 1000;
 	background: rgba( 0, 0, 0, 0.95 );
-	backdrop-filter: blur( 6px );
+	backdrop-filter: blur( 10px );
 	transition: all 0.3s ease;
 }
 
@@ -1506,12 +1506,16 @@ $overlayHeaderPadding: 5px;
 	position: absolute;
 	display: flex;
 	top: $overlayHeaderHeight + $overlayHeaderPadding*2;
-		right: 0;
-		bottom: 0;
-		left: 0;
+	right: 10px;
+	bottom: 10px;
+	left: 10px;
+	border-radius: 10px;
+	overflow: hidden;
+	background-color: rgba(20, 20, 20, 0.8);
 }
 
-	.reveal .overlay-preview .overlay-viewport iframe {
+// Preview overlay
+.reveal .overlay-preview iframe {
 	width: 100%;
 	height: 100%;
 	max-width: 100%;
@@ -1523,7 +1527,7 @@ $overlayHeaderPadding: 5px;
 	transition: all 0.3s ease;
 }
 
-	.reveal .overlay-preview.loaded .overlay-viewport iframe {
+.reveal .overlay-preview.loaded iframe {
 	opacity: 1;
 	visibility: visible;
 }
@@ -1551,21 +1555,24 @@ $overlayHeaderPadding: 5px;
 	transform: scale(0.2);
 }
 
+// Help overlay
 .reveal .overlay-help .overlay-viewport {
 	overflow: auto;
 	color: #fff;
+	display: grid;
+	place-items: center;
 }
 
 .reveal .overlay-help .overlay-viewport-inner {
 	width: 600px;
 	margin: auto;
-		padding: 20px 20px 80px 20px;
 	text-align: center;
 	letter-spacing: normal;
 }
 
 .reveal .overlay-help .overlay-viewport-inner .title {
 	font-size: 20px;
+	margin-top: 0;
 }
 
 .reveal .overlay-help .overlay-viewport-inner table {

js/reveal.js

@@ -882,7 +882,7 @@ export default function( revealElement, options ) {
 			dom.overlay.classList.add( 'overlay-help' );
 			dom.wrapper.appendChild( dom.overlay );
 
-			let html = '<p class="title">Keyboard Shortcuts</p><br/>';
+			let html = '<p class="title">Keyboard Shortcuts</p>';
 
 			let shortcuts = keyboard.getShortcuts(),
 				bindings = keyboard.getBindings();