body {
    margin-top: 60px;
}

header {
    background-color: #ccc;
    position: fixed;
    top: 0;
    z-index: 2;
}

header #userbox,
header #userbox .userinfo .userimage {
    background-size:115%;
    background-position: 50% 50%;
}

header #userbox {
    background-image: url('../../media/images/users/user-1/avatar_min.webp');
}

header #userbox .userinfo .userimage {
    width: 200px;
    height: 200px;
    margin: auto;
    margin-top: 5px;
    border: 4px solid white;
    outline: 3px solid rgba(var(--theme-light-acent-color_), 0.75); 
    box-shadow: 0 0px 10px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
    background-image: url('../../media/images/users/user-1/avatar.webp');
}

header #userbox .userinfo h2 {
    margin-bottom: 0;
    text-align: center;
}

header #userbox .userinfo .profile {
    margin-top:4px;
    text-align: center;
}

header #userbox .userinfo ul {
    padding: 0px;
    margin: 0px
}
header #userbox .userinfo ul li {
    list-style: none;
    margin-top: 10px;
}
header #userbox .userinfo ul li a {
    text-decoration: none;
    display: block;
}

#content {
    display: grid;
    grid-template-columns: 0px auto;
    grid-gap: 0px;
    grid-template-areas: 'aside main';
    position: relative;
}

/* Menú lateral ASIDE */
#content aside {
    grid-area: aside;
    position: fixed;
    z-index: 1;
    left: -200px;
    top: 60px;
    bottom: 0px;
    width: 225px;
    background-color: #ccc;
    transition: all 0.3s ease-in-out;
    display: grid;
    grid-template-columns: auto 25px;
    grid-template-rows: 40px auto;
    grid-gap: 0px;
    grid-template-areas:
        'title button'
        'links button';
    align-items: start;
}
#content aside.active {
    left: 0px;
}

#content aside .title {
    grid-area: title;
    text-align: center;
    width: fit-content;
    width: -webkit-fill-available;
    width: -moz-available;
    height: fit-content;
    height: -webkit-fill-available;
    height: -moz-available;
    display: flex;
    align-items: center;

}
#content aside .title h3 {
    margin: 8px auto 2px;
}

#content aside div.button {
    grid-area: button;
    display: grid;
    margin: auto;
    cursor: pointer;
    width: fill-available;
    width: -webkit-fill-available;
    width: -moz-available;
    height: fill-available;
    height: -webkit-fill-available;
    height: -moz-available;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    background-color: #99999966;
}

#content aside.active div.button {
    transform: scaleX(-1);
}

/* Contenido MAIN */
#content main {
    grid-area: main;
    max-width: fill-available;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    margin: 20px;
    margin-left: 40px;
    padding: 0;
}

#content main section h2 {
    text-align: center;
}



body>footer>div {
    margin-left: 20px;
}

@media screen and (min-width: 570px) {
    #content {
        grid-template-columns: 220px auto;
    }
    
    #content aside {
        position: relative;
        left: unset;
        top: unset;
        grid-template-areas:
            'title title'
            'links links';
        grid-template-columns: auto 0px;
    }
    #content aside div.button {
        display: none;
    }
    #content main {
        margin-left: 20px;
    }
    body>footer>div {
        margin-left: 0px;
    }
}