.h1 {
  color: #2c3e50;         /* Changes text color */
  font-size: 32px;        /* Sets the size of the font */
  font-family: Inter;     /* Sets the font type */
  text-align: left;     /* Aligns text to center, left, or right */
  font-weight: bold;      /* Adjusts thickness of the text */
}

/* The image is hidden and positioned above the text by default */
  .hover-image {
    visibility: hidden;
    width: 100px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    bottom: 125%; /* Positions image above the text */
    left: 100%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s; /* Smooth fade-in effect */
  }

  /* Show the image when the container is hovered */
  .hover-container:hover .hover-image {
    visibility: visible;
    opacity: 1;
  }
  
    /* The container for both text and the hidden image */
  .hover-container {
    position: relative;
    display: inline-block;
    cursor: help;
    /*border-bottom: 1px dotted #000;*/
  }
  


.title {
  color: Magenta;         /* Changes text color */
  font-size: 32px;        /* Sets the size of the font */
  font-family: Inter;     /* Sets the font type */
  text-align: left;     /* Aligns text to center, left, or right */
  font-weight: bold;      /* Adjusts thickness of the text */
}