body
{
animation: back 4s forwards;
background-color: #F7F6F6;
font-family: 'Audiowide', cursive;
padding: 0;
margin: 0;}


body#lys
{
animation: lys 4s forwards;
background-color: #FFE780;
font-family: 'Qwitcher Grypen', cursive;
padding: 0;
margin: 0;

}

.qwitcher-grypen-bold {
  font-family: "Qwitcher Grypen", cursive;
  font-weight: 700;
  font-style: normal;
}





@keyframes back  {from {background-color:#F7F6F6; }
					to{background-color:black;}}
					
@keyframes lys  {from {background-color:black; }
					to{background-color:#FFE780;}}
					

#audio {border-radius: 50%;
		border-style: double;
		border-color: #74FEEC ;}


 section#intro section.picture img.studlog { 	margin-left:8px; 
 									 			margin-top: 8px;
 									 			border-radius: 20%;
 								 			 	box-shadow: -20px 0px 20px;
 								 	 			animation: gitou 4s forwards;
 								 	 			width: 500px;
 								 	 			border-style: solid;
 								 	 			border-color:#74FEEC ;



 }

 @keyframes gitou {from {opacity:0;}
					to  {opacity:1;}}

section#intro section.picture { margin-left: 30px;
		                        width: 315px;
		                        margin-bottom: 100px;
		             
						
						}
 section#intro section.nav {    align:right;
                                width: 60%;
                                margin-top: -350px;
                                Margin-left: 35%;
                                
 }
 /*
 
 margin-left: 400px;
 				        	
 					       
 
 */
 section#intro section {
 				width: 40%;}
 				
 section#com {      display:flex;
                    justify-content:right;
                    padding:30px;
                    
 }
 
img.com {           width:500px;
                    border-style: solid;
                    border-color:#8E31FF;
                    border-radius:15px;
                    animation:zupii 3s infinite;
    
}

 
            
}

section#infoboutik {
		    width: 60%;
            margin-top: 80px;
            margin-left: 30%;
            border-style: double animation: fouch 2s infinite ease; 
            border-radius: 5%;
            border-color: #74FEEC;
            border-width:15px;
            padding:30px;
         
          }
          
          
section#write {
		    width: 60%;
		    margin-top: 100px;
		    margin-left:30px;
		    border-style: dashed;
		    border-radius: 5%;
		    border-color:#B62000;
		    border-width:5px;
		   
		   
		    overflow-x: scroll;

		   
		    
		     }
		     
section#video {
            display:center;
            justify-content:center;
            
		    margin-top: 100px;
		    margin-left:30px;
		    border-style: double;
		    border-radius: 20px;
		    border-color:#F88F30;
		    border-width:5px;
		    padding:30px;
		    vertical-align:text-top;
		   		    
		    overflow-x: scroll;

		   
		   }
		     
		     
section#video2 {
            display:flex;
		   
            margin-top: 80px;
            margin-left:30%;
             border-style: double ;
            border-radius: 5%;
            border-color:yellow;
            padding:30px;
            border-width:8px;
            align-items:center;
            justify-content:center;
          }
          
          
section#inline {
            display:flex;
            justify-content:inline;
            
		    margin-top: 100px;
		    margin-left:30px;
		    border-style: double;
		    border-radius: 20px;
		    border-color:#F88F30;
		    border-width:5px;
		    padding:30px;
		    vertical-align:text-top;
		   		    
		    overflow-x: scroll;}
		    
		    
section#alignboxc { display:flex;
                    justify-content:center;
}

section#alignboxr { display:flex;
                    justify-content:right;
                    align-items:right;}
                    
section#alignboxl { display:flex;
                    justify-content:left;
                    align-items:left;}
                    
section.img {display:row;}

#media {    
            border-radius:5%;
            display:flex;
            
            
}
            
section.vidtext {
}

section#write2 {
			width: 60%;
          margin-top: 80px;
          margin-left: 30%;
          border-style: solid ;
          border-radius: 5%;
          border-bottom-color: #74FEEC;
          border-right-color: #74FEEC;
         
          }




li.bonus:hover a.bonus{animation: fouch 1s;
					animation-iteration-count: infinite;
					animation-fill-mode: forwards;}			

section#write2 div.vidtext {
			                background-color:black;
			                }

section#logo img.logo {
			margin-left: 30px;
			margin-top: 40px;
			border-radius: 50%;
			box-shadow: -20px 15px 15px black;
			flex-wrap: wrap;
			transition: transform 6s;
			border-style: double;
			border-color: #74FEEC ;
		    

}

img.qr {width:70%; Border-radius : 15%}

section.end {   text-align:center;
                
}


section#retour{ margin-top:50px;
                margin-left:100px;}




.logo:hover{transform:;
			 }


p.iloutext {flex-direction: row;
			overflow: visible;
			font-size:30px;
			}

p {color: white;}	


iframe.ilou {
		margin-left: 100px;
		margin-bottom: 100px;
		border-radius: 10%;
		overflow :width;
	
	
} 	     

iframe.cloud {
			margin-left: 10px;

}
 li.btn {   list-style-type: none;
 		    text-align: right;
 		    position: relative;
 		    padding-top:30px;
 		    
 		    
 		    

 		 }
 		 
li.btni {   list-style-type: none;
 		    text-align: right;
 		    position: relative;
 		    padding-top:30px;
 		    padding-right:30px;

 		 }


 	
.title {color: #74FEEC;
        padding:10px;
        
}  

h1 {width:100%;
	background-color: rgba(0, 0, 0, 0,5);
	border-radius: 10%;
	border-style: double;
	opacity: 0.8;
	color: red;
	font-size: 50px;
	text-align:center;
	animation: zupii 4s forwards ease;
	box-shadow:0 0 50px blue;
}

h1.lys {color:black;
	    background-color: #FFF4C3;
	    border-radius: 10%;
	    border-style: double;
	    opacity: 0.8;
	    font-size: 100px;
	    text-align:center;
	    animation: zupii 4s forwards ease
}

h2.title 	{text-decoration: underline;
			text-underline-position: under;
            padding-right:30px;
}

				/*------Flexbox et centrage �l�ments-------*/

section.salut { background-color: #00E2D8 ;
                height:100px;
                border-bottom-left-radius:50%;
                display: flex;
                justify-content: flex-end;
                align-items: center;

}
   					/*-------Fin---------*/
	

	p.salut{
		color:yellow;
		font-style: italic;
		font-size: 40px;
		padding-right: 40px; 
		
		

			
			
			

}
p.text{ font-size: 20px;
	    font-family:  cursive;
	    margin-left: 20px;
	    text-align-last: center;
	}

p.textou{   font-size: 30px;
	        font-family:monospace;
            
            
            font-style: normal;
            
        	margin-left: 20px;
	        text-align-last: center;
        	color: Black;
	}
	
p.textouleft{   font-size: 30px;
	            font-family: monospace ;
                font-style: normal;
                margin-left: 20px;
	            text-align-last:;
        	    color: Black;
                
                
        	    
	}
	
p.textouright{  font-size: 40px;
                font-family: 'Sour Gummy', cursive;
                font-optical-sizing: auto;
                font-weight: <weight>;
                font-style: normal;
                font-variation-settings:"wdth" 100;
    	        margin-left: 20px;
                text-align:right;
    	        color: Black;
	}
	
p.I {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:2s;
        animation-fill-mode: forwards;
        opacity:0;
}

p.II {   font-size: 30px;
        color:#74FEEC;
        animation :x 1s;
        animation-delay:3s;
        animation-fill-mode: forwards;
        opacity:0;
}
p.III {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:4s;
        animation-fill-mode: forwards;
        opacity:0;
}
p.IV {   font-size: 30px;
        color:#74FEEC;
        animation :x 1s;
        animation-delay:5s;
        animation-fill-mode: forwards;
        opacity:0;
}
p.V {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:6s;
        animation-fill-mode: forwards;
        opacity:0;
}
p.VI {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:7s;
        animation-fill-mode: forwards;
        opacity:0;
}
p.VII {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:8s;
        animation-fill-mode: forwards;
        opacity:0;
}

p.VIII {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:10s;
        animation-fill-mode: forwards;
        opacity:0;
}

p.IX {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:12s;
        animation-fill-mode: forwards;
        opacity:0;
}

p.X {   font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:15s;
        animation-fill-mode: forwards;
        opacity:0;
}

a.XI {  font-size: 30px;
        color:#74FEEC;
        animation :zupii 1s;
        animation-delay:17s;
        animation-fill-mode: forwards;
        opacity:0;
}



a.retour {      font-size:30px;
                color: #74FEEC;
                animation :zupii 1s;
                animation-delay:8.5s;
                animation-fill-mode: forwards;
                opacity:0;
                
}

a.skip {        font-size:30px;
                color: #74FEEC;
                opacity:1;
                margin:30px;
                color:white;
                text-align:right;
}

@keyframes x {
				10%{opacity:0;}
				20%{opacity:0;}
				30%{opacity:1;}
				40%{opacity:1;}
				50%{opacity:1;}
				60%{opacity:1;}
				70%{opacity:1;}
				80%{opacity:1;}
				90%{opacity:1;}
				100%{opacity:0;}
	}

section.textdec {	background-color: white;
					border-radius: 5%;
					align-content: center;
					margin-left: 30px;
					margin-right: 30px;
					animation: gitou 4s forwards;
					margin-top:70px;
					padding:30px;
			}
			
section.textdecleft {	background-color:white;
					    border-radius: 5%;
					    
					    margin-left: 30px;
					    margin-right: 30px;
					    animation: shutd 1s;
					    animation-fill-mode: forwards;
                        animation-delay: 1s;
					    margin-top:70px;
					    padding:30px;
			}
			
section.textanim {	    background-color:;
					    border-radius: 5%;
					    
					    animation:bug 4s forwards;
					    margin-left: 30px;
					    margin-right: 30px;
					    margin-top:70px;
					    padding:30px;
					    opacity:;
			}			
			
section.feuille {   text-align:center;
                    border-radius:10%;
                    background-color: white;
                    padding:10px;
    
    
    
}

	a{	font-size: 30px;
		text-decoration: none;
		
		text-underline-position:under;
		color: #5200B0;
		}

	a.bonus{	font-size: 40px;
		text-decoration: none;
		
		border-style: solid;
		
		margin-bottom: 50px;
		border-radius: 10%;}

	

	.bonus {
			margin-top: 500px;
			text-align: right;
			list-style-type: none;}


	a.biton:hover {animation: zup 1s infinite;}

	a.bitoni:hover {animation: zupii 0.5s infinite;
					color:#00E2D8;}
					
	a.navouli:hover {animation: piou 0.5s infinite;}
	
	a.skip:hover {animation: zupii 0.5s infinite;}

    a.reour:hover {animation: piou 0.5s infinite;}
    
    a.img:hover {animation: zupii 1s;
					color:#00E2D8;}  

/* color:#00E2D8 */


	a.bitoni {  opacity:0;
			    color: black;
			    animation: zupiii 5s ease infinite;
			    
			    /*----
	            border-style:solid;
	            border-radius:10%;
	            -----*/
	            
	}
	
	a.navouli { }

    a.lys {         opacity:0;
			    color: black;
			    font-size: 80px;
			    animation: zupiii 2s ease infinite;}

    blink.bitoni {  opacity:0;
			    color: black;
			    animation: zupii 0.5s ease infinite;
			    color:#00E2D8;
                font-size:30px;
                
}
p.comm {font-size:30px;
        color:#00E2D8;
}

    @keyframes piou {   from    {opacity:1; color:grey;}
                        to      {opacity:1;color:white;}}
                        

	@keyframes zup {to   {opacity: 0;}}

	@keyframes zupii { 	from {opacity: 0;}

						to  {opacity: 1;}}

	@keyframes zupiii { from {opacity: 0;}

						to  {opacity: 1;
							color:#00E2D8;}}
							
	@keyframes shutd {
				10%{opacity:0;}
				20%{opacity:0;}
				30%{opacity:1;}
				40%{opacity:1;}
				50%{opacity:1;}
				60%{opacity:1;}
				70%{opacity:1;}
				80%{opacity:1;}
				90%{opacity:1;}
				100%{background-color:black;}
	}
	
@keyframes bug {
				from{background-color: white;}
			    to  {background-color: black;}
	}
	


p.news {font-size: 25px;
		margin-left: 20px;
		text-align:center;
        margin:15px;
}

            /* Les Img */

img.earth {
			margin-top: 50px;
			width: 100%;
			opacity: 0.5;

	}
	p.bio{font-size: 50px;
		margin-top: 20px;}

img.poupigif {  width:300px;
                border-radius:10%;
                text-align:center;
}

img.gogo {      width:500px;
                border-radius:10%;
                text-align:center;
}


				/* annim reload*/


 ul  li.btn:hover a{color:#74FEEC; 
 					transition: 0.7s}

 @keyframes spiny {100% {transform: rotate(360deg);}}


#reload {
		position: fixed;
		width: 80px;
		height: 80px;
		top: 7%;
		left: 92%;
		display:flex;
		align-content: center;
		justify-content:center;

		}

.ext  {	
		opacity: 0.5 ;
		animation: spiny 1s linear infinite;
		border-radius: 50%;
		border-top: solid transparent 4px;
		border-bottom: solid transparent 4px;
		border-right: solid 4px #74FEEC; 
		border-left: solid 4px #74FEEC; 
		width: 30px;
		height: 30px;
		display:flex;
		align-content: center;
		justify-content: center;
		position: absolute;
	
		}

	
.int { 	margin-top:9px; 
		margin-right:0px;

		animation: spiny 1s linear reverse infinite;	
		border-radius: 50%;
		border-top: solid transparent 3px;
		border-bottom: solid transparent 3px;
		border-left: solid 3px #74FEEC; 
		border-right: solid 3px #74FEEC; 
		width: 14px;
		height: 14px;}


em{color: red;}

footer{ margin-top: 20px;
		text-align: right;
		padding: 30px;
		color: #00E2D8 
}