@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&display=swap');
/* ========================================================================== */
/* ESTILOS GENERALES */
/* ========================================================================== */
* {box-sizing: border-box;}
body {
	margin: 0; font-size: 16px; 
	font-family: 'Cinzel', serif;
	/* background: black; */
	color: white;
	height: 100vh;
	padding: 0 20px;
}
a {
	text-decoration: none;
	color: #ff8200;
}
/* ========================================================================== */


/* ========================================================================== */
/* CLASES AUXILIARES */
/* ========================================================================== */
.oculto {display: none;}
/* ========================================================================== */


/* ========================================================================== */
/* LAYOUT: CONTENIDOS PRINCIPALES */
/* ========================================================================== */
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
body > main {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	animation: fadeIn 2s;
	animation-iteration-count: 1;
}
.video, .game {
	/* width: 80%;
	max-width: 80%;  */
	height: 100%;
	width: auto;
	max-height: 75%;
	max-width: 100%;
	aspect-ratio: 16/9;
	/* border: 8px solid white !important; */
	border: none !important;
	margin: 0 auto;
}
.video video {
	width: 100%; height: 100%;
}
/* ========================================================================== */





h1.heading {
	background-image: url("https://previews.123rf.com/images/flukesamed/flukesamed1501/flukesamed150100001/35253868-blaze-fire-flame-texture-background.jpg");
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-size: max(5vw, 50px);
	font-weight: normal;
	margin: 0;
	filter: brightness(200%);
}
main > p {
	font-size: 24px;
	opacity: 0;
	animation-fill-mode: forwards !important;
}
main > p:nth-of-type(1) {animation: fadeIn 2s linear 1s 1;}
main > p:nth-of-type(2) {animation: fadeIn 2s linear 3s 1;}
main > p:nth-of-type(3) {animation: fadeIn 2s linear 5s 1;}