Put glossary tooltip styles in ABC order

Author: josh-wong

src/css/custom.css

@@ -205,20 +205,21 @@ html[data-theme="dark"] a[class^='fa-solid fa-circle-question'] {
 
 /* Glossary tooltip styles */
 .glossary-term {
-  text-decoration: underline dotted; /* Dotted underline */
   cursor: help; /* Change cursor to indicate help */
+  text-decoration: underline dotted; /* Dotted underline */
 }
 
 .tooltip-glossary {
-  position: absolute; /* Position relative to the nearest positioned ancestor */
-  background-color: #fff;
+  background-color: #f6f6f6;
   border: 1px solid #ccc;
-  padding: 5px;
-  z-index: 10;
-  visibility: visible;
-  opacity: 0.9;
-  transform: translateY(5px); /* Move tooltip slightly down */
-  white-space: nowrap; /* Prevent text wrapping */
   border-radius: 4px; /* Optional: round the corners */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: add a shadow */
+  opacity: 1;
+  position: absolute; /* Position relative to the nearest positioned ancestor */
+  padding: 5px;  
+  transform: translateY(5px); /* Move tooltip slightly down */
+  visibility: visible;
+  white-space: normal; /* Prevent text wrapping */
+  width: 400px; /* Set a maximum width for the tooltip */
+  z-index: 10;
 }