@font-face {    /*fuentes locales*/
        font-family: "FreeMono";
        src:
        url('media/fonts/FreeMono.otf');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: "LiberationMono";
        src:
        url('media/fonts/LiberationMono-Regular.ttf');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: "LiberationSerif";
        src:
        url('media/fonts/LiberationSerif-Regular.ttf');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: "FreeMonoBold";
        src:
        url('media/fonts/FreeMonoBold.otf');
        font-weight: bold;
        font-style: bold;
}
@font-face {
        font-family: "LiberationMonoBold";
        src:
        url('media/fonts/LiberationMono-Bold.ttf');
        font-weight: bold;
        font-style: bold;
}
@font-face {
        font-family: "LiberationSerifBold";
        src:
        url('media/fonts/LiberationSerif-Bold.ttf');
        font-weight: bold;
        font-style: bold;
}
html {
	background-color: rgba(84, 84, 84, 1);
	box-sizing: border-box;
	font-family: 'LiberationMono';
}
::selection {
	color: rgba(149, 255, 112, 0.8);
	background: rgba(255, 163, 26, 0.7);
}
a {
	user-select: none;
	text-decoration: none;
	color: #FFFFFF;
}
h1 {
	font-size: 3em;
}
h2 {
	width: 100%;
	display: flex;
	font-size: 1.2em;
}
h2::before {
	content: " ";
	height: 0.001em;
	width: 10vw;
	box-shadow: -0.2em 0.5em 0em 0.1em;
	margin: 0 0.5em;
}
h2::after {
	content: " ";
	height: 0.001em;
	box-shadow: 0.5em 0.5em 0em 0.1em;
	width: 10vw;
	margin: 0 0.5em;
	flex: 1;
}
#barra-principal {
	border-style: double;
	border-width: 0.4em;
	background-color: rgba(255, 163, 26, 0.2);
}
#barra-principal, ul, li, a {
	list-style-type: none;
	flex: 1 1 0;
	text-align: center;
	padding: 0;
	color: #000000;
	text-decoration: none;
	font-family: 'FreeMonoBold';
}
#barra-principal, ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 15%;
	font-size: 1.2em;
}
#barra-principal, li {
	padding-left: 1.5em;
	padding-right: 1.5em;
}
#grid {
	display: flex;
	flex-wrap: nowrap;
	margin-top: 1.5em;
	/* justify-content: space-evenly; */
	/* gap: 2em; */
	gap: 2%;
	/* align-content: stretch; */

	/* border-style: double; */
	/* border-color: pink; */
	/* border-width: 0.4em; */
}

#barra-lateral {
	border-style: double;
	border-width: 0.4em;
	overflow-wrap: break-word;
	/* word-break: break-all; */
	/* width: 20em; */
	/* flex: 1 20 auto; */
	/* flex: 1 20 30%; */
	/* min-width: 0; */
	/* min-height: 0; */
	/* margin: auto; */
	/* display: flex; */
	/* flex-direction: column; */
	padding: 0.5em;
	background-color: rgba(255, 163, 26, 0.2);
}
#cuerpo {
	display: flex;
	/* flex-wrap: wrap; */
	align-content: stretch;
	flex-direction: column;
	flex: 1 0 80%;
	/* flex: 1 0 auto; */

	/* max-width: 100vw; */
	/* border-style: double; */
	/* border-width: 0.4em; */
	/* border-color: pink; */
}
/* #contenido-contenedor { */
	/* border-style: double; */
	/* border-width: 0.4em; */
	/* overflow-wrap: break-word; */
	/* padding: 0.5em; */
/* } */
.contenido {
	border-style: double;
	border-width: 0.4em;
	overflow-wrap: break-word;
	line-height: 1.1em;
	padding: 0.5em;
	margin-bottom: 0.5em;
	min-width: 0;
	min-height: 0;
	background-color: rgba(255, 163, 26, 0.2);
}
.contenido:last-of-type {
	margin-bottom: 0;
}
.contenido span {
	border: solid 0.02em;
	/* background-color: rgba(255, 255, 255, 0.2); */
	background-color: rgba(149, 255, 112, 0.3);
	padding: 0.15em;
}
.contenido a {
	color: rgba(255, 163, 26, 1);
}
.contenido p:before {
	content: "\003E"; /* unicode of ">" */
	margin-right: 0.2em;
}
#titulo {
	font-family: "FreeMonoBold";
	user-select: none;
}
#images-barra{
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	min-height: 0;
}
#images-barra img {
	border-style: double;
	border-width: 0.4em;
}
#avatar {
	margin-right: 0.2em;
	width: 50%;
	height: 50%;
}
#icon {
	display: block;
	max-width: 2em;
	max-height: 2em;
	height: auto;
}
.text-barra {
	/* font-family: "FreeMonoBold"; */
	/* border-bottom-style: dotted; */
	border-style: solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	border-width: 0.15em;
	word-break: break-all;
}
.text-barra:last-of-type {
	border-bottom-style: none;
}
.text-barra img {
	vertical-align: middle;
	max-width: 8%;
	height: auto;
}
.botones {
	box-shadow: 0.2em 0.2em;
	transition-duration: 0.2s;
	border-style: solid;
	background-color: rgba(149, 255, 112, 1);
	user-select: none;
}
.botones:hover {
	box-shadow: -0.2em 0.2em;
	transition-duration: 0.2s;
	filter: brightness(0.8);
	cursor: pointer; }
#footer {
	border-style: double;
	border-width: 0.4em;
	padding: 0.3em;
	margin-top: 1.5em;
	bottom: 0;
	text-align: center;
	background-color: rgba(255, 163, 26, 0.2);
}
#footer img {
	padding-top: 0.3em;
}
#atras {
	width: 8%;
	margin-left: 1%;
	flex: 2 1 auto;
}
#atras ul li {
	list-style-type: none;
	display: flex;
	max-height: 4em;
	align-items: center;
	text-decoration: none;
        padding: 0;
        padding-right: 0.5em;
	user-select: none;
        font-size: 1.1em;
	gap: 1em;
}
#flecha-text {
	padding-left: 50%;
}
#flecha {
	font-size: 4em;
        transition-duration: 0.2s;
	position: absolute;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.botones:hover #flecha-text {
        /* transition-duration: 0.2s; */
	animation-name: flecha-text;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	/* font-size: 5em; */
}

.text-barra:hover {
	box-shadow: 0.2em 0.2em;
	border-color: transparent;
	background-color: rgba(255, 163, 26, 0.2);
}

.text-barra:hover .anim_barraL{
	animation-name: barraL_items;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.anim_titulo {
	animation-name: titulo;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.girogiro {
        transition: transform .7s ease-in-out;
}
.girogiro:hover {
        transform: rotate(360deg);
}

/* animaciones */
@keyframes titulo {
	0% {
		letter-spacing: 0em;
	}
	55% {
		letter-spacing: 0.2em;
	}
	60% {
		letter-spacing: 0.2em;
	}
	100% {
		letter-spacing: 0em;
	}
}

@keyframes barraL_items {
	0% {
		padding-left: 0%;
	}
	50% {
		padding-left: 2%;
	}
	100% {
		padding-left: 0%;
	}
}
@keyframes flecha-text {
	0% {
		padding-left: 50%;
	}
	50% {
		padding-left: 52%;
	}
	100% {
		padding-left: 50%;
	}
}