body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-container {
    max-width: 100%;
    max-height: 100%;
}

.centered-container img {
    width: 100%;
    height: auto;
    opacity: 0;
    animation: fadeIn 3s ease forwards; 
}

 

.line {
    width: 100%; /* šířka čáry */
    height: 3px; /* výška čáry */
    background: linear-gradient(to right, black, gold); /* přechodový stín */
    margin: 10px auto; /* odsazení čáry od obrázku */
}

p {	   
   color:black;
}

.fading-logo {
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
   50% {
        opacity: 0.5; /* Přidáme průhlednost na 50% na polovině animace */
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInLogo {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.rotating-logo {
    animation: rotate 0.5s linear 0.5; /* 4 otočení za 2 sekundy */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1440deg); /* Začáteční hodnota pro 4 otočení */
    }
}