dialog {
  width: calc(85% - 40px);
  height: calc(90% - 145px);
  background-color: #222; /* Fundo bem escuro */
  position: relative;
  border-radius: 20px;
  border: 10px solid transparent; /* Transparente para exibir o gradiente */
  background-clip: padding-box;
  box-shadow: inset 5px 5px 10px #111, inset -5px -5px 10px #333;

  /* Gradiente prateado no modo escuro */
  background-image: linear-gradient(#222, #111),
    linear-gradient(90deg, #222, #333, #444); /* Tons mais escuros */
  background-origin: border-box;
  background-clip: content-box, border-box;
  padding: 125px 20px 20px 20px;
  z-index: 11;
}

.continerApresentacaoDoProjeto {
  color: #ddd;
  width: 100%;
  height: 100%;
}

/* MODO CLARO
    dialog {
      width: 65%;
      height: 90%;
      background-color: #eee;
      position: relative;
      border-radius: 20px;
      border: 10px solid transparent;
      background-clip: padding-box;
      box-shadow: inset 5px 5px 10px #bbb, inset -5px -5px 10px #fff;
      background-image: linear-gradient(#eee, #eee), 
                        linear-gradient(90deg, #d9d9d9, #c0c0c0, #d9d9d9);
      background-origin: border-box;
      background-clip: content-box, border-box;
    } 
    .continerApresentacaoDoProjeto {

      width: 75%;
      height: 70%;
      padding: 40px;
      box-shadow: 8px 8px 10px #ddd, -8px -8px 10px #fff;
      text-shadow: 2px 2px 0px #fff;
      margin: 20px;
    }
*/

.continerConteudoDeTodoOProjeto {
  display: flex;
  flex-direction: column;
}

.continerOpcoesProjeto {
  position: absolute;
  top: 0%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  right: 0;
  align-items: center;
}

.continerNomeDOprojetoAberto {
  box-shadow: inset 5px 5px 10px #111, inset -5px -5px 10px #333;
  padding: 20px 150px;
  border-radius: 0px 0px 24px 24px;
}

.buttonNomeProjeto {
  border: none;
  background: transparent;
  --stroke-color: black;
  --ani-color: rgba(95, 3, 244, 0);
  --color-gar: linear-gradient(
    90deg,
    #ffffff9e,
    #f0f0f0,
    #ffffff9e,
    #f0f0f0,
    #ffffff9e
  ); /* Gradiente em tons de cinza */
  font-size: 40px;
  font-family: var(--fonte03);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke-color);
  margin: 10px;
  height: 50px;
}

.continerMostraProjeto {
  display: flex;
  height: 100%;
  width: 100%;
}

.continerDaImagemPrincipalDoProjeto {
  flex-grow: 1;
  padding: 40px;
  background-color: #111;
  box-shadow: 8px 8px 10px #000, -0px -8px 20px #222;
  text-shadow: 2px 2px 0px #000;
  margin: 20px 10px 20px 20px;
  text-align: center;
  width: calc(70% - 40px);
}

.imagemProjeto {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.fecharVerMaisProjeto {
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 10px 10px;
  height: 50px;
}

.continerFechar {
  box-shadow: inset 5px 5px 10px #111, inset -5px -5px 10px #333;
  padding: 20px;
  border-radius: 0px 0px 0px 24px;
  cursor: pointer;
}

.continerFechar:hover {
  background: linear-gradient(45deg, #212121, #252525);
  background: radial-gradient(circle at bottom, #111, 10%, #212121 70%);
  outline: 0;
}

.continerMaisImagensDoProjeto {
  padding: 40px;
  background-color: #111;
  box-shadow: 8px 8px 10px #000, -0px -8px 20px #222;
  text-shadow: 2px 2px 0px #000;
  flex-grow: 1;
  margin: 20px 20px 20px 10px;
  width: calc(30% - 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.BotaoMudarImagemPrincipal {
  flex-grow: 1;
  background: transparent;
  border: none;
  overflow: hidden;
}

.BotaoMudarImagemPrincipal:has(.imagemPequenaProjeto[src=""]) {

  display: none;

}

.imagemPequenaProjeto {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.continerInformacoesDoProjeto {
  margin: 0px 20px;
}

.LinhaDecorativaGrande {
  margin: 30px 0px;
  height: 7px;
  width: 100px;
  background: linear-gradient(
    90deg,
    #ffffff,
    #d9d9d9,
    #c0c0c0,
    #d9d9d9,
    #ffffff
  ); /* Gradiente prateado */
  background-size: 200%; /* Faz o gradiente se repetir */
  animation: silver-animation 3s linear infinite; /* Animação infinita */
  border-radius: 5px; /* Bordas arredondadas para suavizar */
}

.secundario {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.InformacoesSecudanriasDoProjeto {
  display: flex;
  justify-content: space-between;
  margin: 0px 0px 50px 0px;
}

.tituloEstudoDeCaso {
  font-size: 50px;
  margin: 0px 0px 20px 0px;
}

.SecaoLink {
  display: flex;
  gap: 20px;
}

.vazio {
  margin: 0px 0px 100px 0px;
  height: 50px;
}