/* Esta formatação está relacionada a todo o corpo da página */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #111111;
}
/* Esta formatação está relacionada ao cabeçalho e rodapé*/
header, footer {
    background-color: rgb(224, 233, 234);
    color: #fff;
    padding: 10px;
}
/* . 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: #ffc400;
}
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: 5px; 
    /* 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 {
    background-image: linear-gradient( to bottom,rgb(38, 0, 255), rgb(255, 0, 208), rgb(5, 235, 197), rgb(47, 0, 255), rgb(255, 55, 0) );
    display: flex;
    justify-content: center;
    justify-items: center;
    background-color: #222222;
    padding: 10px;
    border-radius: 5px;
    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: 5px;
    
}
/*Formatação da foto central */
.fotocentral{
     display: flex;
     justify-content: center;
     align-items: center;
     height: auto; 
     width: 1200px;
}





/*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: #ffc400; /* 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;
}

/* 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: #ffd800; /* 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 */
}
.grid-container {
    display: grid;
    column-gap: 0px;
  }
  .logosale {
    width: 300px;
  }
  .grid-item1 {
    grid-area: 1;
  }

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