*{
    box-sizing: border-box;
}

body{
    margin: 0;
	padding: 0 1em;
	background: linear-gradient(rgba(0,0,0,5%), #fff, rgba(0,0,0,5%));
}

.container{
	padding: 1em;
	position: relative;
	width: 100%;
	
	height: calc(100vh);
	width: 1000px;
	margin: auto;

	display: flex;
	align-items: center;
}
#contornoPrincipal{
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	aspect-ratio: 239/102;

	margin: auto;
}

/* *************************************************************** */
/* ************************* Partes de la consola */
/* *************************************************************** */
.lateral{
	background-color: #d8dcdb;
	position: relative;
	aspect-ratio: 33/102;
	height: 100%;
}

#lateralIzquierdo{
	border-top-left-radius: 5em;
	border-bottom-left-radius: 5em;
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
	box-shadow: inset 0.5em -0.5em 0.5em #979c9f;
	
	animation: movimiento 2s;
}

#parteCentral{
	aspect-ratio: 173/102;
	height: 100%;
	position: relative;
}
#lateralDerecho{
	border-top-right-radius: 5em;
	border-bottom-right-radius: 5em;
	border-top-left-radius: .3em;
	border-bottom-left-radius: .3em;
	box-shadow: inset -0.5em -0.5em 0.5em #979c9f;
	animation: movimiento 2s;
}

/* *************************************************************** */
/* ************************* Botones */
/* *************************************************************** */

/* *********************************** Izquierda */
#lateralIzquierdo #joystick{
	position: absolute;
	top: 4em;
	left: 2.5em;
}

#botonesCruzIz{
	position: absolute;
	top: 11em;
	left: 1.8em;
}
/* *********************************** Derecha */
#lateralDerecho #joystick{
	position: absolute;
	top: 12em;
	right: 2.5em;
}

#botonesCruzDer{
	position: absolute;
	top: 4em;
	right: 1.8em;
}

/* *********************************** Joysticks */
#joystick{
	background-color: black;
	border-radius: 100%;
	width: 4em;
	height: 4em;
	box-shadow: inset 0 0 .3em #fff;
	
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

#joystickBoton{
	width: 90%;
	height: 90%;
	background-color: #fff;
	position: absolute;
	border-radius: 100%;
	background-image: url(../images/textura-joystick-negro.jpg);
	background-size: contain;
	background-position: center;
}
#joystickBoton:active{
	transform: translate(0, -0.4em);
}

/* ******************************** Botónes 4 Redondos */
.botonesCruzContenedor{
	width: 5.5em;
	height: 5.5em;
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}

#flecha-1{
	grid-row: 1/2;
	grid-column: 2/3;
}
#flecha-1 .figuraTriangulo{
	transform: rotate(-90deg);
}

#flecha-2{
	grid-row: 2/3;
	grid-column: 1/2;
}
#flecha-2 .figuraTriangulo{
	transform: rotate(180deg);
}

#flecha-3{
	grid-row: 2/3;
	grid-column: 3/4;
}
#flecha-3 .figuraTriangulo{
	transform: rotate(0deg);
}

#flecha-4{
	grid-row: 3/4;
	grid-column: 2/3;
	border-radius: 100%;
}

#flecha-4 .figuraTriangulo{
	transform: rotate(90deg);
}

.triangulo{
	border-left: .5em solid #000;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
}

#botonesCruzDer p{
	color: #f6f9fe;
	padding: 0;
	margin: 0;
	font-size: .9em;
	font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* ******************************** Botón Cuadrado */
.fondoBotonCuadrado{
	width: 1.5em;
	height: 1.5em;
	
	border-radius: .2em;
	padding: 0;
	
	position: absolute;
	left: 5.1em;
	bottom: 6.5em;
}

.fondoBotonCuadrado .boton{
	border-radius: .2em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.circuloInteriorBtnCuadradoFondo{
	width: 70%;
	height: 70%;
	box-shadow: inset 0 .4em .4em #151419, inset 0 -.1em .1em #727679;
	border: inset 1px solid red;
	display: flex;
	justify-content: center;
	align-items: center;
}
.circuloInteriorBtnCuadrado{
	width: 85%;
	height: 85%;
	background-color: #2f3437;
}

/* ******************************** Boton HOME */
.fondoBotonHome{
	width: 1.8em;
	height: 1.8em;
	border-radius: 100%;
	position: absolute;
	right: 5.1em;
	bottom: 6em;
}

.fondoBotonHome .boton{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #888b92;
	box-shadow: none;
}

.fondoBotonHome .circuloInteriorBtnCuadradoFondo{
	width: 90%;
	height: 90%;
	box-shadow: none;
}
.fondoBotonHome .circuloInteriorBtnCuadrado{
	background-color: #434343;

	background-image: url(../images/Home-icon.svg);
	background-size: 65%;
	background-repeat: no-repeat;
	background-position: center;
}

/* ******************************** Boton rectangular Iz */
#botonRectangularIz{
	width: 1.4em;
	height: .5em;
	border-radius: .1em;

	position: absolute;
	top: 2em;
	left: 6.3em;

	display: flex;
	justify-content: center;
	align-items: center;
}
#botonRectangularIz .boton{
	border-radius: .1em;
}

/* ******************************** Boton X Der */
#botonEquisDer{
	width: 1.4em;
	height: 1.4em;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	background-color: transparent;
	box-shadow: none;

	position: absolute;
	top: 2em;
	left: .5em;
}
#botonEquisDer .porcion{
	background-color: #2f3437;
	width: 100%;
	height: 100%;
	border-radius: .1em;
}
#botonEquisDer .porcion-1{
	grid-row: 1/4;
	grid-column: 2/3;
}
#botonEquisDer .porcion-2{
	grid-row: 2/3;
	grid-column: 1/4;
}

/* ******************************** Botoes superiores centrales */
.botonesSuperioresCentrales{
	width: 6em;
	height: 0.5em;
	position: absolute;
	top: -.2em;
	left: 7em;
	display: flex;
	justify-content: space-between;
	z-index: -1;
}
.botonesSuperioresCentrales .botonSuperiorCentral{
	height: 100%;
	width: 45%;
	border-radius: .2em;
	background: linear-gradient(#000, #cfd3d6,#000, #000, #000);	
}

/* ******************************** Botones genericos */
.agujeroBoton{
	background-color: black;
	box-shadow:  0em 0em .2em #444849;

	display: flex;
	align-items: center;
	justify-content: center;
}

.boton{
	background-color: #2f3437;	
	box-shadow: inset 0 .1em .1em #727679, inset 0 -.1em .1em #151419;
	height: 95%;
	width: 95%;
	cursor: pointer;
}
.boton:active{
	transform: scale(90%);
}

.botonRedondo{
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fondoBotonRedondo{
	border-radius: 100%;
}

/* ******************************** Boton Superior Iz */
.botonSuperiorIzquierdo{
	background-color: #3b3f42;
	position: absolute;
	z-index: -1;

	width: 8em;
	height: 8em;
	border-radius: 200% 100% 0% 150%;
	top: -0.3em;
	left: 0em;
	animation: opacidadBotonSuperior 4s;
}

/* ******************************** Boton Superior Der */
.botonSuperiorDerecho{
	background-color: #3b3f42;
	position: absolute;
	z-index: -1;

	width: 8em;
	height: 8em;
	border-radius: 100% 200% 150% 0%;
	top: -0.3em;
	right: 0;
	animation: opacidadBotonSuperior 4s;
}

/* *************************************************************** */
/* ************************* PANTALLA */
/* *************************************************************** */

#parteCentral{
	display: grid;
	grid-template-columns: .8em 1fr .8em;
	grid-template-rows: 1em 1fr 1em;
	height: 100%;
}

.esquinaSuperiorIz{
	grid-column: 1/2;
	border-bottom-right-radius: .3em;
	box-shadow: .5em .5em 0em #000;
}
.esquinaSuperiorDer{
	border-bottom-left-radius: .3em;
	box-shadow: -.5em .5em 0em #000;
	grid-column: 3/4;
	z-index: -1;
}
.parteSuperiorCentral{
	grid-column: 2/3;
	border-top-left-radius: .3em;
	border-top-right-radius: .3em;
	background: linear-gradient(#000, 20%, #cfd3d6, #62676b,#000,#000);
	box-shadow: inset 0px .2em .1em #000;
}

.lateralIzquierdoPantalla{
	grid-column: 1/2;
	grid-row: 2/3;
	background-color: #000;
	border-top-left-radius: .3em;
}

.lateralDerechoPantalla{
	grid-column: 3/4;
	grid-row: 2/3;
	background-color: #000;
	border-top-right-radius: .3em;
}
.parteInferiorCentral{
	grid-column: 1/4;
	grid-row: 3/4;
	background-color: #000;
	border-bottom-left-radius: .3em;
	border-bottom-right-radius: .3em;
	background: linear-gradient(#000, #62676b, #cfd3d6,#000, #000);
}


#pantallaNegra{
	background-color: #000;
	grid-row: 2/3;
	grid-column: 2/3;
	padding: 0 .3em .1em .3em;
}

#pantalla{
	height: 100%;
	border-radius: .3em;
	box-shadow: inset .04em .08em .05em #232323, inset -.02em -.08em .05em #62676b;
	padding: 1em 2em;
}

#pantallaColores{
	height: 100%;
	width: 100%;
}
#pantallaColores iframe{
	width: 100%;
	height: 100%;
	border: none;
}
#pantallaColores video{
	width: 100%;
	height: 100%;
}

/* *************************************************************** */
/* ************************* EFECTOS */
/* *************************************************************** */
@keyframes movimiento {
	from {
		transform: translateY(-1.5em);
		-ms-transform: translateY(-3em);
	}

	to {
		transform: translateY(0);
		-ms-transform:translateY(0);
	}
}

@keyframes opacidadBotonSuperior {
	0%{
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}