style.css

p {
  text-align: justify
}

figcaption {
  margin: auto;
  text-align: center;
}


.code-copy-outer-scaffold:has(.code-annotated)>.code-copy-button {
right: 1.5em;
margin-right: 0;
}

/* Ensure the "check answer" button is always visible and has the correct width */
input[type="submit"][value="Check answer"] {
  display: inline-block; /* Make the button an inline-block to control width */
  width: auto; /* Set the width to auto to match the text width */
  margin: 5px 0; /* Add some space above and below the button */
  padding: 5px; /* Add some padding for clickability */
  border: 1px solid #ccc; /* Optional: Add a border for visual cue */
  border-radius: 5px; /* Optional: Add rounded edges with a radius of 5px */  
  background-color: #f0f0f0; /* Light gray background color */
  color: #333; /* Dark text color */
  cursor: pointer; /* Make it look clickable */
  font-size: 14px; /* Make the text readable */
  text-align: center; /* Center the text */
  transition: background-color 0.3s; /* Add a smooth transition for hover effect */
}

/* Add a light green background on hover */
input[type="submit"][value="Check answer"]:hover {
  background-color: #e0f0d0; /* Light green background color on hover */
  border-color: #aaa; /* Darken the border on hover */
}