/* El sitio se ve en pantallas de 320 px y en monitores. La idea es que en
   escritorio quede como estaba siempre y que nada se salga de ancho en un
   telefono: lo que no cabe (comandos largos, tablas) se desplaza dentro de su
   propia caja, no arrastrando la pagina entera. Necesita el
   <meta name="viewport"> en cada pagina o el movil dibuja a 980 px y encoge. */

*, *::before, *::after{
	box-sizing: border-box;
}

body{
	margin: 0;
	padding: 8px;
}

/* Ninguna imagen mas ancha que su hueco. Las capturas llevan width/height en
   el HTML, y con height:auto se reescalan sin deformarse. */
img{
	max-width: 100%;
	height: auto;
}

.mame_img{
	border: 10px groove #444;
}

#main_title {
	font-style: italic;
	font-family: monospace;
}

/* El menu era una lista de li en linea: al no caber, las pestañas se montaban
   unas encima de otras porque el relleno del enlace es mayor que el interlineado.
   Con flex se reparten en varias filas separadas de verdad. */
ul.menu{
	list-style: none;
	margin: 1em 0;
	padding: 0 2%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

ul.menu li{
	display: block;
}

ul.menu li li{
	display: block;
}

ul.menu li a{
	background-color: #22f;
	padding: 5px 10px;
	text-decoration: none;
	color: white;
	display: inline-block;
}

ul.menu li a:hover{
	background-color: #f33;
}


ul.screenshots{
	padding-left: 0;
	margin: 0;
}

ul.screenshots li{
	display: inline;
	list-style-type: none;
}

div.body{
	background-color: #eee;
	margin: 1em 2%;
	padding: 0.5em 1em;
	border: 1px solid #ddd;
	overflow-wrap: break-word;	/* una URL larga no ensancha la pagina */
}

/* Los videos traen width="560" en el HTML: en escritorio se ven igual que
   siempre y en un movil se encogen conservando la proporcion. */
div.body iframe{
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.mednafen_text{
	background-color: black;
	font-family: monospace;
	color: white;
	white-space: nowrap;
}

/* Trozos sueltos dentro de una frase (el nombre de un boton, una tecla, un
   comando corto). Parten de linea cuando no caben: el salto lo hace el
   navegador al dibujar, no hay ningun caracter metido de por medio, asi que
   al copiar y pegar sale el comando entero y en una sola linea. */
.terminal_text{
	background-color: black;
	font-family: monospace;
	color: white;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	display: inline-block;
	max-width: 100%;
	vertical-align: bottom;
}

/* Un comando entero, en su propio recuadro del ancho de la pantalla. Antes
   iban dentro del parrafo y en una sola linea: en un telefono se salian. */
code.cmd{
	background-color: black;
	font-family: monospace;
	color: white;
	display: block;
	max-width: 100%;
	padding: 0.5em 0.7em;
	margin: 0.5em 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Un menu de la maquina, tal como se ve. Se escribe como texto y no como
   captura para que no envejezca cada vez que cambia una opcion. */
pre.terminal_block{
	background-color: black;
	font-family: monospace;
	color: white;
	padding: 0.6em 1em;
	margin: 0.5em 0 0.5em 1em;
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
}

/* Envoltorio para lo que no se puede encoger (una tabla): se desplaza el
   contenedor y la pagina se queda quieta. */
div.scroll{
	max-width: 100%;
	overflow-x: auto;
}

table.buttons{
	border-collapse: collapse;
	margin: 0.5em 0 0.5em 1em;
	background-color: white;
}

table.buttons th, table.buttons td{
	border: 1px solid #ccc;
	padding: 3px 10px;
	text-align: left;
}

table.buttons th{
	background-color: #ddd;
}

/* El anuncio estaba colocado en absoluto contra el borde derecho. En una
   pantalla estrecha eso se sale de la pagina, asi que por debajo de 900 px
   vuelve al flujo normal y queda al final, centrado. */
.adbox{
	width: 330px;
	position: absolute;
	top: 5px;
	right: 5%;
	z-index: -1;
}

@media (max-width: 900px){
	.adbox{
		position: static;
		width: auto;
		max-width: 330px;
		margin: 1em auto;
		z-index: auto;
	}
}

@media (max-width: 600px){
	div.body{
		margin: 1em 0;
		padding: 0.5em 0.7em;
	}

	ul.menu{
		padding: 0;
	}

	pre.terminal_block, table.buttons{
		margin-left: 0;
	}
}