.dropdown-button {
     position: relative;

     border: 1px solid silver;
     border-radius: 5px;
     font-size: 0.85rem;
     font-weight: 400;

     color: var(--color-button-text);
     background-color: transparent;
     /* background-color: var(--color-button); */

     /* for the icon */
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 0 7px 3px 7px;
 }

 .dropdown-button-image {
     margin: 5px 0 0 3px;
 }

 .dropdown-button:hover {
     font-weight: 600;
     box-shadow: 4px 2px gray;
 }

 .dropdown-button:hover>div {
     opacity: 1.0;
     /* this prevents hover on menu from showing the menu while it is hidden */
     pointer-events: auto;
 }

 .dropdown-menu {
     /* menu is hidden until hover on button */
     opacity: 0.0;
     /* this prevents hover on menu from showing the menu while it is hidden */
     pointer-events: none;
     /* this positions the menu relative to the button - overlapping the other content*/
     position: absolute;
     top: 32px;
     left: 16px;
     z-index: 1;
     color: ivory;
     background-color: rgb(50, 50, 50);
     border: 1px silver solid;
     border-radius: 5px;
     font-size: 0.8rem;
     font-weight: 400;
     padding: 10px;
     width: 160px;

     transition: opacity 400ms ease-in-out;
 }

 .dropdown-menu>div {
     margin: 6px 3px 20px 3px;
 }

 .dropdown-menu:hover {
     /* box-shadow: 3px 2px #ccc; */
     pointer-events: auto;
 }

 .dropdown-menu>div:hover {
     text-decoration: underline;
     text-underline-offset: 4px;
     font-weight: 600;
 }