:root {
    --fundo-escuro: #000;
    --fundo-card: #1d2226;
    --fundo-card-ativo: hsla(0, 0%, 100%, 0.12);
    --texto-principal: hsla(0, 0%, 100%, 0.9);
    --texto-secundario: hsla(0, 0%, 100%, 0.6);
    --texto-escuro: hsla(0, 0%, 0%, 0.75);
    --input: #38434F;
    --primario: #70b5f9;
    --positivo: #3ec786;

    /* Fonts */
    --size-h2: 1.3em;
    --size-p: .9em;
    --size-secundario: .8em;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--fundo-escuro);
}

header {
    background-color: var(--fundo-card);
    margin-bottom: 2em;
}

.navbar {
    display: flex;
    justify-content: space-between;
    gap: 3em;
}

.navbar__left {
    min-width: 40%;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 0 1em 6%;
}

.navbar__left .navbar__search {
    width: 90%;
    display: flex;
    align-items: center;
    background-color: var(--input);
    border-radius: 3px;
    padding: .4em 1em;
}

.navbar__left .navbar__search input {
    border: none;
    outline: none;
    color: var(--texto-principal);
    background-color: transparent;
    margin-left: .8em;
}

.navbar__left .navbar__search input::placeholder {
    color: var(--texto-principal);
}

.navbar__left .navbar__search input:focus::placeholder {
    color: transparent;
}

.navbar__right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.navbar__right nav {
    width: 80%;
}

.navbar__right nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding-right: 1em;
    gap: 2em;
    justify-content: flex-end;
}

.navbar__right nav ul li a,
.navbar__right .navbar__right__solutions {
    text-decoration: none;
    color: var(--texto-principal);
    font-size: .7em;
}

.navbar__right .navbar__right__solutions {
    height: 100%;
    border-left: 1px solid var(--texto-principal);
    padding: 1em 0;
}

.navbar__right .navbar__right__solutions img,
.navbar__right .navbar__right__solutions p {

     margin-left: 1em
}

main {
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    gap: 2em;
}

.left-content {
    width: 70%;
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.user-profile {
    width: 100%; 
    min-height: 468px;
    display: flex;
    align-items: flex-end;
    gap: 1em;
    border-radius: 1rem;
    background-color: var(--fundo-card);
    background-image: url('./assets/images/Imagem\ de\ capa.jpg');
    background-repeat: no-repeat;
    background-size: 100% 45%;
    padding: 8em 2em 2em 1.5em;
    margin-bottom: 1em;
}

.user-profile__information__user-image img {
    max-width: 172px;
    min-width: 128px;
    width: 40%;
    border-radius: 50%;
    border: 5px solid var(--fundo-card);
    margin-bottom: .5em;
}

.user-profile__information h2,
.user-profile__information h2 + p,
.user-profile__career-details p,
.user-profile__information__connections,
.user-profile__information__contact  {
    margin-bottom : .5em;
}

.user-profile__information h2 {
    font-size: 1em;
}

.user-profile__information h1,
.user-profile__information h2,
.user-profile__career-details p {
    color: var(--texto-principal);
}

.user-profile__information h2 + p,
.user-profile__information__contact p {
    color: var(--texto-secundario);
}

.user-profile__information__contact a,
.user-profile__information__contact a p,
.user-profile__information__connections a,
.user-profile__information__connections a p,
.user-profile__information__actions .actions__more-button {
    color: var(--primario);
    text-decoration: none;
}

.user-profile__information h2 + p,
.user-profile__information__contact p,
.user-profile__information__connections a p,
.user-profile__information__actions .actions__more-button {
    font-size: .8em;
}

.ellipse {
    display: inline-block;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    background-color: var(--texto-secundario);
}

.user-profile__information__contact {
    display: flex;
    align-items: center;
    gap: .5em;
}

.user-profile__information__connections {
    display: flex;
    align-items: center;
    gap: 1em;
}

.user-profile__information__actions {
    display: flex;
    width: 265px;
    gap: .5em;
}

.user-profile__information__actions button {
    flex: 1;
    padding: .5em;
    border-radius: 2em;
    background-color: transparent;
    border: 1px solid var(--primario);
}

.user-profile__information__actions .actions__mensage-button {
    background-color: var(--primario);
}

.user-profile__career-details {
    min-width: 40%;
    margin-bottom: 3.2em;
}

.user-profile__career-details__career {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 1em 0;
}

.featured-content {
    width: 100%;
    flex: 1;
    background-color: var(--fundo-card);
    border-radius: 1em;
    margin-bottom: 1em;
}

.featured-content h2 {
    color: var(--texto-principal);
    margin: 1em 0 .5em 1em;
    font-weight: lighter;
    font-size: var(--size-h2);
}

.featured-content__posts {
    display: flex;
    margin: 0 1em;
    gap: .5em;
}

.featured-content__posts article {
    min-width: 30%;
    border: 1px solid var(--texto-secundario);
    border-radius: 10px;
    padding-top: 1em;
    margin-bottom: 2em;
}

.featured-content__posts article h4 {
    color: var(--texto-principal);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: .5em .9em;
    font-size: var(--size-p);
    font-weight: lighter;
}

.featured-content__posts article p {
    color: var(--texto-secundario);
    font-size: var(--size-secundario);
}

.featured-content__posts article > p {
    margin-left: 1em;
}

.featured-content__posts article > img {
    width: 100%;
    object-fit: cover;
}

.featured-content__posts article .featured-content__reactions {
    display: flex;
    justify-content: space-between;
    margin: .5em;
    gap: 1em;
}

.featured-content__posts article .featured-content__reactions div {
    display: flex;
    align-items: center;
    gap: 1px;
}

.activities {
    flex: 1;
    background-color: var(--fundo-card);
    border-radius: 1em;
    margin-bottom: 1em;
}

.activities h2 {
    color: var(--texto-principal);
    margin: 1em 0 .5em 1em;
    font-weight: lighter;
    font-size: var(--size-h2);
}

.activities a {
    text-decoration: none;
}

.activities a p{
    text-decoration: none;
    color: var(--primario);
    margin: 0 0 1.4em 1.4em;
    font-size: var(--size-p);
}

.activities__posts {
    margin: 0 1.4em;
}

.activities__posts article {
}

.activities__posts > p {
    width: fit-content;
    margin: 0 auto;
    padding: .3em 0 .7em 0;
    font-size: var(--size-p);
}

.activities__posts p,
.activities__posts article p {
    color: var(--texto-secundario);
}

.activities__posts article > p {
    margin-bottom: 1em;
    margin-top: 1em;
    display: flex;
    align-items: center;
    gap: .3em;
    font-size: var(--size-p);
}

.activities__posts article div {
    display: flex;
    text-align: justify;
    justify-content: center;
    gap: 1em;
}

.activities__posts article div p {
    overflow: hidden; /* remove barra de rolagem */
    text-overflow: ellipsis; /* adiciona '...' ao final do texto */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Quantidade de linhas mostradas */
    -webkit-box-orient: vertical; /* direção do corte */
    margin: .4em 0;
    font-size: var(--size-p);
    color: var(--texto-principal);
}

.activities__posts article .activities__posts__reactions {
    justify-content: space-between;
    margin: .5em 0;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--texto-secundario);
}

.activities__posts article .activities__posts__reactions p {
    color: var(--texto-secundario);
    font-size: var(--size-secundario);
}

.activities__posts article .activities__posts__reactions > div {
    gap: .2em;
}

.about {
    flex: 1;
    background-color: var(--fundo-card);
    color: var(--texto-principal);
    margin-bottom: 1em;
    border-radius: 1em;
}

.about h2 {
    margin: 1em 0 .5em 1em;
    font-size: 1.3em;
    font-weight: lighter;
}

.about p {
    margin: 1em 1.5em;
    text-align: justify;
    font-size: .9em;
}

.experiences {
    flex: 1;
    width: 100%;
    background-color: var(--fundo-card);
    border-radius: 1em;
    margin-bottom: 1em;
}

.experiences h2 {
    color: var(--texto-principal);
    margin: 1em 0 .5em 1em;
    font-weight: lighter;
    font-size: var(--size-h2);
}

.experiences__jobs {
    margin: 0 0 2em 1.3em;
}

.experiences__jobs-worked {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: .5em;
}

.experiences__jobs-worked div h3 {
    color: var(--texto-principal);
    font-size: 1em;
}

.experiences__jobs-worked div p {
    color: var(--texto-secundario);
    font-size: var(--size-p);
}

.experiences__position__list li {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: .5em;
}

.experiences__position__list li .experiences__position__left-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    padding: 0 1.2em;
}

.experiences__position__list li .experiences__position__left-details .circle {
    display: inline-block;
    height: .6em;
    width: .6em;
    border-radius: 50%;
    background-color: var(--texto-principal);
}

.experiences__position__list li .experiences__position__left-details .vertical-line {
    display: inline-block;
    height: 3em;
    width: 1px;
    background-color: var(--texto-principal);
}

.experiences__position__list li .experiences__jobs__position {
    display: flex;
    flex-direction: column;
}

.experiences__position__list li .experiences__jobs__position h4,
.experiences__position__list li .experiences__jobs__position h4 + span {
    color: var(--texto-principal);
}

.experiences__position__list li .experiences__jobs__position h4 + span {
    font-size: var(--size-p);
}

.experiences__position__list li .experiences__jobs__position span + span {
    color: var(--texto-secundario);
    font-size: var(--size-p);
    display: flex;
    align-items: center;
    gap: .4em;
}

.academic-background {
    flex: 1;
    width: 100%;
    border-radius: 1em;
    background-color: var(--fundo-card);
    margin-bottom: 1em;
}

.academic-background h2 {
    color: var(--texto-principal);
    margin: 1em 0 .5em 1em;
    font-size: var(--size-h2);
    font-weight: lighter;
}

.academic-background .institution {
    display: flex;
    margin-left: 1.3em;
    margin-bottom: 1.5em;
    gap: 1em;
}

.academic-background .institution div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.academic-background .institution div h3 {
    color: var(--texto-principal);
    font-size: 1em;
}

.academic-background .institution div h3 + span {
    color: var(--texto-principal);
    font-size: var(--size-p);
}

.academic-background .institution div span + span {
    color: var(--texto-secundario);
    font-size: var(--size-p);
}

.languages {
    flex: 1;
    width: 100%;
    border-radius: 1em;
    margin-bottom: 3em;
    background-color: var(--fundo-card);
}

.languages h2 {
    margin: 1em 0 .5em 1em;
    color: var(--texto-principal);
    font-size: var(--size-h2);
    font-weight: lighter;
}

.languages .languages__levels {
    margin: 0 0 1em 1.2em;
}

.languages .languages__levels:not(:last-child) {
    border-bottom: 1px solid var(--texto-secundario);
    padding-bottom: 1em;
    margin-right: 3em;
}

.languages .languages__levels h3 {
    color: var(--texto-principal);
    font-size: 1em;
}

.languages .languages__levels span {
    color: var(--texto-secundario);
    font-size: var(--size-p);
}

.right-side-connections {
    height: fit-content;
    width: 25%;
    display: flex;
    flex-direction: column;
}

.more-connections,
.recommended {
    flex: 1;
    background-color: var(--fundo-card);
    border-radius: 1em;
    margin-bottom: 1em;
    padding-bottom: 1em;
}


.more-connections .also-viewed h2,
.recommended__people h2 {
    color: var(--texto-principal);
    font-weight: lighter;
    font-size: 1em;
    margin: 1em 0 0 1em;
}

.more-connections .also-viewed .users-list .user,
.recommended .recommended__people .people-list .people {
    margin: 1em 1em 0 1em;
    list-style: none;
    overflow: hidden;
}

.more-connections .also-viewed .users-list .user .send-message,
.recommended .recommended__people .people-list .people .connect {
    border: none;
    padding: .4em 1em;
    font-size: var(--size-p);
    margin: .5em 0 0 3.5rem;
    border-radius: 25px;
    color: var(--texto-principal);
    background-color: transparent;
    border: 1px solid var(--texto-principal);
}

.more-connections .also-viewed .users-list .user > div,
.recommended .recommended__people .people-list .people > div {
    display: flex;
    gap: .5em;
    height: 48px;
    width: fit-content;
}

.more-connections .also-viewed .users-list .user div img,
.recommended .recommended__people .people-list .people div img {
    min-width: 48px;
    height: 48px;
}

.more-connections .also-viewed .users-list .user div p,
.recommended .recommended__people .people-list .people div p {
    color: var(--texto-principal);
    font-size: var(--size-p);
    
}

.more-connections .also-viewed .users-list .user div span,
.recommended .recommended__people .people-list .people div span {
    display: flex;
    color: var(--texto-secundario);
    font-size: var(--size-secundario);
    overflow: hidden; /* remove barra de rolagem */
    text-overflow: ellipsis; /* adiciona '...' ao final do texto */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Quantidade de linhas mostradas */
    -webkit-box-orient: vertical; /* direção do corte */
}





/* Responsividade */

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

    .navbar__left {
        padding-left: 4%;
    }
    
    main {
        width: 95%;
        gap: 1em;
    }

    .featured-content__posts article .featured-content__reactions div p,
    .featured-content__posts article .featured-content__reactions div + p span {
        display: none;
    }

    .more-connections .also-viewed h2,
    .recommended .recommended__people h2 {
        width: fit-content;
        margin: 1em 1em 0 .8em;
    }

    .more-connections .also-viewed .users-list .user,
    .recommended .recommended__people .people-list .people {
        margin: 1em .5em 0 .5em;
    }    

    .more-connections .also-viewed .users-list .user div div,
    .recommended .recommended__people .people-list .people div div {
        align-self: center;
    }

    .more-connections .also-viewed .users-list .user div span,
    .recommended .recommended__people .people-list .people div span {
        display: none;
    }

    .more-connections .also-viewed .users-list .user .send-message,
    .recommended .recommended__people .people-list .people .connect {
        margin: 1em 0;
    }

}

@media screen and (max-width: 865px) {
    .navbar__left {
        justify-content: flex-start;
    }   

    .navbar__left .navbar__search {
        width: 70%;
    }
}

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

    .navbar__left {
        width: 90%;
    }

    .navbar__left .navbar__search {
        width: 100%;
    }

    .navbar__right {
        display: none;
    }      

    .user-profile {
        display: block;
        padding: 5em 2em 2em 1.5em;
        background-size: 100% 30%;
    }

    .user-profile__information {
        margin-bottom: 2em;
    }

    .user-profile__information__user-image img {
        max-width: 136px;
    }

    .left-content {
        width: 95%;
    }

    .user-profile__career-details {
        margin-bottom: 0;
        flex: 1;
    }

    .right-side-connections {
        display: none;
    }

    .featured-content__posts article .featured-content__reactions p {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    main {
        width: 100%;
    }

    .left-content {
        width: 100%;
    }

    .left-content section {
        border-radius: 0;
    }
}

@media screen and (max-width: 425px) {
    .user-profile {
        padding: 6em 2em 2em 1.5em;
    }
}