body {background-color: rgb(105, 102, 146);}

*{
margin: 0;
}

table
{
width: 85%;
margin: auto;
margin-top: 3vh;
height: 80vh;
}

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

div 
{
    text-align: left;
}

.borda
{
    border: solid;
    border-radius: 10px;
}

#bordar{

    border: solid;

}
#legenda {
    width: 90%;
    margin: auto;
    margin-top: 3vh;
    height: 3vh;
    text-align: center

}

.naometais {
    background-color: rgb(187, 63, 63);
}
.gasesnobres{
    background-color: rgb(71, 113, 190);
}
.metaisalcalinos{
    background-color: rgb(233, 176, 53);

}
.semimetais {
    background-color: rgb(241, 24, 205);
}
.metaisalcalinosterrosos {
    background-color:  rgb(3, 243, 252)
}
.halogenios{
    background-color: rgb(177, 138, 87);
}
.outrosmetais{
    background-color: rgb(99, 0, 77);
}
.metaistransicao{
    background-color: rgb(102, 61, 61);
}
.lantanideos{
    background-color: rgb(209, 187, 247);
} 
.actinidios{
    background-color: rgba(0, 255, 64, 0.521);
}
  
  .item {
    padding: 10px;
    text-align: center;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
  }
  
  .item {
    padding: 10px;
    text-align: center;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
  }
  #legenda{
    width:85%;
    margin:auto;
    margin-top:80px;
    height:auto;
    }
    
    #legenda td{
    height:30px;
    font-size:20px;
    }