styles.css

* {
	padding: 0;
	margin: 0;
	font-family: 'Bangers', cursive;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	background-color: black;
}

.hiden {
	display: none;
}

#cargando {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 150px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	color: white;
	position: relative;
}

#cargando img {
	height: 70%;
}

#game {
	display: none;
	height: 500px;
	width: 500px;
	flex-wrap: wrap;
	perspective: 600px;
	justify-content: space-around;
}

.info-game {
	width: 500px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.5);
	position: absolute;
	bottom: 40px;
	border-radius: 5px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.info-game button {
	height: 70%;
	width: 20%;
	background-color: #ffff00;
	outline: none;
	border: none;
	border-radius: 5px;
	transition: 0.2s;
	cursor: pointer;
}

.info-game button:hover {
	font-size: 1em;
	background-color: #ffff34;
}

.tarjeta {
	display: flex;
	height: 90px;
	width: 90px;
	justify-content: center;
	align-items: center;
	margin: 5px 5px;
	border-radius: 25px;
	position: relative;
	cursor: pointer;
	transform-style: preserve-3d;
	transform-origin: center right;
	transition: transform 1s;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.rotar {
	transform: translateX(-100%) rotateY(-180deg);
}

.front,
.back {
	position: absolute;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 35px;
	backface-visibility: hidden;
}

.vueltaFront {
	background-image: url(../img/background.jpg);
	background-size: cover;
	border-radius: 15px;
}

.vueltaBack {
	transform: rotateY(180deg);
	background-size: cover;
	border-radius: 15px;
}

.video-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 50%;
}

.video-container .contenido {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	text-align: center;
	width: 50vw;
}

.contenido img {
	width: 100%;
	margin-bottom: 100px;
}

.noSelect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.button {
	cursor: pointer;
	overflow: hidden;
	padding: 20px;
	border: solid 2px #ffff00;
	background-color: #ffff00;
	border-radius: 35px;
	position: relative;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	text-align: center;
	font-family: sans-serif;
	font-weight: 600;
	letter-spacing: 5px;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-text-stroke: 0px white;
}

.contenido a {
	color: rgb(56, 56, 56);
	text-decoration: none;
}

.button::after {
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	content: '';
	width: 10px;
	height: 2px;
	background: white;
	position: absolute;
	top: 0px;
	right: 0px;
	box-shadow: 0px 5px 0px white, 0px 10px 0px white, 0px 15px 0px white,
		0px 20px 0px white, 0px 25px 0px white, 0px 30px 0px white,
		0px 35px 0px white, 0px 40px 0px white, 0px 45px 0px white,
		0px 50px 0px white, 0px 55px 0px white;
}
.button:hover::after {
	width: 160px;
	z-index: -1;
	-webkit-text-stroke: 4px white;
	box-shadow: -10px 5px 0px white, -20px 10px 0px white, -30px 15px 0px white,
		-40px 20px 0px white, -50px 25px 0px white, -60px 30px 0px white,
		-70px 35px 0px white, -80px 40px 0px white, -90px 45px 0px white,
		-100px 50px 0px white, -110px 55px 0px white;
}
.button:hover {
	color: #fff;
}

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
	.video-container .contenido {
		width: 80vw;
	}
	.button {
		width: 150px;
	}
	#game {
		height: 400px;
		width: 300px;
	}
	.info-game {
		width: 300px;
	}

	.tarjeta {
		height: 60px;
		width: 60px;
	}
	.info-game button {
		width: 35%;
	}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
	#game {
		height: 380px;
		width: 280px;
	}
	.info-game {
		width: 280px;
	}

	.tarjeta {
		height: 50px;
		width: 50px;
	}
}

.rotate {
	animation: rotation 4s infinite linear;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}