body {
			font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #FFFFFF;
			display: flex; /* Utiliza flexbox para organizar los elementos */
		        justify-content: space-between; /* Distribuye el espacio entre los elementos */
		        align-items: flex-start; /* Alinea los elementos en la parte superior */
		}
		header {
			color: #000000;
			padding: 10px;
			text-align: center;
		}
		main {
			padding: 20px;
			color: #000000;
			margin: 0;
			padding-left: 100px; /* Agrega un espacio de 10px a la izquierda del texto */
			padding-right: 100px; /* Agrega un espacio de 10px a la derecha del texto */
			text-align: justify; /* Justifica el texto dentro del párrafo */
			align-items: center;
			justify-content: center;
		}
		footer {
			color: #000000;
			padding: 10px;
			text-align: center;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		hr {
			border: none; /* Elimina el borde predeterminado de la línea */
		        background-color: black; /* Establece el color de fondo de la línea */
		        height: 4px; /* Establece la altura de la línea */
		        width: 80%; /* Establece el ancho de la línea */
		        margin: 4 auto; /* Centra la línea horizontalmente */
			border-radius: 5px; /* Agrega bordes redondeados */
		}
		
		.main-column {
			flex-grow: 1; /* La columna principal crecerá para llenar el espacio restante */
			margin-left: 180px;
		        padding: 20px;
		}

	        .aside-column {
			flex-basis: 10%; /* Establece el ancho inicial de la columna lateral */
	                padding: 20px;
			position: fixed; /* Mantiene la columna fija mientras se desplaza la página */
			max-width: 15%;
		}
		img {
			max-width: 20%; /* Establece el ancho máximo de la imagen al 50% del contenedor */
		}
		.arrow {
			position: fixed; /* Fija la posición de la flecha en la ventana del navegador */
			top: 10px; /* Alinea la flecha 20px desde la parte superior */
			left: 20px; /* Alinea la flecha 20px desde la izquierda */
			font-size: 35px; /* Tamaño de la flecha */
			cursor: pointer; /* Cambia el cursor al pasar sobre la flecha */
			transform: scaleX(-1); /* Voltea horizontalmente la flecha */
			color: black; /* Cambia el color del texto del enlace a negro */
			text-decoration: none; /* Quita el subrayado del enlace */

		}
		.section {
			text-align: justify;	
			width: 80%;
			margin: 0 auto; /* Centra la sección horizontalmente */
		        padding: 0px; /* Espaciado alrededor de la sección */
			margin-top: 0;
		}
		.sectionindex {
			text-align: justify;	
			width: 80%;
			margin: 0 auto; /* Centra la sección horizontalmente */
		        padding: 0px; /* Espaciado alrededor de la sección */
			margin-top: 0;
		}
		.sectionindex a {
            		text-decoration: none;
			color: #000000;
			margin-top: 5px;
        	}

        	.sectionindex a:hover {
            		color: #4F4F4F; /* Cambia el color del texto al pasar el cursor */
        	}
		.section2 {
			width: 80%;
			text-align: justify;	
			margin: 0 auto; /* Centra la sección horizontalmente */
		        padding: 20px; /* Espaciado alrededor de la sección */
		}

		.date {
			text-align: left;
			font-size: 16px; /* Tamaño de fuente para la fecha */
			font-weight: bold; /* Negrita para la fecha */
			margin-bottom: 0;
			margin-top: 0;
		}

		.title {
			text-align: left;
			font-size: 24px; /* Tamaño de fuente para el título */
			font-weight: bold; /* Negrita para el título */
			margin-top: 0;
		}
		
		.subtitle {
			text-align: left;
			font-size: 19px; /* Tamaño de fuente para el título */
			font-weight: bold; /* Negrita para el título */
		}

		.text {
			font-size: 16px; /* Tamaño de fuente para el texto */
			text-align: justify;
			color: #4F4F4F;
		}
		.textindex {
			font-size: 16px; /* Tamaño de fuente para el texto */
			text-align: justify;
			color: #4F4F4F;
			margin-top: 0;
		}
		.centered-image {
			display: block; /* Para que los márgenes automáticos funcionen */
			margin: 0 auto; /* Centra la imagen horizontalmente */
			max-width: 100%; /* Define el ancho máximo de la imagen */
			height: auto; /* La altura se ajusta automáticamente según el ancho */
			margin-bottom: 10px;
		}
		.textbox {
			border: 1px solid #292928; /* Define el grosor y el estilo del borde */
			padding: 5px; /* Espaciado interno del recuadro */
			width: 80%; /* Ancho del recuadro */
			margin: 0 auto; /* Centra el recuadro horizontalmente */
			border-radius: 5px; /* Bordes redondeados */
			background-color: #292928;
		}
		.code-box {
            		background-color: #292928;
            		color: #ffffff;
            		padding: 20px;
            		border-radius: 5px;
			display: inline-block;
			text-align: left;
			padding-top: 0;
        	}

        	/* Estilos para el texto con formato de código */
        	.code-text {
            	color: #FFFFFF; /* Color del texto de código */
        	}
		.container {
            		text-align: center; /* Centra el contenido */
        	}
		.indexlist {
            		list-style: none; /* Quita la numeración y los puntos */
            		margin: 0;
            		padding: 0;
        	}

        	.indexlist a {
            		text-decoration: none;
			color: #000000;
        	}

        	.indexlist a:hover {
            		color: #4F4F4F; /* Cambia el color del texto al pasar el cursor */
        	}
		.indexlist li {
			margin-top: 5px;
        	}
		.indexsublist {
			list-style-type: none; /* Utiliza círculos como puntos */
		}
		
		.indexsection2 {
			width: 80%;
			text-align: justify;	
			margin: 0 auto; /* Centra la sección horizontalmente */
		        padding: 20px; /* Espaciado alrededor de la sección */
		}
		.indexsection2 a {
            		text-decoration: none;
			color: #000000;
        	}
		.indexsection2 a:hover {
            		color: #4F4F4F; /* Cambia el color del texto al pasar el cursor */
        	}

		.video-container {
            		position: relative;
            		width: 100%; /* Ancho máximo del contenedor */
            		padding-bottom: 56.25%; /* Proporción del video (9:16) */
            		margin-top: 20px; /* Espacio superior */
            		margin-bottom: 20px; /* Espacio inferior */
        	}

        	.video-container iframe {
            		position: absolute;
            		top: 0;
            		left: 0;
            		width: 100%;
            		height: 100%;
        	}

		.customlink {
			text-decoration: none;
			color: #000000;
		}

		.customlink:hover {
			color: #4F4F4F;
		}