css5.css

.mainDiv{
    height: 400px;
    width: 400px;
    border: 2px solid green;
    border-radius: 11px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}


/* .mainDiv div{

    border: 2px solid black;
    height: 100px;
    width: 100px;
    flex-direction: row;
    font-size: 50px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
} */

/* #box1{
    border: 2px solid black;
    height: 100px;
    width: 100px;
    flex-direction: row;
    font-size: 50px;
    flex-wrap: wrap;

}

#box2{
    border: 2px solid black;
    height: 100px;
    width: 100px;
    flex-direction: row;
    font-size: 50px;
    flex-wrap: wrap;
} */


#box3 , #box2 , #box1 , #box4, #box5 , #box6 , #box7 , #box8 , #box9{
    border: 2px solid black;
    flex-direction: row;
    height: 100px;
    width: 100px;
    font-size: 50px;
    flex-wrap: wrap;
   margin: 12px;
   background-color: grey;
   border-radius: 8px;
   text-align: center;
    
}




.mainDiv2{
    height: 50px;
    width: 900px;
    border: 2px solid green;
    display: flex;
    flex-wrap: wrap;
    background-color: pink;
    border-radius: 10px;

}


#bx1 , #bx2 , #bx3 , #bx4{
    height: 50px;
    width: 80px;
    background-color: pink;
    font-size: 24px;
    text-align: center;
    border-radius: 10px ;
    align-content: center;
    
}