h1{
    text-align: center;
}

.main {
   border: 2px red solid;
   display: grid;
   grid-template-columns: repeat(auto-fill,23%);
   text-align: center;
   grid-gap: 2%;
   padding: 5%;

}

.main div{
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);;
}

.main div button{

    background: rgb(24, 24, 24);
    color: rgb(245, 245, 245);
    border: none;
    border-radius: 100px;
    padding: 10%;
    
}

.main div button:hover{
    background: rgb(245, 245, 245);
    color: rgb(24, 24, 24);
    transition: background .3s ease-in;
}

.main div:nth-child(1){
    background-color: orange;
}

.main div:nth-child(2){
    background-color: salmon;
}

.main div:nth-child(3){
    background-color: rosybrown;
}

.main div:nth-child(4){
    background-color: bisque;
}

.main div:nth-child(5){
    background-color:chocolate;
}

.main div:nth-child(6){
    background-color:powderblue;
}

.main div:nth-child(7){
    background-color:seagreen;
}

.main div:nth-child(8){
    background-color: brown;
}

.main div:nth-child(9){
    background-color:yellowgreen;
}