html{
	font-size:62.5%;
	margin:auto auto;
}
body{
	font-size:16px;
	font-family:monospace;
	background-color:darkslategrey;
	color:khaki;
}
h1{
	text-align:center;
	font-size:4rem;
	text-shadow:2px 4px black;
}
h3{
	color:white;
	text-align:justify;
	font-size:1.4rem;
	padding: 0 25rem;
	text-shadow:1px 2px black;
}
.pfp{
	display:block;
	margin:0 auto;
	height:40%;
  width:40%;
  border:2px solid khaki;
  box-shadow:2.5px 5px black;
}
.sobre_mi{
	display:block;
	margin:0 auto;
	height:30%;
  width:30%;
  border:2px solid khaki;
  box-shadow:2.5px 5px black;
}
.simplexchat{
	display:block;
	margin:0 auto;
	height:30%;
  width:30%;
  border:2px solid khaki;
  box-shadow:2.5px 5px black;
}
 p{ 
	font-size:x-large;
	text-align:justify;
	padding: 0 25rem;
	text-shadow:1px 2px black;
 }
 
 .item{
	color:cyan;
	font-size:x-large;
	text-align:justify;
	padding: 0 25rem;
	text-shadow:1px 2px indianred;
 }
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.5rem;
	font-weight:bold;
	color:white;
	text-decoration:none;
	text-shadow:2px 4px black;
}
.link{
	font-size:x-large;
	text-align:justify;
	text-shadow:1px 2px black;
}
a:hover{
	color:indianred;
	font-style:italic;
	background-color:navy;
	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;
}
/*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 {
        font-size: 1.2rem; /* tamaño de h3 más pequeño */
        padding: 0 1rem; /* reducir el padding */
    }
    .pfp, .sobre_mi, .simplexchat, footer {
        height: 50%; /* ajustar el tamaño de los elementos */
        width: 90%; /* usar un ancho más adaptable */
    }
    p, .item, .link, span {
        padding: 0 1rem; /* reduce el padding */
        font-size: 1rem; /* ajustar tamaño de texto */
    }
    nav {
        flex-direction: column; /* cambiar a columna */
        padding: 1rem; /* ajustar padding */
    }
    a {
        font-size: 1.5rem; /* tamaño de los enlaces más pequeño */
    }
}