/* start dark mode styling */
	@media {
		:root {
			color-scheme: dark;
			background-image:  url(fondo.png);
			background-size: 530px 353px;
			--border: rgba(255, 250, 250); /* Snow */}
	}

* {box-sizing: border-box;}

body {
	padding: 5px;
	font-family: 'MS PGothic', sans-serif;
	color: SteelBlue;
}

.container {
	max-width: 2000px;
	margin: 10px 200px 10px 200px;
	border: 0px ridge var(--border);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
	gap: 15px;
}

.small { flex: 1 1 10%; }
.large { flex: 1 1 80%; }
.main { flex: 1 1 40%; }
.nav { flex: 1 1 10%; }
.catalog { flex: 1 1 100%;}

header {
	background-size: cover;
	background-position: center;
	width: 40%;
	height: 215px;
	margin: -25px 260px -15px auto;
}

header span {
	font-family: Encabezado;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

nav {
	border: 4px ridge; /* Grosor y estilo del borde */
	border-color: Snow; /* Color del borde */
	border-radius: 5px; /* Radio de las esquinas */
	padding: 8px; /* Tamaño de huecos entre el borde y lo de dentro */
	background: linear-gradient(rgba(240, 248, 255, 0.8), rgba(173, 216, 230, 0.8)); /* Cambia el fondo */
}
nav div { /* Titulo */
	text-align: center;
	font-size: 1.25rem;
	margin: 1px 5px 10px 5px;
}
nav b { /* Apartados de enlaces */
	display: block;
	margin: 5px; /* Márgenes entre enlaces */
	background: linear-gradient(to top,#4881ea,#d1dffa);
	border-radius: 10px; /* Radio del borde */
	padding: 3px 0px 3px 0px; /* Huecos del fondo */
	text-decoration:none;
	text-align:center;
	color:AliceBlue;
}	

nav a { /* Enlaces */
	display: block;
	margin: 0px 0px 5px 10px; /* Márgenes entre enlaces */
	border-radius: 0px; /* Radio del borde */
	text-decoration: none;
}	

nav a:link, nav a:visited { 
	color:SteelBlue;
}

nav a:hover {
	color:#ff4da9;}

nav > img { /* Imagenes */
	display: block;
	margin: 10px 0px 0px 0px; /* Margen: arriba, derecha, abajo, izquierda */
	border: 0px ridge var(--border);
	border-radius: 0px;
}


.main { /* Parte central */
	border: 5px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(rgba(240, 248, 255, 0.8), rgba(173, 216, 230, 0.8));
	padding: 5px;
}

.small {
	border: 4px ridge; /* Grosor y estilo del borde */
	border-color: Snow; /* Color del borde */
	border-radius: 5px; /* Radio de las esquinas */
	padding: 8px; /* Tamaño de huecos entre el borde y lo de dentro */
	background: linear-gradient(rgba(240, 248, 255, 0.8), rgba(173, 216, 230, 0.8)); /* Cambia el fondo */
	margin: 0px 0px auto;
}

.catalog { /* Parte de lista de media */
	border: 5px ridge var(--border);
	border-radius: 15px;
	background: linear-gradient(rgba(240, 248, 255, 0.9), rgba(173, 216, 230, 0.9));
	margin:auto;
}

footer {
	text-align: center;
	margin: 10px 400px 20px 400px;
	font-size: 15px;
	outline: 0px solid;
	background-color: rgba(255, 255, 255, 0.5);
}

h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
}
h3 { /*Texto interior de items catalogo*/
	display: inline;
	font-size: 16px;
	font-weight: normal;
	color: crimson;
	border:2px ridge;
	padding-left:0px;
	margin-left:0px;
	margin-top: 0px
}
h4 { /*Lista de items catalogo*/
	font-size: 16px;
	font-weight: normal;
	color: midnightblue;
}


/* prevents overflow on smaller screens */
img { max-width: 90%; }
pre { overflow-x: auto; }

table, th {	
  border: 1px solid;
  text-align:left;
  margin: 0px 5px 0px 5px;
}

table, td {
  border: 0px solid;
  border-spacing: 0px;
  margin: 0px 0px 25px 22px;
  padding: 0px 0px;
}

table, tr {
  border: 0px solid;
}

tr:nth-child(even) {
  background-color: #e6e6fa;
}

tr:nth-child(odd) {
  background-color: #F8F8F8;
}

::details-content { /*No se por qué me da error pero funciona así que se queda así*/
  background-color: #ed96ca;
  background-image: url("diamonds-bg.png");}

::marker {color:black;}

::selection {
	background: HotPink;
	color:Snow;
}

.WIP { /*Imagen Neptune WIP*/
	display: block;
	margin: auto;
	background: linear-gradient(145deg, #ffffff, #7898ab);
	border-radius: 0px;
	box-shadow: 9px 9px 5px #7898ab,
             -9px -9px 5px #E6ECEF;}

.FAV { /*Icono estrella favoritos*/
	margin: 0px 0px 0px 7.5px;
	width: 1.5%;
}

.parent {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(6, 1fr);
		gap: 8px;
		}   
	.div1 {
		grid-column: span 2 / span 2;
		grid-row: span 5 / span 5;
		margin:10px 0px 0px 20px;
	}
	.div2 {
		grid-row: span 3 / span 3;
		grid-column-start: 3;
		margin:20px -8px 0px 0px;
		border:3px ridge white;
		border-right-style:none;
		background-color:rgba(248, 248, 255, 0.25);
	}
	.div3 {
		grid-row: span 3 / span 3;
		grid-column-start: 4;
		margin:20px 15px 0px 0px;
		border:3px ridge white;
		border-left-style:none;
		background-color:rgba(248, 248, 255, 0.25);
	}
	.div4 {
		grid-column: span 3 / span 3;
		grid-row: span 3 / span 3;
		grid-column-start: 5;
		margin:10px 0px 0px 0px;
	}
	.div5 {
		grid-column: span 5 / span 5;
		grid-row: span 3 / span 3;
		grid-column-start: 3;
		grid-row-start: 4;
		margin:10px 36px 15px 0px;
		border:3px dashed rgb(210, 180, 140);
		text-align:center;
		background-color: #FAF0E6;
		background-image: url("lined-paper.png");	
}