* {box-sizing: border-box;
    margin: 0;}
    
    table { width: 100%;
    height: 100vh;
    }
    
    td { border: solid 1px;
           width: 5%;
        height: 8vh;
        border-radius: 10%;
    }
        
        
    .borderless { border: none;}
    .border {
        border: 1px solid black;
    }
    
    body {
        background-color: #8b5f4b;
    }
    
    /* cores */
    .hidrogenio { background:#b5fa78; }
    .alcalino { background:#fac25a; }
    .alcalino-terroso { background:#f0ed64; }
    .transicao { background:#f1756a; }
    .outros-metais {background-color: #8cb5eb;}
    .semimetal { background:#7afce2; }
    .nao-metal { background: #a9ec6d}
    .halogenio { background:#7b83f1; }
    .gas-nobre { background:#4faeee; }
    .lantanideo { background:#5ae077; }
    .actinideo { background:#ba68e0; }
    
    .legenda {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        margin-top: 25px;
        font-family: Arial, sans-serif;
        color: white
        
    }
    
    .item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 20px;
    }
    
    .cor {
        width: 40px;
        height: 40px;
        border: 1px solid #000;
    }