@keyframes pulseAnimation {
    0% {
        background-color: rgba(145,21,84,.88);
    }
    50% {
        background-color: #f50a0a;
    }
    100% {
        background-color: rgba(145,21,84,.88);
    }
    
}

.fancy-button {
    background-color: rgba(145,21,84,.88);
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 50%; /* maakt de knop rond */
    position: absolute; /* positioneert de knop absoluut binnen zijn relatief gepositioneerde ouder */
    top: 50%; /* centreert de knop verticaal */
    left: 50%; /* centreert de knop horizontaal */
    transform: translate(-50%, -50%); /* verschuift de knop naar links en naar boven met de helft van zijn eigen breedte en hoogte */
    transition: background-color 0.3s;
    width: 50px; /* breedte van de knop */
    height: 50px; /* hoogte van de knop */
    animation: pulseAnimation 10s infinite; /* voegt de pulse animatie toe met een duur van 3 seconden en herhaalt deze oneindig */
}

.fancy-button:hover {
    background-color: #dddddd;
    animation: none; /* stop de animatie wanneer de knop wordt gehoverd */
}

.text-div {
    position: absolute;
    top: calc(50% + 30px); /* positioneert de tekst net onder de knop */
    left: 50%;
    transform: translate(-50%, 0); /* alleen horizontale verschuiving is nodig */
    font-size: 20px;
    color: white
}

.text-div-menu {
    position: absolute;
    top: calc(50% + 300px);
    left: 55%;
    transform: translate(-50%, 0);
    font-size: 20px;
    color: white;
    width: 100%;
}

@keyframes loadingDots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60% { content: "..."; }
    80%, 100% { content: "   "; }
}

#load-text:after {
    content: ".";
    animation: loadingDots 1.5s infinite;
}

.circle-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    font-size: 10.5px;
    margin-top: -9px;
    vertical-align: middle;
    padding: 3px;
}


.circle-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


.text-div-menu .fa {
    font-size: 25px;
}

.text-div-menu, .text-div-menu img, .text-div-menu i, .circle-button {
    user-select: none; /* Voorkomt selecteren */
    /* ... (uw andere CSS-eigenschappen, indien van toepassing) ... */
}

.text-div-menu img:focus, .text-div-menu i:focus, .circle-button:focus {
    outline: none; /* Verwijdert focus-indicator */
}