@font-face {
    font-family: 'Robaczki';
    src: url('Fonty/Spiders.ttf') format('truetype');
}

.neuron {
    background-image: url('404_Obraz.png');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;

    top: 0px;
    left: 0px;
    width: 768px;
    height: 768px;

    border-radius: 40%;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    overflow: hidden; /* Ukrywa wszystko wychodzące poza okrąg */
}

.blad {
    background-image: url('404_Tlo.png');
    filter: brightness(30%); /* Redukcja jasności do 50% */

    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;

    font-family: 'Robaczki';
    font-size: 300px;

    position: relative;
    display: inline-block;

    top: 0px;
    left: 0px;
    width: 600px;
    height: 600px;

    padding-top: 40px;

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: latamy 20s linear infinite;

    z-index: 100;
}


@keyframes latamy {
    0% { background-position: -250px -125px; }
    12% { background-position: -125px -0px; }
    25% { background-position: 0px -125px; }
    37% { background-position: -125px -250px; }
    50% { background-position: -250px -125px; }
    62% { background-position: -125px 0px; }
    75% { background-position: 0px -125px; }
    87% { background-position: -125px -250px; }
    100% { background-position: -250px -125px; }
}

.pajak {
    position: absolute;
    z-index: 102;
    font-size: 40px;
}

.aa {
    left: 384px; /* Środek kontenera */
    top: 384px;
    animation: ruch-okrezny 50s infinite linear;
}

.ab {
    left: 384px;
    top: 384px;
    animation: skakanie 30s infinite ease-in-out;
}

.ac {
    left: 384px;
    top: 384px;
    animation: sinusoidalny-ruch 40s infinite linear;
}

.ad {
    left: 384px;
    top: 384px;
    animation: losowe-drgania 20s infinite ease-in-out;
}

.ae {
    left: 384px;
    top: 384px;
    animation: zygzak 60s infinite linear;
}

.af {
    left: 96px; /* 1/4 szerokości kontenera */
    top: 576px; /* 3/4 wysokości kontenera */
    animation: obracanie 30s infinite linear;
}

.ag {
    left: 192px;
    top: 192px; /* 1/4 szerokości i wysokości */
    animation: ruch-w-gore 40s infinite ease-in-out;
}

.ah {
    left: 96px; /* 1/8 szerokości kontenera */
    top: 96px;
    animation: ruch-w-bok 50s infinite ease-in-out;
}

.ai {
    left: 48px; /* 1/16 szerokości */
    top: 48px;
    animation: spirala 60s infinite linear;
}

.aj {
    left: 640px; /* 5/8 szerokości kontenera */
    top: 640px; /* 5/8 wysokości kontenera */
    animation: ruch-po-przekatnej 40s infinite ease-in-out;
}

.ak {
    left: 384px;
    top: 384px;
    animation: ruch-po-luku 50s infinite ease-in-out;
}

.al {
    left: 96px; /* Start z lewej */
    top: 288px; /* 3/8 wysokości */
    animation: ruch-osiem 30s infinite linear;
}

.am {
    left: 192px;
    top: 384px; /* Połowa wysokości */
    animation: zygzak 40s infinite linear;
}

.an {
    left: 128px; /* Start z lewej */
    top: 576px; /* 3/4 wysokości */
    animation: sinusoidalny-ruch 50s infinite ease-in-out;
}

.ao {
    left: 576px; /* Start z prawej */
    top: 192px;
    animation: losowe-drgania 30s infinite ease-in-out;
}

.ap {
    left: 480px;
    top: 480px;
    animation: ruch-w-gore 50s infinite linear;
}

.aq {
    left: 288px;
    top: 288px;
    animation: ruch-w-bok 30s infinite ease-in-out;
}

.ar {
    left: 640px;
    top: 288px;
    animation: ruch-okrezny 60s infinite linear;
}

.as {
    left: 288px;
    top: 640px;
    animation: ruch-osiem 40s infinite linear;
}

.at {
    left: 96px;
    top: 96px;
    animation: ruch-po-luku 30s infinite linear;
}

@keyframes ruch-okrezny {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(192px, 192px) rotate(90deg); }
    50% { transform: translate(0px, 384px) rotate(180deg); }
    75% { transform: translate(-192px, 192px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes skakanie {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-384px); } /* Połowa wysokości */
}

@keyframes sinusoidalny-ruch {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(192px) translateY(-96px); }
    50% { transform: translateX(384px) translateY(0); }
    75% { transform: translateX(576px) translateY(96px); }
    100% { transform: translateX(768px) translateY(0); }
}

@keyframes losowe-drgania {
    0% { transform: translate(0, 0); }
    25% { transform: translate(32px, -32px); }
    50% { transform: translate(-64px, 64px); }
    75% { transform: translate(48px, -48px); }
    100% { transform: translate(0, 0); }
}

@keyframes zygzak {
    0% { transform: translate(0, 0); }
    25% { transform: translate(192px, -192px); }
    50% { transform: translate(384px, 192px); }
    75% { transform: translate(576px, -192px); }
    100% { transform: translate(768px, 192px); }
}

@keyframes obracanie {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ruch-w-gore {
    0% { transform: translateY(0); }
    50% { transform: translateY(-300px); }
    100% { transform: translateY(0); }
}

@keyframes ruch-w-bok {
    0% { transform: translateX(0); }
    50% { transform: translateX(384px); }
    100% { transform: translateX(0); }
}

@keyframes spirala {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(96px, 96px) rotate(90deg); }
    50% { transform: translate(192px, 192px) rotate(180deg); }
    75% { transform: translate(288px, 288px) rotate(270deg); }
    100% { transform: translate(384px, 384px) rotate(360deg); }
}

@keyframes ruch-po-przekatnej {
    0% { transform: translate(0, 0); }
    25% { transform: translate(96px, 96px); }
    50% { transform: translate(192px, 192px); }
    75% { transform: translate(288px, 288px); }
    100% { transform: translate(384px, 384px); }
}

@keyframes ruch-po-luku {
    0% { transform: translate(0, 0); }
    50% { transform: translate(150px, 150px) rotate(45deg); }
    100% { transform: translate(300px, 0) rotate(90deg); }
}

@keyframes ruch-osiem {
    0% { transform: translate(0, 0); }
    25% { transform: translate(75px, -75px); }
    50% { transform: translate(0, 0); }
    75% { transform: translate(-75px, 75px); }
    100% { transform: translate(0, 0); }
}