kbd {
  /* Basic styling for a key-like appearance */
  background-color: #fcfce6; /* Light grey background */
  border: 1px solid #cdc839; /* Light grey border */
  border-radius: 3px; /* Slightly rounded corners */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; /* Subtle shadow */
  color: #333; /* Dark text color */
  font-family: monospace; /* Monospace font */
  padding: 2px 5px; /* Padding inside the key */
  white-space: nowrap; /* Prevent line breaks within the key */
  display: inline-block; /* Allow padding and sizing */
  line-height: 1; /* Adjust line height for better alignment */
  vertical-align: middle; /* Align with surrounding text */
  /* make kbd element vertically centered in the text line */
  transform: translateY(-0.1em);
}

/* Optional: Styling for nested kbd elements (e.g., for shortcuts like Ctrl + C) */
kbd kbd {
  font-size: 0.8em; /* Slightly smaller font for nested keys */
  padding: 1px 3px; /* Reduced padding for nested keys */
}

/* kbd inside blockquote */
blockquote kbd {
  color: #888;
}

/* Optional: Hover effect for a "pressed" look */
kbd:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fff inset; /* Reduce shadow on hover */
  transform: translateY(1px); /* Move down slightly on hover */
}