style.css

html{
  margin:0;
}
span{
  display:block;
}
.canvas{
  margin : 100px auto 100px;
  width : 80% ;
text-align : center}

.btn{
  height: 100px;
  width:100px;
  border: 2px solid black;
  display: inline-block;
}

#green{
  background-color: green;
}

#red{
  background-color: red;
}
#blue{
  background-color: blue;
}
#yellow{
  background-color: yellow;
}


nav {
  background-color: #333; /* Background color */
  overflow: hidden; /* Ensure any overflowing content is hidden */
}

nav a {
  float: left; /* Float the links to the left */
  display: block; /* Make the links block-level elements */
  color: white; /* Text color */
  text-align: center; /* Center-align the text */
  padding: 14px 20px; /* Add padding to the links */
  text-decoration: none; /* Remove underline from links */
}

nav a:hover {
  background-color: #ddd; /* Change background color on hover */
  color: black; /* Change text color on hover */
}

nav .back {
  float: right; /* Float the back button to the right */
  padding: 14px 20px; /* Add padding to the back button */
  background-color: #4CAF50; /* Background color */
  color: white; /* Text color */
  border: none; /* Remove border */
  cursor: pointer; /* Add pointer cursor on hover */
}

nav .back:hover {
  background-color: #45a049; /* Change background color on hover */
}


.canvas {
  padding: 20px; /* Add padding to the canvas */
  text-align: center; /* Center-align the content inside the canvas */
}

.canvas h1 {
  color: #333; /* Text color */
}

.canvas .btn {
  display: inline-block; /* Make the buttons inline */
  width: 50px; /* Set width of the buttons */
  height: 50px; /* Set height of the buttons */
  margin: 10px; /* Add margin between the buttons */
  border-radius: 50%; /* Make the buttons round */
  cursor: pointer; /* Add pointer cursor on hover */
}

.canvas #change {
  margin-top: 20px; /* Add margin to the bottom of the heading */
  color: #555; /* Text color */
}