*{
  box-sizing: border-box;
  margin: 0;
}

table { width: 100%;
height: 100vh;
}

td { 
width: 5%;
height: 8.2vh;
border-radius: 11px;
border-color: white;
}

.border-gasesnobres{
background-color: rgb(99, 99, 255);
border: solid 1px;

}

.border-alcalinos{
  background-color: rgb(255, 201, 100);
  border: solid 1px;
}

.border-naometais{
  background-color: rgb(134, 255, 134);
 border: solid 1px;  
}

.border-transiçao{
  background-color: rgb(236, 138, 171);
   border: solid 1px;
}
.border-terrosos{
  background-color: rgb(231, 231, 97);
  border: solid 1px;
}

.border-semimetais{
  background-color: rgb(99, 235, 178);
  border: solid 1px;
}

.border-outros{
background-color: rgb(84, 181, 219);
border: solid 1px;
}

.border-halogenios{
  background-color: rgb(88, 185, 185);
  border: solid 1px;
}

.border-lantanídeos{
  background-color: rgb(151, 235, 235);
  border: solid 1px;
}

.border-actinídios{
  background-color: rgb(184, 119, 245);
  border: solid 1px;
}

.Nãometais{
  background-color: rgb(184, 119, 245);
  border: solid 1px;
}

.Gasesnobres{
  background-color: rgb(99, 99, 255);
  border: solid 1px;
  
  }
  
  .Metaisalcalinos{
    background-color: rgb(255, 201, 100);
    border: solid 1px;
  }
  
  .Metaisdetransição{
    background-color: rgb(236, 138, 171);
     border: solid 1px;
  }
  .Metaisalcalino-terrosos{
    background-color: rgb(231, 231, 97);
    border: solid 1px;
  }
  
  .Semimetais{
    background-color: rgb(99, 235, 178);
    border: solid 1px;
  }
  
  .Outrosmetais{
  background-color: rgb(84, 181, 219);
  border: solid 1px;
  }
  
  .Halogênios{
    background-color: rgb(88, 185, 185);
    border: solid 1px;
  }
  
  .Lantanídeos{
    background-color: rgb(151, 235, 235);
    border: solid 1px;
  }
  
  .Actinídios{
    background-color: rgb(184, 119, 245);
    border: solid 1px;
  }


.legenda>div>div { width: 50px; height: 50px;
display: inline-block;}

.legenda>div { display: inline-block;
width: 20%;}