get a very basic modal working to get the hint data and display it

[tangway]

this commit also centers the modal. initially i had thought that setting .modal-container would make .modal a flex item but somehow that didnt work. found solution from https://css-tricks.com/considerations-styling-modal/ to center the .modal <dialog> element directly and it worked!

.modal {
  // top and left properties move position of elements based on the point in its top-left corner and not the center
  top: 50%;
  left: 50%;
  // wch is why this is needed to center the modal. 
  // transform adjusts relative to its own element's size and not to the viewport
  transform: translate(-50%, -50%);
}