body{
    margin: 0px;
}

.main{
    display: grid;
    grid-template-columns: auto auto auto auto;
}
.box{
    height: 32vh;
    width: 53vb;
    border: 3px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
}

.one{
    background-color: rgb(255, 163, 163);
}

.two{
    background-color: rgb(255, 221, 163);
}

.three{
    background-color: rgb(229, 255, 163);
}

.four{
    background-color: rgb(163, 255, 218);
}

.five{
    background-color: rgb(163, 238, 255);
}

.six{
    background-color: rgb(163, 191, 255);
}

.seven{
    background-color: rgb(221, 163, 255);
}

.eight{
    background-color: rgb(255, 163, 244);
}

.nine{
    background-color: rgb(255, 163, 184);
}

.ten{
    background-color: rgb(163, 255, 175)
}

.eleven{
    background-color: rgb(164, 163, 255)
}

.twelve{
    background-color: rgb(163, 255, 198)
}


.one:hover{
    background-color: rgb(255, 103, 103);
}

.two:hover{
    background-color: rgb(252, 195, 96);
}

.three:hover{
    background-color: rgb(208, 255, 90);
}

.four:hover{
    background-color: rgb(105, 253, 194);
}

.five:hover{
    background-color: rgb(49, 214, 251);
}

.six:hover{
    background-color: rgb(82, 134, 254);
}

.seven:hover{
    background-color: rgb(190, 79, 255);
}

.eight:hover{
    background-color: rgb(253, 78, 233);
}

.nine:hover{
    background-color: rgb(251, 88, 126);
}

.ten:hover{
    background-color: rgb(64, 251, 89)
}

.eleven:hover{
    background-color: rgb(80, 77, 249)
}

.twelve:hover{
    background-color: rgb(61, 255, 135)
}