@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
* {
  /* So 100% means 100%*/
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
text-decoration:none; 

}


html, body {
width: 100%;
height:100%;
    background-color:white;
	line-height: 1;
	cursor: url('../img/curseur.cur'), auto;
}

.Pres1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}


.intro1{
display:flex; 
flex-flow:column; 

    align-items: center;
    justify-content: center;
    overflow:scroll;
 /*background-color: #f7f7f7;*/ 
 background-color: #efefef; 
    /*height: calc(100%/3);*/
    height: 95%;
    width: 100%;


}

/*.intro1 p{
	font-family:'Quicksand', helvetica, sans-serif;
    font-weight:600;
font-size:24px;
margin-top:20px;
margin-bottom:20px;

}*/


.intro1 p{
	font-family:'Quicksand', helvetica, sans-serif;
    font-weight:600;
font-size:24px;
margin-top:20px;
margin-bottom:20px;
line-height:1.5;
    width: 80%;
}

.intro1 a{
    font-size: 1.1em;
    margin-bottom: -40px;

    line-height: 0;
    border-radius: 1px;
}

.Twitch1{
    border-bottom: 3px solid #6441a5;
}

.Youtube1{
    border-bottom: 3px solid #c4302b;
}

.TikTok1{
    border-bottom: 3px solid black;
}

.Twitter1{
    border-bottom: 3px solid #00acee;
}



.Discord1{
    border-bottom: 3px solid #5865F2;
}

.Medias1{
    /*border-bottom: 3px solid #f2a558;*/
    border-bottom: 3px solid grey;
}


.FB1{
    border-bottom: 3px solid #3B5998;

}
 


.intro2{
	font-family:'Quicksand', helvetica, sans-serif;
    font-weight:100;
display:flex; 
flex-flow:column; 
/*align-items: center;*/
    align-items: center;
    justify-content: center;
 background-color: #fafafa; 
height: 5%;
    width: 100%;
}

.listintro2 {
list-style-type: disc;
font-size:24px;
Margin-left:50px;

}

.listintro2 li {
margin-top:20px;
margin-bottom:20px;
}



/* --------------- Mention légales --------------- */ 

.mentionslegales{
display:flex; 
flex-flow:column; 
/*align-items: center;*/
    align-items: center;
    justify-content: center;
 background-color: #f7f7f7; 
    height: 100%;
    width: 100%;
}

.mentionslegales H1{
font-size:24px;   
	font-family:'Quicksand', helvetica, sans-serif;
}

.mentionslegales p{
	font-family:'Quicksand', helvetica, sans-serif;
    font-weight:600;
font-size:20px;
/*Margin-left:30px;*/
margin-top:20px;
margin-bottom:20px;
}




span{
text-decoration:line-through;
text-decoration-thickness: 5px;
}



















/* --------------- Scmabaiters --------------- */ 

.all2{
display:flex;
flex-flow:column; 

    height: 80%;
    width: 100%;
}


.all2 H1{
    display:flex;
    align-items: center;
    font-family: 'Quicksand', helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
        margin-top:20px;
    margin-bottom:20px;

}




H2.numbone{
    display:flex;
    align-items: center;
    font-family: 'Quicksand', helvetica, sans-serif;
    font-size: 20px;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
        margin-top:4px;
    margin-bottom:4px;
}

H2.numbtwo{
    display:flex;
    align-items: center;
    font-family: 'Quicksand', helvetica, sans-serif;
    font-size: 20px;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom:30px;
}




div.episode2{
    display:flex;
    flex-flow:row; 
    font-family:  Helvetica, sans-serif, arial;
}

div.episode2 ul{
    display:flex;
      flex-flow:row wrap; 
}


div.episode2 ul li{
display:flex;
flex-flow:column; 
padding-top:20px;
padding-bottom:20px;
font-size:20px;
width:48%;
margin-left: 20px;

}

div.episode2 ul li p{
font-family: 'Quicksand', Helvetica, sans-serif, arial;
color: black;
display:flex;
flex-flow:row; 
/*align-items: center;*/
margin-top:15px;
margin-bottom:10px;
line-height:1.2;
}


div.episode2 ul li a{
font-family: 'Quicksand', Helvetica, sans-serif, arial;
display:flex;
flex-flow:column; 
margin-bottom:4px;
margin-top:4px;
}

div.episode2 ul li a:first-child{
margin-top:10px !important;
}






div.episode1{
    display:flex;
    flex-flow:row; 
    font-family:  Helvetica, sans-serif, arial;
}

div.episode1 ul{
    display:flex;
      flex-flow:row wrap; 
}


div.episode1 ul li{
display:flex;
flex-flow:column; 
padding:20px;
}

div.episode1 ul li p{
font-family: 'Quicksand', Helvetica, sans-serif, arial;
color: #106a4e;
display:flex;
flex-flow:row; 
/*align-items: center;*/
justify-content: center;
margin-top:20px;
}

        

.logo1 img{
height:250px;
border: 2px solid #106a4e; 
  border-radius: 25px;
-webkit-box-shadow: 10px 10px 0px 0px #106a4e; 
box-shadow: 10px 10px 0px 0px #106a4e;
}

.logo1 img:hover, .logo2a img:hover, .episodeA h1 img:hover{
text-decoration:none; -webkit-filter: invert(100%); filter: invert(100%);
}

.logo1 img{
text-decoration:none;
color:#312929;
font-weight:500;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}


.opacity1{
opacity:0.3;
}



body.episodeA h1{
font-family: 'Futura', Helvetica, sans-serif, arial;
display:flex;
flex-flow:row; 
align-items: center;
justify-content: center;
padding-top:20px;
font-size: 24px;
}


body.episodeA h1 img{
height:250px;
border: 2px solid #106a4e; 
  border-radius: 25px;
-webkit-box-shadow: 10px 10px 0px 0px #106a4e; 
box-shadow: 10px 10px 0px 0px #106a4e;
text-decoration:none;
color:#312929;
font-weight:500;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}


.logo1 img{

}



body.episodeA{
display:flex;
flex-flow:column; 
align-items: center;
justify-content: center;
    height: 100%;
    width: 100%;
}



body.episodeA H2.Myh2text{
font-family: 'Futura', Helvetica, sans-serif, arial;
display:flex;
flex-flow:row; 
align-items: center;
justify-content: center;
padding-top:40px;
margin-bottom:0px;
}

body.episodeA H2.Myh2text1{
font-family: 'Futura', Helvetica, sans-serif, arial;
display:flex;
flex-flow:row; 
align-items: center;
justify-content: center;
padding-top:10px;
margin-bottom:0px;
}


body.episodeA iframe{
display:flex;
flex-flow:column; 
align-items: center;
justify-content: center;
    height: 80%;
}























/* --------------- Ressources --------------- */ 



.all3{
display:flex;
flex-flow:column; 

    height: 80%;
    width: 100%;
}


.all3 H1{
    display:flex;
    align-items: center;
    font-family: 'Quicksand', helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
        margin-top:20px;
    margin-bottom:20px;

}






div.episode3{
    display:flex;
    flex-flow:row; 
    font-family:  Helvetica, sans-serif, arial;
}

div.episode3 ul{
    display:flex;
      flex-flow:row wrap; 
    width: 100%;
}


div.episode3 ul li{
display:flex;
flex-flow:column; 
margin-top:20px;
margin-bottom:20px;
padding:12px;
font-size:20px;
width:100%;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #000000;
border-radius: 12px;

}

div.episode3 ul li p{
font-family: 'Quicksand', Helvetica, sans-serif, arial;
color: black;
display:flex;
flex-flow:row; 
/*align-items: center;*/
margin-top:10px;
margin-bottom:5px;
line-height:1.2;
font-size:18px;
}


div.episode3 ul li a{
font-family: 'Quicksand', Helvetica, sans-serif, arial;
display:flex;
flex-flow:column;
margin-top:6px;
margin-bottom:4px;
}






@media screen and (max-width:900px) {

.intro1{
display:flex; 
flex-flow:column; 

    justify-content:flex-start;



}
    
    
.intro1 p {
    font-family: 'Quicksand', helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.5;
    width: 80%;
}


    
}