body {
    margin: 0px;
    padding: 0px;

}

:root {
    --sea-green--: #1a988b;
    --dark-sea-green--: #08685e;
    --yellow--: #ffc93c;
    --dark-yellow--: #c66104;
    --orange--: #ff9a3c;
    --dark-orange--: #c66104;
    --sky-blue--: #0fc9e7;
    --dark-sky-blur--: #025663;
    --blue--: #39598a;
    --dark-blue--: #324360;
    --gray--: #b6cdbd;
    --dark-gray--: #626f66;
    --pink--: #f12b6b;
    --dark-pink--: #d60749;
    --feroze--: #7bd7d1;
    --dark-feroze--: #4e9590;
    --perple--: #b799f9;
    --dark-perple--: #8a71bf;
    --peach--: #ff5757;
    --dark-peach--: #e23232;
    --green--: #389738;
    --dark-green--: #1c5b1c;

}

#container {
    width: 1300px;
    border: 2px solid rgb(255, 0, 0);
    margin: 30px auto;
    /* background-color:rgb(240, 238, 238); */
}

#heading {
    text-align: center;
    text-transform: capitalize;
    color: #161649e7;
}

td {
    width: 50px;
    height: 30px;
    /* border: 2px solid black; */
    text-transform: capitalize;
    text-align: center;
    font-size: larger;
    /* margin: 10px auto 10px auto; */
    /* line-height: 10px; */
    font-size: small;
    border-radius: 10px;
    /* color: white; */

}

#first-row,
#second-row,
#third-row,
#number-row,
#eight-row,
#eleven-row,
#nineth-row,
#twelfth-row {
    empty-cells: hide;
}

.numbers {
    border: none;
    text-transform: uppercase;
    margin: 10px 10px 10px 10px;
}

.numbers-colum {
    border: none;
    text-align: end;
    text-transform: uppercase;
    /* font-size: 8px; */
}

.sea-green {
    background-color: var(--sea-green--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-sea-green--);

}

.yellow {
    background-color: var(--yellow--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-yellow--);

}

.orange {
    background-color: var(--orange--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-orange--);
}

.sky-blue {
    background-color: var(--sky-blue--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-sky-blur--);
}

.blue {
    background-color: var(--blue--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-blue--);
}

.gray {
    background-color: var(--gray--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-gray--);
}

.pink {
    background-color: var(--pink--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-pink--);
}

.feroze {
    background-color: var(--feroze--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-feroze--);
}

.perple {
    background-color: var(--perple--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-perple--);
}

.peach {
    background-color: var(--peach--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-peach--);
}

.green {
    background-color: var(--green--);
    box-shadow: inset 3px 3px 3px 3px var(--dark-green--);
}

#twelfth {
    width: 70px;
    height: 30px;
}