body{
font-family: Arial, sans-serif;
background:#f2f2f2;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
margin:0;
box-sizing:border-box;

}


.container{
text-align:center;
}

h1{
margin-bottom:10px;
}

.controls{
margin-bottom:15px;
display:flex;
gap:10px;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}

.grid{
width:640px;
height:640px;
display:flex;
flex-wrap:wrap;
border:2px solid #333;
background:white;
}

.cell{

border: 1px solid #ddd;
width: 40px;
height: 40px;
}
*{
box-sizing:border-box;
}

button{
width: 120px;
height: 40px;
padding:10px 20px;
border:none;
background:#333;
color:white;
cursor:pointer;
border-radius:5px;
transition:background 0.3s;
}

button:hover{
background:#de2f2f;
}

#colorPicker{
width: 40px;
height: 40px;
padding:2px;
border:1px solid #ddd;
border-radius:5px;
}

#slider{
width: 200px; 
}