style.css

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: black;
    color: white;
    margin-top: 40px;
}



#table{
    display: grid;
    grid-template-columns: repeat(19, 1fr);
    gap: 5px;
    
}

.row1{
    grid-row: 1/2;
    font-size: 1.5rem;
    
}

.row2{
    grid-row: 2/3;
}
.row3{
    grid-row: 3/4;
}
.row4{
    grid-row: 4/5;
}
.row5{
    grid-row: 5/6;
}
.row6{
    grid-row: 6/7;
}
.row7{
    grid-row: 7/8;
}
.row8{
    grid-row: 8/9;
}
.element{
    width: 50px;
    height: 50px;
    font-size: 2rem;
    padding: 0 10px;
    padding-bottom: 10px;

}
.element .name{
    text-align: center;
}
.element .number{
    font-size: 14px;
    text-align: left;
    
}
.element1{
    grid-column: 2/19;
    width: 50px
}
.element4{
    grid-column: 3/14;
    width: 50px
}

.element12{
    grid-column: 3/14;
    width: 50px
}
.green{
    background-color: rgb(0, 52, 0);   
}
.lightgreen{
    background-color: rgb(37, 189, 37);
}
.pink{
    background-color: rgb(72, 22, 69);
}
.orange{
    background-color: orange;
}
.red{
    background-color: rgb(167, 7, 7);
}
.purple{
    background-color: rgb(159, 29, 159);
}
.lightblue{
    background-color: rgb(30, 114, 142);
}
.blue{
    background-color: rgb(11, 17, 213);
}
.topnumber{
    text-align: center;
}
.rownumber{
    text-align: center;
}