/* Styl tła gwiazd */
body {
    margin: 0;
    padding: 0;
    overflow-y: auto;  /* Włączenie przewijania strony */
    font-family: Arial, sans-serif;
    background: black;
    height: 100%;  /* Umożliwia przewijanie */
}

/* Warstwy animowanego tła */
.stars, .stars2, .stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    pointer-events: none; /* Elementy tła nie blokują kliknięć */
}

.stars {
    background: url('https://www.beabit.xyz/img/stars.png') repeat;
    animation: moveStars 100s linear infinite; /* Dłuższa animacja */
    z-index: 1;
}

.stars2 {
    background: url('https://www.beabit.xyz/img/stars.png') repeat;
    animation: moveStars2 200s linear infinite; 
    z-index: 2;
    opacity: 0.6;
}

.stars3 {
    background: url('https://www.beabit.xyz/img/stars.png') repeat;
    animation: moveStars3 300s linear infinite; 
    z-index: 3;
    opacity: 0.3;
}

/* Animacje ruchu gwiazd */
@keyframes moveStars {
    from { background-position: 0 0; }
    to { background-position: -10000px 5000px; }
}

@keyframes moveStars2 {
    from { background-position: 0 0; }
    to { background-position: 10000px -5000px; }
}

@keyframes moveStars3 {
    from { background-position: 0 0; }
    to { background-position: -5000px 10000px; }
}

/* Styl tekstu na środku */
.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10; /* Wyższy niż tło */
}

.center-content h1 {
    color: white;
    font-size: 60px;
    text-transform: uppercase;
    animation: fadeInOut 10s infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Animacja fade-in / fade-out */
@keyframes fadeInOut {
    0%, 40% { opacity: 1; }
    90%, 100% { opacity: 0; }
}

/* Stylizacja sekcji w przewijanym kontenerze */
.center-content2 {
    position: relative; /* Elementy w normalnym przepływie */
    width: 90%; /* Dopasowanie szerokości do kontenera */
    max-width: 800px; /* Maksymalna szerokość */
    margin: 50px auto; /* Wyśrodkowanie poziome i odstępy między sekcjami */
    padding: 20px; /* Odstęp wewnętrzny */
    text-align: center;
    background: rgba(0, 0, 0, 0.8); /* Półprzezroczyste tło */
    color: white;
    border-radius: 10px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Cień */
}

/* Nagłówki wewnątrz sekcji */
.center-content2 h1 {
    font-size: 36px;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: #ffffff; /* Kolor tekstu */
}

/* Akapit wewnątrz sekcji */
.center-content2 p {
    font-size: 18px;
    line-height: 1.6;
}

/* Stylizacja menu */
.menu {
    background-color: #000000; /* Czarne tło */
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.8); /* Biały cień */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    z-index: 10; /* Menu nad warstwami tła */
    position: fixed; /* Ustawienie menu na stałe na górze */
    top: 0; /* Umieszczenie menu na górze strony */
}

/* Stylizacja ikony w menu */
.menu-icon {
    margin-bottom: 10px;
}

.menu-icon a img {
    height: 80px;
    border-radius: 4px;
    vertical-align: middle;
}

/* Stylizacja listy w menu */
.menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.menu li {
    margin: 0 15px;
}

/* Linki w menu */
.menu a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}

.menu a:hover {
    color: #cccccc;
}

/* Stopka */
.footer {
    background-color: #000000; /* Czarne tło */
    padding: 10px 20px;
    box-shadow: 0 -4px 6px rgba(255, 255, 255, 0.8); /* Biały cień skierowany w górę */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    position: fixed; /* Ustawienie stopki na stałe na dole */
    bottom: 0; /* Umieszczenie stopki na dole strony */
    left: 0; /* Rozciągnięcie na całą szerokość strony */
    z-index: 10; /* Stopka nad warstwami tła */
    font-size: 18px; /* Ustawienie rozmiaru czcionki */
    color: white; /* Kolor tekstu na biały */
}

/* Zapewnienie, że elementy tła nie blokują innych elementów */
.stars, .stars2, .stars3 {
    pointer-events: none;
}

/* Dostosowanie przestrzeni między treścią a menu oraz stopką */
body {
    padding-top: 60px; /* Przestrzeń dla menu */
    padding-bottom: 60px; /* Przestrzeń dla stopki */
}