.page-container {
    position: relative;
    min-height: 100vh;
}

.footer {
    width: 100%;
    height: 2.5rem;
    margin: 0 auto;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Tooltip */
/* ------------------------------------------------------------------------------------------------------------------ */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    color: #fff;
    text-align: center;
    padding: 0.25rem 0.5rem;
    right: 32%;
    bottom: 46%;
    margin-left: -150px; /* Use half of the width (150/2 = 75), to center the tooltip */
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 100;
    font-size: 12px ;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    border: 1px solid black;
    background: #eee;
    padding: .25em;
    max-width: 400px;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}