@charset 'utf-8';

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'IBM Plex Serif', serif;
}

html, body
{
    width: 100%;
    height: 100vh;
    font-size: 16px;
}

body
{
    display: flex;
    flex-wrap: nowrap;
}

img
{
    max-width: 100%;
}

h1
{
    font-size: 1.5em;
}

h2
{
    font-size: 1.25em;
}

h3
{
    font-size: 1.1em;
}

header
{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px 0;
    background-color: transparent;
    font-style: italic;
    font-size: 1.2rem;
    text-align: right;
    line-height: 1;
    color: #dcb991;
    transition: 500ms, background-color 2000ms ease 2500ms;
}

.pronto header
{
    padding: 20px;
    background-color: #fcfcfc;
}

#imgPerfil
{
    cursor: pointer;
    position: relative;
    max-width: 200px;
    margin: 20px 0;
    border: 3px solid;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: 1000ms ease;
}

#imgPerfil::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.5);
}

#imgPerfil img
{
    opacity: 0;
    transition: 3000ms ease;
}

.pronto #imgPerfil
{
    opacity: 1;
}

.pronto #imgPerfil img
{
    opacity: 1;
}

#storyPerfil
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    background: linear-gradient(to top, #dcb991, rgba(220, 185, 145, 0.25)), linear-gradient(to top, rgba(255,255,255,0.5), rgba(255,255,255,1));
}

#storyPerfil img
{
    max-width: 100%;
    max-height: 100vh;
}

.fechar
{
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    user-select: none;
}

header h1
{
    position: relative;
    bottom: -15px;
    opacity: 0;
    transition: 1000ms ease, color 5000ms ease;
}

.pronto header h1
{
    bottom: 0;
    color: #555;
    text-align: center;
    opacity: 1;
}

header h1 span
{
    display: inline-block;
    overflow: hidden;
}

#corpo
{
    flex: 1;
    min-width: 0;
    max-width: 0;
    height: 100vh;
    padding: 20px;
    overflow-x: visible;
    overflow-y: auto;
    opacity: 0;
    transition: 3000ms ease 1500ms, opacity 1500ms ease 3200ms;
}

.pronto #corpo
{
    min-width: 75%;
    max-width: 75%;
    opacity: 1;
}

#corpo h1, #corpo h2, #corpo h3, #corpo .item-observacoes
{
    margin-bottom: 0.5em;
}

div.instituicao
{
    padding-left: 5px;
    border-left: 5px solid;
}

div.instituicao:nth-of-type(n + 2)
{
    margin-top: 1em;
}

.instituicao > div:nth-of-type(n + 2)
{
    margin-top: 0.75em;
}

#corpo h2 span
{
    padding: 0 3px;
    background-color: black;
    color: white;
}

.curso, .cargo
{
    display: inline-block;
    border-bottom: 3px solid;
}

.item-observacoes:nth-of-type(n + 2)
{
    margin-top: 0.75em;
}

.item-observacoes a
{
    color: white;
}

.item-observacoes a:hover, .item-observacoes a:visited
{
    color: #dcb991;
}

#corpo p
{
    margin-top: 0.1em;
    margin-bottom: 0.5em;
    text-align: justify;
    line-height: 1.75;
}

#corpo p::first-letter
{
    font-size: 1.05em;
    font-weight: 700;
}

#corpo hr
{
    margin: 3em 0;
    border: 0;
    border-bottom: 1px solid lightgray;
}

.projetos
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.projetos > h1
{
    min-width: 100%;
}

.projetos > .projeto
{
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 20%;
    max-width: 20%;
    padding: 0 20px;
    text-align: center;
}

.projetos .logoProjeto
{
    cursor: pointer;
    position: relative;
    max-width: 150px;
    margin: 0 0 20px;
    border: 3px solid;
    border-radius: 50%;
    overflow: hidden;
    transition: 1000ms ease;
}

.projetos .logoProjeto::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.5);
}

.projetos .modal-projetos
{
    display: none;
    align-items: flex-end;
    opacity: 0;
    overflow: hidden;
    z-index: 1000;
}

.carrossel
{
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100vh;
}

.carrossel .setas
{
    cursor: pointer;
    position: absolute;
    display: inline-flex;
    align-items: center;
    width: 10%;
    height: 100%;
    font-size: 5em;
    opacity: 0.5;
    user-select: none;
    transition: 300ms ease;
}
.carrossel .setas:hover
{
    opacity: 1;
}

.carrossel .seta-esquerda
{
    left: 0;
    justify-content: flex-start;
}

.carrossel .seta-direita
{
    right: 0;
    justify-content: flex-end;
}

.rolagem
{
    position: absolute;
    left: 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    transition: 300ms ease;
}

.rolagem figure
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.rolagem figure img
{
    max-width: 85%;
    max-height: 85%;
}

.rolagem figure figcaption
{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 7.5% 20px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    text-align: justify;
}

.rolagem figure figcaption:empty
{
    display: none;
}

@media (min-width: 901px) and (max-width: 1125px)
{
    .projetos > .projeto
    {
        min-width: 25%;
        max-width: 25%;
        padding: 10px;
    }
    
}

@media (min-width: 700px) and (max-width: 900px)
{
    .pronto #corpo
    {
        min-width: 65%;
        max-width: 65%;
    }
    
    .projetos > .projeto
    {
        min-width: 50%;
        max-width: 50%;
        padding: 10px;
    }
}

@media (min-width: 550px) and (max-width: 699px)
{
    body > *
    {
        padding: 10px !important;
    }
    
    .pronto #corpo
    {
        min-width: 60%;
        max-width: 60%;
    }
    
    .projetos > .projeto
    {
        min-width: 50%;
        max-width: 50%;
        padding: 10px;
    }
}

@media (max-width: 549px)
{    
    body.pronto
    {
        flex-direction: column;
    }
    
    body > *
    {
        padding: 10px !important;
    }
    
    header h1
    {
        font-size: 1.5em;
    }
    
    .pronto header h1
    {
        font-size: 1.5em;
    }
    
    #imgPerfil
    {
        width: 100px;
        height: 100px;
        margin: 0;
    }
    
    #imgPerfil::after
    {
        box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5);
    }
    
    #corpo
    {
        max-width: 100%;
        min-width: 100%;
        min-height: 0;
        max-height: 0;
    }
    
    .pronto #corpo
    {
        max-width: 100%;
        min-width: 100%;
        min-height: calc(100vh - 180px);
        max-height: calc(100vh - 180px);
    }
    
    .projetos > .projeto
    {
        min-width: 50%;
        max-width: 50%;
        padding: 10px;
    }
}

@media print
{
    .naoImprimir
    {
        display: none;
    }   

    *
    {
        transition: none !important;
        orphans: 3;
        widows: 3;
        break-before: always;
    }
    
    body.pronto
    {
        display: block !important;
        height: fit-content;
    }
    
    body > *
    {
        padding: 20px !important;
    }
    
    header
    {
        height: min-content !important;
        padding-top: 0 !important;
    }
    
    header h1
    {
        display: inline-flex;
    }
    
    header h1 span:first-child
    {
        margin-right: 0.25em;
    }
    
    .esconder
    {
        margin: auto !important;
    }
    
    #imgPerfil
    {
        width: 4cm;
        height: 4cm;
        margin: 0;
    }
    
    .instituicao
    {
        widows: 3;
        orphans: 3;
        break-inside: avoid;
    }
    
    #corpo
    {
        min-width: 100% !important;
        height: fit-content;
        overflow: visible;
    }
    
    .instituicao > div
    {
        break-inside: avoid;
    }
    
    .item-observacoes a:hover, .item-observacoes a:visited
    {
        color: white;
    }
}

@page
{
    counter-reset: page 1;
    @bottom-right {
        counter-increment: page;
        content: counter(page) " de " counter(pages);
    }
}