/* Esse font-face está sendo utilizado para "importar" a fonte DonGraffiti da pasta Fontes pra dentro do estilo.css */
@font-face {
  font-family: "grafiti";
  src: url("Fontes/DonGraffiti.otf");
}

/* Definindo que as tags img vão ser um pouco arredondadas */
img {
  border-radius: 5%;
}

#imagemCultural{
  /* Fazendo que a largura seja de 70% */
  width: 50%;

  /* Fazendo que a altura seja de 15% */
  height: 50%;

  /* Fazendo a origem ser no meio */
  left: 50%;

  /* Fazendo centralizar no meio */
  transform: translateX(50%);
  
}

h1 {
  /* Mantendo todos os H1 alinhados ao meio da página */
  text-align: center;

  /* Fazendo a fonte dos H1 ser a mesma fonte que importei no font-face*/
  font-family: grafiti;

  /* O tamanho da fonte sempre irá ocupar 350% da tela, independente do aparelho*/
  font-size: 350%;

  /* Mantendo a cor dos H1 com essa mais branca*/
  color: aliceblue;
}

/* Acessando as tags img que são "filhas" de elementos com a classe "carousel-item" que por sua vez são "filhas" de elementos com a classe "carousel-inner, iremos
   manter essa proporção de preenchimento da página.'*/
.carousel-inner > .carousel-item > img {
  width: 40%;
  height: 700px;
}

/* Deixando o body com a mesma cor de fundo que o esboço de telas feito
na etapa passada, adicionado um degradê ao fundo*/
body {
  /* 
  Adicionado o degradê junto da cor principal
  Cor principal (a mais clara) -> #b7da86
  Cor secundária (a mais escura) -> #8ead62
  */
  background: linear-gradient(to top, #8ead62, #b7da86);
}

/* Essa classe está sendo utilizada para formatar e estilizar os botões de "next" do
   carrosel de notícias, mais especificamente a forma atrás desses */
.centralizarForma1 {
  /* Deixando com fundo na cor bisque */
  background-color: bisque;

  /* Fazendo que a largura seja de 70% */
  width: 70%;

  /* Fazendo que a altura seja de 15% */
  height: 15%;

  /* Fazendo a origem ser no meio */
  left: 50%;

  /* Fazendo centralizar no meio */
  transform: translateX(-50%);

  /* Definindo a opacidade como 0.4 */
  opacity: 0.4;

  /* Definindo as bordas como arredondadas, com 30% */
  border-radius: 30%;
}

/* Essa classe está sendo utilizada para formatar e estilizar a forma que fica
   atrás das imagens das notícias */
.centralizarForma2 {
  /* Deixando com fundo na cor white */
  background-color: white;

  /* Fazendo que a largura seja de 65% */
  width: 65%;

  /* Fazendo que a altura seja de 100% */
  height: 100%;

  /* Fazendo a origem ser no meio */
  left: 50%;

  /* Fazendo centralizar no meio */
  transform: translateX(-50%);

  /* Definindo a opacidade como 0.4 */
  opacity: 0.4;

  /* Definindo as bordas como arredondadas, com 10% */
  border-radius: 10%;
}

/* Essa clase sendo utilizada para formatar e estilizar a forma que fica
   atrás do texto abaixo da apresentação dos grupos na parte do "SOBRE NÓS" */
.centralizarForma3 {
  /* Deixando com fundo na cor white */
  background-color: white;

  /* Fazendo que a largura seja de 100% */
  width: 100%;

  /* Fazendo que a altura seja de 100% */
  height: 100%;

  /* Definindo as bordas como arredondadas, com 10% */
  border-radius: 10%;
}

/* Essa classe está sendo utilizada para estilizar o card do sobre nós, limitando
   a largura pra 80% e uma borda arredondada de 10% */
.formatacaoCard {
  /* Definindo a largura máxima de 80% */
  max-width: 80%;

  /* Definindo as bordas como arredondadas, com 10% */
  border-radius: 10%;
}

/* Essa classe deixa os textos brancos com borda preta */
.textoComBorda {
  /* Deixando o texto branco */
  color: white;

  /* Aplicando as sombras */
  text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black,
    3px 3px 0 black;
}