/* Global link styles */
.mainlink:link,
.mainlink:visited {
  color: #e67e22;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  transition: all 0.2s ease-in-out;
}

/* Hover state for mouse users */
.mainlink:hover {
  color: #c0392b;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 0.2em;
}

/* Active state (when a user clicks) */
.mainlink:active {
  color: #b95200;
}

/* Focus state for keyboard users */
.mainlink:focus {
  outline: 2px solid #e67e22;
  outline-offset: 2px;
}

.singlecode {
  /* Font and Text */
  font-family: monospace, Consolas, "Courier New", Courier;
  color: #333; /* Darker text color for readability */

  /* Background and Spacing */
  background-color: #e0e6eb; /* A very light, subtle background */
  border-color: #bdc3c7; /* A subtle grey border appears on hover */
  padding: 2px 4px; /* A little bit of padding */
  border-radius: 4px; /* Rounded corners */
  margin: 0 2px; /* Small horizontal margin */

  /* Visual Enhancements */
  border: 1px solid; /* Starts with no visible border */
  border-color: gray;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

pre.codeblock {
  background-color: #2d2d2d; /* Dark background for the code block */
  padding: 0.75rem 1rem; /* Reduced vertical padding */
  border-radius: 0.5rem; /* Rounded corners */
  font-family: 'Fira Code', 'Roboto Mono', Consolas, monospace;
  font-size: 0.875rem; /* Smaller font size for a compact look */
  line-height: 1.5;
  color: #ccc; /* Light grey text color */
  overflow-x: auto; /* Adds horizontal scrolling for long lines */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* General code styles */
code {
  white-space: pre; /* Preserves whitespace and line breaks */
}

/* Basic syntax highlighting colors */
.keyword { color: #cc7832; }   /* e.g., 'class', 'const' */
.string { color: #6a8759; }    /* e.g., "Hello, World!" */
.tag { color: #e8bf6a; }       /* e.g., 'span', 'input' */
.attribute { color: #a9b7c6; } /* e.g., 'id', 'type' */
.value { color: #6a8759; }     /* e.g., 'errorDescription' */
.comment { color: #808080; }   /* e.g., '// My comment' */