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


    table {width: 100%;
        height:100vh;
    text-align: center;}

    td { border:solid 1px;
        width: 5%;
        height: 8vh;}
        div{text-align: left;}

        .nãometais{background-color: rgba(128, 255, 0, 0.5);}
   
        .semimetais{background-color: rgba(0, 255, 128, 0.735);}
    
        
        .outrosmetais{background-color: rgba(95, 158, 160, 0.53);}
   
  
        .gasesnobres{background-color: cornflowerblue;}
       
  
        .halogênios{background-color: lightskyblue;}
    
  
        .metaisalcalinos {background-color: rgba(237, 120, 4, 0.998);}
   
  
        .lantanídeos{background-color: rgba(0, 255, 255, 0.577);}
       
  
        .actinídios{background-color: rgba(238, 130, 238, 0.771);}
  
  
        .metaisemtransição{background-color: rgba(233, 150, 122, 0.87);}
    
        .metaisalcalinosterrosos{background-color: rgba(255, 217, 0, 0.982) ;}
      
        td{
            border-radius: 15px;
            padding: 10px;
        }

        .borderless {border: none;}

        td{
            border: solid 1px;
            width: 80px;
            height: 80px;
            align-items: center;
            text-align: center;
        }
        div{
            text-align: left;
        }
        .quadrado{
            width: 15px;
            height: 15px;
            background-color: rgba(128, 255, 0, 0.5);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado2{
            width: 15px;
            height: 15px;
            background-color: rgba(237, 120, 4, 0.998);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado3{
            width: 15px;
            height: 15px;
            background-color: rgba(0, 255, 128, 0.735);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado4{
            width: 15px;
            height: 15px;
            background-color: rgba(95, 158, 160, 0.53);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado5{
            width: 15px;
            height: 15px;
            background-color: rgba(0, 255, 255, 0.623);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado6{
            width: 15px;
            height: 15px;
            background-color:cornflowerblue; ;
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado7{
            width: 15px;
            height: 15px;
            background-color: rgba(233, 150, 122, 0.87);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado8{
            width: 15px;
            height: 15px;
           background-color: rgba(255, 217, 0, 0.982) ;
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado9{
            width: 15px;
            height: 15px;
            background-color: rgb(238, 130, 238);
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }
        .quadrado10{
            width: 15px;
            height: 15px;
            background-color: lightskyblue;
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
        }


        .nãometais{
            background-color: rgba(128, 255, 0, 0.5);
        }
        .semimetais{
            background-color: rgba(0, 255, 128, 0.735);
        }
        .outrosmetais{
            background-color: rgba(95, 158, 160, 0.53);
        }
        .gasesnobres{
            background-color: cornflowerblue;
        }
        .halogênios{
            background-color: lightskyblue;
        }
        .metaisalcalinos{
            background-color: rgba(237, 120, 4, 0.998);
        }
        .lantanídeos{
            background-color: rgba(0, 255, 255, 0.577);
        }
        .actinídios{
            background-color: rgba(238, 130, 238, 0.771);
        }
        .metaisemtransição{
            background-color: rgba(233, 150, 122, 0.87);
        }
        .metaisalcalinosterrosos{
            background-color: rgba(255, 217, 0, 0.982) ;
        }
        .alinhamento{
            align-items: left;
            text-align: left;
            color:rgb(8, 8, 8);
            font-size: 15px;
        }
     
        
        .border:hover{transform: scale(1.2);}