html {
      zoom: 80%;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
/*background-color: #ddd; */
background-color: #212529;

}

#navPrincipal {
height: 43px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
z-index: 1500;
}

#conteudoNavbarSuportado {
margin-right: -60px;
}

.container-fluid {
padding: 0px;
/* background-color: white; */
margin: 0;
min-height: 318px;
min-width: 400px;
max-height: 447px;
/* background-image: linear-gradient(rgba(140, 159, 161, 0.4), rgba(251, 251, 251)); */
}

.capaPerfil {
position: relative;
width: 100%;
max-width: 1284px;
max-height: 445px;
min-height: 317px;
margin: 0 auto;
overflow: hidden;      
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
background-color: white;
}

.capaPerfil img {
width: 100%;
max-height: 350px;
min-height: 223px;
object-fit: cover;
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
margin-top: 3%;
}

.content {
text-align: left;
padding-top: 7px;
}

.perfilUsuario {
top: 0px;
padding: 0px;
text-align: left;
margin-top: 10px;
margin-left: 20px;
}

.h1NomeUsuario {
top: 0px;
font-size: clamp(1em, 1em + 2.5vw, 2em); /*Diminui o tamanho da fonte responsivamente */    
text-align: left;
}

.fotoPerfil {
position: absolute;
top: 40%;
bottom: 10px;
left: 10px;
width: auto; /* Aumentei o tamanho da foto de perfil */
height: auto;
max-width: 170px;
max-height: 170px;
min-height: 120px;
min-width: 120px;
border-radius: 50%;
border: 3px solid rgba(162, 250, 0, 0.966);
overflow: hidden;
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
}

.fotoPerfil img {
width: 100%;
height: 100%;
max-width: 170px;
max-height: 170px;
min-height: 120px;
min-width: 120px;
object-fit: cover;
margin-top: auto;
}

#editarPerfil {
width: auto;
float:left;
top: 10px;
}

#editar {
border-color: #555;
width: auto;
float:right;
}

footer {
text-align: center;
padding: 0px;
background-color: #ddd;
color: #555;
position: fixed;
bottom: 0;
width: 100%;
box-shadow: 0px 1px 7px rgba(0, 0, 0, .5);
}

.colNome {
width: 80%;
margin-left: 1%;
}

.colEditar {
width: auto;
float: right;
height: 40px;
}

#infoPerfil {
margin-left: 0.1%;
}

.conteudoPerfil {
position: relative;
top: 2%;
padding: 7px;
width: 100%;
max-width: 1284px;
height: auto;
min-height: 430px;
margin: 0 auto;
overflow: hidden;
background-color: rgba(255, 255, 255, 0);
}

.navPerfil {
position: relative;
top: 1%;
width: 100%;
max-width: 1284px;
height: 50px;
min-height: 45px;
margin: 0 auto;
overflow: hidden;      
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
background-color: white;
}

#menuPerfil {
padding: 0px;
max-width: 10px;
left: 0;
margin: 0px;
margin-right: auto;
margin-top: 0px;
top: 0px;
}

#botao {
margin-left: 1%;
background-color: #f8f9fa;
color: #f8f9fa;
border: none;
}

.page-link {
background-color: #f8f9fa;
border: none;
margin-left: 2%;
}

.page-item {
margin: 0%;
margin-left: 0%;
font-size: 15px;
}

.imagemAdicional {
position: absolute;
bottom: 0;
right: 10;
width: 30px;
height: 30px;
object-fit: cover; /* Isso manterá a proporção da imagem */
}
.botaoAtualizaCapa {
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 50%;
color: grey;
cursor: pointer;
top: 17%;
margin-right: 2%;
object-fit: cover;
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
}

.botaoAtualizaCapa img {
width: 100%; 
height: 100%; 
border: none; 
box-shadow: none;
top: 57%;
max-width: 30px;
max-height: 30px;
min-height: 20px;
min-width: 20px;
object-fit: cover;
}

.botaoAtualizaPerfil {
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 50%;
color: grey;
cursor: pointer;
top: 67%;
margin-right: 86%;
object-fit: cover;
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
}

.botaoAtualizaPerfil img {
width: 100%; 
height: 100%; 
border: none; 
box-shadow: none;
max-width: 30px;
max-height: 30px;
min-height: 20px;
min-width: 20px;
object-fit: cover;
}

#btnEdit {
margin-left: 95%;
}

#latEsq {
margin-top: 2%;
background-color: #f8f9fa; 
float: center; 
border:1px; 
border-radius: 5%; 
margin-left: 0%; 
margin-right: 2%; 
margin-top: 0.7%; 
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
min-width: 90px; 
width: -webkit-fill-available; 
max-width: 740px; 
width: -moz-available;
}

/* Estilos CSS para a galeria */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 422px;
}

.gallery-item {
background-color: black;
flex: 1 0 calc(33.33% - 10px); /* 3 colunas */
padding: 0px;
max-width: 119.5px;
height: 119.5px;
margin: 0px;
border: 1px;
border-color: black;
border-radius: 5%;
position: relative;
overflow: hidden; /* Impede que a imagem ultrapasse a div */
margin-right: 0.2%;
}

.gallery-item img {
object-position: center; /* Centraliza a imagem vertical e horizontalmente */
object-fit: cover; /* A imagem preencherá a div sem distorção */
width: 100%;
height: 100%;
transition: transform 0.05s ease; /* Efeito de transição */
}

/* Efeito de botão no hover */
.gallery-item:hover img {
transform: scale(1.05); /* Aumenta a imagem em 10% no hover */
cursor: pointer; /* Altera o cursor para indicar que é clicável */
}


/* Estilos CSS para a galeria */
.gallery-principal {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 800px;
}

.gallery-item-principal {
background-color: black;
flex: 1 0 calc(16.66% - 10px); /* 6 colunas */
padding: 0px;
max-width: 180px;
height: 180px;
margin: 0px;
border: 1px;
border-color: black;
border-radius: 5%;
position: relative;
overflow: hidden; /* Impede que a imagem ultrapasse a div */
margin-right: 0.2%;
margin-left: 0.2%;
}

.gallery-item-principal img {
object-position: center; /* Centraliza a imagem vertical e horizontalmente */
object-fit: cover; /* A imagem preencherá a div sem distorção */
width: 100%;
height: 100%;
transition: transform 0.05s ease; /* Efeito de transição */
}

/* Efeito de botão no hover */
.gallery-item-principal:hover img {
transform: scale(1.05); /* Aumenta a imagem em 10% no hover */
cursor: pointer; /* Altera o cursor para indicar que é clicável */
}


/* Estilos CSS para o modal */
.modal {
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1500;
}

.ModalAbrirFoto {
display:block;
max-width: 50%; /* Largura máxima da imagem */
max-height: 90vh; /* Altura máxima da imagem */
margin: 20px; /* Centralizar horizontalmente */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-position: center; /* Centraliza a imagem vertical e horizontalmente */
object-fit: cover; 
transition: transform 0.2s ease; /* Adiciona uma transição suave para o zoom */
}

.close {
position: absolute;
top: 15px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}

.zoom-buttons {
text-align: center;
margin-top: 10px;
position: relative; /* Posicionamento relativo para botões de zoom */
z-index: 1; /* Z-index para manter os botões acima da imagem */
}

.zoom-buttons button {
background-color: #333;
color: white;
padding: 5px 10px;
border: none;
cursor: pointer;
margin: 0 5px;
}

.zoom-buttons button:focus {
outline: none;
}

#publicacoes {
display: block;
}
#sobre {
display: none;
}
#fotos {
display: none;
}
#videos {
display: none;
}
#amigos {
display: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin-left: -100px;
margin-top: 5px;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: 0.25rem;
}

#logoGrande {
    display: block;
}

#logoPequena {
    display: none;
}

#conteudoPrivadoEsq {
    margin-left: 0; 
    padding-left: 0; 
    width: 100%; 
    max-width: 565px;
}
#conteudoPrivadoEsqSobre {
    margin-left: 0; 
    padding-left: 0; 
    width: 100%; 
    max-width: 565px;
}

#colLatEsq {
    background-color: #f8f9fa;
    float: center;
    border: 1px;
    border-radius: 5%;
    margin-top: 2px;
    margin-left: 8px;
    margin-right: 15px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
    width: auto;
    padding: 5px;
}

.cr-boundary {
    width: 320px;
    height: 320px;
}

/* *****MEDIAS***** */

@media (min-width: 1300px) {
#latEsq {
margin-top: 0%;
}
}

@media (max-width: 1300px) {

.fotoPerfil {
max-width: 160px;
max-height: 160px;
top: 41%;
}
.botaoAtualizaPerfil {
top: 66%;
margin-right: 86%;
}
}
@media (max-width: 1200px) {

.fotoPerfil {
max-width: 155px;
max-height: 155px;
top: 39%;
}
.botaoAtualizaPerfil {
top: 250px;
margin-right: 85%;
}
}
@media (max-width: 1150px) {

.fotoPerfil {
max-width: 150px;
max-height: 150px;
top: 38%;
}
.botaoAtualizaPerfil {
top: 240px;
margin-right: 84.8%;
}
}
@media (max-width: 1100px) {

.fotoPerfil {
max-width: 145px;
max-height: 145px;
top: 37%;
}
.botaoAtualizaPerfil {
top: 229px;
margin-right: 84.7%;
}
}
@media (max-width: 1044px) {

.fotoPerfil {
max-width: 140px;
max-height: 140px;
top: 37%;
}
.botaoAtualizaPerfil {
top: 222px;
margin-right: 84.5%;
}
#btnEdit {
margin-left: 93%;
}
}
@media (max-width: 950px) {

.fotoPerfil {
max-width: 140px;
max-height: 140px;
top: 35%;
}
.botaoAtualizaPerfil {
top: 210px;
margin-right: 83%;
}
}
@media (max-width: 900px) {

.fotoPerfil {
max-width: 135px;
max-height: 135px;
top: 36%;
}
.botaoAtualizaPerfil {
top: 205px;
margin-right: 82%;
}
}
@media (max-width: 850px) {

.fotoPerfil {
max-width: 130px;
max-height: 130px;
top: 37%;
}
.botaoAtualizaPerfil {
top: 205px;
margin-right: 81%;
}
}
@media (max-width: 750px) {

.fotoPerfil {
max-width: 125px;
max-height: 125px;
top: 38%;
}
.botaoAtualizaPerfil {
top: 202px;
margin-right: 80%;
}
#btnEdit {
margin-left: 92%;
}
}


@media (min-width: 677px) {

#conteudoPrivado {
padding-left: 0px;
}
#latEsq {
margin-top: 0%;
}
}
@media (max-width: 677px) {

#btnEdit {
margin-left: 90%;
}
}

@media (max-width: 767px) {

    #conteudoPrivadoEsqSobre {
    display: none;
    }
}

@media (max-width: 650px) {

.fotoPerfil {
max-width: 120px;
max-height: 120px;
top: 38%;
}
.botaoAtualizaPerfil {
top: 200px;
margin-right: 78%;
}
#btnEdit {
margin-left: 91%;
}
#btnEdit {
margin-left: 89%;
}
}
@media (max-width: 550px) {

.fotoPerfil {
max-width: 115px;
max-height: 115px;
top: 38%;
}
.botaoAtualizaPerfil {
top: 198px;
margin-right: 73%;
}
#logoGrande {
    display: none;
}
#logoPequena {
    display: block;
}
#divPesquisar{
    margin-left: 73px;
}
}
@media (max-width: 450px) {

.fotoPerfil {
max-width: 110px;
max-height: 110px;
top: 37%;
}
.botaoAtualizaPerfil {
top: 195px;
margin-right: 69%;
}
#btnEdit {
margin-left: 86%;
}
#conteudoPrivadoEsq {
    margin-top: -13px;
}
#colLatEsq {
    margin-left: 7px;
    margin-right: -8px;
}
#latEsq {
    margin-left: 1.8%;
    margin-right: 1.8%;
}
}