.Top-0{top: 0;}
.Top-M{top: -30px;}

.TituloPrincipal{
	text-align: center;
	font-size: 39px;
	font-weight: bold;
	color: var(--ColorMoradoNormal);
	margin-top: 70px;
	margin-bottom: 20px;
	text-shadow: 2px 2px 13px var(--ColorMoradoClaro), -2px 2px 13px var(--ColorMoradoClaro);
	-webkit-user-select: none;
}

.Contenedor, .Contenedor1{
	width: 80%;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	box-shadow: 2px 2px 3px var(--ColorGrisBajo), -2px 2px 3px var(--ColorGrisBajo);
	border-radius: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 25px;
	letter-spacing: 1px;
	text-align: justify;
}

	.Contenedor h3{
		text-align: center;
		font-size: 23px;
		font-weight: bold;
		margin-top: 20px;
	}

	.Codigo{
		font-family: "IbmPlexMono";
		padding: 10px;
		background-color: var(--ColorGrisFuerte);
		border: 3px solid var(--ColorGrisNormal);
		border-radius: 1px;
		overflow: auto;
	}

		.Codigo div{margin-top: 0; margin-bottom: 0;}
		.P{margin-left: 30px; margin-top: 0; margin-bottom: 0;}
		ll1:before{content: '<'; color: #fff; -webkit-user-select: text;}
		ll2:before{content: '>'; color: #fff; -webkit-user-select: text;}
		ll3:before{content: '</'; color: #fff; -webkit-user-select: text;}
		code{color: var(--ColorRojo); text-transform: lowercase;}
		code1{color: #04B404; margin-left: 6px; margin-right: 6px;}
		green{color: #04B404;}
		fff{color: #fff;}
		ff0{color: #FFFF00;}
		blue{color: #05CAFF; font-family: "IbmPlexMonoItalic";}
		blue1{color: #05CAFF;}
		purple{color: var(--ColorMoradoBajo);}
		gray{color: var(--ColorGrisNormal);}

	.Codigo::-webkit-scrollbar{
		width: 30px;
		background-color: #fff;
		border-left: 1px solid var(--ColorGrisNormal);
	}

	.Codigo::-webkit-scrollbar-thumb{
		width: 15px;
		background-color: #D2D4D6;
		border: 1px solid #000;
		border-radius: 3px;
	}

	.Codigo::-webkit-scrollbar-thumb:hover{background-color: var(--ColorGrisBajo);}

.Contenedor1{
	width: 70%;
	margin-top: 20px;
	margin-bottom: 20px;
}

@media screen and (max-width: 999px){

}

@media screen and (max-width: 850px){

	.BtnMor{
		width: 50%;
	}

}

@media screen and (max-width: 720px){

	.Contenedor{
		width: 100%;
	}

	footer{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

}

@media screen and (max-width: 500px){

		.BtnMenu{
			visibility: visible;
			left: 3%;
		}

		.Header ul a, .HeaLogo{
			visibility: hidden;
		}

			.Redes{
				transition: 0ms all ease;
				visibility: hidden;
			}

		.Header1 ul a{
			visibility: hidden;
		}

		.Quiero{
			width: auto;
			height: 200px;
			padding: 0;
		}

		.Quiero a, .Art a, .FooterHea a{
			width: 100%;
			height: auto;
			font-size: 14px;
		}

		.Redes1{
			visibility: visible;
			position: fixed;
			width: 70%;
			margin-left: 90px;
			margin-top: 10px;
		}

	.BtnMor{
		width: 100%;
	}

	.Codigos{
		width: 90%;
	}

	.TituloPrincipal{
		margin-top: 50px;
	}
	
	.Contenedor1{
			width: 80%;
	}

}