.div_center {
   text-align: center;
}

.div_center h1 {
   word-spacing: 8px;
   letter-spacing: 8px;
   margin-top: 5%;
   margin-bottom: 1%; 
}

.margin_top {
   margin-top: 2%; 
}

/* Tooltip container */
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
   opacity: 1;
 }
 
 /* Tooltip text */
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: #555;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
 
   /* Position the tooltip text */
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -60px;
 
   /* Fade in tooltip */
   opacity: 0;
   transition: opacity 0.3s;
 }
 
 /* Tooltip arrow */
 .tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #555 transparent transparent transparent;
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover > .tooltiptext {
   visibility: visible;
   opacity: 1;
 }