html{
	font-size:62.5%;
	margin:auto auto;
}
body{
	font-size:14px;
	font-family:"Garamond", Georgia, serif;
	background-color:#222222;
	color:white;
}
h1{
	text-align:center;
	font-size:4rem;
	/*text-shadow:3px 6px black;*/
	color:#fb325a;
}
h3{
	color:indianred;
	text-align:justify;
	font-size:2rem;
	padding: 0 25rem;
	/*text-shadow:1.5px 3px black;*/
}
h4{
	color:cyan;
	text-align:justify;
	font-size:1.6rem;
	padding: 0 25rem;
	/*text-shadow:1.5px 3px black;*/
}
.pfp{
	display:block;
	margin:0 auto;
	height:30%;
	width:30%;
	border:2px solid brown;
}
 p{ 
	font-size:1.5rem;
	text-align:justify;
	padding: 0 25rem;
 }
p .item{
	color:#654321;
	font-size:1.5rem;
	text-align:justify;
	padding: 0 25rem;
	/*text-shadow:1px 2px black;*/
 }
 .indicador{
	color:khaki;
	font-size:x-large;
	text-align:justify;
	padding: 0 25rem;
 }
 code{
	 color:orange;
 }
nav{
	width:100rem;
	margin: 0 auto 0 auto;
	padding:2.5rem;
	padding-bottom:1.5rem;
	display:flex;
	justify-content:center;
	gap:4.5rem;
}
a{
	font-size:2.2rem;
	font-weight:bold;
	color:cyan;
	text-decoration:none;
	/*text-shadow:2px 4px black;*/
}
.link{
	font-size:x-large;
	text-align:justify;
	/*text-shadow:1px 2px black;*/
}
a:hover{
	color:yellow;
	font-style:italic;
	padding:0.1rem;
	/*text-shadow:1px 2px black;*/
}
span{
	font-weight:bold;
	color:yellow;
	font-size:1.6rem;
	text-align:justify;
	/*text-shadow:1px 2px black;*/
}
pre{
	hite-space: pre-wrap;       /* Permite que el texto se ajuste y se rompa en la línea */
	word-wrap: break-word;       /* Permite que las palabras se rompan en la línea */
	overflow: auto;              /* Añade una barra de desplazamiento si el contenido desborda */
	max-width: x-large;             /* Asegura que el contenedor no sea más ancho que su contenedor padre */
	padding: 10px;               /* Añade un poco de espacio interior para mejorar la legibilidad */
	border: 1px solid #ccc;      /* Borde alrededor del bloque de código */
	border-radius: 5px;          /* Bordes redondeados */
	font-family: 'Courier New', Courier, monospace; /* Fuente monoespaciada para el código */
	line-height: 1.5;            /* Espaciado entre líneas */
	margin: 10px 0;              /* Margen alrededor del bloque de código */
	text-align: left; 	
}
code{
	display: block;              /* Asegura que el código se comporte como un bloque */
	white-space: pre-wrap;       /* Permite que el texto se ajuste y se rompa en la línea */
	word-wrap: break-word;       /* Permite que las palabras se rompan en la línea */
}
hr{
  color:grey;
}

footer{
	display:flex;
	margin:0 auto;
	justify-content:center;
	padding-top:1rem;
	height:40%;
    width:40%;
	gap:1rem;
	padding-bottom:1.5rem;
}
.badge{
	box-shadow:1.2px 1px grey;
}
/*Media Querys*/
@media only screen and (max-width: 768px) {
    html {
        font-size: 50%; /* Ajusta tamaño base para pantallas pequeñas */
    }
    body {
        font-size: 14px; /* Ajusta tamaño de fuente general */
    }
    h1 {
        font-size: 2.5rem; /* Reduce tamaño de h1 */
    }
    h3, h4, p, .item, .indicador, .link, span {
        font-size: 1.4rem; /* Tamaño más manejable para textos */
        padding: 0 1rem; /* Reduce el padding */
    }
    .pfp {
        width: 50%; /* Ampliar para llenar mejor la pantalla */
        height: auto; /* Mantiene la proporción */
    }
    nav {
        flex-direction: column; /* Cambia a dirección vertical */
        padding: 1rem; /* Ajusta el padding */
        width: 100%; /* Para ajustar completamente */
    }
    a {
        font-size: 1.5rem; /* Tamaño más pequeño para enlaces */
        padding: 0.5rem; /* Aumentar área clickeable */
    }
	p {
		font-size:1.5rem;
        padding:0 1rem;
		text-align:left;
	}
    pre {
		white-space: pre-wrap;       /* Permite que el texto se ajuste y se rompa en la línea */
		word-wrap: break-word;       /* Permite que las palabras se rompan en la línea */
		overflow: auto;              /* Añade una barra de desplazamiento si el contenido desborda */
		max-width: 100%;             /* Asegura que el contenedor no sea más ancho que su contenedor padre */
		padding: 10px;               /* Añade un poco de espacio interior para mejorar la legibilidad */
		border: 1px solid #ccc;      /* Borde alrededor del bloque de código */
		border-radius: 5px;          /* Bordes redondeados */
		font-family: 'Courier New', Courier, monospace; /* Fuente monoespaciada para el código */
		font-size: 14px;             /* Tamaño de fuente */
		line-height: 1.5;            /* Espaciado entre líneas */
		margin: 10px 0;              /* Margen alrededor del bloque de código */
		text-align: left; 
}

	code {
		display: block;              /* Asegura que el código se comporte como un bloque */
		white-space: pre-wrap;       /* Permite que el texto se ajuste y se rompa en la línea */
		word-wrap: break-word;       /* Permite que las palabras se rompan en la línea */
}

    footer {
        flex-direction: column; /* Cambia a dirección vertical */
		height: 45%;
        width: 25%; /* Ajusta el ancho */
    }
}