@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);
}
#contenedor {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#atras {
	width: 8%;
	margin-top: 1%;
}
#atras, ul, li, a {
	list-style-type: none;
	display: flex;
	max-height: 4em;
	gap: 1em;
	flex: 1 1 0;
	color: #000000;
	align-items: center;
	text-decoration: none;
        padding: 0;
        padding-right: 0.5em;
        font-family: 'FreeMonoBold';
	user-select: none;
        font-size: 1.1em;
}
#atras a {
	border: solid;
}
.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;
}
img {
	max-width: 90%;
	max-height: 90%;
}

#flecha {
	font-size: 4em;
        transition-duration: 0.2s;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.botones:hover #flecha{
        transition-duration: 0.2s;
	font-size: 5em;
}

.unesconder {
    -webkit-animation: cssAnimation 2s forwards; 
    animation: cssAnimation 2s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}