@font-face {
	font-family: "Boris";
	src:url("Boris.woff") format("woff");
}

@font-face {
	font-family: "Redaction";
	src:url("Redaction-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "abhaya";
	src:url("AbhayaLibre-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "dinish";
	src:url("DINishCondensed-Regular.woff2") format("woff2");
}

i{
	font-family: dinish;
}

a{
	text-decoration: none;
	color: black;
	user-select: none;
	cursor: pointer;}

a:visited{
	text-decoration: none !important;
	color: black !important;
	user-select: none,}

a:hover{
opacity: 0.5;
}

#html-show, #css-show, #vilette-show {
  display: none;
}

#html-show:target, #css-show:target, #js-show:target, #vilette-show:target {
  display: block;
}

mark{
	background-color: white;
}

/******************************************/

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

/* Index */
#body_index{
	background-size: 90% !important;
	background-position-y: -400% !important;
}

#title_image{
	width: 30% !important;
}

#menuprincipal{
	font-size: 90% !important;
	width: 35vw !important;
}

.news{
	font-size: 70% !important;
	top: 0% !important;
	right: 20% !important;
}

#info{
	text-align: left !important;
}

/*info -biographie*/
#biography{
  padding: 0% 10% 0% !important;
  left: : 0%;
  top: 0%;
  width: inherit !important;
  text-align: center;"
}

#biographie{
  padding: 10% 10% 0% !important;
  left: : 0%;
  top: 0%;
  width: inherit !important;
  text-align: center;
  position: relative !important;
}

#info_menu{
	position: relative !important;
  width: inherit !important;
}

/*IL ETAIT UNE FOIS UNE FEE*/
#body_fée{
	background-size:190% !important;
	background-position-x: 80% !important; 
	background-position-y: -10% !important; 
}

#info_fée{
	position: absolute;
  left: : 0%;
  top: 60% !important;
  width: inherit !important;
  text-align: center;
}

#nav-bar-fée{
	margin-left: -50% !important;
}

#perf_fée{
	width: 90% !important;
	top: 15% !important;
	left: 5% !important;
	position: absolute !important;
}

#info_fee_perf{
	top:46% !important;
	left: 0% !important;
	position: absolute !important;
	padding: 2vh;
  pointer-events: none !important;}

 #prev_fee{
 	top: 21% !important;
	left: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

#next_fee{
	top: 21% !important;
	right: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

#dessin_fée{
	width: 90% !important;
	top: 14% !important;
	left: 5% !important;
	position: absolute !important;
}

/*BIRTHDAY DATE*/
#info_birthday{
	position: absolute;
  left: : 0%;
  top: 55% !important;
  width: inherit !important;
  text-align: center;
}

#image_birthday_1{
	width: 90% !important;
	top: 6% !important;
	left: 5% !important;
	position: absolute !important
}

#info_birthday_perf{
	top:41% !important;
	left: 0% !important;
	position: absolute !important;
	padding: 2vh;
  pointer-events: none !important;
}

#scan_birthday_1{
	width: 40% !important;
	top: 8% !important;
	left: 9% !important;
	position: absolute !important
}

#scan_birthday_2{
	width: 40% !important;
	top: 8% !important;
	left: 51% !important;
	position: absolute !important
}

#photo_birthday_1{
	width: 40% !important;
	top: 8% !important;
	left: 9% !important;
	position: absolute !important
}

#photo_birthday_2{
	width: 42% !important;
	top: 8% !important;
	left: 50% !important;
	position: absolute !important
}

#photo_birthday_3{
	width: 42% !important;
	top: 8% !important;
	left: 8% !important;
	position: absolute !important
}

#text_birthday_1{
	visibility: hidden;
}

#prev-birthday{
	top: 14% !important;
	left: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

#next-birthday{
	top: 14% !important;
	right: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

/*SEXY PIGS*/
#info_sexy{
	position: absolute;
  left: : 0%;
  top: 10% !important;
  width: inherit !important;
  text-align: center;
  z-index: 2 !important;
}

#video_sexy{
visibility: hidden;
pointer-events: none !important;
z-index: 1 !important;
}

#photo_sexy_1{
	width: 90% !important;
	top: 87% !important;
	left: 5% !important;
	position: absolute !important;
}

#info_sexy_expo{
	top:122% !important;
	left: 2% !important;
	position: absolute !important;
	padding: 0vh !important;
}

#prev_sexy{
	top: 95% !important;
	left: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

#next_sexy{
	top: 95% !important;
	right: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

/*YOU AND I EATING RASBERRIES IN THE FOREST*/
#info_raspberries{
	position: absolute;
  left: : 0%;
  top: 10% !important;
  width: inherit !important;
  text-align: center;
  z-index: 2 !important;
}

#still_rapsberries_1{
	width: 90% !important;
	top: 50% !important;
	left: 5% !important;
	position: absolute !important;
}

#info_still_rapsberries{
	top:80% !important;
	left: 2% !important;
	position: absolute !important;
	padding: 0vh !important;
}

#prev_raspberries{
	top: 55% !important;
	left: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

#next_raspberries{
	top: 55% !important;
	right: 0% !important;
	position: absolute !important;
	font-size:800% !important;
}

/*MY MIND IS A MATERIAL*/
#info_mind{
	position: absolute;
  left: : 0%;
  top: 6% !important;
  width: inherit !important;
  text-align: center;
  z-index: 2 !important;
}

#text_mind{
	position: absolute !important;
  left: 0% !important;
  top: 105% !important;
  width: inherit !important;
  text-align: center;
  z-index: 2 !important;
  padding: 2vh !important;
}

#photo-mind{
	width: 60% !important; 
	top: 44% !important;
	right: 18% !important; 
	position: absolute !important;
}

#photo-mind-2{
	width: 45% !important; 
	top: 44% !important;
	right: 26% !important; 
	position: absolute !important;
}

#legende_mind{
	position: absolute !important;
  left: : 0% !important;
  top: 90% !important;
  width: inherit !important;
  text-align: center;
  z-index: 2 !important;
}

#prev_mind{
	top: 58% !important;
	left: 17% !important;
	position: absolute !important;
	font-size:800% !important;
}

#next_mind{
	top: 58% !important;
	right: 14% !important;
	position: absolute !important;
	font-size:800% !important;
}

}