@font-face {
  font-family: "Disket Regular";
  src:	url("fonts/Disket-Mono-Regular.ttf") format("truetype");
}

@font-face{
	font-family: "Disket Bold";
  	src:	url("fonts/Disket-Mono-Bold.ttf") format("truetype");
}

@font-face{
	font-family: "happy-times Regular";
  	src:	url("fonts/happy-times-NG_regular_master_web.ttf") format("truetype");
}


/*--------scrollbar--------*/


/* width */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: white; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #04fd03; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: red; 
}

/*--------page index--------*/

#responsive{
 visibility: hidden;
}


/*--------boîte experimentations--------*/

#expe{
  width: 100%;
  min-height: 100vh;
  margin: 0px 0px 0px;
  touch-action: none;
  user-select: none;
  border: 0px solid none;
}

#expe_01{
	width: 24.2vw;
	left: 2vw;
	top: 4vh;
	position: absolute;
}

#expe_02{
	width: 15vw;
	top: 50vh;
	left: 30vw;
	position: absolute;
}

#expe_13{
  width: 21vw;
  left: 7.5vw;
  top: 12vh;
  position: absolute;
}

#expe_08{
	width: 24vw;
	left: 19.5vw;
	top: 0vh;
	position: absolute;
}

#expe_03{
	width: 27.5vw;
	right: 5vw;
	bottom: 7vh;
	position: absolute;
}

#expe_22{
	width: 27.5vw;
	position: absolute;
	right: 24vw;
	bottom: 13vh;
}

#expe_04{
	width: 14vw;
	right: 26vw;
	bottom: 0vh;
	position: absolute;
}

#expe_11{
	width: 6vw;
	right: 25vw;
	bottom: 67vh;
	position: absolute;
}

#expe_15{
	width: 31vw;
	right: 0vw;
	top: 8vh;
	position: absolute;
}

#expe_17{
	width: 13vw;
	top: 1.5vh;
	left: 49vw;
	position: absolute;
}

#expe_18{
	width: 13vw;
	top: 1.5vh;
	left: 63vw;
	position: absolute;
}

#expe_12{
	width: 4vw;
	left: 29.5vw;
	top: 37vh;
	position: absolute;
}

#expe_24{
	width: 4vw;
	left: 34vw;
	top: 37vh;
	position: absolute;
}

#expe_05{
	width: 38vw;
	left: 38vw;
	top: 11vh;
	position: absolute;
}

#expe_19{
	width: 7vw;
	bottom: 0vh;
	left: 7vw;
	position: absolute;
}

#expe_20{
	width: 7vw;
	bottom: 0vh;
	left: 15vw;
	position: absolute;
}

#expe_16{
	width: 5.5vw;
	top: 1.5vh;
	right: 18vw;
	position: absolute;
}

#about{
	width: 17.1vw;
	left: 29vw;
	bottom: 0vh;
	position: absolute;
}

#copyright{
	border: 1px solid none;
	display: inline-flex;
	position: fixed;
	font-family: happy-times Regular;
	font-size: 0.7em;
	font-style: italic;
	width: 20vw;
	top: 2vh; 
	left: 2vw;
}

#texte_descriptif{
	display: inline-flex;
	position: absolute;
	font-family: happy-times Regular;
	font-size: 0.7em;
	font-style: italic;
	line-height : 1.2;
	bottom: 5vh; 
	left: 29.9vw;

}

#plus_projets{
	display: inline-flex;
	position: absolute;
	font-family: Disket Regular;
	font-size: 0.9em;
	bottom: 2vh; 
	left: 29.9vw;
	color: #04fd03;
	animation: blinker 5s linear infinite;
}

@keyframes blinker {
  0% {
    opacity: 100;
    color: red;
  }
}

#plus_projets:hover{
	font-style: italic;
	animation: none;
	color: red;

}


/*----------lien insta/pinterest/cv-----------*/

#lien_exterieur{
	display: inline-flex;
	position: fixed;
	vertical-align: top;
	border: 1px solid none;
	right: 2vw;
	margin-top: 2vh;
}


#lien{
	border: 1px solid none;
	font-family: "Disket Regular";
	text-decoration: none;
	color: black;
	font-size: 0.7em;
	margin-left: 2vw;
}

#lien:hover{
	color: red;
}


/*----------image projet-----------*/

#conteneur{
	border: 1px solid none;
	vertical-align: top;
	display: inline-flex;
	overflow-x: auto;
	height: 80vh;
	width: 100vw;
	margin-top: 0px;
}


/*----------texte-----------*/

#texte{
	border: 1px solid none;
	position: fixed;
	margin-top: 12vh;
	margin-left: 2vw;
	height: 32vw;
	width: 20vw;
}

#titre_gauche{
	border: 1px solid none;
	font-family: happy-times Regular;
	text-transform: uppercase;
	font-size: 1.6em;
	margin-bottom: 0.7vh;
}

#titre_droite{
	border: 1px solid none;
	font-family: happy-times Regular;
	text-transform: uppercase;
	text-align: end;
	font-size: 1.6em;
	margin-bottom: 0.7vh;
}

#date{
	border: 1px solid none;
	font-family: happy-times Regular;
	text-transform: uppercase;
	font-style: italic;
	text-align: end;
	font-size: 1.5em;
}

#problematique{
	border: 1px solid none;
	font-family: happy-times Regular;
	font-size: 0.7em;
	font-style: italic;
	width: 10vw;
	margin-top: 2vh;
}


#description{
	border: 1px solid none;
	font-family: happy-times Regular;
	font-size: 0.7em;
	text-align: justify;
	width: 13vw;
	margin-left: 7vw;
	margin-top: 5vh;
	line-height: 1.2em;
}


#lien_texte{
	font-family: "happy-times Regular";
	font-style: italic;
	text-decoration: none;
	color: #04fd03;
}

#lien_texte:hover{
	font-family: "happy-times Regular";
	text-decoration: none;
	color: red;
}

/*----------image memoire-----------*/

#img_vertical_couverture{
	margin-top: 12vh;
	margin-left: 25vw;
	height: 32vw;
	width: auto;
}

#img_vertical_couverture img{
	height: 32vw;
}

#img_vertical{
	margin-top: 12vh;
	height: 32vw;
	width: auto;
}

#img_vertical img{
	height: 32vw;
}

#img_horizontal{
	margin-top: 12vh;
	height: 32vw;
}

#img_horizontal img{
	height: 32vw;
}

/*----------slider projet-----------*/

footer{
	border: 1px solid none;
	display: inline-flex;
	overflow-x: scroll;
	height: 19.9vh;
	width: 100vw;
}

#copyright_slider{
	border: 1px solid none;
	display: inline-flex;
	position: fixed;
	font-family: happy-times Regular;
	font-size: 0.7em;
	font-style: italic;
	width: 20vw;
	top: 82vh; 
	left: 2vw;
	color: black;
}

#conteneur_slider{
	border: 1px solid none;
	display: inline-flex;
	overflow-x: scroll;
	height: 15vh;
	width: 100vw;
	position: fixed;
	margin-top: 5vh;

}

.projet_image_horizontale{
	border: 1px solid none;
	position: relative;
	height: 5vw;
	width: auto;
	margin-left: 0.7vw;
	margin-top: 4vh;

}

.projet_image_horizontale img{
	height: 5vw;
}


.projet_image_verticale{
	border: 1px solid none;
	position: relative;
	height: 6vw;
	width: auto;
	margin-left: 0.7vw;
	margin-top: 2vh;
}

.projet_image_verticale img{
	height: 6vw;
}


/*----------hover slider-----------*/


article p{
	top: -1.5vh;
	left: 1.8vw;
	width: 4vw;
	opacity: 0;
	font-family: happy-times Regular, sans-serif;
	font-style: italic;
	position: absolute;
	font-size: 0.7em;
}


article:hover p{
	opacity: 100;
}