@font-face {
   font-family : 'AlteSchwabacher';
    src:url(AlteSchwabacher.ttf);}
  
  @font-face {
   font-family : 'Manuskrip';
   src:url(Manuskrip.ttf);}
  
  html{height:100%;}
	
	  body{margin:0;
		      background-image:url('../wp8.webp');
			   background-size: 100%;
			  background-repeat:no-repeat;	
	         }
	 #af-ip {text-align:center;
          position:absolute;
		      left:50%;transform: translate(-50%, -50%); 
			   }
	 
 #ad-ip {color:blue;
         border-radius:15px; 
		 width:220px; 
		 height:25px;
		 font-style: oblique;
		 font-family:Playball-Regular; 
		 text-align:center;
		 background-color:#F1E2BE;
		 font-size:18px;
		 position:absolute;
		 left:50%;
		 transform: translate(-50%, -50%); 
		 top: 160px;
		 }					         
	 
		#boutons{position:absolute;
	             top:60px;
			     left:50%;transform:translate(-50%, -50%); 
			     width:980px;
			    }
		#div_horloge{text-align:center;
			         position:absolute;
		             left:50%;transform:translate(-50%, -50%); 
		             top:70px;
					 }		 
		#el{text-align:center;font-size:22px;font-weight:bold;font-style:oblique;font-family:AlteSchwabacher;border-color:transparent;
		    color:#FFD700;border-radius:15px; width:100px; height:30px;background-color:transparent;position:absolute;
		    left:50%;transform:translate(-50%, -50%); 
		    top:50px;
			}	  	 
			                    
		#bv{position:absolute;
		    left:50%;transform:translate(-50%, -50%); 
		    top:260px;
			background:transparent;
		    }
		
		                       
		#rosace{position:absolute;
               top:120px;
		       left:80px;
	            width:80px;
                height:80px;
				border:2px solid gray;  
	            border-radius:60px;
				background:url('../vitrail-P1.webp') no-repeat left top;
				animation-name:ground;
		        animation-duration:3s;
		        animation-iteration-count:infinite;
		        animation-timing-function:linear;
	           }
    	 #rosace2{position:absolute;
               top:120px;
		       right:80px;
	            width:80px;
                height:80px;
				border:2px solid gray;  
	            border-radius:60px;
				background:url('../vitrail-P1.webp') no-repeat left top;
				animation-name:ground;
		animation-duration:5s;
		animation-iteration-count:infinite;
		animation-timing-function:linear;
	           }
		.rosace3{width:80px;
                height:80px;
				border:2px solid gray;  
	            border-radius:60px;
				background:url('../grill-tet1.webp') no-repeat left top;
				animation-name:ground;
		        animation-duration:2s;
		        animation-iteration-count:infinite;
		        animation-timing-function:linear;
	           }   	   
			   
    @keyframes ground{0%{filter:hue-rotate(0deg);}
                  100%{filter:hue-rotate(360deg);}
				 }		
		                                 
           .tet{width:80px;
                height:80px;
				border: 2px solid gray;
	            border-radius:60px;
				background:url('tet2.webp') no-repeat left top;
			    } 
		
   #rosace4{position:absolute;
            top:405px;
		    left:50%;
			transform:translate(-50%, -50%);
	        width:50px;
            height:60px;
			border:2px solid gray;  
	        border-radius:60px;
			background:url('../vitrail-P1.webp') no-repeat left top;
			animation-name:ground;
		    animation-duration:5s;
		    animation-iteration-count:infinite;
		    animation-timing-function:linear;
	         }
	#moto  {position:absolute;
            top:400px;
		    left:50%;
			transform:translate(-50%, -50%);
		     }
 #bateau{position:absolute;
         top:750px;
		     left:50%;
			   transform:translate(-50%, -50%);
	           }     
		p{ position:absolute;
	       left:50%;transform: translate(-50%, -50%); 
		   top: 1100px;}		   
	footer {position:absolute;
           top:1300px;
		    left:50%;
			transform:translate(-50%, -50%);
		    white-space:nowrap;
			font-family:Manuskrip;
			font-size:24px;
	        }
	section{position:absolute;
	        top:300px;
			height:500px;
			left:5px;
			right:5px;
	        }		
    #alien {rotate:-5deg;}
	#aig {rotate:-12deg;}