html{
	font-size:62.5%;
	margin:auto auto;
}
body{
	font-size:14px;
	font-family:"Garamond", Georgia, serif;
	background-color:#222222;/*darkslategrey;*/
	color:white;
}
header{
	color:#fb325a;
	text-align:center;
	font-size:4rem;
	/*text-shadow:2px 4px black;*/
}
h1{
	text-align:center;
	font-size:4rem;
	/*text-shadow:2px 4px black;*/
}
h3{
	color:cyan;
	text-align:justify;
	font-size:2rem;
	padding: 0 25rem;
	/*text-shadow:1px 2px black;*/
}
h4{
	color:khaki;
	text-align:justify;
	font-size:1.8rem;
	padding: 0 25rem;
}
.pfp{
	display:block;
	margin:0 auto;
	height:30%;
  width:30%;
  border:2px solid brown;
}
.sobre_mi{
	display:block;
	margin:0 auto;
	height:22%;
  width:22%;
  border:2px solid brown;
}
.simplexchat{
	display:block;
	margin:0 auto;
	height:20%;
  width:20%;
  border:2px solid brown;
}
 p{ 
	font-size:1.6rem;/*x-large;*/
	text-align:justify;
	padding: 0 25rem;
	/*text-shadow:1px 2px black;*/
 }
 
p .item{
	font-size:1.5rem;
	color:green;
	font-size:x-large;
	text-align:justify;
	padding: 0 25rem;
	/*text-shadow:1px 2px;*/
 }
nav{
	width:100rem;
	margin: 0 auto 0 auto;
	padding:2.5rem;
	padding-bottom:1.5rem;
	display:flex;
	justify-content:center;
	gap:4.5rem;
}
nav a{
	font-size:1.8rem;
	font-weight:bold;
	color:cyan;
	text-decoration:none;
	/*text-shadow:2px 4px black;*/
}
.link{
	font-size:1.6rem;
	color:orange;
	text-align:justify;
	/*text-shadow:1px 2px black;*/
}
.lista{
	font-size:2.5rem;
	color:orange;
	display:flex;
	justify-content:center;
	text-align:center;
}
a:hover{
	color:yellow;
	font-style:italic;
	padding:0.1rem;
	/*text-shadow:1px 2px white;*/
}
span{
	font-weight:bold;
	color:white;
	font-size:x-large;
	text-align:justify;
	text-shadow:1px 2px black;
}
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%; /* reduce el tamaño base */
    }
    body {
        font-size: 14px; /* ajusta el tamaño de fuente */
    }
    h1 {
        font-size: 3rem; /* tamaño de h1 más pequeño */
    }
    h3, h4 {
        font-size: 1.2rem; /* tamaño de h3 más pequeño */
        padding: 0 1rem; /* reducir el padding */
    }
    .pfp, .sobre_mi, .simplexchat, footer {
        flex-direction:column;
		height: 45%; /* ajustar el tamaño de los elementos */
        width: 25%; /* usar un ancho más adaptable */
    }
     .item, .link, span {
        padding: 0 1rem; /* reduce el padding */
        font-size: 1.3rem; /* ajustar tamaño de texto */
    }
	p{
		font-size:1.5rem;
        padding:0 1rem;
		text-align:left;
	}
	.lista{
		font-size:1.5rem;
		justify-content:left;
	}
    nav {
        flex-direction: column; /* cambiar a columna */
        padding: 1rem; /* ajustar padding */
    }
    a {
        font-size: 1.3rem; /* tamaño de los enlaces más pequeño */
    }
}