html *
{
    font-family: "Gabarito", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

header{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

main{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

footer{
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: solid 1px black;
}

.footer-content{
    max-width: 1080px;
    margin-left: 5px;
    margin-right: 5px;
}

.profile-container{
    width: 200px;
    height: 200px;
}

.profile-container img{
    width: 200px;
}

.header-text{
    width: 100%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-text-main{
    font-size: 2em;
}

.link-container{
    width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh; /* Esto asegura que el contenedor ocupe toda la altura de la pantalla */
}

.header-link{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.2em;
}

.clean-link{
    text-decoration: none;
    color: black;
}

.header-link {
position: relative;
display: inline-block; /* Necesario para que el subrayado se ajuste al texto */
color: black;
text-decoration: none; /* Quita subrayado por defecto */
cursor: pointer;
}

.header-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px; /* Grosor del subrayado */
background-color: blue; /* Color del subrayado */
transition: width 0.3s ease; /* Suaviza la animación */
}

.header-link:hover::after {
width: 100%; /* Expande el subrayado de izquierda a derecha */
}

.link-alonsoropaloca{
    margin-top: 300px;
}

.content{
    border: solid 1px black;
    flex-grow: 1;
    padding: 20px;
    padding-bottom: 200px;
}

@media all and (max-device-width: 850px) {
    .link-container {
        display: flex; /* Activa el comportamiento de Flexbox */
        flex-direction: row; /* Asegúrate de que los elementos estén en una fila */
        justify-content: space-between; /* Espacio uniforme entre los elementos */
        align-items: stretch; /* Alineación vertical */
        width: 100%; /* Ocupa todo el ancho del contenedor */
        background-color: white; /* Fondo blanco */
        z-index: 2;
        height: auto;
    }
    
    .header-link {
        flex: 1; /* Cada enlace ocupa el mismo espacio proporcional */
        text-align: center; /* Centra el texto dentro del enlace */
        margin: 0; /* Espaciado lateral entre enlaces */
        font-size: 0.8em; /* Tamaño de fuente */
        padding: 10px; /* Espaciado interno */
        border: solid 1px black; /* Borde negro */
    }

    .link-alonsoropaloca{
        margin: 0;
    }

    main{
        display: flex;
        flex-direction: column;
    }

    .header-text-main{
        font-size: 1.5em;
    }

    .profile-container img{
        width: 100%;
    }

    .profile-container{
        width: 70%;
        height: auto;
    }

    footer{
        background-color: white;
        position: relative;
        width: 100%;
        border-top: solid 1px black;
    }
}

.bg-black{
    background-color: black;
}

.link{
    text-decoration: none;
    color: blue;
}

.content-container{
    padding-bottom: 200px;
}

.parrafo{
    text-align: justify;
}

.imagen{
    width: 85%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.imagen img{
    width: 100%;
}

.double-image div{
    display: flex;
    justify-content: space-between;
}

.double-image div img{
    width: 48%;
}

.small-imagen{
  width: 50%;
}

.pie-de-foto{
    margin-top: 5px;
    font-size: 0.9em;
}