/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 21, 2019 */



@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i');


@font-face {
    font-family: 'Chiaro';
    src: url('fonts/tt_chiaro-b-webfont.woff2') format('woff2'),
         url('fonts/tt_chiaro-b-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Anito';
    src: url('fonts/tt_anito-m-webfont.woff2') format('woff2'),
         url('fonts/tt_anito-m-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Gothicc';
    src: url('fonts/tt_dotgothic12-m-webfont.woff2') format('woff2'),
         url('fonts/tt_dotgothic12-m-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Novecento';
    src: url('fonts/novecento_wideultrabold-webfont.woff2') format('woff2'),
         url('fonts/novecento_wideultrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}

@font-face {
    font-family: 'SCDF';
    src: url('fonts/scdf-webfont.woff2') format('woff2'),
         url('fonts/scdf-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Arabic';
    src: url('fonts/arabic-font-2013-webfont.woff2') format('woff2'),
         url('fonts/arabic-font-2013-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
	max-width: 100%;
	min-height: 100%;
	margin : 0px;
	padding : 0px;
	width: 100%;
	position: relative;
	background-repeat: no-repeat;
	overflow-x: hidden;
}



body {
	font-family: 'Chiaro';
	background-color: #141a28;
	background-position: top center;
	background-repeat: repeat-y;
	position: relative;
	max-height: 100%;
	max-width: 100%;
	font-size: 1.25em;
	margin-top: 0px; 
	  	}

h1 {
	color:white;
	text-align: center;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	font-family: 'Gothicc';
	text-decoration: underline;
	margin-bottom: 5%;
	font-size: 2.5em;
}
p {
	color: white;
	text-shadow: #000000 2px 2px, #000000 -2px 2px, #000000 -2px -2px, #000000 2px -2px;
	}	

	
nav a {
	text-decoration: none;
	font-family: 'Anito';
	color: #F2A021;
	padding-bottom: 5%;
	font-weight: bold;
	max-width: 85%;
	max-height: 100%;
}
nav ul
{
    list-style-type: none;
    display: flex;
        justify-content: center;
}

nav li {
	margin-right: 3em;
	font-size: 1em;

}



a:hover{
 border:1px solid;
 border-color:  #F2A021;
 border-top-width: 4px;

}

#current{
color: #f4f5e6;
}

#questions {
color:white;
font-family: 'Gothicc';
margin-left: 15%;
font-size: 0.8em;
margin-bottom: 2%;
text-shadow: #000000 2px 2px, #000000 -2px 2px, #000000 -2px -2px, #000000 2px -2px;

}

#questions p {
	margin-top: 2%;
}

a {
	color: #F2A021;
}
p a:link {
text-shadow: none;
}


#boite1 a:hover {
border: none;
color:red;
}

#boite a:hover {
border: none;
color:red;
}

p a:hover {
	border:none;
color:red;
}

#chapitre a{
 display: flex;
  text-decoration: none;
  padding: 5px;
  color:white;
}




#debug a{

	display: flex;
	color: yellow;
	text-decoration: none;
}

#debug a:hover {
	border:none;
	display: flex;
	color: red;
	margin-left:-20px;
	padding-left:20px;
	padding-right:20px;
}
p a:visited {
	text-shadow: none;
}

#release {
	margin-bottom: 5%;
	font-size: 1.75em;
	font-family: 'Arabic';
	text-decoration: none;
	display: flex;

}


#release a {
	display: flex;
	text-decoration: none;
	border: none;
}

#release a:hover {
	color: red;
}

h2 {
	padding-top: 45px;
	color:#e00202;
	font-family: 'SCDF';
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	padding-bottom: 15px;
	font-size: 1.85em;

	}


#chapitres ul {
	padding-top: 15px;
	font-family: 'Arabic';
	color: white;
	list-style-type: none;
	font-size: 1.5em;
	}

#patchs {
	margin-left: 15%;


}
#patchs h2 {
	margin-left: -10%;
}



.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
    }

footer li img {
	max-width: 200px;
}  

footer ul {
		list-style-type: none;
    display: flex;
    padding: 0;
    justify-content: center;
}

footer {
	padding-top: 5%;
}

#copyright {
	max-width: 100%;
	font-family: 'IBM Plex Sans Condensed', sans-serif;
	font-size: 1em;
	text-align: center;
}

#copyright li {
margin-right: 5%;
}


#chapitre {
	display: flex;
}


#debug {
	padding-top: 1%;
	display: flex;
	color: yellow;
}

#debug:hover {
	display: flex;
	color: red;
}

#boite {
color: #d6d6d6;	
border:1px solid;
border-color:  #c64e03;
background-color: #131313;
position: absolute;
max-width: 60%;
box-shadow: 4px 4px #1f2021;
}


#boite1 {
color: #d6d6d6;	
border:1px solid;
border-color:  #c64e03;
background-color: #131313;
max-width: 65%;
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 4px 4px #1f2021;
padding-bottom: 2%;
}

#boite2 {
color: #d6d6d6;	
border:1px solid;
border-color:  #c64e03;
background-color: #131313;
max-width: 45%;
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 4px 4px #1f2021;
}


#carre1 {
border:4px solid;
border-color:  white;
background-color: #000000;
display: block;
min-width: 20%;
border-right-width: 2px;
margin-bottom: 2%;
}

#carre2 {
border:4px solid;
border-color: white;
background-color: #000000;
display: block;
max-width: 80%;
border-left-width: 2px; 
margin-bottom: 2%;	
}

#chapitre a:hover {
border: none;
display: flex;
color: #D80321;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
}


#youtube {
	padding-top: 80px;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  }

img {
	max-width: 100%;
	max-height: 100%;
	padding-top: 3%;
}

#consigne li {
margin-top: 15px;
color: #ed3b3b;

}

#consigne2 li {
margin-top: 15px;
color: #3b96ed;

}

#questions li {
margin-top: 15px;

}



br {
	display: block;
	content: "";
	line-height: 30px;
}

#chapitres {
	padding-top: 10%;
}

#avancements ul{
	display: inline-block;
	font-family: 'Gothicc';
	color: white;
	list-style: none;
	max-width: 85%;
}

#avance {
border:1px solid;
border-color: black;
display: block;
width: 100%;
border-right-width: 1px;
border-left-width: 1px;
background:linear-gradient(to right, #F2A021 100%, red 0%);
}

#avance2 {
border:1px solid;
border-color: black;
display: block;
width: 100%;
border-right-width: 1px;
border-left-width: 1px;
background-color: red;
}



#avancement {
list-style:none;
display: flex;
width: 100%;
margin-bottom: 3%;
}