button {
  background-color: #ffc600;
 /* sets the background color of the button to yellow */
  color: #000000;
 /* sets the text color of the button to black */
  padding: 12px 24px;
 /* adds some padding to the button */
  border: none;
 /* remove the default border */
  border-radius: 30px;
 /* rounds the corners of the button */
  font-size: 18px;
 /* sets the font size of the button text */
  font-weight: bold;
 /* sets the font weight of the button text to bold */
  cursor: pointer;
 /* changes the cursor to a pointer when hovering over the button */
  text-shadow: 2px 2px 3px #ffc600;
 /* adds a subtle shadow to the button text */
  box-shadow: 2px 2px 3px #ffc600;
 /* adds a subtle shadow to the button */
  transition: all 0.2s ease-in-out;
 /* adds transition effect when hovering over the button */
}

button:hover {
  background-color: #000000;
 /* changes the background color of the button to black when hovered */
  color: #ffc600;
 /* changes the text color of the button to yellow when hovered */
  transform: scale(1.1);
 /* increases the size of the button slightly when hovered */
}

button:active {
  transform: scale(0.97);
}