style.css

/*

No bootstrap used?! :O 

by: Darko Davidovic
https:// facebook.com/darko.fb

*/
    body {
        background-color: var(--bgColor);
        margin: 0;
        padding: 0;
    }

    :root {
        --sine: rgb(27, 25, 25);
        --senkaSina: rgb(27, 25, 25);
        --kugla-color: rgb(61, 176, 211);
        --timeKugla1: 4.5s;
        --timeKugla2: 4.5s;
        --timeKugla3: 4.5s;
        --timeKugla4: 4.5s;
        --timeKugla5: 4.5s;
        --timeKugla6: 4.5s;
        --bgColor: rgb(50, 50, 50);
    }

    .container {
        width: 100%;
        height: 100%;
    }
	

    .wrapper {
        width: 1366px;
        height: 768px;
        position: absolute;
        border: 2px solid var(--bgColor);
        overflow: hidden;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
	@media only screen and (max-width: 700px) {
		 .wrapper{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-25%, -20%);
			
		}
	}
    .sine {
        position: absolute;
        width: 520px;
        height: 520px;
        top: 124px;
        left: 423px;
        border: 2px solid var(--sine);
        border-radius: 180px;
        box-shadow: inset 0 0 0 25px var(--senkaSina), inset 0 0 0 27px var(--sine);
    }

    .krug {
        position: absolute;
        width: 320px;
        height: 320px;
        top: 222px;
        left: 523px;
        border-radius: 50%;
        border: 2px solid var(--sine);
        box-shadow: inset 0 0 0 32px var(--senkaSina), inset 0 0 0 34px var(--sine);
    }


    .ulazGoreTop {
        position: absolute;
        width: 600px;
        height: 200px;
        left: 480px;
        top: -60px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 25px 0px 0px var(--senkaSina);
        padding: 20px;
        transform: rotate(140deg);
    }

    .ulazGoreTop:after {
        position: absolute;
        content: "";
        width: 600px;
        height: 200px;
        top: 13px;
        left: 45px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: -1px 25px 0 var(--senkaSina);
    }

    .ulazGoreTop0 {
        position: absolute;
        width: 300px;
        height: 630px;
        left: 250px;
        top: -516px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 25px 0px 0px var(--senkaSina);
        padding: 19px;
    }

    .ulazGoreTop0:after {
        position: absolute;
        content: "";
        width: 300px;
        height: 630px;
        top: 10px;
        left: 36px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-bottom-left-radius: 100%;
        box-shadow: 0px 25px 0 var(--senkaSina);

    }

    .ulazGoreDesno {
        position: absolute;
        width: 300px;
        height: 630px;
        left: 1077px;
        top: -230px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 25px 0px 0px var(--senkaSina);
        padding: 14px;
        transform: rotate(90deg);
    }

    .ulazGoreDesno:after {
        position: absolute;
        content: "";
        width: 300px;
        height: 630px;
        top: 0px;
        left: 25px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: 0px 25px 0 var(--senkaSina);

    }

    .ulazGoreLevo {
        position: absolute;
        width: 800px;
        height: 680px;
        left: 7px;
        top: -290px;
        border-top: 2px solid var(--sine);
        border-right: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 0 25px 0 var(--senkaSina);
        padding: 10px;
        transform: rotate(-137deg)
    }

    .ulazGoreLevo:after {
        position: absolute;
        content: "";
        width: 800px;
        height: 700px;
        top: 25px;
        left: 0px;
        border-top: 2px solid var(--sine);
        border-right: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: 25px 0 0 var(--senkaSina);

    }

    .ulazDoleLevo {
        position: absolute;
        width: 300px;
        height: 630px;
        left: -38px;
        top: 340px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 25px 0px 0px var(--senkaSina);
        padding: 14px;
        transform: rotate(-90deg)
    }

    .ulazDoleLevo:after {
        position: absolute;
        content: "";
        width: 300px;
        height: 630px;
        top: 0px;
        left: 25px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: 0px 25px 0 var(--senkaSina);
    }

    .ulazDoleDesno {
        position: absolute;
        width: 800px;
        height: 700px;
        left: 547px;
        top: 340px;
        border-top: 2px solid var(--sine);
        border-right: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 0px 25px 0px var(--senkaSina);
        padding: 10px;
        transform: rotate(40deg)
    }

    .ulazDoleDesno:after {
        position: absolute;
        content: "";
        width: 800px;
        height: 700px;
        top: 25px;
        left: 0px;
        border-top: 2px solid var(--sine);
        border-right: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: 25px 0px 0px var(--senkaSina);
    }

    .ulazDoleBottom {
        position: absolute;
        width: 600px;
        height: 200px;
        left: 245px;
        top: 593px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: inset 25px 0px 0px var(--senkaSina);
        padding: 20px;
        transform: rotate(-40deg);
    }

    .ulazDoleBottom:after {
        position: absolute;
        content: "";
        width: 600px;
        height: 200px;
        top: 12px;
        left: 43px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        box-shadow: -1px 25px 0 var(--senkaSina);
    }

    .ulazDoleBottom0 {
        position: absolute;
        width: 300px;
        height: 630px;
        left: 787px;
        top: 617px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-bottom-left-radius: 100%;
        box-shadow: inset 25px 0px 0px var(--senkaSina);
        padding: 19px;
        transform: rotate(180deg);
    }

    .ulazDoleBottom0:after {
        position: absolute;
        content: "";
        width: 300px;
        height: 630px;
        top: 10px;
        left: 36px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-bottom-left-radius: 100%;
        box-shadow: 0px 25px 0 var(--senkaSina);

    }

    .unutrasnjaLinija1 {
        position: absolute;
        width: 117px;
        height: 80px;
        left: 618px;
        top: 275px;
        border-top: 2px solid var(--sine);
        border-right: 2px solid var(--sine);
        border-radius: 0 100%;
    }

    .unutrasnjaLinija2 {
        position: absolute;
        width: 117px;
        height: 80px;
        left: 693px;
        top: 335px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        transform: rotate(-90deg);
    }

    .unutrasnjaLinija3 {
        position: absolute;
        width: 117px;
        height: 80px;
        left: 635px;
        top: 410px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
    }

    .unutrasnjaLinija4 {
        position: absolute;
        width: 117px;
        height: 80px;
        left: 558px;
        top: 352px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        transform: rotate(90deg);
    }

    .unutrasnjaLinija5 {
        position: absolute;
        width: 45px;
        height: 55px;
        left: 720px;
        top: 284px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        transform: rotate(-90deg);
    }

    .unutrasnjaLinija6 {
        position: absolute;
        width: 45px;
        height: 55px;
        left: 735px;
        top: 410px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        transform: rotate(0deg);
    }

    .unutrasnjaLinija7 {
        position: absolute;
        width: 45px;
        height: 55px;
        left: 605px;
        top: 428px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        transform: rotate(90deg);
    }

    .unutrasnjaLinija8 {
        position: absolute;
        width: 45px;
        height: 55px;
        left: 590px;
        top: 297px;
        border-bottom: 2px solid var(--sine);
        border-left: 2px solid var(--sine);
        border-radius: 0 100%;
        transform: rotate(180deg);
    }

    .spirala0 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 20px;
        height: 20px;
        border-top: 6px solid white;
        border-right: 6px solid white;
        border-top-right-radius: 20px;
    }

    .spirala0:after {
        content: '';
        position: absolute;
        top: 18px;
        left: 20px;
        width: 20px;
        height: 20px;
        border-right: 6px solid white;
        border-left: 6px solid white;
        border-bottom: 6px solid white;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .spirala0:before {
        content: '';
        position: absolute;
        top: -4px;
        left: 46px;
        width: 20px;
        height: 20px;
        border-left: 6px solid white;
        border-top: 6px solid white;
        border-right: 6px solid white;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }

    .spirala1 {
        position: absolute;
        top: 25px;
        left: 72px;
        width: 20px;
        height: 20px;
        border-right: 6px solid white;
        border-left: 6px solid white;
        border-bottom: 6px solid white;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .spirala1:after {
        content: '';
        position: absolute;
        top: -22px;
        left: 20px;
        width: 20px;
        height: 20px;
        border-left: 6px solid white;
        border-top: 6px solid white;
        border-right: 6px solid white;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }

    .spirala1:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 46px;
        width: 20px;
        height: 20px;
        border-left: 6px solid white;
        border-bottom: 6px solid white;
        border-bottom-left-radius: 20px;
    }

    .omotRotacije {
        position: absolute;
        width: 325px;
        height: 325px;
        top: 220px;
        left: 521px;
        /* border: 2px solid red; */
        transform: rotate(0deg);
        animation: rotacijaOmota 5s linear infinite;

    }
	@keyframes rotacijaOmota{
		100% {transform: rotate(1turn)};
	}

    .spirala {
        position: absolute;
        top: 22px;
        left: 107px;
        transform: scale(0.23) rotate(-16deg);
    }

    .jedand {
        position: absolute;
        width: 32px;
        height: 17px;
        top: 10px;
        left: 155px;
        border-radius: 10px;
        transform: rotate(4deg);
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
    }

    .dvaa {
        position: absolute;
        color: white;
        font-size: 17px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        top: 15px;
        left: 200px;
        transform: rotate(20deg);
    }

    .trir {
        position: absolute;
        width: 45px;
        height: 17px;
        top: 37px;
        left: 223px;
        border-radius: 10px;
        transform: rotate(36deg);
        background-color: rgb(97, 183, 253);
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
    }

    .cetirik {
        position: absolute;
        width: 12px;
        height: 12px;
        top: 62px;
        left: 263px;
        border: 4px dotted white;
        box-shadow: inset 0 0 0 2px grey, inset 0 0 10px 10px white;
        transform: rotate(55deg) scale(0.6);
    }

    .peto {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 84px;
        left: 279px;
        border-radius: 50%;
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
    }

    .sestd {
        position: absolute;
        top: 107px;
        left: 302px;
        transform: scale(0.23) rotate(77deg);
    }

    .sedama {
        position: absolute;
        top: 150px;
        left: 311px;
        transform: scale(0.23) rotate(91deg);
    }

    .osamv {
        position: absolute;
        width: 45px;
        height: 17px;
        top: 203px;
        left: 274px;
        border-radius: 10px;
        transform: rotate(111deg);
        background-color: rgb(97, 183, 253);
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
    }

    .deveti {
        position: absolute;
        color: white;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        top: 245px;
        left: 265px;
        transform: rotate(130deg);
    }

    .desetd {
        position: absolute;
        width: 32px;
        height: 17px;
        top: 268px;
        left: 233px;
        border-radius: 10px;
        transform: rotate(-35deg);
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
    }

    .jedanaesto {
        position: absolute;
        width: 0px;
        height: 0px;
        top: 275px;
        left: 195px;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 38px solid white;
        transform: rotate(-22deg) scale(0.4);
    }

    .jedanaesto:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        top: 8px;
        left: -15px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid var(--senkaSina);
    }

    .dvanaestv {
        position: absolute;
        width: 45px;
        height: 17px;
        top: 296px;
        left: 157px;
        border-radius: 10px;
        transform: rotate(-8deg);
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
    }

    .trinaesti {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 296px;
        left: 130px;
        border-radius: 50%;
        background-color: rgb(97, 183, 253);
        transform: rotate(16deg);
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
    }

    .trinaesti:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: "[";
        top: 0px;
        left: -10px;
    }

    .cetrnaestc {
        position: absolute;
        width: 52px;
        height: 15px;
        top: 245px;
        left: 24px;
        border-radius: 10px;
        transform: rotate(51deg);
        border: 2px solid white;
        box-shadow: 0 0 10px 1px white;
    }

    .cetrnaestc:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: "=";
        top: -6px;
        left: 60px;
        transform: rotate(-17deg);

    }

    .petnaest {
        position: absolute;
        width: 32px;
        height: 17px;
        top: 187px;
        left: 6px;
        border-radius: 10px;
        transform: rotate(75deg);
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
    }

    .petnaest:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: '{';
        top: -1px;
        left: 38px;
        transform: rotate(175deg);
    }

    .sesnaest {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 131px;
        left: 11px;
        border-radius: 50%;
        background-color: rgb(97, 183, 253);
        transform: rotate(90deg);
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
    }

    .sesnaest:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: '_';
        top: -7px;
        left: 28px;
    }

    .sedamnaest {
        position: absolute;
        width: 13px;
        height: 13px;
        top: 105px;
        left: 18px;
        border: 2px solid white;
        transform: rotate(18deg);
        border-radius: 3px;
        box-shadow: 0 0 10px 1px white;
    }

    .osamnaest {
        position: absolute;
        width: 28px;
        height: 13px;
        top: 67px;
        left: 33px;
        border-radius: 10px;
        border: 2px solid white;
        transform: rotate(129deg);
        box-shadow: 0 0 10px 1px white;
    }

    .osamnaest:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: '{';
        top: -5px;
        left: -17px;
        transform: rotate(6deg);
    }

    .devetnaest {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 29px;
        left: 85px;
        border-radius: 50%;
        background-color: rgb(97, 183, 253);
        transform: rotate(16deg);
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
    }

    .mali1 {
        position: absolute;
        width: 15px;
        height: 15px;
        /* top: 20px;
        left: 275px; */
        border-radius: 50%;
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
        animation: mali1 3s 2.2s linear infinite;
    }

    .mali3 {
        box-sizing: border-box;
        position: absolute;
        width: 14px;
        height: 14px;
        /* top: 20px;
        left: 18px; */
        border: 2px solid white;
        transform: rotate(18deg);
        border-radius: 3px;
        box-shadow: 0 0 5px 1px white;
        animation: mali3 3s 2s linear infinite;
    }

    .mali4 {
        position: absolute;
        width: 27px;
        height: 15px;
        /* top: 100px;*/
        left: -6px; 
        border-radius: 10px;
        background-color: rgb(49, 245, 49);
        box-shadow: 0 0 10px 1px rgb(49, 245, 49);
        animation: mali4 3s linear infinite;
    }
    .mali5{
        position: absolute;
        width: 0px;
        height: 0px;
        /* top: 200px;
        left: 195px; */
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 32px solid white;
        transform: rotate(-22deg) scale(0.4);
        animation: mali5 2s 0.2s linear infinite;
    }
    .mali5:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        top: 8px;
        left: -12px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 20px solid var(--senkaSina);
    }
    .mali6 {
        position: absolute;
        width: 27px;
        height: 15px;
        /* top: 10px;
        left: 40px; */
        border-radius: 10px;
        transform: rotate(4deg);
        background-color: rgb(97, 183, 253);
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
        animation: mali6 4s 1s linear infinite;
    }
    .mali7 {
        box-sizing: border-box;
        position: absolute;
        width: 14px;
        height: 14px;
        /* top: 20px;
        left: 35px; */
        border: 2px solid white;
        border-radius: 3px;
        box-shadow: 0 0 5px 1px white;
        animation: mali7 4s 0.5s linear infinite;
    }

    .mali8 {
        position: absolute;
        width: 14px;
        height: 14px;
        /* top: 40px;
        left: 18px; */
        background-color: rgb(97, 183, 253);
        transform: rotate(18deg);
        border-radius: 4px;
        box-shadow: 0 0 10px 1px rgb(97, 183, 253);
        animation: mali8 2s linear infinite;
    }

    @keyframes mali1 {
         0.0000% {  transform: translate(604.0px, 270.0px) ; }
        12.9235% {  transform: translate(625.7px, 270.1px) ; }
        26.4601% {  transform: translate(648.2px, 273.2px) ; }
        39.6062% {  transform: translate(669.4px, 279.5px) ; }
        52.2491% {  transform: translate(688.5px, 288.7px) ; }
        64.3467% {  transform: translate(704.9px, 300.7px) ; }
        75.9850% {  transform: translate(717.9px, 315.3px) ; }
        87.4440% {  transform: translate(726.8px, 332.3px) ; }
        100.0000% {  transform: translate(731.0px, 353.0px); }
    }
    @keyframes mali3 {
        0.0000% {  transform: translate(787.0px, 311.0px) ; }
        22.4842% {  transform: translate(781.9px, 346.2px) ; }
        36.9806% {  transform: translate(774.8px, 368.1px) ; }
        50.4947% {  transform: translate(765.2px, 387.2px) ; }
        62.9859% {  transform: translate(753.6px, 403.2px) ; }
        74.4409% {  transform: translate(740.5px, 415.8px) ; }
        84.9264% {  transform: translate(726.3px, 424.4px) ; }
        94.6674% {  transform: translate(711.4px, 428.6px) ; }
        100.0000% {  transform: translate(703.0px, 429.0px) ; }
    }
    @keyframes mali4 {
        0.0000% {  transform: translate(776.0px, 462.0px) rotate(0deg); }
        11.0486% {  transform: translate(767.4px, 460.6px) rotate(10deg); }
        28.8336% {  transform: translate(754.8px, 454.6px) rotate(25deg); }
        41.0898% {  transform: translate(747.4px, 448.3px) rotate(40deg); }
        66.4140% {  transform: translate(736.2px, 431.8px) rotate(58deg); }
        79.4334% {  transform: translate(732.8px, 422.1px) rotate(77deg); }
        100.0000% {  transform: translate(731.0px, 406.0px) rotate(90deg); }
    }
    @keyframes mali5 {
        0.0000% {  transform: translate(742.0px, 475.0px) scale(0.4) rotate(20deg); }
        14.3276% {  transform: translate(719.5px, 474.2px) scale(0.4) rotate(50deg); }
        30.4832% {  transform: translate(694.5px, 469.8px) scale(0.4) rotate(80deg); }
        45.1933% {  transform: translate(672.6px, 462.4px) scale(0.4) rotate(120deg); }
        58.5642% {  transform: translate(654.0px, 452.5px) scale(0.4) rotate(100deg); }
        70.6232% {  transform: translate(638.9px, 441.1px) scale(0.4) rotate(80deg); }
        81.3428% {  transform: translate(627.4px, 428.7px) scale(0.4) rotate(50deg); }
        90.6813% {  transform: translate(619.8px, 416.1px) scale(0.4) rotate(30deg); }
        100.0000% {  transform: translate(616.0px, 402.0px) scale(0.4) rotate(0deg); }
    }
    @keyframes mali6 {
        0.0000% {  transform: translate(587.0px, 470.0px) rotate(-90deg); }
        13.5915% {  transform: translate(590.8px, 458.8px) rotate(-75deg); }
        26.1598% {  transform: translate(596.2px, 449.3px) rotate(-60deg); }
        38.1112% {  transform: translate(603.0px, 441.5px) rotate(-45deg); }
        49.8357% {  transform: translate(611.0px, 435.3px) rotate(-30deg); }
        73.7995% {  transform: translate(630.3px, 427.5px) rotate(-15deg); }
        100.0000% {  transform: translate(653.0px, 426.0px) rotate(0deg); }
    }
    @keyframes mali7 {
        0.0000% {  transform: translate(570.0px, 446.0px) ; }
        12.4487% {  transform: translate(571.2px, 425.8px) ; }
        25.1749% {  transform: translate(574.7px, 405.3px) ; }
        37.8675% {  transform: translate(580.9px, 385.6px) ; }
        50.3046% {  transform: translate(589.8px, 367.4px) ; }
        62.4155% {  transform: translate(601.5px, 351.6px) ; }
        74.3650% {  transform: translate(616.4px, 339.0px) ; }
        86.6302% {  transform: translate(634.5px, 330.5px) ; }
        100.0000% {  transform: translate(656.0px, 327.0px) ; }
    }
    @keyframes mali8 {
        0.0000% {  transform: translate(586.0px, 291.0px) ; }
        15.2412% {  transform: translate(597.9px, 294.4px) ; }
        28.4298% {  transform: translate(607.4px, 299.2px) ; }
        40.3500% {  transform: translate(614.8px, 305.4px) ; }
        51.7360% {  transform: translate(620.5px, 312.6px) ; }
        74.8838% {  transform: translate(627.6px, 330.0px) ; }
        100.0000% {  transform: translate(631.0px, 350.0px) ; }
    }
    /* Display animation elements */

    .spiralaX {
        position: absolute;
        left: 0px;
        transform: scale(0.4);
    }

    .spiX {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 20px;
        height: 20px;
        border-top: 6px solid white;
        border-right: 6px solid white;
        border-top-right-radius: 20px;
    }

    .spiX:after {
        content: '';
        position: absolute;
        top: 19px;
        left: 20px;
        width: 20px;
        height: 20px;
        border-right: 6px solid white;
        border-left: 6px solid white;
        border-bottom: 6px solid white;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .spiX:before {
        content: '';
        position: absolute;
        top: -6px;
        left: 46px;
        width: 20px;
        height: 20px;
        border-left: 6px solid white;
        border-top: 6px solid white;
        border-right: 6px solid white;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }

    .spiX2 {
        position: absolute;
        top: 25px;
        left: 72px;
        width: 20px;
        height: 20px;
        border-right: 6px solid white;
        border-left: 6px solid white;
        border-bottom: 6px solid white;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .spiX2:after {
        content: '';
        position: absolute;
        top: -26px;
        left: 20px;
        width: 20px;
        height: 20px;
        border-left: 6px solid white;
        border-top: 6px solid white;
        border-right: 6px solid white;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }

    .spiralaX2 {
        position: absolute;
        left: 42px;
        transform: scale(0.4);
    }

    .spiralaX3 {
        position: absolute;
        left: 84px;
        transform: scale(0.4);
    }

    .spiralaX4 {
        position: absolute;
        left: 126px;
        transform: scale(0.4);
    }

    .display {
        position: absolute;
        background-color: rgb(81, 253, 75);
        width: 100px;
        height: 100px;
        left: 634px;
        top: 332px;
        border-radius: 30px;
        border: 2px solid white;
        overflow: hidden;
        transform: scale(1);
    }

    .linija1 {
        position: absolute;
        width: 215px;
        height: 25px;
        top: 0px;
        left: 100px;
        /* border: 2px solid green; */
        transform: scale(0.7);
        animation: linija1 10s linear infinite;
    }

    .linija2 {
        position: absolute;
        width: 215px;
        height: 25px;
        top: 25px;
        left: 100px;
        /* border: 2px solid green; */
        transform: scale(0.7);
        animation: linija2 15s linear infinite;
    }

    .linija3 {
        position: absolute;
        width: 215px;
        height: 25px;
        top: 53px;
        left: 120px;
        /* border: 2px solid green; */
        transform: scale(0.7);
        animation: linija3 13s linear infinite;
    }

    .linija4 {
        position: absolute;
        width: 215px;
        height: 25px;
        top: 80px;
        left: 80px;
        /* border: 2px solid green; */
        transform: scale(0.7);
        animation: linija4 20s linear infinite;
    }

    @keyframes linija1 {
        from {
            left: 80px;
        }

        to {
            left: -180px;
        }
    }

    @keyframes linija2 {
        from {
            left: -180px;
        }

        to {
            left: 80px;
        }
    }

    @keyframes linija3 {
        from {
            left: 100px;
        }

        to {
            left: -180px;
        }
    }

    @keyframes linija4 {
        from {
            left: -180px;
        }

        to {
            left: 100px;
        }
    }

    .spiContainer {
        position: absolute;
        /* border: 2px solid red; */
        width: 50px;
        height: 20px;
        top: 0px;
        left: 0px;
        overflow: hidden;
    }

    .spiralaAnime {
        animation: spiralaAnime 10s linear infinite;
    }

    .spiralaAnime2 {
        animation: spiralaAnime 12s linear infinite;
    }

    .spiralaAnime3 {
        animation: spiralaAnime 8s linear infinite;
    }

    .spiralaAnime4 {
        animation: spiralaAnime 11s linear infinite;
    }

    @keyframes spiralaAnime {
        0% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(-126px);
        }
    }


    .plaviKrug1 {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 3px;
        left: 85px;
        border-radius: 50%;
        background-color: rgb(97, 183, 253);
        transform: rotate(0deg);
    }

    .plaviKrug1:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: "[";
        top: -1px;
        left: -12px;
    }

    .plaviKrug2 {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 3px;
        left: 65px;
        border-radius: 50%;
        background-color: rgb(97, 183, 253);
        transform: rotate(180deg);
    }

    .plaviKrug2:before {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: black;
        font-weight: bold;
        content: "_";
        top: -8px;
        left: -20px;
    }

    .plaviKrug2:after {
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        content: "{";
        top: 0px;
        left: -32px;
        transform: rotate(180deg);
    }

    .prazan1 {
        position: absolute;
        width: 35px;
        height: 15px;
        top: 4px;
        left: 110px;
        border-radius: 10px;
        background-color: black;
        opacity: 0.3;
    }

    .prazan2 {
        position: absolute;
        width: 28px;
        height: 13px;
        top: 3px;
        left: 125px;
        border-radius: 10px;
        border: 2px solid white;
        transform: rotate(0deg);
    }

    .trougao1 {
        position: absolute;
        width: 0px;
        height: 0px;
        top: -7px;
        left: 145px;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 37px solid white;
        transform: scale(0.4);
    }

    .trougao1:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        top: 8px;
        left: -15px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid lightgreen;
    }

    .trougao2 {
        position: absolute;
        width: 0px;
        height: 0px;
        top: -7px;
        left: 153px;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 37px solid black;
        transform: scale(0.4);
    }

    .trougao2:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        top: 8px;
        left: -15px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid lightgreen;
    }

    .kocka1 {
        box-sizing: border-box;
        position: absolute;
        width: 15px;
        height: 15px;
        top: 4px;
        left: 192px;
        border: 2px solid white;
        border-radius: 3px;
    }

    .kocka2 {
        box-sizing: border-box;
        position: absolute;
        width: 15px;
        height: 15px;
        top: 4px;
        left: 195px;
        border: 2px solid white;
        border-radius: 3px;
    }

    /* Display animation and */

    .kugla1 {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--senkaSina);
        /* top: 100px;
        left: 400px; */
        box-shadow: inset 0 0 0 5px aqua;
        animation: animate var(--timeKugla1) linear infinite;
    }
    .box1{
        width: 21px;
        height: 21px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 0px; 
        left: 0px;
        opacity: 0.80;
        box-shadow: 0px 0px 15px aqua;
        animation: animate var(--timeKugla1) 0.02s linear infinite;
    }
    .box2{
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 0.5px; 
        left: 0.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.75;
        animation: animate var(--timeKugla1) 0.04s linear infinite;
        
    }
    .box3{
        width: 19px;
        height: 19px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.70;
        animation: animate var(--timeKugla1) 0.06s linear infinite;
    }
    .box4{
        width: 18px;
        height: 18px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.65;
        animation: animate var(--timeKugla1) 0.08s linear infinite;
    }
    .box5{
        width: 17px;
        height: 17px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1.5px; 
        left: 1.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.60;
        animation: animate var(--timeKugla1) 0.10s linear infinite;
    }
    .box6{
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 2px; 
        left: 2px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.55;
        animation: animate var(--timeKugla1) 0.12s linear infinite;
    }
    .box7{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3px; 
        left: 3px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.50;
        animation: animate var(--timeKugla1) 0.14s linear infinite;
    }
    .box8{
        width: 14px;
        height: 14px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.45;
        animation: animate var(--timeKugla1) 0.16s linear infinite;
    }
    .box9{
        width: 13px;
        height: 13px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.30;
        animation: animate var(--timeKugla1) 0.18s linear infinite;
    }
    .box10{
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 4px; 
        left: 4px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.20;
        animation: animate var(--timeKugla1) 0.20s linear infinite;
    }
    .kugla2 {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--senkaSina);
        /* top: 100px;
        left: 400px; */
        box-shadow: inset 0 0 0 5px aqua;
        animation: animate var(--timeKugla2) 0.50s linear infinite;
    }
    .boy1{
        width: 21px;
        height: 21px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 0px; 
        left: 0px;
        opacity: 0.80;
        box-shadow: 0px 0px 15px aqua;
        animation: animate var(--timeKugla2) 0.52s linear infinite;
    }
    .boy2{
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 0.5px; 
        left: 0.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.75;
        animation: animate var(--timeKugla2) 0.54s linear infinite;
        
    }
    .boy3{
        width: 19px;
        height: 19px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.70;
        animation: animate var(--timeKugla2) 0.56s linear infinite;
    }
    .boy4{
        width: 18px;
        height: 18px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.65;
        animation: animate var(--timeKugla2) 0.58s linear infinite;
    }
    .boy5{
        width: 17px;
        height: 17px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1.5px; 
        left: 1.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.60;
        animation: animate var(--timeKugla2) 0.60s linear infinite;
    }
    .boy6{
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 2px; 
        left: 2px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.55;
        animation: animate var(--timeKugla2) 0.62s linear infinite;
    }
    .boy7{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3px; 
        left: 3px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.50;
        animation: animate var(--timeKugla2) 0.64s linear infinite;
    }
    .boy8{
        width: 14px;
        height: 14px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.45;
        animation: animate var(--timeKugla2) 0.66s linear infinite;
    }
    .boy9{
        width: 13px;
        height: 13px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.30;
        animation: animate var(--timeKugla2) 0.68s linear infinite;
    }
    .boy10{
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 4px; 
        left: 4px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.20;
        animation: animate var(--timeKugla2) 0.70s linear infinite;
    }

    .kugla3 {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--senkaSina);
        /* top: 100px;
        left: 400px; */
        box-shadow: inset 0 0 0 5px aqua;
        animation: animate var(--timeKugla3) 1s linear infinite;
    }
    .boz1{
        width: 21px;
        height: 21px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 0px; 
        left: 0px;
        opacity: 0.80;
        box-shadow: 0px 0px 15px aqua;
        animation: animate var(--timeKugla3) 1.02s linear infinite;
    }
    .boz2{
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 0.5px; 
        left: 0.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.75;
        animation: animate var(--timeKugla3) 1.04s linear infinite;
        
    }
    .boz3{
        width: 19px;
        height: 19px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.70;
        animation: animate var(--timeKugla3) 1.06s linear infinite;
    }
    .boz4{
        width: 18px;
        height: 18px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.65;
        animation: animate var(--timeKugla3) 1.08s linear infinite;
    }
    .boz5{
        width: 17px;
        height: 17px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 1.5px; 
        left: 1.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.60;
        animation: animate var(--timeKugla3) 1.10s linear infinite;
    }
    .boz6{
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 2px; 
        left: 2px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.55;
        animation: animate var(--timeKugla3) 1.12s linear infinite;
    }
    .boz7{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3px; 
        left: 3px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.50;
        animation: animate var(--timeKugla3) 1.14s linear infinite;
    }
    .boz8{
        width: 14px;
        height: 14px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.45;
        animation: animate var(--timeKugla3) 1.16s linear infinite;
    }
    .boz9{
        width: 13px;
        height: 13px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.30;
        animation: animate var(--timeKugla3) 1.18s linear infinite;
    }
    .boz10{
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        top: 4px; 
        left: 4px;
        box-shadow: 0px 0px 15px aqua;
        opacity: 0.20;
        animation: animate var(--timeKugla3) 1.20s linear infinite;
    }
    .kugla4 {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--senkaSina);
        box-shadow: inset 0 0 0 5px rgb(49, 245, 49);
        animation: animate2 var(--timeKugla4) 0.20s linear infinite;
    }
    .mov1{
        width: 21px;
        height: 21px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 0px; 
        left: 0px;
        opacity: 0.80;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        animation: animate2 var(--timeKugla4) 0.22s linear infinite;
    }
    .mov2{
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 0.5px; 
        left: 0.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.75;
        animation: animate2 var(--timeKugla4) 0.24s linear infinite;
        
    }
    .mov3{
        width: 19px;
        height: 19px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.70;
        animation: animate2 var(--timeKugla4) 0.26s linear infinite;
    }
    .mov4{
        width: 18px;
        height: 18px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.65;
        animation: animate2 var(--timeKugla4) 0.28s linear infinite;
    }
    .mov5{
        width: 17px;
        height: 17px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1.5px; 
        left: 1.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.60;
        animation: animate2 var(--timeKugla4) 0.30s linear infinite;
    }
    .mov6{
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 2px; 
        left: 2px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.55;
        animation: animate2 var(--timeKugla4) 0.32s linear infinite;
    }
    .mov7{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3px; 
        left: 3px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.50;
        animation: animate2 var(--timeKugla4) 0.34s linear infinite;
    }
    .mov8{
        width: 14px;
        height: 14px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.45;
        animation: animate2 var(--timeKugla4) 0.36s linear infinite;
    }
    .mov9{
        width: 13px;
        height: 13px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.30;
        animation: animate2 var(--timeKugla4) 0.38s linear infinite;
    }
    .mov10{
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 4px; 
        left: 4px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.20;
        animation: animate2 var(--timeKugla4) 0.40s linear infinite;
    }
    .kugla5 {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--senkaSina);
        box-shadow: inset 0 0 0 5px rgb(49, 245, 49);
        animation: animate2 var(--timeKugla5) 1.10s linear infinite;
    }
    .fly1{
        width: 21px;
        height: 21px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 0px; 
        left: 0px;
        opacity: 0.80;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        animation: animate2 var(--timeKugla5) 1.12s linear infinite;
    }
    .flyc2{
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 0.5px; 
        left: 0.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.75;
        animation: animate2 var(--timeKugla5) 1.14s linear infinite;
        
    }
    .flyi3{
        width: 19px;
        height: 19px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.70;
        animation: animate2 var(--timeKugla5) 1.16s linear infinite;
    }
    .flyv4{
        width: 18px;
        height: 18px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.65;
        animation: animate2 var(--timeKugla5) 1.18s linear infinite;
    }
    .flyo5{
        width: 17px;
        height: 17px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1.5px; 
        left: 1.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.60;
        animation: animate2 var(--timeKugla5) 1.20s linear infinite;
    }
    .flyd6{
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 2px; 
        left: 2px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.55;
        animation: animate2 var(--timeKugla5) 1.22s linear infinite;
    }
    .flyi7{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3px; 
        left: 3px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.50;
        animation: animate2 var(--timeKugla5) 1.24s linear infinite;
    }
    .flyv8{
        width: 14px;
        height: 14px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.45;
        animation: animate2 var(--timeKugla5) 1.26s linear infinite;
    }
    .flya9{
        width: 13px;
        height: 13px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.30;
        animation: animate2 var(--timeKugla5) 1.28s linear infinite;
    }
    .flyd10{
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 4px; 
        left: 4px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.20;
        animation: animate2 var(--timeKugla5) 1.30s linear infinite;
    }
    .kugla6 {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--senkaSina);
        box-shadow: inset 0 0 0 5px rgb(49, 245, 49);
        animation: animate2 var(--timeKugla6) 1.64s linear infinite;
    }
    .bee1{
        width: 21px;
        height: 21px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 0px; 
        left: 0px;
        opacity: 0.80;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        animation: animate2 var(--timeKugla6) 1.66s linear infinite;
    }
    .bee2{
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 0.5px; 
        left: 0.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.75;
        animation: animate2 var(--timeKugla6) 1.68s linear infinite;
        
    }
    .bee3{
        width: 19px;
        height: 19px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.70;
        animation: animate2 var(--timeKugla6) 1.70s linear infinite;
    }
    .bee4{
        width: 18px;
        height: 18px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1px; 
        left: 1px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.65;
        animation: animate2 var(--timeKugla6) 1.72s linear infinite;
    }
    .bee5{
        width: 17px;
        height: 17px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 1.5px; 
        left: 1.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.60;
        animation: animate2 var(--timeKugla6) 1.74s linear infinite;
    }
    .beeo6{
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 2px; 
        left: 2px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.55;
        animation: animate2 var(--timeKugla6) 1.76s linear infinite;
    }
    .beek7{
        width: 15px;
        height: 15px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3px; 
        left: 3px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.50;
        animation: animate2 var(--timeKugla6) 1.78s linear infinite;
    }
    .beer8{
        width: 14px;
        height: 14px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.45;
        animation: animate2 var(--timeKugla6) 1.80s linear infinite;
    }
    .beea9{
        width: 13px;
        height: 13px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 3.5px; 
        left: 3.5px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.30;
        animation: animate2 var(--timeKugla6) 1.82s linear infinite;
    }
    .beed10{
        width: 12px;
        height: 12px;
        position: absolute;
        background-color: rgb(49, 245, 49);
        border-radius: 50%;
        top: 4px; 
        left: 4px;
        box-shadow: 0px 0px 15px rgb(49, 245, 49);
        opacity: 0.20;
        animation: animate2 var(--timeKugla6) 1.84s linear infinite;
    }
    .maska{
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0px;
        left: 0px;
        background-color: var(--bgColor);
        /* border: 2px solid red; */
    }
    @keyframes animate {
        0.00% {  transform: translate(96.0px, 769.0px) ; }
        3.12% {  transform: translate(138.7px, 758.6px) ; }
        4.68% {  transform: translate(180.7px, 745.1px) ; }
        6.25% {  transform: translate(222.0px, 727.0px) ; }

        7.810% {  transform: translate(261.0px, 709.0px) ; }
        9.370% {  transform: translate(303.1px, 684.4px) ; }
        10.93% {  transform: translate(341.6px, 655.2px) ; }
        12.50% {  transform: translate(377.0px, 622.0px) ; } 

        14.06% {  transform: translate(405.0px, 585.0px) ; }
        15.62% {  transform: translate(423.2px, 546.7px) ; }
        17.18% {  transform: translate(430.5px, 505.7px) ; }
        18.56% {  transform: translate(428.0px, 462.0px) ; }

        20.12% {  transform: translate(427.0px, 415.0px) ; }
        21.68% {  transform: translate(427.0px, 374.0px) ; }
        23.25% {  transform: translate(427.0px, 333.0px) ; }

        24.81% {  transform: translate(427.0px, 293.0px) ; }

        26.37% {  transform: translate(431.0px, 251.0px) ; }
        27.93% {  transform: translate(446.9px, 211.6px) ; }
        29.50% {  transform: translate(471.1px, 178.4px) ; }
        31.06% {  transform: translate(505.0px, 152.0px) ; } 

        32.62% {  transform: translate(541.0px, 135.0px) ; }
        34.18% {  transform: translate(582.3px, 127.0px) ; }
        35.75% {  transform: translate(624.0px, 128.0px) ; }
        37.31% {  transform: translate(669.0px, 128.0px) ; }

        38.87% {  transform: translate(713.0px, 128.0px) ; }
        40.43% {  transform: translate(755.6px, 127.2px) ; }
        42.00% {  transform: translate(797.1px, 132.1px) ; }
        43.56% {  transform: translate(837.0px, 148.0px) ; }

        45.12% {  transform: translate(867.0px, 169.0px) ; }
        46.68% {  transform: translate(894.8px, 200.2px) ; }
        48.25% {  transform: translate(913.5px, 238.1px) ; }
        49.81% {  transform: translate(921.0px, 280.0px) ; }

        51.37% {  transform: translate(922.0px, 322.0px) ; }
        52.93% {  transform: translate(922.0px, 364.0px) ; }
        54.50% {  transform: translate(922.0px, 404.0px) ; }
        56.06% {  transform: translate(922.0px, 446.0px) ; }

        57.62% {  transform: translate(920.0px, 491.0px) ; }
        59.18% {  transform: translate(904.8px, 530.6px) ; }
        60.75% {  transform: translate(882.5px, 564.4px) ; }
        62.31% {  transform: translate(852.0px, 593.0px) ; }

        63.87% {  transform: translate(816.0px, 614.0px) ; }
        65.43% {  transform: translate(773.1px, 622px) ; }
        67.00% {  transform: translate(728.6px, 623.0px) ; }
        68.56% {  transform: translate(683.0px, 623.0px) ; }

        70.12% {  transform: translate(639.0px, 623.0px) ; }
        71.68% {  transform: translate(595.3px, 623.1px) ; }
        73.25% {  transform: translate(551.0px, 617.6px) ; }
        74.81% {  transform: translate(510.0px, 601.0px) ; }

        76.37% {  transform: translate(478.0px, 577.0px) ; }
        77.93% {  transform: translate(449.0px, 548.0px) ; }
        79.50% {  transform: translate(420.0px, 515.0px) ; }
        81.06% {  transform: translate(392.0px, 485.0px) ; }

        82.62% {  transform: translate(366.0px, 452.0px) ; }
        84.18% {  transform: translate(342.6px, 417.6px) ; }
        85.75% {  transform: translate(320.0px, 383.0px) ; }
        87.31% {  transform: translate(299.0px, 346.0px) ; }

        88.87% {  transform: translate(279.0px, 309.0px) ; }
        90.43% {  transform: translate(261.9px, 270.3px) ; }
        92.00% {  transform: translate(246.0px, 231.0px) ; }
        93.56% {  transform: translate(232.0px, 189.0px) ; }

        95.12% {  transform: translate(219.0px, 148.0px) ; }
        96.68% {  transform: translate(209.0px, 104.6px) ; }
        98.25% {  transform: translate(202.0px, 61.8px) ; }
        100.0% {  transform: translate(194.0px, -10.0px) ; }
	}
    @keyframes animate2 {
        0.00% {  transform: translate(1241.0px, -22.0px) ; }
        3.03% {  transform: translate(1200.0px, -8.0px) ; }
        4.54% {  transform: translate(1160.8px, 6.4px) ; }
        6.06% {  transform: translate(1121.0px, 23.0px) ; } 

        7.57% {  transform: translate(1086.0px, 42.0px) ; }
        9.09% {  transform: translate(1048.1px, 61.6px) ; }
        10.60% {  transform: translate(1013.2px, 86.1px) ; }
        12.12% {  transform: translate(982.0px, 115.0px) ; } 

        13.63% {  transform: translate(957.0px, 145.0px) ; }
        15.15% {  transform: translate(934.2px, 178.0px) ; }
        16.66% {  transform: translate(921.4px, 214.7px) ; }
        18.18% {  transform: translate(918.0px, 255.0px) ; } 

        19.69% {  transform: translate(921.0px, 295.0px) ; }
        21.21% {  transform: translate(921.0px, 337.0px) ; }
        22.72% {  transform: translate(921.0px, 377.0px) ; }
        24.24% {  transform: translate(921.0px, 418.0px) ; }

        25.75% {  transform: translate(921.0px, 461.0px) ; }
        27.27% {  transform: translate(915.0px, 503.9px) ; }
        28.78% {  transform: translate(899.0px, 542.0px) ; }
        30.30% {  transform: translate(872.0px, 576.0px) ; }

        31.81% {  transform: translate(838.0px, 603.0px) ; }
        33.33% {  transform: translate(796.8px, 618.0px) ; }
        34.84% {  transform: translate(752.9px, 623.4px) ; }
        36.36% {  transform: translate(709.0px, 623.0px) ; }

        37.87% {  transform: translate(668.0px, 622.0px) ; }
        39.39% {  transform: translate(626.0px, 622.0px) ; }
        40.90% {  transform: translate(582.1px, 622.1px) ; }
        42.42% {  transform: translate(540.0px, 615.0px) ;}

        43.93% {  transform: translate(503.0px, 598.0px) ; }
        45.45% {  transform: translate(471.7px, 571.8px) ; }
        46.96% {  transform: translate(448.0px, 539.6px) ; }
        48.48% {  transform: translate(432.0px, 502.0px) ; }

        50.00% {  transform: translate(428.0px, 462.0px) ; }
        51.51% {  transform: translate(427.0px, 415.0px) ; }
        53.03% {  transform: translate(427.0px, 374.0px) ; }
        54.54% {  transform: translate(427.0px, 333.0px) ; }

        56.06% {  transform: translate(427.0px, 293.0px) ; }
        57.57% {  transform: translate(431.0px, 251.0px) ; }
        59.09% {  transform: translate(446.9px, 211.6px) ; }
        60.60% {  transform: translate(471.1px, 178.4px) ; }

        62.12% {  transform: translate(505.0px, 152.0px) ; } 
        63.63% {  transform: translate(541.0px, 135.0px) ; }
        65.15% {  transform: translate(582.3px, 127.0px) ; }
        66.66% {  transform: translate(624.0px, 128.0px) ; }

        68.18% {  transform: translate(669.0px, 128.0px) ; }
        69.69% {  transform: translate(713.0px, 128.0px) ; }
        71.21% {  transform: translate(755.6px, 127.2px) ; }
        72.72% {  transform: translate(797.1px, 132.1px) ; }

        74.24% {  transform: translate(838.0px, 148.0px) ; }
        75.75% {  transform: translate(870.0px, 173.0px) ; }
        77.27% {  transform: translate(899.0px, 200.0px) ; }
        78.78% {  transform: translate(927.0px, 229.0px) ; }

        80.30% {  transform: translate(954.0px, 257.0px) ; }
        81.81% {  transform: translate(981.0px, 288.0px) ; }
        83.33% {  transform: translate(1007.9px, 323.9px) ; }
        84.84% {  transform: translate(1033.0px, 359.0px) ; }

        86.36% {  transform: translate(1054.0px, 395.0px) ; }
        87.87% {  transform: translate(1074.0px, 429.0px) ; }
        89.39% {  transform: translate(1093.6px, 470.0px) ; }
        90.90% {  transform: translate(1111.0px, 510.0px) ; }

        92.42% {  transform: translate(1126.0px, 549.0px) ; }
        93.93% {  transform: translate(1138.8px, 591.0px) ; }
        95.45% {  transform: translate(1151.0px, 633.0px) ; }
        96.96% {  transform: translate(1167.0px, 760.0px) ; }

        98.48% {  transform: translate(1165.0px, 790.0px) ; }
        100.0% {  transform: translate(1167.0px, 820.0px) ; }
	}