/* Kontejner tlačítka */
/* Zarovnání tlačítka na střed */
.button-container {
    display: flex; /* Flexbox pro zarovnání */
    justify-content: center; /* Horizontální zarovnání */
    align-items: center; /* Vertikální zarovnání */
    width: 100%; /* Šířka kontejneru */
    height: 20vh; /* Výška kontejneru zabírá celé okno */
    background-color: #ffffff; /* Bílé pozadí stránky */
}

/* Tlačítko */
/* Základní styl tlačítka */
#animated-border-button {
    position: relative; /* Relativní pozice pro animaci kolečka */
    display: inline-block;
    padding: 15px 30px; /* Vnitřní výplň tlačítka */
    font-size: 16px; /* Velikost textu */
    font-weight: bold; /* Tučný text */
    text-align: center; /* Zarovnání textu na střed */
    text-transform: uppercase; /* Velká písmena */
    color: #000; /* Barva textu */
    background-color: #fff; /* Bílé pozadí */
    border: 3px solid #000; /* Černý rámeček */
    text-decoration: none; /* Žádné podtržení textu */
    overflow: hidden; /* Skrytí přetékajících částí */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Plynulé přechody */
}

/* Hover efekt tlačítka */
/* Obrácení barev */
#animated-border-button:hover {
    color: #fff; /* Bílý text */
    background-color: #000; /* Černé pozadí */
    border-color: #fff; /* Bílý rámeček */
}

/* Animovaný rámeček */
/* Zlatá hvězdička, která běhá po rámečku */
#animated-border-button::before {
    content: ''; /* Prázdný obsah */
    position: absolute; /* Absolutní pozice vůči tlačítku */
    width: 15px; /* Velikost hvězdy */
    height: 15px; /* Velikost hvězdy */
    background-color: #FFD700; /* Zlatá barva hvězdy */
    border-radius: 50%; /* Kulatý tvar */
    animation: move-around-border 2s linear infinite; /* Plynulý pohyb po rámečku */
    z-index: 1; /* Nad tlačítkem */
}

/* Hover efekt hvězdy */
/* Hvězda zůstává zlatá i při hover */
#animated-border-button:hover::before {
    background-color: #FFD700; /* Zlatá barva hvězdy */
}

/* Animace pohybu hvězdy */
@keyframes move-around-border {
    0% {
        top: -8px; /* Hvězda na horním okraji */
        left: -8px;
    }
    25% {
        top: -8px; /* Hvězda na pravém horním rohu */
        left: calc(100% - 8px);
    }
    50% {
        top: calc(100% - 8px); /* Hvězda na pravém spodním rohu */
        left: calc(100% - 8px);
    }
    75% {
        top: calc(100% - 8px); /* Hvězda na levém spodním rohu */
        left: -8px;
    }
    100% {
        top: -8px; /* Hvězda zpět na horní okraj */
        left: -8px;
    }
}