body{
opacity:0;
animation: norm 1s forwards;
background-color: black;
font-family: 'Audiowide', cursive;
padding: 0;
margin: 0;
height :100%;
}

body#headtitle {
opacity:0;
animation: norm 7s forwards;
background-color: black;
font-family: 'Audiowide', cursive;
padding: 0;
margin: 0;
height :100%;
}

.zumzum {

animation: fouch 1s ease infinite;

}

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

.italianno-regular {
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
}

 @keyframes norm  {     0% {opacity:0; }
                       100%{opacity:1;}
    }

    @keyframes headphone {   0%     {opacity:0;}
                            25%     {opacity:1;}
                            50%     {opacity:1;}
                            75%     {opacity:1;}
                           100%     {opacity:0;}
    }
    
    @keyframes start  {  0% {opacity:0; }
    					50%{background-color:white;}
                       100%{opacity:1;}
    }
    					
    @keyframes lys  {from {opacity:0; }
    					to{opacity:1;}}
    					
    @keyframes gitou {from {opacity:0;}
    					to  {opacity:1;}}
    					
    @keyframes piou {   from        {color:grey;}
                            to      {color:rgb(255, 0, 221);}}

    @keyframes select {   from          {color:rgb(0, 255, 4);}
                            to          {color:white;}}

    @keyframes next {       from            {color:white;}
                            to              {color:blue;}}
                            

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


	@keyframes zupii { 	from    {opacity: 0;}

						to      {opacity: 1;}}



    @keyframes iipuz { 	from        {opacity: 1;}

						to          {opacity: 0;}}



	@keyframes zupiii { from {opacity: 0;}

						to  {opacity: 1;
							color:#00E2D8;}}
							
	@keyframes fouch {
				10%{background-color: rgb(255, 115, 0);}
				20%{background-color: yellow;}
				30%{background-color : rgb(0, 225, 0);}
				40%{background-color: orange;}
				50%{background-color: #74FEEC;}
				60%{background-color: #F7F6F6;}
				70%{background-color: #DE16EC;}
				80%{background-color: blue;}
				90%{background-color: #108CEA;}
				100%{background-color: white;}
	}
	
    @keyframes bug {
    				from{background-color: white;}
    			    to  {background-color: black;}
    	}

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

    @keyframes gameover {
        0% {
            opacity:0;
            visibility: hidden;
        }

        50% {
            opacity:1;
            visibility: visible;

        }

        100% {
            opacity:0;
            visibility: hidden;

        }



    }

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



 }
 
 

 

section#intro section.picture { margin-left: 30px;
		                        width: 315px;
		                        margin-bottom: 200px;
		             
						
						}
						
section#intro section.nav {     text-align:right;
                                width: 60%;
                                margin-top: -350px;
                                Margin-left: 35%;
                                
                                
 }


 
 section#intro section {width: 40%;}

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



                /*-- head phone title --*/

section#title { display:flex;
                flex-direction:column;
                align-items: center;
                }

img#poupi { 
            margin-top:50px;
            margin-bottom:20px;
            border-radius:70px;
            border : double #74FEEC;
            box-shadow:0 0 50px blue;
        
        }

img#waitpaper {opacity:0.7;}

video#intro {border-radius: 30px;}


p.headtitle {   font-family: 'Audiowide', cursive;
                color:white;
                font-size: 40px;
                text-align:center;}


                 /*--                  --*/

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

 		 }

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

 h1.title {     color: #74FEEC;
                padding:10px;
                background-color: rgba(0, 0, 0, 0,5);
                box-shadow:0 0 50px blue;
            
    } 
    
h2.title {      color: #74FEEC;
                padding:10px;
                text-shadow:0 0 50px blue;
                width:100%;
        	   
        	  
        	    font-size: 40px;
        	    text-align:right;
        	    animation: zupii 4s forwards ease;
        	
            
    } 
    
section#textdec {	    background-color: white;
					    border-radius:50px;
					    margin-left: 1%;
					    margin-right: 1%;                    
					    animation: gitou 4s forwards;
					    margin-top:70px;
					    padding:70px;
                        height:100%;
                        box-shadow:0 0 50px blue;
                        font-size: 30px;
    	                font-family: monospace ;
                        font-style: normal;
                        margin-left: 20px;              
    	                text-align:justify;
            	        color: Black;
			}

section#lettre {	    background-color: white;
					    border-radius:50px;
                        border-style: solid;
                        
					    margin-left: 1%;
					    margin-right: 1%;                    
					   
					    margin-top:70px;
					    padding:70px;
                        
                        box-shadow: 0 0 30px rgb(0, 0, 0);
                        font-size: 30px;
    	                font-family: monospace ;
                        font-style: normal;
                        margin-left: 20px;              
    	                text-align:justify;
            	        color: Black;
			}

.gameover { animation: gameover 2s ease forwards;
            display:hide;
			}

section#gameover {  display:flex;
                    align-items:center;
                    min-height:100vh;
                    flex-direction: column;
                    justify-content: center;
                    
                    
                    }


                    /* --- Div ---*/

div#back {
                        background-color: white;
					    border-radius:50px;
					    margin-left: 1%;
					    margin-right: 1%;                    
					    margin-top:70px;
					    padding:70px;
                        height:100%;
                        box-shadow:0 0 50px blue;
                        font-size: 30px;
    	                font-family: monospace ;
                        font-style: normal;
                        margin-left: 20px;              
    	                text-align:justify;
            	        color: Black;
                        opacity:1;







}







                                                         /* ---- Button ---- */

button#tiroir {     padding:20px;
                    font-family:'Audiowide', cursive;
                    font-size: 70px;
                    border-radius: 10px;}


button#go {         padding:20px;
                    margin-top:100px;
                    font-family:'Audiowide', cursive;
                    color:blue;
                    background:black;
                    font-size: 70px;
                    border-radius: 10px;
                    box-shadow:0 0 50px blue;
                    text-shadow:0 0 50px blue;
                    border-radius:50px;}

button#A,
        #A1,
        #A2,
        #A3,
        #A4,
        #A5,
        #A6,
        #A7,
        #A8, 
        #A9,
        #A10,
        #A11 {          padding:20px;
                    
                    font-family:'Audiowide', cursive;
                    color:blue;
                    background:black;
                    font-size: 30px;
                  
                    box-shadow:0 0 50px blue;
                    text-shadow:0 0 50px blue;
                    border-radius:50px;}


button#go:hover {   box-shadow:0 0 50px rgb(0, 255, 0);
                    text-shadow:0 0 50px rgb(34, 255, 0);
                    color:rgb(0, 170, 255);}

button#A:hover {   box-shadow:0 0 50px rgb(0, 255, 0);
                    text-shadow:0 0 50px rgb(34, 255, 0);
                    color:rgb(153, 153, 153);}

button#retry:hover {   box-shadow:0 0 50px rgb(0, 255, 0);
                    text-shadow:0 0 50px rgb(34, 255, 0);
                    color:rgb(153, 153, 153);}

button#retry {          font-family:'Audiowide', cursive;
                        font-size:30px;
                        color: rgb(0, 242, 255);
                        text-decoration:none;
                        background:none;
                        border:none;
                        border-radius: 10px;
                        padding:10px;
                        box-shadow:0 0 50px blue;
                        animation: zupii 5s ease forwards;
                        animation-delay: 5s;
                        opacity:0;



}

button#rep {        font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                
                }

  button#next,
        #next1,
        #next2,
        #next3,
        #next4,
        #next5 {       font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: white;
                    border-radius: 10px;
                    background:none;
                    box-shadow:0 0 50px blue;}


button.select {          font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }

button#select1 {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }

button#select2 {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }

button#select3 {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }

                                                     /* --------  */

                                                    /* ---transitions --- */

.hide {
                display:none;
            
}

.visible {
                display:block;

}

.tamisedoff {   animation: del 1s ease forwards;
                display:none;
                }

.tamisedon {    animation: start 1s ease forwards;
                
                display:block;}


 .smooth-on {   animation: zupii 3s ease forwards; 
                opacity:0;}
                
.smooth-off {  animation: iipuz 3s ease forwards; 
                }

.box { 
            opacity:0;
            display:none;
            transform:translateY(20px);
            transition: all 1s ease;
}

.box.active { 
            opacity:1;
            transform:translateY(0px);
            display:block;
           
}


                                                 /* --------  */


 p.text{            font-size: 30px;
    	            font-family: monospace ;
                    font-style: normal;
                    margin-left: 20px;              
    	            text-align:justify;
            	    color: Black;
                    line-height:1.6;
    	}         

 a.system {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: #51ff00;
                    text-decoration:none;
                   
    }

 a.retour {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: white;
                    text-decoration:none;
                   
    }

a#retour {          font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: white;
                    text-decoration:none;
                   
    }

span#vite {         animation: select 0.5s infinite;
                    font-size: 50px;
                    /*float:right;*/
                    }

a.select {          font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }

a#select1 {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }

a#select2 {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }
a#select3 {         font-family:'Audiowide', cursive;
                    font-size:30px;
                    color: rgb(141, 0, 207);
                    text-decoration:none;
                   
    }


    a.retour:hover {animation: piou 0.5s infinite;}

    a#retour:hover {animation: piou 0.5s infinite;}

    a.select:hover {animation: select 0.5s infinite;}

    a#select1:hover {animation: select 0.5s infinite;}

    a#select2:hover {animation: select 0.5s infinite;}

    a#select3:hover {animation: select 0.5s infinite;}

    a#select4:hover {animation: select 0.5s infinite;}

    button#select:hover, 

    #select1:hover, 

    #select2:hover, 

    #select3:hover,

    #select4:hover,

    #select5:hover,
    
    #select6:hover,
    
    #select7:hover,
    
    #select8:hover,
    
    #select9:hover{animation: select 0.5s infinite;}

    button#next:hover {animation: next 1s infinite;}

    button#rep:hover {animation: select 1s infinite;}

    button#heuh:hover {animation: select 1s infinite;}
    
    button#heuh1:hover {animation: select 1s infinite;} 
    
    button#heuh2:hover {animation: select 1s infinite;} 
    
    button#heuh3:hover {animation: select 1s infinite;}

    .norm {             font-family:'Audiowide', cursive;
                        font-size:30px;
                        color: rgb(141, 0, 207);
                        text-decoration:none;
                        background:none;
                        border:none;
                   
    }

    .selectoff {        font-family:'Audiowide', cursive;
                        font-size:30px;
                        color: rgb(171, 171, 171);
                        text-decoration:none;
                        background:none;
                        border:none;
                        
                   
    }

    .lunch {            font-family:'Audiowide', cursive;
                        font-size:30px;
                        color: rgb(171, 171, 171);
                        text-decoration:none;
                        background:none;
                        border:none;
                        animation: del 3s ease forwards;
                        
                   
    }

    .appear {     animation: zupii 2s ease forwards;
                        
                   
    }

 


blink.bitoni {  opacity:0;
			    color: black;
			    animation: zupii 0.5s ease infinite;
			    color:#51ff00;
                font-size:30px;
                
}

font {color:white;}

em{color: red;}

footer{ margin-top: 20px;
		text-align: right;
		padding: 30px;
		color: #00E2D8;
		text-shadow:black 1px 0 10px;
}