styles.css

body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    background-color: rgb(180, 180, 180);
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.options{
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px;
    font-size: 20px;
}

.rainbowbtn, .blackbtn, .eraserbtn, .cleanbtn{
    display: flex;
    border-style: solid;
    border-radius: 5%;
    width: 100px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background-color: rgb(180, 180, 180);
}

.rainbowbtn:hover, .blackbtn:hover, .eraserbtn:hover, .cleanbtn:hover{
    transition: 0.2s;
    transform: scale(1.1);
    background-color: honeydew;
}

.squareDivs{
    display: grid;
    width: 500px;
    height: 500px;
    border-style: solid;
    border-color: black;
    background-color: whitesmoke;
}

.gridDivs{
    border-style: hidden;
}

.askForNumber{
    font-size: 18px;
}

.startbtn{
    border-style: solid;
    border-width: 3px;
    border-radius: 3%;
    background-color: rgb(201, 186, 145);
    padding: 5px;
    margin: 15px;
    width: 100px;
    height: auto;
    font-size: 20px;
}

.startbtn:hover{
    transition: 0.35s;
    transform: scale(1.1);
    background-color: rgb(201, 180, 123);
}

.startbtn:active{
    transform: scale(1.2);
    background-color:black;
    color: white;
}