@font-face {
   font-family : 'AlteSchwabacher';
    src:url(AlteSchwabacher.ttf);}
  
  @font-face {
   font-family : 'Manuskrip';
   src:url(Manuskrip.ttf);}
	
	  
	  #bateau{position:absolute;
               top:1100px;
		       left:50%;
			   transform:translate(-50%, -50%);
	           }
		#boutons{position:absolute;
	             top:80px;
			     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:70px;
			}	  	 
			                    
		#bv{position:absolute;
		    left:50%;transform:translate(-50%, -50%); 
		    top:320px;
			background:transparent;
		    }
		body{margin:0;
		      background-image:url('../tower.webp');
			  background-size:cover;
			  height: 100%;
	          width:100%;
  			 margin: 0;
	         padding: 0;
	         overflow-x: hidden;
			 }
		                       
		#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:855px;
		    left:50%;
			transform:translate(-50%, -50%);
	        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;
	         }
	#moto  {position:absolute;
            top:820px;
		    left:50%;
			transform:translate(-50%, -50%);
		     }
		p{ position:absolute;
	       left:50%;transform: translate(-50%, -50%); 
		    top: 1390px;}		   
	footer {position:absolute;
            top:1460px;
		    left:50%;
			transform:translate(-50%, -50%);
		    white-space:nowrap;
			font-family:Manuskrip;
			font-size:24px;
	        }
	section{position:absolute;
	        top:1000px;
			height:500px;
			left:5px;
			right:5px;
	        }		
    #alien {rotate:-5deg;}
	#aig {rotate:-12deg;}