/* Basic styles for the HTML and body */
html, body {
  margin: 0; /* Removes the default margin from the body */
  padding: 0; /* Removes the default padding from the body */
}

/* Styling for the canvas element */
canvas {
  display: block; /* Ensures that the canvas element behaves as a block-level element */
}

/* General button styling for elements with class .button */
.button {
  border: 2px solid; /* Adds a border around the button with a 2px solid style */
  color: #EAE0D5; /* Sets the text color to light beige */
  padding: 5px 7px; /* Adds padding inside the button (5px top/bottom, 7px left/right) */
  background-color: #5E503F; /* Sets the background color to a brown shade */
  text-align: center; /* Centers the text horizontally inside the button */
  text-decoration: none; /* Removes any underline from the text (for links) */
  transition-duration: 0.6s; /* Smoothens the hover transition effect */
  cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
  position: absolute; /* Allows you to position the button absolutely on the page */
  font-size: 20px; /* Sets the font size of the button text */
}

/* Hover effect for buttons */
.button:hover {
  background-color: #000000; /* Changes the background color to black on hover */
  color: #59FF6A; /* Changes the text color to light green on hover */
  letter-spacing: 1px; /* Adds a slight letter-spacing effect when hovering */
}

/* Positioning for the start button */
#start {
  width: 200px; /* Fixed width for the start button */
  display: inline-block; /* Allows the start button to display inline with other elements */
  top: 600px; /* Positions the button 600px from the top of the screen */
}

/* Hide the restart button initially */
#restart {
  width: 200px; /* Fixed width for the restart button */
  bottom: 70px; /* Positions the restart button 70px from the bottom of the screen */
  display: none; /* Hides the restart button initially */
}

/* Styling for the element buttons (grass, water, sand, fire) */
#grass, #water, #sand, #fire {
  display: none; /* Hides the element buttons initially */
  bottom: 25px; /* Positions the buttons 25px from the bottom of the screen */
  width: 100px; /* Fixed width for each element button */
}