body {
    background-color: #9FA4A3;
    background-image: url('https://i.pinimg.com/736x/f5/60/0a/f5600a4c1792929c9b687dbd56f363ad.jpg');
    font-family: Arial, sans-serif;
   
    margin: 0;
    padding: 0;
}

/*particulas*/
html:before {
    animation: grain 8s steps(5.5) infinite;
    background-image: url(https://i.gifer.com/origin/74/74043b11818c7a40ae726b01c8eb4a43_w200.gif);
    content: "";
    height: 300%;
    left: -50%;
    opacity:.2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
  }
  @keyframes grain 
    70% { transform:translate(0%, 15%) }

table {
    width:100%;
    border-collapse: collapse; /* Combina as bordas */
    margin-bottom: 20px; /* Espaçamento abaixo da tabela */
}

th, td {
    border: 2px solid #3A3A3A; /* Borda para células */
    padding: 6px; /* Espaçamento interno nas células */
    text-align: center; /* Alinhamento do texto */
}

th {
    background-color: #7a7a7a; /* Cor de fundo para cabeçalho */
}

tr:nth-child(even) {
    background-color: #757575; /* Cores alternadas para linhas */
    color: #c4c4c4;
    
}
tr:nth-child(odd) {
    background-color: #414141; /* Cores alternadas para linhas */
    color: #c4c4c4;

}

tr:hover {
    background-color: #646464; /* Cor ao passar o mouse */
    }

h1 {
    color: #c4c4c4;
    font-size: 3em;
    margin-bottom: 8px;
}
    
h2 {
    color: #c4c4c4;
    font-size: 1em;
    margin-bottom: 8px;
}
    
h3 {
    color: #c4c4c4;
    font-size: 1em;
    margin-bottom: 8px;
}
    
p {
    color: #c4c4c4;
    font-size: 1.1em;
}

.container {
    color: #d3d3d3;
    
    max-width: 600px;
    margin: 50px auto;
    background-color: rgba(0, 0, 0, 0.603);
    
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.603);
    border-radius: 8px;
}

  .box {
            width: 200px;
            height: 200px;
            background-color: #797979;
            color: #c4c4c4;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .box:nth-child(2) {
            background-color: #747474;
        }

        .box:nth-child(3) {
            background-color: #818181;
        }        

i {
    color: #c4c4c4;
    
}



  

  
  
  