body {
  margin:0;
  background-color: black;
}

#fond {
	top:50%;left:50%;
	position:absolute;
	width:800px;height:600px;
	margin-left:-400px;
  	margin-top:-300px;
	object-fit: scale-down;
	background-image: url(images/nuit.png);
	background-position:center center;
	background-repeat: no-repeat;
 	background-size: cover;
	}

#citysound {
	position:absolute;
	left:17px;top:17px;
	width:761px;height:561px;
	cursor:pointer;
	}

	.light-conteneur {
		position:absolute;
	}

	.lights{
		background-position:center center;
		background-repeat: no-repeat;
		object-fit: scale-down;
		background-size: cover;
		position:absolute;
		top:0;left:0;
		width:100%;height:100%;
	}

	#light1 { width:18px;height:27px;top:456px;left:254px; }

			#f01 { 
				background-image: url(images/off01.png);
				animation-name: one;
		  		animation-duration: 1000s;
		  		animation-delay: 5s;
			}

			@keyframes one {
				0.002%  {background-image: url(images/on01.png);}
				}

	#light2 { width:18px;height:27px; top:545px;left:329px; }

			#f02 { 
				background-image: url(images/off02.png);
				animation-name: two;
		  		animation-duration: 1000s;
		  		animation-delay: 30s;
			}

			@keyframes two {
				0.002%  {background-image: url(images/on02.png);}
				}

	#light3 { top:517px;left:65px; width:6px;height:31px; }
			#f03 { 
				background-image: url(images/off03.png);
				animation-name: three;
		  		animation-duration: 1000s;
		  		animation-delay: 12s;
			}

			@keyframes three {
				0.002%  {background-image: url(images/on03.png);}
				}

	#light4 { top:517px;left:135px; width:11px;height:31px; }
			#f04 { 
				background-image: url(images/off04.png);
				animation-name: four;
		  		animation-duration: 1000s;
		  		animation-delay: 24s;
			}

			@keyframes four {
				0.002%  {background-image: url(images/on04.png);}
				}

	#light5 { width:11px;height:21px; top:446px;left:599px; }
			#f05 { 
				background-image: url(images/off05.png);
				animation-name: five;
		  		animation-duration: 1000s;
		  		animation-delay: 8s;
			}

			@keyframes five {
				0.002%  {background-image: url(images/on05.png);}
				}

	#light6 { width:11px;height:23px; top:263px;left:288px; }
			#f06 { 
				background-image: url(images/off06.png);
				animation-name: six;
		  		animation-duration: 1000s;
		  		animation-delay: 5s;
			}

			@keyframes six {
				0.002%  {background-image: url(images/on06.png);}
			}

	#light7 { width:11px; height:23px; top:290px; left:124px; }
			#f07 { 
				background-image: url(images/off07.png);
				animation-name: seven;
		  		animation-duration: 1000s;
		  		animation-delay: 13s;
			}

			@keyframes seven {
				0.002%  {background-image: url(images/on07.png);}
			}
		
	#light8 { width:15px;height:23px;top:396px;left:160px; }
			#f08 { 
				background-image: url(images/off08.png);
				animation-name: eight;
		  		animation-duration: 1000s;
		  		animation-delay: 4s;
			}

			@keyframes eight {
				0.002%  {background-image: url(images/on08.png);}
			}

	#light9 { width:15px;height:23px;top:290px;left:137px; }
			#f09 { 
				background-image: url(images/off09.png);
				animation-name: nine;
		  		animation-duration: 1000s;
		  		animation-delay: 11s;
			}

			@keyframes nine {
				0.002%  {background-image: url(images/on09.png);}
			}

	#light10 { width:29px;height:23px;top:512px;left:655px;}
			#f10 { 
				background-image: url(images/off10.png);
				animation-name: ten;
		  		animation-duration: 1000s;
		  		animation-delay: 7s;
			}

			@keyframes ten {
				0.002%  {background-image: url(images/on10.png);}
			}
	
	#light11 { width:11px;height:16px;top:404px;left:703px; }
			#f11 { 
				background-image: url(images/off11.png);
				animation-name: eleven;
		  		animation-duration: 1000s;
		  		animation-delay: 3s;
			}

			@keyframes eleven {
				0.002%  {background-image: url(images/on11.png);}
			}
	
	#light12 { width:11px;height:16px;top:544px;left:743px; }
			#f12 { 
				background-image: url(images/off12.png);
				animation-name: twelve;
		  		animation-duration: 1000s;
		  		animation-delay: 10s;
			}

			@keyframes twelve {
				0.002%  {background-image: url(images/on12.png);}
			}

	#light13 { width:12px;height:50px;top:385px;left:521px; }
			#f13 { 
				background-image: url(images/off13.png);
				animation-name: thirteen;
		  		animation-duration: 1000s;
		  		animation-delay: 2s;
			}

			@keyframes thirteen {
				0.002%  {background-image: url(images/on13.png);}
			}
	

	#light14 { width:12px;height:50px;top:280px;left:594px; }
			#f14 { 
				background-image: url(images/off14.png);
				animation-name: fourteen;
		  		animation-duration: 1000s;
		  		animation-delay: 16s;
			}

			@keyframes fourteen {
				0.002%  {background-image: url(images/on14.png);}
			}

	#light15 { width:8px;height:13px;top:464px;left:38px; }
			#f15 { 
				background-image: url(images/off15.png);
				animation-name: fifteen;
		  		animation-duration: 1000s;
		  		animation-delay: 19s;
			}

			@keyframes fifteen {
				0.002%  {background-image: url(images/on15.png);}
			}

	#light16 { width:8px;height:13px;top:404px;left:64px; }
			#f16 { 
				background-image: url(images/off16.png);
				animation-name: sixteen;
		  		animation-duration: 1000s;
		  		animation-delay: 13s;
			}

			@keyframes sixteen {
				0.002%  {background-image: url(images/on16.png);}
			}

	#light17 { width:15px;height:8px;top:517px;left:474px; }
			#f17 { 
				background-image: url(images/off17.png);
				animation-name: seventeen;
		  		animation-duration: 1000s;
		  		animation-delay: 1s;
			}

			@keyframes seventeen {
				0.002%  {background-image: url(images/on17.png);}
			}

	#light18 { width:15px;height:8px;top:347px;left:474px; }
			#f18 { 
				background-image: url(images/off18.png);
				animation-name: eighteen;
		  		animation-duration: 1000s;
		  		animation-delay: 20s;
			}

			@keyframes eighteen {
				0.002%  {background-image: url(images/on18.png);}
			}

	
	#light19 { width:16px;height:9px;top:389px;left:364px; }
			#f19 { 
				background-image: url(images/off19.png);
				animation-name: nineteen;
		  		animation-duration: 1000s;
		  		animation-delay: 2s;
			}

			@keyframes nineteen {
				0.002%  {background-image: url(images/on19.png);}
			}

	#light20 { width:67px;height:8px;top:327px;left:713px; }
			#f20 { 
				background-image: url(images/off20.png);
				animation-name: twenty;
		  		animation-duration: 1000s;
		  		animation-delay: 12s;
			}

			@keyframes twenty {
				0.002%  {background-image: url(images/on20.png);}
			}