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;
}


dialog{
    width: 50%;
    max-height: 100vh;
    background-color: wheat;
    border: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    overflow: hidden;
    padding: 2rem;
    box-shadow: 1px 2px 3px black;
}

dialog #result{
    display: flex;
    flex-direction: column;
    width: 100%;
}

dialog .solve{
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 1px 5px 5px black;
    color: black;
    margin: 50px 30px;
    padding: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}