* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
     border-radius: 10px;
}


table {
    border-collapse: separate;
    border-spacing: 4px;
    width:95%;
    margin:auto;
    margin-top: 30px;
    border-spacing:8px;
    display:grid;
    gap:5px;
    transition:0.4s;
}


td {
    width: 5%;
    height: 7vh;
    text-align: center;
}

td:active{
    transform: scale(1.3);
    z-index:10;
     filter: brightness(0.7);


}

div{
    text-align: left;
}
body{
    background: #e0e0e0;
    background: radial-gradient(circle, rgba(224, 224, 224, 1) 0%, rgba(250, 255, 252, 1) 50%, rgba(237, 235, 218, 1) 100%);
}

.Naometais{
    background-color:#aaf1b1;
}


.Metaisalcalinos{
    background-color: #F8C8C8; 
}


.Metaisalcalino-terrosos {
    background-color: #FAD6A5;
}


.Metaisdetransição {
    background-color: #FFF3B0; 
}

.Outrosmetais
{
    background-color: #98CCFF;
}

.gasesnobres{
    background-color: #d4b2d3; 
}

.semimetais{
    background-color: #B2EBF2;
}

.halogênios{
    background-color: #E0D4F7; 
}

.lantanideo{
    background-color: #D0F0F6;
}

.actinideo{
    background-color: #DDEEDB;
}

.borda{
    border: solid;
}


table td{
  transition: 0.3s;
}


table:hover td{
  animation: energia 1s infinite alternate;
   transform: scale(1.15);
    z-index: 2;
}

@keyframes energia{

  0%{
    filter: brightness(1);
    transform: scale(1);
  }

  50%{
    filter: brightness(1.3);
    transform: scale(1.05);
  }

  100%{
    filter: brightness(0.8);
    transform: scale(1);
  }

}