footer {
    margin: auto;
    width: 50%;
    padding-top: 50px;
    padding-bottom: 15px;
    max-width: 1150px;
    width: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}

.ref-row {
    display: flex;
    place-content: center;
    gap: 2em;
}

.ref-row > .discordSvg, .ref-row > .githubSvg , .ref-row .donationSvg {
    background-color: var(--searchTextColor);
}

:root.dark .ref-row > .discordSvg, :root.dark .ref-row > .githubSvg, :root.dark .ref-row .donationSvg {
    background-color: var(--tagColor);
}

.ref-row > .donation {
    position: relative;
}

.ref-row > .donation > .tooltip {
    position: absolute;
    visibility: hidden;
    width: max-content;
    max-width: 33vw;
    text-align: center;
    border-radius: 6px;
    padding: 0.5em;
    z-index: 1;
    color: #fff;
    background-color: var(--bgPrimaryColor);
    box-shadow: 0 0 10px 8px var(--backgroundShadow);
}

.ref-row > .donation:hover .tooltip {
    visibility: visible;
}

.footer-hr {
    border-top: 1px solid var(--primaryColor);
    padding-bottom: 10px;
}

.footer-hr:before {
    content: '';
    border-radius: 100%;
    position: absolute;
    height: 20px;
    width: 120px;
    background: var(--background);
    margin: -10px;
    /* left: calc(50% - 50px); */
    margin-left: -60px;
    box-shadow: inherit
}

.footer-hr:after {
    content: '';
    border-radius: 100%;
    position: absolute;
    height: 10px;
    width: 10px;
    background: var(--bgPrimaryColor);
    margin: -5px;
    box-shadow: inherit
}