/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}




body {
	
	background:#A13B3B;
}


#container {
	width:1500px;
	height:1000px;
	border:1px ;
	margin:auto;
	position:relative;
}

div#TDS{
	position:absolute;
	top:240px;
	left:650px;
  width:200px;
  height: 200px;
  
  border-radius: 50%;
	  background: linear-gradient(90deg in hsl longer hue, red 0 50%) 0/200%;
     animation: r 6s linear infinite;
	}
	
	
div#eye-base{
	
	margin: 0 auto;
  width: 500px;
  height: 500px;
  background-color: rgba(0,0,0,.5);
  border-radius: 100% 0px;
  transform: rotate(45deg);
  position:absolute;
  top:100px;
  left:500px;
  transition:all 2s;
   animation-name: eye-base;
  animation-duration: 2s;
animation-iteration-count: infinite;
transition-delay: 60s;
animation-direction:alternate;

animation-delay: -2s;
	}
	

 #yin-yang {
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: red;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
	  top:80px;
	  left:690px;
	   animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
    
    #yin-yang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid red;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }
    #yin-yang:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: red;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }

	
div #eye-beam {
      width: 100px;
      height: 100px;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-top: 500px solid red;
      border-radius: 50%;
	  position:absolute;
	  top:340px;
	  left:630px;
	  rotate:180deg;
	  opacity:0.3;
	  

    }
	@keyframes r {
  to {background-position: 100%}
}


div #track{
  width: 100%;
  height: 60px;
  position: relative;
  background: red;
  position:absolute;
  top:940px;
}


#track:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

#square {
  width: 100px;
  height: 100px;
  background: red;
  position:absolute;
  top:840px;
  left:0px;
  animation-name:square, square1;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in,ease-in;
   animation-delay: 0s,0.3s;
  
}
@keyframes square1{
	
	
	from{background:black;}
	to{background:#ba2554;}
	
	}
  

@keyframes square{
	
	from{top:840px; left:0px;}
	to{top:840px; left:1400px;}
	
	}
	
div #recevier1{
	
	position:absolute;
	top:750px;
  --r: 20px;  /* control the rounded part */
  --s: 40px;  /* control the size of the cut */
  --a: 20deg; /* control the depth of the curvature */

  width: 250px;
  aspect-ratio: 1;
  background: #7a2772;
  border-radius: var(--r);
  --_m:0/calc(2*var(--r)) var(--r) no-repeat
    radial-gradient(50% 100% at bottom,#000 calc(100% - 1px),#0000);
  --_d:(var(--s) + var(--r))*cos(var(--a));
  mask:
    calc(50% + var(--_d)) var(--_m),calc(50% - var(--_d)) var(--_m),
    radial-gradient(var(--s) at 50% calc(-1*sin(var(--a))*var(--s)),
      #0000 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(1 - sin(var(--a)))) no-repeat,
    linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
	
}


 div  #space-invader {
      box-shadow: 0 0 0 1em red,
      0 1em 0 1em red,
      -2.5em 1.5em 0 .5em red,
      2.5em 1.5em 0 .5em red,
      -3em -3em 0 0 red,
      3em -3em 0 0 red,
      -2em -2em 0 0 red,
      2em -2em 0 0 red,
      -3em -1em 0 0 red,
      -2em -1em 0 0 red,
      2em -1em 0 0 red,
      3em -1em 0 0 red,
      -4em 0 0 0 red,
      -3em 0 0 0 red,
      3em 0 0 0 red,
      4em 0 0 0 red,
      -5em 1em 0 0 red,
      -4em 1em 0 0 red,
      4em 1em 0 0 red,
      5em 1em 0 0 red,
      -5em 2em 0 0 red,
      5em 2em 0 0 red,
      -5em 3em 0 0 red,
      -3em 3em 0 0 red,
      3em 3em 0 0 red,
      5em 3em 0 0 red,
      -2em 4em 0 0 red,
      -1em 4em 0 0 red,
      1em 4em 0 0 red,
      2em 4em 0 0 red;
      background: red;
      width: 1em;
      height: 1em;
      overflow: hidden;
      margin: 50px 0 70px 65px;
	  position:absolute;
	  left:50px;
    }
	
	
	div #invader-beam{
  --s: 25px;    /* control the size */
  --c: #020303; /* the color */
  
  width: var(--s);
  min-height: 530px;
  --_g: var(--s) left 50%,var(--c) calc(100% - 1px),#0000;
  background: 0/100% calc(4*var(--s)) no-repeat space;
  background-image: 
   radial-gradient(circle closest-side at top    var(--_g)),   
   radial-gradient(circle closest-side at bottom var(--_g)),   
   linear-gradient(#0000 25%,var(--c) 0 75%,#0000 0);
   position:absolute;
   top:250px;
   left:115px;
}


div   #egg {
      display: block;
      width: 100px;
      height: 140px;
      background-color: red;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	  position:absolute;
  top:800px;
  left:0px;
  animation-name:egg, egg1;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in,ease-in;
   animation-delay: 1000ms,1300ms;
    }
	
	@keyframes egg1{
	
	
	from{background:black;}
	to{background:#198248;}
	
	}
  

@keyframes egg{
	
	from{top:800px; left:0px; opacity:0;}
	to{top:800px; left:1150px;opacity:1;}
	
	}
	
div #thunder {
    height: 130px; /* control the size */
    aspect-ratio: 0.56;
    clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);
    background: #ff8001;
	  position:absolute;
  top:800px;
  left:0px;
  animation-name:thunder, thunder1;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in,ease-in;
   animation-delay: 250ms,1000ms;
}
	@keyframes thunder1{
	
	
	from{background:black;}
	to{background:#ffb301;}
	
	}
  

@keyframes thunder{
	
	from{top:800px; left:0px; opacity:0;}
	to{top:800px; left:1150px;opacity:1;}
	
	}
	
	
	
	div #batman {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 3;
  background: #000;
  --g:#000 calc(100% - 1px),#0000;
  mask:
    conic-gradient(from 170deg at 47% 8%,#0000,#000 2deg 20deg,#0000 22deg) 
     0 0/100% 50% no-repeat,
    conic-gradient(from 170deg at 53% 8%,#0000,#000 2deg 20deg,#0000 22deg) 
     0 0/100% 50% no-repeat,
    radial-gradient(4.5% 20% at 50% 35%,var(--g)),
    conic-gradient(#000 0 0) exclude,
    radial-gradient(20% 35% at 50% -5%,var(--g)),
    radial-gradient(30% 44% at 20% 100%,var(--g)),
    radial-gradient(30% 44% at 80% 100%,var(--g)),
    radial-gradient(16% 51% at left ,var(--g)),
    radial-gradient(16% 51% at right,var(--g));
	 position:absolute;
  top:870px;
  left:0px;
  animation-name:batman, batman1;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in,ease-in;
   animation-delay: 700ms,1300ms;
}
@keyframes batman1{
	
	
	from{background:black;}
	to{background:#fcfcfc;}
	
	}
  

@keyframes batman{
	
	from{top:870px; left:0px; opacity:0;}
	to{top:870px; left:1150px;opacity:1;}
	
	}
	
	div #recevier2{
  --r: 20px;  /* control the rounded part */
  --s: 40px;  /* control the size of the cut */
  --a: 20deg; /* control the depth of the curvature */

  width: 250px;
  aspect-ratio: 1;
  background: #ED303C;
  border-radius: var(--r);
  --_m:/var(--r) calc(2*var(--r)) no-repeat
    radial-gradient(100% 50% at right,#000 calc(100% - 1px),#0000);
  --_d:(var(--s) + var(--r))*cos(var(--a));
  mask:
    0 calc(50% + var(--_d)) var(--_m),0 calc(50% - var(--_d)) var(--_m),
    radial-gradient(var(--s) at calc(-1*sin(var(--a))*var(--s)) 50% ,
      #0000 100%,#000 calc(100% + 1px)) calc(var(--r)*(1 - sin(var(--a)))) 0 no-repeat,
    linear-gradient(#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
		position:absolute;
	top:750px;
	left:1250px;
}

div #wifi{
  --n: 6; /* number of bars */
  
  height: 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  --s: calc(100%/(2*var(--n) - 1));
  background:
    repeating-radial-gradient(50% 50%,
      #0000 0,#178feb 1px calc(var(--s) - 1px),
      #0000 var(--s) calc(2*var(--s)));
  mask: 
    conic-gradient(#000 0 0) no-repeat 50%/var(--s) var(--s),
    conic-gradient(from -45deg at 50% calc(50% + var(--s)/2),
      #000 90deg,#0000 0);
	  position:absolute;
	  top:330px;
	left:1150px;
	z-index: +1;
	rotate:-35deg;
}

div #antt {
  width: 200px;
  height: 40px;
  position: relative;
  background: black;
  position:absolute;
	top:630px;
	left:1275px;
	rotate:-90deg;
}

    #tv {
      position: absolute;
      width: 200px;
      height: 150px;
      margin: 20px 0;
      background: red;
      border-radius: 50% / 10%;
      color: white;
      text-align: center;
      text-indent: .1em;
	  top:430px;
	left:1275px;
    }
    #tv:before {
      content: '';
      position: absolute;
      top: 10%;
      bottom: 10%;
      right: -5%;
      left: -5%;
      background: inherit;
      border-radius: 5% / 50%;
    }
	
	div#MC {
  --r: 70px; /* control the size */
  --c1: #ffffff;
  --c2: #000000;
  position:absolute;
  top:455px;
  left:1300px;

  height: calc(2* var(--r));
  aspect-ratio: 1;
  clip-path: circle();
  display: flex;
  
  
   animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }

}
#MC:before,
#MC:after {
  content: "";
  flex: 1;
  --g1:radial-gradient(50% 50%,var(--c1) 99%,#0000) no-repeat;
  --g2:radial-gradient(50% 50%,var(--c2) 99%,#0000) no-repeat;
  background: var(--g1) calc(sin(60deg)* var(--r)) calc(var(--r) / -2), var(--g2) calc(var(--r) / 2) calc(sin(-60deg)* var(--r)), var(--g1) 0 calc(-1* var(--r)), var(--g2) calc(var(--r) / -2) calc(sin(-60deg)* var(--r)), var(--g1) calc(sin(-60deg)* var(--r)) calc(var(--r) / -2), var(--g2) calc(-1* var(--r)) 0, var(--g1) calc(sin(-60deg)* var(--r)) calc(var(--r) / 2);
  background-size: 200%;
}
#MC:after {
   rotate: 180deg;
} 

div #film{
  --s: 7px; /* control the size */
  --c: #222;
  	
	position:absolute;
	top:800px;
	left:40px;
 
  width: calc(20*var(--s));
  aspect-ratio: 1.25;
  background: 
    conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0) 
    0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
  border: var(--s) solid var(--c);
  padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
  box-sizing: content-box;
  /* you can add a filter for an oldish effect 
  filter: sepia(1) brightness(0.9) grayscale(.2);
  */
}

	
	


  
  div #wifi2{
  --n: 6; /* number of bars */
  
  height: 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  --s: calc(100%/(2*var(--n) - 1));
  background:
    repeating-radial-gradient(50% 50%,
      #0000 0,#178feb 1px calc(var(--s) - 1px),
      #0000 var(--s) calc(2*var(--s)));
  mask: 
    conic-gradient(#000 0 0) no-repeat 50%/var(--s) var(--s),
    conic-gradient(from -45deg at 50% calc(50% + var(--s)/2),
      #000 90deg,#0000 0);
	  position:absolute;
	  top:330px;
	left:1325px;
	z-index: +1;
	rotate:35deg;
}