*{border: none;font-family: sans-serif; color: white;}

body {
  margin: 0;
  min-height: 100vh;
  min-width: 100vw;

  background-image: url("https://i.pinimg.com/1200x/5f/1b/a3/5f1ba3137258942f76cab5b7b4317731.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

main {
  width: 100%;
  max-width: 1200px;
  min-height: 100vh;
  
  margin: 0 auto;
  padding: 10px;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-radius: 15px;
  box-sizing: border-box;
}



/* Tamanho da Fonte */

.titulos{
  font-size: 20px;
  
}

.paragrafos{
  font-size: 15px;
  text-align: justify;
}

/* menu */

.painel{
  background: green;
  
  height: auto;
  width: 76%;
  
  border-radius: 20px;
  margin: auto;
  
  text-align: justify;

}

.menu{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  
  align-items: center;

  gap: 15px;
  height: 40px;
}

a{
  text-decoration: none;
  color: white;
}


/* fundo das colunas */

.fundo{
  width: 100%;
  margin: 0 auto;
  padding: 15px;
}


 
/* codigo base das colunas que estão em grupo*/

.container{
  display: flex;
  gap: 5px; 
  
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.coluna{
  flex: 1 1 280px;
  max-width: 350px;
  min-width: 220px;

  margin: 5px;
  padding: 5px;

  border-radius: 15px;

  position: relative;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  
  background: black;
}

.conteudo{

}



/* 
   codigo das colunas separads por direção 
      DIREITA | CENTRO | ESQUERDA
*/ 

.card{
  
  width: 100%;
  height: auto;

  background: #48BF91;

  margin: 5px;
  padding: 10px;

  border: 4px solid #005451;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;

  box-sizing: border-box; 
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.direita, .centro, .esquerda {
  flex: 1;
  min-width: 200px;
  max-width: 350px; 
}

.grande,.pequeno,.vertical { width: 100%;}

/* apenas a coluna | DIREITA */

.direita{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}


/* Card grande que é dificíl de fazer e o Código padrão dos CARDs | DIREITA */

.grupo{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.vertical {
  flex: 1;
  height: auto;
  width: 120px;
}

.mini-grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}



/* Código dos Cards*/

.grande {
  max-width: 300px;
  font-size: 14px;
  text-align: center;
}
.pequeno { max-width: 160px; }
.vertical { max-width: 120px; }


/* Apenas  a coluna CENTRO */

.centro {
  flex: 2 1 400px;
  max-width: 600px;
}

.nome{
  font-family: monospace;
  font-size: 3em;
}