/*** VARIABLES ***/

:root {
	--container-background: linear-gradient(#503965, #6f4e8b);
	--container-shadow: 10px 10px 5px #0d0c0ea1;
	--list-bullets: url("../imagenes/thinking-cat.gif");
}

/*** REINICIO DE PROPIEDADES ***/

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

/*** BODY Y REGLAS GENERALES ***/

body {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	min-height: 100vh;
	max-width: 80%;
	background-image: url("../imagenes/glitchy2.jpg");
	background-repeat: repeat;
	background-color: #ccc;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

a:link {
	color: #2690e1;
}

a:visited {
	color: #b089e3;
}

hr {
	margin-top: 2%;
}

/** CABECERA Y NAVEGACION **/

header {
	/* position: fixed; */
	width: 95%;
	margin: 2%;
	/* padding: 0.5%; */
	background-color: #ccc;
	border-style: outset;
	text-align: center;
}

.menus li {
	padding: 0 0 0 2%;
	list-style-type: none;
	display: inline-block;
}

.menus li a {
	color: #551A8B;
	text-decoration: none;
}

#activa {
	color: black;
	font-weight: bold;
	text-decoration: none;
}

/** MAIN **/

.parent {
	display: grid;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	width: 95%;
	margin: 2%;
}

/** MAIN DE INDEX **/

#index-main {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, minmax(300px, auto));
}

.index-containers {
	border-style: ridge;
	box-shadow: var(--container-shadow);
}

/* CONTENEDORES DE INDEX */

#div1 {
	grid-area: 1 / 1 / 2 / 2;
	background: url("../imagenes/coco.jpg") center / cover no-repeat;
}

#bienvenido {
	display: block;
	margin: 0 auto;
	text-align: center;
}

#bienvenido h1,
#contenedor-error h1 {
	text-shadow: 4px 3px 0px #000;
	color: #8c4ca1;
	font-family: "Rubik Bubbles", Arial, sans-serif;
	font-size: 200%;
	margin: 2%;
}

#div2 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	grid-area: 2 / 1 / 3 / 2;
	background-color: #212121;
}

#div2 div:first-of-type {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-image: var(--container-background);
}

#listening img {
	width: 100%;
}

#div3 {
	grid-area: 1 / 2 / 3 / 4;
	background-image: var(--container-background);
}

#div3 div {
	margin: 5% 2%;
}

#div3 ul li {
	list-style: var(--list-bullets);
	list-style-position: inside;
}

#div4 {
	display: flex;
	flex-direction: column;
	align-content: space-around;
	grid-area: 1 / 4 / 3 / 5;
	background-image: var(--container-background);
}

#div4 div {
	padding: 2%;
	margin: 5% 2%;
}

#div4 div:last-of-type {
	margin: auto;
}

#div4 p {
	font-weight: bolder;
}

#div4 ul li {
	list-style-position: inside;
}

/* CONTENIDO DE LAS PAGINAS */

.contenido {
	/*column-count: 4;
	column-gap: 1%;
	column-rule-style: solid;*/
	/* lo de arriba sirve para cuando tenga más tipos de páginas web para organizar */
	/* top: 12%; */
	min-height: 80%;
	width: 95%;
	/* position: relative; */
	margin: 0.5% 2%;
	padding: 1%;
	background-image: var(--container-background);
	border-style: ridge;
	box-shadow: var(--container-shadow);
}

/* TABLA DEL ARCHIVO historial.html */

.tabla_historial {
	margin: 0.5% auto;
	width: 80%;
}

.tabla_historial table,
th,
td {
	border: 1px outset #fff;
	border-collapse: collapse;
	color: black;
}

.tabla_historial th,
td {
	padding: 0.1%;
	background-color: #ccc;
	text-align: center;
}

/* IMAGENES DE sobre.html */

.imagenes-sobre {
	text-align: center;
}

/* IMAGENES DECORATIVAS */

#coco {
	display: block;
	margin: 0 auto 2% auto;
	width: 10%;
}

#mago {
	position: fixed;
	bottom: 2%;
	right: 2%;
}

#vegeta {
	position: absolute;
	bottom: 90%;
	right: 5%;
}

#pinguino {
	display: block;
	margin-left: auto;
	padding: 1%;
}

/* PIE DE PAGINA */

.pie_de_pagina {
	bottom: 0;
	position: relative;
	margin: auto 2% 1% 2%;
	/* padding: 0.5%; */
	background-color: #ccc;
	border-style: outset;
	text-align: center;
	color: black;
}

/* CONTENEDOR DE LA PAGINA WEB DE ERROR */

#contenedor-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

#volver {
	margin-top: 10%;
}

/** MAIN DE SOBRE **/

#sobre-main {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, minmax(300px, auto));
}

#div1-s {
	display: flex;
	align-content: stretch;
	justify-content: space-evenly;
	align-items: flex-start;


	aspect-ratio: 1 / 1;
	grid-area: 1 / 1 / 2 / 2;
	background: url("../imagenes/ranita_leila-transparent.png") center / cover no-repeat;
	cursor: pointer;
}

#div1-s:hover {
	animation: shake 2s;
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}

	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

#div2-s {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2%;
	grid-area: 2 / 1 / 3 / 4;
	background-image: var(--container-background);
}

#div3-s {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	grid-area: 1 / 2 / 2 / 4;
	background-image: var(--container-background);
}

#div3-s ul li {
	list-style: var(--list-bullets);
	list-style-position: inside;
}

#div4-s {
	grid-area: 1 / 4 / 3 / 5;
	background-image: var(--container-background);
}

#div4-s div {
	padding: 2%;
	height: 50%;
}

#div4-s div:first-of-type {
	border-bottom: ridge;
	overflow-y: auto;
}

#div4-s div h3:first-child {
	text-align: center;
}

/*** MEDIA QUERIES ***/

@media screen and (width <=950px) {

	/* MEDIA DE index.html */
	.parent {
		display: flex;
		flex-direction: column;
	}

	#div1 {
		display: none;
	}

	#div2 {
		order: 1;
	}

	#div3 {
		order: 0;
	}

	#div4 {
		order: 2;
	}
}