/* CSS Document */
body{
   background-color:#222;
    /*background-image:url(kep/sejthater.jpg);*/
    
   
}
#zaszlo {
   background-color:black;  
   background-repeat:no-repeat;
/*background-position: 50%;*/
background-image:url('../php/kep.php?id=0'); 
background-position: center;

       
}

a{
color:#ffc041;
  /*text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de;*/
}


/*-----*/

#sejtbody
{
   background-image: url('../php/kep.php?id=1');
   background-repeat:repeat;
   z-index: 2;
   width: 100%;
   height: 100%;
   margin:0;
   top:0;
  
     overflow: hidden;
    position: fixed;
    right: 0;
    left: 0;
}

 
 .bubi
 {
   position: relative;
   min-width: 50%;
   height: 100%;
   margin: -10%;
   transform-origin: right;
   z-index: -2;
  
   
 }
.bubi span{
  
position: absolute;
top:calc(80px*var(--i));
left:calc(80px*var(--i));
bottom:calc(80px*var(--i));
right:calc(80px*var(--i));
}

.bubi span::before{
content: '';
position: absolute;
top: 50%;
left: -8px;
width: 50px;
height: 50px;
background: red;
box-shadow: 0 0 0 10px #dc4f4f44,
  0 0 50px red,
  0 0 100px red;
border-radius: 50%;

}

.bubi span:nth-child(3n+1)
{
 animation: bubian1 10s alternate infinite; 
}
.bubi span:nth-child(3n+2)
{
 
 animation: bubian1-reverse 3s alternate infinite;
  
}
.bubi span:nth-child(3n+3)
{

 animation: bubian1 8s alternate infinite; 
}


.bubi:nth-child(event)
{
 transform-origin: left;
 
}

.bubi:nth-child(3n+3){
  position: unset;
}

@keyframes bubian1{
  0%{
     
    transform: rotate(0deg);
    /*filter: hue-rotate(0deg);*/
  }
  100%{
     
    transform: rotate(360deg);
    
  }
 }

 @keyframes bubian1-reverse{
    0%{
       
      transform: rotate(360deg);
      /*filter: hue-rotate(0deg);*/
    }
    100%{
       
      transform: rotate(0deg);
      
    }
   }