* {
    outline: transparent;
}

/*Estilo do scroll*/
::-webkit-scrollbar {
    width: 3px;
}

/*Estilo do corpo do site(plano de fundo, fontes e alinhamento)*/
body {
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    align-items: center;
    background:url("assets/background.jpg");
    background-size: cover ;
    background-position:bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


/*padroniza a aparencia de todos os links e alinha spans do site*/

span{vertical-align: middle;}
#themeset{
    position:absolute;
    padding: 5px;
    right: 0;
    top: 0;
}
#themeset button{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
        width: 35px
}

/*Organiza o corpo e o cabeçalho*/
.head-profile, .page-spacer{
    padding: 10px;
    overflow: hidden;
}
.head-profile{
    position:fixed;
    z-index: 10;
    max-width: 100%;
    margin:auto;
    left: 0;
    right: 0;
}
.page-spacer{
    padding-top: 180px;
    
}


/*Estilo do bloco principal do cabeçalho*/
.profile-info{
    left: 0;           
    right: 0;
    z-index: 0  ;
    width: 1200px;       
    margin: auto;      
    max-width: 100%;   
    z-index: 10000;    
    text-align: left;
    padding: 25px;
    display: block;
    gap: 20px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    max-height: 150px;
}

#profile-info-container{
    margin-bottom: 20px;
}
#profile-pic{
    height: 5rem;
    display: inline-block;
}
#myinfos{
    margin-left: 25px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}
#myrole{
    font-size: 14px;
    padding: 5px;
}

/*Botão de expandir/retrair*/
.expand-more span{
    vertical-align: middle;
}
.expand-more{
    position:absolute;
    padding: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
    font-size: 13px;
    border: 0;
    box-shadow: var(--shadow-2);
    z-index: 2;
    height:30px;
    transition: background-color 0.3s ease-in-out;
    
}
.expand-more span{
    transition: all 0.4s ease-in-out;
}

/*Mostra informações quando o botão de expandir é pressionado*/
.profile-info.active, .profile-info.active .my-info-description{
    max-height: 90vh;
    opacity: 1;
}.profile-info.active .expand-more span{
    transform: rotate(180deg);
}

/*Informações ocultas/expandivel*/
.my-info-description{
    width: 100%;
    margin-bottom: 30px;   
    opacity: 0;
    transition: opacity 0.2s linear;
    width: 100%;
}
.my-info-container{
    display: flex;
    flex-wrap: wrap;
}
.my-info-description h3{
    position: relative;
    font-weight: 500;
}
.infos-p{
    margin-bottom: 5px;
    padding:3px;
}

.contact-info{
    flex: 1;
    width: 1000px;
    max-width: 100%;
}
.social-links{
    flex: 1;
    height: 100%;
    text-align: center;
    top:0;
    bottom: 0;
    margin: auto;
}

/*Separador*/
.separator{
    height: 1px;
    margin: 10px;
}

/*Estilo dos botões sociais*/
.circular-buttons, svg{
    height: 30px;
    width: 30px; 
}
.circular-buttons{
    vertical-align: top;
    padding: 16px 10px;
}


/*Animação de gradiente*/
@keyframes gradientanim {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*Modificação para mobile*/
@media (max-width:767px){
    .head-profile{
        padding: 0px;
    }
    .page-spacer{
        padding-top: 165px;
    }

    /*Muda a disposição do conteudo expandível*/
    .my-info-container{
        display: block;
    }

    /*Aumentar a margem do topo para os botões sociais*/
    .social-links{
        margin-top: 20px;
    }
    /*Reduzir Tamanho dos botões sociais*/
    .circular-buttons svg{
        height: 20px;
    }
    .circular-buttons{
        padding: 10px 4px;
    }
}