.body { max-width: 660px; padding: 0 0.5em 1em 0.5em; margin: 0 auto;
        text-align: left;
        font-family: Times New Roman; font-size: 110%;
        background: #fbfff8; color: #222; }
.meta { background: #f0f0f0; font-size: 80%; padding: 0.5em 5%;
        margin: 1em 0 0 0; }
.hidden { display: none; }
#heading-meta { text-align: center; font-size: 80%; margin: 1.5em 0; }

h1 { font-size: 140%; text-align: center; }
h2 { font-size: 120%; font-style: italic; font-weight: normal; }
p  { text-align: justify; }
ul { padding-left: 1em; }

#sitemenu  { border-bottom: 2px solid #ddd; }
#sitemenu ul  { margin: 0; padding: 0; }
#sitemenu ul li { display: inline-block; margin: 0 0.5em;  font-size: 75%; }
#sitemenu li:hover { background: white; }

.tooltip  {  position: relative;  display: inline-block;  cursor: pointer;  }
.tooltiptext  {  visibility: hidden;  width: 130px;
                 background-color: #444;  color: #ffffff;
                 text-align: center;  padding: 5px 0;
                 border-radius: 6px;  position: absolute;  top: 33px;
                 z-index: 1; /* Ensure tooltip is displayed above content */
              }
.tooltip:hover .tooltiptext  {  visibility: visible;  }


@media screen and (min-width: 600px) { .body { font-size: 140%; } }

@media screen and (min-width: 500px) { .tooltiptext { top: 45px; } }
@media screen and (min-width: 650px) { .tooltiptext { top: 61px; } }