:root{
	--width: 70vw;
}

*{
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: sans-serif;
}

body{
	background-color: black;
}

/* **********************************************
Basic mechanics
Hide all paragraphs by default
Show them when they receive the class 'on'
Hide them when they receive the class 'off'
Feel free to adjust the defaults to your needs.
********************************************** */
#closed-captions p {
	opacity: 0;
	transition: .05s;
	position: absolute;
}
#closed-captions .on {
	opacity: 1;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}
#closed-captions .off {
	transition: .2s;
	opacity: 0;
}
.voice1 {
	color: lime;
}
.voice2 {
	color: cyan
}
.sound{
	color: white;
}



/* **********************************************
The first paragraph, with extended timing for 
	all siblings. Basically what it does is that
	it shows the text after a delay, which 
	corresponds with the time that the word is
	spoken.
You probably want to change the styling.
********************************************** */
/* .p0 span {
	opacity: 0;
	font-family: brenner;
}
.p0.on span:first-of-type {
	opacity: 1;
	transition: 0s;
	font-weight: 200;
}
.p0.on span:nth-of-type(2) {
	opacity: 1;
	transition: 0s .4s;
	margin-right: -.25em;
	font-weight: 400;
}
.p0.on span:nth-of-type(3) {
	opacity: 1;
	transition: 0s .5s;
	margin-right: -.25em;
	font-weight: 600;
}
.p0.on span:nth-of-type(4) {
	opacity: 1;
	transition: 0s .7s;
	margin-right: -.25em;
	font-weight: 800;
}
.p0.on span:nth-of-type(5) {
	opacity: 1;
	transition: 0s 1.1s;
	margin-right: -.25em;
	font-family: "brenner sans";
}
.p0.on span:nth-of-type(6) {
	opacity: 1;
	transition: 0s 1.4s;
	margin-right: -.25em;
	font-family: "brenner display";
}
.p0.on span:nth-of-type(7) {
	opacity: 1;
	transition: 0s 1.7s;
	margin-right: -.25em;
	font-family: "brenner script";
}
.p0.on span:nth-of-type(8) {
	opacity: 1;
	transition: 0s 2s;
	font-family: "brenner script";
}
.p0.on span:nth-of-type(9) {
	opacity: 1;
	transition: 0s 3s;
	font-family: "brenner Sans condensed";
}
.p0.on span:nth-of-type(10) {
	opacity: 1;
	transition: 0s 3.2s;
	font-family: "brenner mono";
}
.p0.on span:nth-of-type(11) {
	opacity: 1;
	transition: 0s 3.7s;
	font-family: "brenner slab";
} */

.on {
	margin-top: 0;
	text-align: center;
	width: var(--width)
}




/* **********************************************
Sounds.
	You can style the whole body, or you can 
	style anything within the body the moment
	a sound starts.
*********************************************  */

/* The moment the class .sound1 is added to the body, the background is yellow */

/* **********************************************
Basic layout.
	Place the video in the center of the page.
*********************************************  */

body {
	display: grid;
	height: 100vh;
	margin: 0;
	justify-content: center;
}
#video-container {
	margin: auto;
	background-color: black;
	height: calc(var(--width) * 0.6);
	width: var(--width);
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}
/* #video-mask {
	aspect-ratio: 240.5/100;
	display: grid;
	overflow: hidden;
	align-content: center;
	transition: 1s;
} */

iframe {
	width: var(--width);
	height: calc(var(--width) * 0.5);
}

html:has(.on#explosion) .on#explosion{
	animation: heavy-shake 0.5s infinite;
}

@keyframes heavy-shake {
	0% { transform: translate(0px); }
	10% { transform: translate(-6px); }
	20% { transform: translate(6px); }
	30% { transform: translate(-4px);  }
	40% { transform: translate(4px); }
	50% { transform: translate(-2px);  }
	60% { transform: translate(2px);  }
	70% { transform: translate(-1px);  }
	80% { transform: translate(1px);  }
	90% { transform: translate(-0.5px); }
	100% { transform: translate(0px); }
}

span{
	margin-top: 0;
	font-size: 20px;
}

@media (max-width: 600px) {
	span{
		font-size: 10px;
	}
}

html:has(.on#wind) .on#wind{
	animation: wind 2s linear infinite;
	text-align: right;
}

@keyframes wind{
	0%{
		right:0;
	}
	100%{
		right: 100%;
	}
}