@import url(../main.css);
@import url(../base-style.css);
@import url(../structures/basic-layout.css);
@import url(../components/buttons.css);
@import url(../components/slider.css);
@import url(../components/background-carousel.css);

#About
{
    height: 100%;
}

#About > .box.right
{
    grid-column: pos-division 2 / pre-last;
}

#About > .box.left
{
    grid-column: pos-first / pre-division 1;
}
#About .avatar
{
    display: flex;
    align-items: stretch;
    pointer-events: none;
}

#About .avatar a
{
    display: flex;
    flex-grow: 2;
    flex-shrink: 0;
    pointer-events: none;
    overflow: hidden;
    margin: 0;
    justify-content: center;
    transition: all .3s var(--base-easing);
}

#About .avatar img
{
    position: absolute;
    height: 50%;
    pointer-events: all;
    cursor: pointer;
    transition: inherit;
}

#About .avatar#LucianaPhoto img
{
    top: 0;
}

#About .avatar#FernandaPhoto img
{
    top: 50%;
}


#About .resume
{
    /* --title-color: var(--background);
    --text-color: var(--background); */
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--background);
    grid-row: pos-first / pre-last;
    padding: var(--default-outside-vertical-margin) var(--default-outside-horizontal-margin);
    box-sizing: border-box;
    margin-top: calc(var(--default-outside-vertical-margin) * -1);
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: all .3s var(--base-easing);
}

#About #LucianaResume.resume
{
    justify-content: start;
}


#About #ArtInBrackets
{
    --text-color: var(--title-color);
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--half-gap);
    box-sizing: border-box;
    overflow: auto;
}

#About .avatar:focus a,
#About .avatar a:hover,
#About .avatar a:focus-within
{
    margin: var(--default-outside-vertical-margin) 0;
}

#About .avatar:focus img,
#About .avatar a:hover img,
#About .avatar a:focus-within img
{
    height: 100%;
    top: 0 !important;
}


#About .avatar:hover + .resume,
#About .avatar:focus + .resume,
#About .avatar:focus-within + .resume,
#About .avatar + .resume:hover,
#About .avatar + .resume:focus-within
{
    pointer-events: all;
    opacity: 1;
    margin-top: 0;
}

@media (max-width: 1024px) {
    #About > .box.left
    {
        grid-column: first / division 1;
    }   

    #About > .box.right
    {
        grid-column: division 2 / last;
    }   

    #About .resume
    {
        grid-row: pre-first / pos-last;
    }

    #About .avatar:focus a,
    #About .avatar a:hover,
    #About .avatar a:focus-within
    {
        margin: var(--default-outside-vertical-margin) var(--default-outside-horizontal-margin);
    }
}

@media (max-width: 800px) {
    #About
    {
        --row-height: max-content;
    }

    #About #ArtInBrackets
    {
        overflow: unset;
    }

    #About .avatar
    {
        border-radius: 100%;
        overflow: hidden;
        height: max-content;
    }

    #About .avatar::before
    {
        content: '';
        display: block;
        padding-bottom: 100%;
    }

    #About > .avatar.box.left,
    #About > .avatar.box.right
    {
        grid-column: pos-division 1 / pre-division 2;
    }

    #About .avatar img
    {
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #About .avatar#FernandaPhoto img
    {
        top: 0;
    }

    #About .resume
    {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #About .resume.box.left,
    #About .resume.box.right
    {
        grid-row: unset;
        grid-column: pre-first / pos-last;
        top: 0;
    }

    #About #ArtInBrackets ~ *
    {
        margin-top: var(--row-gap);
    }

    #About .avatar:focus a,
    #About .avatar a:hover,
    #About .avatar a:focus-within
    {
        margin: 0;
        border: 7px solid var(--text-color);
        border-radius: inherit;
    }

    #About .avatar:hover + .resume,
    #About .avatar:focus + .resume,
    #About .avatar:focus-within + .resume
    {
        max-height: 10000px;
        padding-top: var(--default-outside-vertical-margin);
        padding-bottom: var(--default-outside-vertical-margin);
    }
}

@media (max-width: 540px) {
    #About > .avatar.box.left,
    #About > .avatar.box.right
    {
        grid-column: pos-middle 1 / pre-middle-last;
    }
}