index.css

:root {
	--main-menu-background: #151515;
	--white-1: #F3F3F3;

	--cute-green: #84e15a;
	--cute-red: #e1584a;
	--cute-yellow: #ebc622;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 10px;
}

body {
	margin: 0;
	overflow: hidden;
}

h1 {
	font-size: 5rem;
}

#fadingScreen {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 69;
	pointer-events: none;
}

#menuPrincipal {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--main-menu-background);
	z-index: 100;
	opacity: 1;
	color: var(--white-1);
	text-align: center;
}

.menuPrincipalContainer {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.principal-botones {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem;
	row-gap: 2rem;
}

#botonJugar {
	background: var(--main-menu-background);
	font-size: 2rem;
	font-weight: bold;
	border-radius: 8px;
	border: 4px solid var(--cute-red);
	padding: 1.5rem 0;
	color: var(--cute-red);
	width: 20rem;
}

#botonJugar.ready {
	animation: boton-jugar-transition 0.5s ease-in;
	animation-fill-mode: forwards;
	border: 4px solid var(--main-menu-background);
	color: var(--main-menu-background);
}

#botonJugar.ready:hover {
	background-color: var(--main-menu-background) !important;
	color: var(--cute-green);
	border: 4px solid var(--cute-green);
}

@keyframes boton-jugar-transition {
	0% {
		background-color: var(--main-menu-background);
	}
	100% {
		background-color: var(--cute-green);
	}
}


#abrirMenuControlesMP, #abrirMenuControlesMJ {
	background: var(--cute-yellow);
	font-size: 2rem;
	font-weight: bold;
	border-radius: 8px;
	border: 4px solid var(--cute-yellow);
	padding: 1.5rem 0;
	color: var(--main-menu-background);
	width: 16rem;
	transition: 0.08s all ease-in;
}

#abrirMenuControlesMP:hover, #abrirMenuControlesMJ:hover {
	background-color: var(--main-menu-background);
	color: var(--cute-yellow);
}

#abrirMenuCreditosMP, #abrirMenuCreditosMJ {
	background: var(--cute-yellow);
	font-size: 2rem;
	font-weight: bold;
	border-radius: 8px;
	border: 4px solid var(--cute-yellow);
	padding: 1.5rem 0;
	color: var(--main-menu-background);
	width: 16rem;
	transition: 0.08s all ease-in;
}

#abrirMenuCreditosMP:hover, #abrirMenuCreditosMJ:hover {
	background-color: var(--main-menu-background);
	color: var(--cute-yellow);
}

.principal-autores > h2 {
	color: #84e15a;
	font-size: 2rem;
	display: inline-block;
	margin-top: 3rem;
	padding-bottom: 1rem;
}

.principal-autores > h2 > a {
	cursor: pointer;
	text-decoration: none;
}

.principal-version {
	color: #22c3eb;
	font-weight: bold;
	font-size: 1.8rem;
}

.principal-troubleshooting {
	text-decoration: underline;
	margin-top: 1rem;
	color: #ed4a84;
	font-weight: bold;
	font-size: 1.8rem;
}

#menuJuego {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(20, 20, 20, 0.6);
	z-index: 70;
}

.menuJuegoContainer {
	row-gap: 5rem;
	background-color: var(--main-menu-background);
	padding: 5rem 8rem 5rem 8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 8px;
	border: 4px solid black;
}

.menu-juego-titulo {
	color: var(--white-1);
}

.menu-juego-botones {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 2rem;
}

.juego-troubleshooting {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.juego-troubleshooting > a {
	margin-top: 1rem;
	text-align: center;
	text-decoration: underline;
	color: #ed4a84;
	font-weight: bold;
	font-size: 1.8rem;
}

.menu-boton-volver {
	background: var(--cute-green);
	font-size: 2rem;
	font-weight: bold;
	border-radius: 8px;
	border: 4px solid var(--cute-green);
	padding: 1.5rem 0;
	color: var(--main-menu-background);
	width: 20rem;
	transition: 0.08s all ease-in;
}

.menu-boton-volver:hover {
	background-color: var(--main-menu-background);
	color: var(--cute-green);
}

#menuControles {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 110;
	background-color: var(--main-menu-background);
}

.menu-controles-contenedor {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 3rem;
}

.menu-controles-controles {
	display: flex;
	justify-content: center;
	gap: 3rem;
}

.menu-controles-categoria {
	color: white;
	padding: 2rem;
}

.menu-controles-categoria > h2 {
	font-size: 2.8rem;
	text-align: center;
	margin-bottom: 1rem;
	color: #22c3eb;
}

.lista-controles {
	list-style: none;
}

.lista-controles > li {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}

.lista-controles > li > h3 {
	display: inline-block;
	font-size: 1.8rem;
	color: #8deb22;
}

#menuCreditos {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 110;
	background-color: var(--main-menu-background);
}

.menu-creditos-contenedor {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 2.5rem;
}

.creditos-autor-principal {
	font-size: 2.2rem;
	font-weight: bold;
	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
	background-size: 1500% 1500%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: autor-rainbow 10s linear infinite;
}

@keyframes autor-rainbow {
	0% { background-position: 0 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.creditos-autor-secundario {
	font-size: 2rem;
	color: #dd87f0;
}

.menu-creditos-creditos {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	overflow-y: auto;
	width: 100%;
	padding: 0 4rem;
	justify-content: space-evenly;
	max-height: 55vh;
	grid-column-gap: 3rem;
	grid-row-gap: 2rem;
}

.menu-creditos-categoria {
	color: var(--white-1);
	display: flex;
	flex-direction: column;
}

.menu-creditos-categoria > h2 {
	font-size: 3rem;
	text-align: center;
	color: #22c3eb;
}

.menu-creditos-subcategoria > h3 {
	font-size: 2.5rem;
	text-align: center;
	color: #8deb22;
}

.lista-creditos {
	list-style: none;
	text-align: center;
}

.lista-creditos > li {
	font-size: 1.8rem;
}

.lista-creditos > li > a {
	color: #f4c294;
}

.creditos-autor {
	font-weight: bold;
	color: #dd87f0;
}

.creditos-subcategorias-texturas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 2rem;
	grid-column-gap: 2rem;
}

#crosshair
{
	width: 14px;
	height: 14px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -7px;
	margin-left: -7px;
	border: 2px solid black;
	border-radius: 50%;
	pointer-events: none;
	box-sizing: border-box;
}

#sistemaMensajes {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow-y: hidden;
}

#contenedorMensaje {
	position: absolute;
	bottom: 3rem;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 60%;
	padding: 1.6rem;
	font-size: 2rem;
	background-color: #7b5842;
	border: 5px solid #0f0f0f;
	border-radius: 6px;
}

#mensajeBotonesGestion {
	display: flex;
	flex-direction: row;
	column-gap: 0.5rem;
	padding-top: 1.2rem;
}

#mensajeBotonesGestion > button {
	padding: 0.3rem 0.5rem;
	font-weight: bold;
	color: black;
	border: 3px solid #0f0f0f;
	border-radius: 3px;
	text-align: center;
}

#avanzaMensaje, #retrocedeMensaje {
	background-color: #4dbb4d;
}

#avanzaMensaje:hover, #retrocedeMensaje:hover {
	background-color: #3c943c;
}

#borraMensaje {
	background-color: #d73e3e;
}

#borraMensaje:hover {
	background-color: #a93333;
}

/*
 Mensajes
 */
.tmensaje-inicioJuego {
	background: linear-gradient(to right, #e04f4f, #4dbb4d, #538ee9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.tmensaje-inicioJuegoControles {
	margin-left: 3rem;
}

/*
	Modificaciones a la salida de dat-gui.js
 */
.dg {
	z-index: 10 !important;
}