diff --git a/materialious/src/lib/components/player/ClosedCaptions.svelte b/materialious/src/lib/components/player/ClosedCaptions.svelte
index f69e603f..94cf780b 100644
--- a/materialious/src/lib/components/player/ClosedCaptions.svelte
+++ b/materialious/src/lib/components/player/ClosedCaptions.svelte
@@ -29,6 +29,7 @@
 	import { addToast } from '../Toast.svelte';
 	import { parseResponse, CaptionsRenderer } from 'media-captions';
 	import { getCaptionUrl } from '$lib/player/captions';
+	import 'media-captions/styles/captions.css';
 
 	let {
 		video,
@@ -69,4 +70,41 @@
 	});
 </script>
 
-<div bind:this={captionElement} class:hide={!trackVisible}></div>
+<div
+	id="captions"
+	class:controls-shown={showControls}
+	bind:this={captionElement}
+	class:hide={!trackVisible}
+></div>
+
+<style>
+	#captions {
+		--overlay-padding: 1%;
+		--cue-color: white;
+		--cue-bg-color: rgba(0, 0, 0, 0.8);
+		--cue-font-size: calc(var(--overlay-height) / 100 * 3);
+		--cue-line-height: calc(var(--cue-font-size) * 1.2);
+		--cue-padding-x: calc(var(--cue-font-size) * 0.6);
+		--cue-padding-y: calc(var(--cue-font-size) * 0.4);
+
+		bottom: 30px;
+		left: 55%;
+		transform: translateX(-50%); /* true horizontal centering */
+	}
+
+	#captions.controls-shown {
+		bottom: 80px;
+	}
+
+	@media screen and (max-width: 1000px) {
+		#captions {
+			--cue-font-size: calc(var(--overlay-height) / 100 * 8);
+			bottom: 0px;
+			width: 100%;
+		}
+
+		#captions.controls-shown {
+			display: none;
+		}
+	}
+</style>