* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
table{
    width: 100%;
}

  td{
    width: 5%;
    height: 8vh;
    text-align: center;
    transition: 0.5s;
  }
  
  div{
    text-align: left;
  }



/* Categorias de Elementos */

/* Não-Metais */
.nao-metal{
    background-color: rgba(172, 255, 47, 0.849);
    color: #000000;
    width: 80px;
}

/* Gases Nobres */
.gas-nobre {
    background-color: rgba(38, 164, 248, 0.767);
    color: #000000;
    width: 80px;
}

/* Metais Alcalinos */
.metal-alcalino {
    background-color:orange;
    color: #000;
    width: 80px;
}

/* Metais Alcalino-Terrosos */
.metal-alcalino-terroso {
    background-color: rgba(255, 255, 3, 0.76);
    color: #000;
    width: 80px;
}

/* Metais de Transição */
.metal-transicao {
    background-color: rgb(228, 120, 126);
    color: #000000;
    width: 80px;
}

/* Semimetais */
.semimetal {
    background-color: rgb(92, 192, 159);
    color: #000000;
    width: 80px;
}

/* Outros Metais */
.outros-metais {
    background-color: rgb(75, 111, 112);
    color: #000;
    width: 80px; 
}

.halogenios{
    background-color: rgba(147, 233, 233, 0.966);
    color: #000;
    width: 80px;
}

.lantanideo{
    background-color: rgba(82, 190, 190, 0.863);
    color: #000;
    width: 80px;
}

.halogenio{
    background-color: rgba(131, 255, 255, 0.966);
    color: #000;
    width: 80px;
}

.actinideo{
    background-color: rgba(198, 51, 211, 0.842);
    color: #000;
    width: 80px;
}

.borda{
    border-style: solid;
    border-radius: 10px;
    width: 100px;
    height: 7vh;
    color: black;
    margin: auto;
    box-shadow: 0;
}
.borda:hover{
    transform: scale(1.2);
    transition: (0.5), transform (0.5);
    box-shadow: 15px 30px 40px rgb(0, 0, 2);

}

td:hover{
    transform: scale(1.5);
    backdrop-filter: (20px);
}
body{
background-color: rgba(0, 0, 0, 0.932);
}

h3{
    color: white;
}