@font-face{
	font-family:"qualy";
	src:url("../fonts/Qualy Bold.ttf") format("truetype");
	font-display: swap;
}
/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar, body::-webkit-scrollbar  {
	display: none;
}

html,body{
	overflow:hidden;
	width:100%;
	height:100%;
	/* height: calc(var(--vh, 1vh) * 100); */
	margin:0;
	font-family:qualy;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.cursor_troisD{
	cursor: url(../../img/Icones/cube.webp), auto;
}

.cursor_deuxD{
	cursor: url(../../img/Icones/pencil.webp), auto;
}

.cursor_web{
	cursor: url(../../img/Icones/website.webp), auto;
}

body{
	/* position:fixed; */
	background-color:black;
	cursor: url(../../img/Icones/cursor.webp), auto;
}

a{
	text-decoration:none;
	color:inherit;
	cursor: url(../../img/Icones/clicker.webp), auto;
}

/* MENU */


#navComputer{
	position:fixed;
	width:100%;
	background-color:#0e0e0e;
	color:white;
	height:80px;
	z-index:10;
	display: flex;
    align-items: center;
    justify-content: center;
	transition:1s;
	top:0;
}

#navComputer img:first-child{
	display:none;
	width:50px;
	position:absolute;
	left:50px;
	cursor: url(../../img/Icones/clicker.webp), auto;
	transition:transform 1s;
}

#navComputer img:last-child{
	position: absolute;
    right: 10px;
    width: 70px;
}

#navComputer ul:before{
	content:url("../../img/Accueil/menu_gauche_blanc.webp");
}

#navComputer ul:after{
	content:url("../../img/Accueil/menu_droite_blanc.webp");
}

#navComputer .menuNoir:before{
	content:url("../../img/Accueil/menu_gauche.webp");
}

#navComputer .menuNoir:after{
	content:url("../../img/Accueil/menu_droite.webp");
}

#navComputer ul{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:row;
	list-style:none;
}

#navComputer li{
	margin:0 50px;
}

#navComputer ul li:nth-child(2){
	border-left:1px solid white;	border-right:1px solid white;
	margin:0;
	padding:0 50px;
	transition:border 2s;
}

#navComputer a{
	transition:color .5s;
}

#navComputer a:hover{
	color:orange;
}

#navMobile{
	display:none;
}

@media screen and (max-width:1000px){
	#navComputer{
		display:none;
	}
	
	#navMobile{
		background-color:#0e0e0e;
		color:white;
		height:50px;
		width:100%;
		z-index:10;
		display: flex;
		align-items: center;
		justify-content: center;
		transition:1s;
		top:0;
		position:fixed;
	}
	
	#navMobile img:first-child{
		width: 40px;
		position: absolute;
		left: 20px;
		cursor: url(../../img/Icones/cursor.webp), auto;
		display:none;
		transition:transform 1s;
	}
	
	#navMobile img:last-child{
		width:50px;
		position:absolute;
		right:20px;
		cursor: url(../../img/Icones/cursor.webp), auto;
	}
	
	#navMobile ul{
		display:none;
		list-style:none;
		text-align:center;
		font-size:.7em;
		padding:0;
	}
	
	#navMobile li:not(:first-child){
		padding-top:20px;
	}
	
	#navMobile li:first-child{padding-top:20px;}
	#navMobile li:last-child{padding-bottom:20px;}
	
/* 	#navMobile ul:before{
		content:url("../../img/Accueil/menu_gauche.webp");
	}

	#navMobile ul:after{
		content:url("../../img/Accueil/menu_droite.webp");
	}	 */
}

/* Icone personnage */
#persoDiscuss{
	display:none;
	position:fixed;
	bottom:0;
	width:100%;
/* 	height:200px;	 */
	z-index:10;
	transition:bottom .5s;
}

#persoDiscuss > img:first-child{
	width:100px;
	position:absolute;
	right:20px;
	bottom:20px;
}

#persoDiscuss > img:last-child{
	position:absolute;
	width:30px;
	bottom:105px;
	right:20px;
	cursor: url(../../img/Icones/cursor.webp), auto;
}

#dialogBox{
	position:absolute;
	bottom:70px;
	right:140px;
	border-radius:20px;
	background-color:white;
	padding:0 30px;
}

#flecheAvatar{
	display:none;
	position:absolute;
	width:100px;
	top:calc(var(--vh, 1vh) * 50 - 50px);
	left:150px;
	transition:left 1s, bottom 1s;
	z-index:3;
}


.darkCover{
	position:fixed;
	top:0;
	display:none;
	width:100%;
	height:calc(var(--vh, 1vh) * 100);
	background-color:rgba(0,0,0,.8);
	z-index:2;
}

.link{
	color:orange;
	text-shadow: 0 0 5px black;
	text-decoration:underline;
}

.link:hover{
	color:black;
}

@media screen and (max-width:1000px){
	#persoDiscuss > img:first-child{
		width:70px;
	}
	
	#dialogBox {
		bottom: 50px;
		right: 100px;
		padding: 0 10px;
		font-size: .9em;
	}
	
	#persoDiscuss > img:last-child {
		width: 25px;
		bottom: 77px;
		right: 16px;
	}
	
	#flecheAvatar{
		width:70px;
		left:100px;
	}
}

@media screen and (max-width:620px){
	#persoDiscuss > img:first-child{
		width:40px;
	}
	
	#dialogBox {
		bottom: 41px;
		right: 62px;
		padding: 0 5px;
		font-size: .6em;
	}
	
	#persoDiscuss > img:last-child {
		width: 16px;
		bottom: 52px;
	}
	
	#flecheAvatar{
		width:30px;
		left:50px;
	}
}


/* ACCUEIL */
#accueil{
	height:100%;
 	background-image:url("../../img/Accueil/fond.webp");
	background-size:cover;
	position:absolute;
	left:0;
	width:100%;
	background-repeat: no-repeat;
	transition:left 2s;
}

#main{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:100%;
	color:white;
	text-align:center;
}

#main h1{
	font-size:5em;
	letter-spacing:.4em;
	margin:0;
}

#main h2{
	font-size:2em;
	letter-spacing:.1em;
}

#main input{
	width:180px;
	background-color:#0e0e0e;
	border:1px solid white;
	border-radius:10px;
	color:white;
	height:50px;
	font-family:qualy;
	margin-top:100px;
	font-size:1.2em;
	transition:background-color .5s;
	cursor: url(../../img/Icones/clicker.webp), auto;
}

#main input:hover{
	background-color:#9e7500;
}
/* PRESENTATION */

#pres{
	/* display:flex;
	flex-direction:column; */
	text-align:center;
	background-image:url("../../img/Accueil/fond_presentation.webp");
	background-size:cover;
	height:150px;
	width:100%;
	position:absolute;
	bottom:0;
	color:white;
	background-repeat: no-repeat;
	transition:1s;
	z-index:1;
}

#fleche{
	width:70px;
	cursor: url(../../img/Icones/clicker.webp), auto;
}

#pres h2{
	width:100%
}

#pres + div{
	position: absolute;
    height: 700px;
    width: 100%;
    display: flex;
	flex-direction: column;
    color: white;
    text-align: center;
    background-color: #0e0e0e;
    justify-content: center;
    bottom: -700px;
    align-items: center;
	transition:bottom 1s;
}

#pres + div a{
	color:#00d0ff;
	text-decoration: underline;
}

#pres + div p{
	width:70%;
	margin: 0 auto 0;
    font-family: arial;
    font-size: 1.2em;
    line-height: 1.5em;
	letter-spacing: .05em;
	text-align: left;
}

#pres + div ul{
	width: 70%;
    text-align: left;
	font-size:1.2em;
	font-family:arial;
	line-height:1.3em;
}

@media screen and (max-width:11275px){
	#pres + div p{
		font-size:1em;
	}
	
	#pres + div ul{
		font-size:1.1em;
	}	
}

@media screen and (max-width:1000px){
	#pres + div p{
		line-height:inherit;
		font-size:.8em;
	}
	
	#main h1{
		font-size:4em;
	}
	
	#main h2{
		font-size:1.5em;
	}
	
	#pres + div ul{
		font-size:.9em;
	}
	
	html,body{
		overflow-y:auto;
	}
}

@media screen and (max-height:890px){
	#fleche{
		display:none;
	}
	
	#pres{
		height:50px;
		bottom:0!important;
	}
	
	#pres + div{
		height:800px;
		bottom:-800px!important;
	}
	
	html,body{
		overflow-y:auto;
	}
}

@media screen and (max-width:620px){	
	#pres h2{
		font-size:1em;
	}
	
	#pres + div p{
		line-height:inherit;
	/* 	font-size:.8em; */
	}
	
 	#pres + div ul{
		font-size:.8em;
	}
	
	#pres + div{
		height:1000px;
		bottom:-1000px!important;
	}	
}

@media screen and (max-width:550px){	
	#main h1{
		font-size:2em;
	}
	
	#main h2{
		font-size:1em;
	}
}