/* ========================================= */
/* CONFIGURACIÓN GENERAL */
/* ========================================= */

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background-color: #000000;

    color: #ffffff;

    font-family:
        "Courier New",
        Courier,
        monospace;
}



/* ========================================= */
/* ESTRUCTURA PRINCIPAL */
/* ========================================= */

.page-container {

    width: 90%;
    max-width: 1200px;

    margin: 40px auto;

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr)
        90px;

    gap: 40px;

    align-items: start;
}



/* ========================================= */
/* BARRA IZQUIERDA */
/* ========================================= */

.left-sidebar {

    width: 100%;

    min-height: 520px;

    padding: 20px;

    border: 3px solid #ff1c2f;

    background-color: #000000;
}



/* ========================================= */
/* IMAGEN DE PERFIL */
/* ========================================= */

.profile-container {

    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    margin-bottom: 35px;
}


.profile-image {

    width: 120px;

    height: 120px;

    display: block;

    object-fit: cover;

    object-position: center;
}



/* ========================================= */
/* MENÚ IZQUIERDO */
/* ========================================= */

.main-menu {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.menu-button {

    width: 100%;

    min-height: 45px;

    padding: 10px;

    background-color: #000000;

    color: #ffffff;

    border: 2px solid #ffffff;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    cursor: pointer;
}



/* ========================================= */
/* CONTENIDO CENTRAL */
/* ========================================= */

.main-content {

    width: 100%;

    min-height: 520px;

    padding: 10px 5px;

    background-color: #000000;

    color: #ffffff;
}


.main-content h1 {

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.2;

    font-weight: bold;
}


.title-line {

    width: 75%;

    height: 2px;

    margin-top: 30px;
    margin-bottom: 35px;

    background-color: #ffffff;
}


.main-content p {

    margin-top: 0;
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.6;
}



/* ========================================= */
/* REDES SOCIALES */
/* ========================================= */

.social-sidebar {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 35px;

    padding-top: 10px;
}


.social-button {

    width: 70px;

    height: 70px;

    padding: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    background-color: #000000;

    color: #ffffff;

    border: 3px solid #ffffff;

    border-radius: 50%;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;
}



/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media screen and (max-width: 800px) {

    .page-container {

        width: 92%;

        margin: 20px auto;

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .left-sidebar {

        min-height: auto;
    }


    .main-content {

        min-height: auto;
    }


    .social-sidebar {

        flex-direction: row;

        justify-content: center;

        flex-wrap: wrap;
    }


    .main-content h1 {

        font-size: 32px;
    }


    .title-line {

        width: 100%;
    }

}