/* Kontejner tlačítka */
.button-container {
    display: flex; /* Flexbox pro zarovnání obsahu */
    justify-content: center; /* Horizontální zarovnání na střed */
    align-items: center; /* Vertikální zarovnání na střed */
    width: 100%; /* Šířka kontejneru */
    height: 100vh; /* Výška kontejneru zabírá celé okno */
    margin: 0; /* Žádné okraje */
    overflow: hidden; /* Skrytí přetékajícího obsahu */
}

/* Základní styl tlačítka */
#rotate-button {
    position: relative; /* Relativní pozice pro efekty */
    width: 100px; /* Výchozí šířka tlačítka */
    height: 50px; /* Výchozí výška tlačítka */
    line-height: 50px; /* Vertikální zarovnání textu */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #A8C3A4;
    border: 2px solid #D9BBA9;
    border-radius: 25px;
    transition: all 1s ease;
    z-index: 1;
}

/* Efekt při najetí myší */
#rotate-button:hover {
    transform: rotate(360deg); /* Otočení o 360 stupňů */
    width: 120px; /* Zvýšení šířky tlačítka */
    height: 120px; /* Zvýšení výšky tlačítka */
    border-radius: 50%; /* Transformace na kruh */
    background: #D9BBA9;
    line-height: 120px; /* Zachování vycentrování textu */
    font-size: 18px; /* Zvýšení velikosti textu */
}

/* Světelný efekt na tlačítku */
#rotate-button:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%; /* Velikost efektu */
    height: 200%;
    background: radial-gradient(circle, #F4C95D, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: all 1s ease;
    z-index: -1;
}

/* Aktivace světelného efektu při najetí */
#rotate-button:hover:before {
    opacity: 1; /* Zviditelnění efektu */
    transform: translate(-50%, -50%) scale(1);
}