/* Esta formatação está relacionada a todo o corpo da página */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #191919;
}

/* Esta formatação está relacionada ao cabeçalho e rodapé*/
header, footer {
    background-color: rgb(224, 233, 234);
    color: #fff;
    padding: 1px;
}
/* . o ponto indica a criação de uma classe */
.grid-container {
    display: grid;
    /* Divide o conteúdo em três colunas, 
    a primeira e a terceira com 1fr e a segunda com 2fr */
    grid-template-columns: 1fr 3fr 1fr; 
    gap: 20px; /* Espaçamento entre os elementos */
    padding: 20px;
}

.centro{
    color: #fff;
    font-size: 20px;
    text-align: justify;
    padding: 5%;
}
h1{
    /*color: #fff;*/
    text-align: center;
    color:  #CB6CE6;
}
section {
    /* Define a cor de fundo das seções como cinza escuro (#222222) */
    background-color: #302f2f;
    /* Define uma margem externa de 20px para as seções */
    margin: 10px; 
    /* Define um preenchimento interno de 20px para as seções */
    padding: 10px; 
    /* Adiciona cantos arredondados às seções */
    border-radius: 15px; 
    /* Adiciona uma sombra sutil às seções */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}
/*Formatação das barras laterais */
.left-sidebar, .right-sidebar {
    display: flex;
    justify-content: center;
    justify-items: center;
    background-color: #222222;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}
/*Formatação da área do conteúdo principal */
.main-content {
    background-color: #222222;
    padding: 20px;
    border-radius: 15px;
    
}
/* Formatação da foto central */
.fotocentral {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%; /* Largura máxima igual à largura do contêiner pai */
    height: auto; /* Altura automática para manter a proporção original */
}

/* Adicione esta regra se desejar limitar a largura máxima da imagem */
.fotocentral img {
    max-width: 100%; /* Largura máxima igual à largura do contêiner pai */
    height: auto; /* Altura automática para manter a proporção original */
}

/*Formatação da foto esquerda do side bar */
#fotoesquerda{
     display: flex;
      justify-content: center;
      align-items: center;
      height: 800px; 
      width: auto;
}
/*Formatação da foto direita do side bar */
#fotodireita{
    display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center;
      height: 800px; 
      width: auto;
}

/* Estilo para a lista não ordenada (ul) dentro da navegação (nav) */
nav ul {
    list-style: none; /* Remove os marcadores de lista da lista não ordenada */
    display: flex; /* Transforma a lista em um flex container */
    justify-content: center; /* Centraliza os itens da lista horizontalmente */
    background-color:  #CB6CE6; /* Define a cor de fundo da navegação como amarelo mais claro (#ffc400) */
    padding: 10px 0; /* Define o preenchimento superior e inferior da navegação como 10px e 0px respectivamente */
    color: #111111; /* Define a cor do texto da navegação como preto (#111111) */
}

/* Estilo para os itens de lista (li) dentro da navegação */
nav ul li {
    display: inline; /* Exibe os itens de lista horizontalmente em linha */
    margin-right: 20px; /* Define uma margem à direita de 20px entre os itens de lista */
    font-family: Arial, sans-serif; /* Define a fonte para os itens de lista */
}

/* Estilo para os links (a) dentro dos itens de lista na navegação */
nav ul li a {
    text-decoration: none; /* Remove a decoração de sublinhado dos links */
    color: #111111; /* Define a cor do texto dos links como preto (#111111) */
    font-weight: bold; /* Define o peso da fonte dos links como negrito */
    font-size: 1.5em;
}

nav a {
    text-decoration: none;
    padding: 8px 15px;
    border: 2px solid transparent; /* Adiciona uma borda transparente inicialmente */
    border-radius: 15px; /* Adiciona bordas arredondadas */
    transition: border-color 0.3s ease; /* Adiciona uma transição suave para a mudança de cor da borda */
}

nav a:hover,
nav a:focus {
    color: #FFFFFF; /* Muda a cor do texto quando o item é clicado */
}

/* Estilo para o conteúdo principal (content) */
.content {
    padding: 20px; /* Define um preenchimento interno de 20px para o conteúdo */
    display: block; /* Define o conteúdo como um bloco */
}

/* Estilo para o rodapé (footer) */
footer {
    background-color:  #CB6CE6; /* Define a cor de fundo do rodapé como amarelo (#ffd800) */
    color: #111111; /* Define a cor do texto do rodapé como preto (#111111) */
    text-align: center; /* Centraliza o conteúdo do rodapé */
    padding: 20px 0; /* Define o preenchimento superior e inferior do rodapé como 20px e 0px respectivamente */
    font-size: 14px; /* Define o tamanho da fonte do rodapé como 14px */
    font-weight: bold; /* Define o peso da fonte como bold */
}
.grid-container {
    display: grid;
    column-gap: 0px;
  }
  .logosale {
    width: 300px;
  }
  .grid-item1 {
    grid-area: 1;
  }

  .grid-item2 {
    grid-area: 1;
  }
  a{
    text-decoration: none;
}