body {
    font-family: Tahoma, sans-serif;
}

/* Begin: styling for spoiler text */
.spoiler {
  background-color: #212121; /* Dark block background */
  color: #212121;            /* Matches text color to hide it */
  cursor: pointer;
  padding: 0 2px;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease;
  user-select: none;         /* Prevents accidentally highlighting hidden text */
}

/* Reveals text when clicked (active) or focused via keyboard navigation */
.spoiler:active,
.spoiler:focus {
  background-color: rgba(255, 255, 255, 0.1); /* Light backdrop for revealed text */
  color: inherit;                             /* Restores the original text color */
  user-select: auto;                          /* Allows selecting text once revealed */
  pointer-events: none;                       /* Keeps it revealed after the click */
}
/* End: styling for spoiler text */

/* The container element needs relative positioning */
.hover-container {
  position: relative;
  display: inline-block; /* Keeps the container wrapped tightly around the text */
  cursor: pointer;
}

/* Begin: styling for tooltip hover text */
.hover-container .hover-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  
  /* Position it right below the parent text */
  top: 100%;
  left: 50%;
  transform: translateX(-50%); /* Centers the tooltip */
  
  /* Styling details */
  background-color: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap; /* Prevents text wrapping unless desired */
  
  /* Smooth appearance */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Trigger visibility on parent hover */
.hover-container:hover .hover-text {
  visibility: visible;
  opacity: 1;
}
/* End: styling for tooltip hover text */

/* Begin: styling for collapsable block with rotating caret */
.content {
  display: none;
  padding: 10px 15px;
  background-color: #f1f1f1;
  border-radius: 10px;
}

.clear-button {
  font-family: Tahoma, sans-serif;
  color: rgb(0, 0, 0);
  font-size: 14px;
  border: none;
  background: none;
}

.caret {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease; /* Smooth animation */
  transform: rotate(-90deg);
}

.caret.rotated {
  transform: rotate(0deg);
}

.content.open {
  display: block;
}
/* End: styling for collapsable block with rotating caret */