/* TYPOS */
@font-face {
	font-family: "GarabossePerle";
	src: url(../fonts/Garabosse-Perle.ttf);
}

@font-face {
	font-family: "GarabosseParangon";
	src: url(../fonts/Garabosse-Parangon.ttf);
}

@font-face {
	font-family: "GarabosseGaillarde";
	src: url(../fonts/Garabosse-Gaillarde.ttf);
}

@font-face {
	font-family: "SelectricMono";
	src: url(../fonts/SelectricMono.otf);
}

@font-face {
	font-family: "AXscript";
	src: url(../fonts/AX28ScriptSpiro.otf);
}

@font-face {
	font-family: "Fluxische";
	src: url(../fonts/FluxischElse-Regular.otf);
}

@font-face {
	font-family: "Panchi";
	src: url(../fonts/PanchiMono.otf);
}



:root{
    --bleu: rgb(191, 221, 255);
				--violetfonce:rgb(149, 0, 255);
				--violetclair:rgb(162, 152, 232);
}



/* ==== GENERAL, FONDS  ===== */

body {

	background-color: rgb(149, 0, 255);
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	top: 0px;
	cursor:
		url("../img/curseur-normal.png") 4 4,
		auto;
}

p {
	margin: 0;
}

.zone-explications {
	position: absolute;
	top: 0;
	left: 0;
	width: 50vw;
	height: 100vh;
	overflow: hidden;
	/* overflow-y: none; */
}


/* ==== COLOPHON ===== */

.button-colophon {
 position: absolute;
 top: 0;
 right: 0;
 margin-top: 1em;
 margin-right: 1em;

font-family: "Fluxische";
font-size: 14pt;
color : white; 
}

.contenu-colophon {
 visibility: hidden;
 position: absolute;
 top: 0;
 right: 0;
 margin-top: 1em;
 margin-right: 3em;
 width: 60%;

 font-family: "Fluxische";
 font-size: 8pt;
 text-align: right;
 color: var(--bleu);
}
.button-colophon:hover {
 color: white;
 cursor: url("../img/curseur-pointeur.png") 18 4,
 pointer;
}
.button-colophon:hover + .contenu-colophon {
visibility: visible;
}


/* ==== LETTRAGE EN PETIT + CONTACT ===== */

h1 {
	/* position: relative; */
	/* width: fit-content; */
	/* color: aliceblue; */
	/* font-size: 34pt; */

	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* margin-bottom: 0; */
	/* margin-left: 2vw; */
}

.petit-lettrage {
	position: relative;
	z-index: 1;
	width: 14em;
	/* max-width: 40%; */
	top: -2vh;
	margin-left: 1em;
	margin-top: 1em;
	height: fit-content;
	margin-bottom: 0;
filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
	-webkit-filter: drop-shadow(0.1em 0.7em 1em #ffff);
	filter: drop-shadow(0em 0em 0.40em #ffff);

}


.petit-lettrage:hover {
filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
	-webkit-filter: drop-shadow(0.1em 0.4em 1em #9500ff);
	filter: drop-shadow(0.1em 0.1em 0.4em #9500ff);
	cursor:
		url("../img/curseur-pointeur.png") 1 1,
		pointer;
}

.inselectionnable {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.infos-permanentes {
	position: relative;
	margin-left: 6em;
	margin-bottom: 0;
	margin-top: -2.5em;
	color:  var(--bleu);
	font-family: "Fluxische";
	padding: 0;
	font-size: 13pt;
}



/* ==== SCROLL IMAGES ===== */


.zone-scrollImages {
	position: absolute;
	overflow-y: scroll;
	background-color: black;
	width: 50vw;
	height: 100vh;
	top: 0px;
	right: 0;
	bottom: 0;
	scrollbar-color: var(--violetfonce) rgb(255, 255, 255);
	scrollbar-width: thin;

}

.images-du-scroll {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}



/* ==== DESCRIPTION DES PROJETS ===== */

.titre {
	font-size: 14.5pt;
	font-family: "Panchi";
	color: white;
	padding-bottom: 1vh;
	text-shadow: var(--bleu) 10px 0 10px,var(--bleu) 2px 1px 15px;
}

.boite-textes {
	position: relative;
	bottom: 6em;
	max-width: 35vw;
	left: 5vw;
	top: 40vh;
}

.texte {
	/* position: relative; */
	font-family: "Fluxische";
	position: fixed;
	color: var(--bleu);
	font-size: 12pt;
	text-align: center;
	/* bottom: 0; */
	bottom: 5em;
	width: 40%;
	transform-style: preserve-3d;
	transform: skewY(-15deg);
}



/* ==== VISIBILITE DES TEXTES ===== */

.texte-screaming {
	visibility: hidden;
	transform: skewY(-11deg);
}

.texte-signature {
	visibility: hidden;
	transform: skewY(11deg);
}

.texte-parangon {
	visibility: hidden;
	transform: skewY(-11deg);
}

.texte-perle {
	visibility: hidden;
	transform: skewY(11deg);
}


/* ==== ESSAI BULLES PRESENTATION DES CLAVARDEUXSES ===== */

#bulle1 {
	/* display: none; */
	top: 15em;
	left: 2em;
	z-index: 5;
}

#bulle2 {
	/* display: none; */
	top: 21em;
	left: 4em;
	z-index: 6;

}

#bulle3 {
	/* display: none; */
	top: 25.5em;
	left: 8em;
	z-index: 7;

}

#bulle4 {
	/* display: none; */
	top: 29em;
	left: 6em;
	z-index: 8;
}

#bulle5 {
	/* display: none; */
	top: 33em;
	left: 20em;
	z-index: 9;
}


.bulles {
	display: none;
	position: absolute;
	/* background-color: rgb(249, 253, 254); */
	font-family: "Panchi";
	/* color: blue; */
	text-align: left;
	top: 20em;
	left: 2em;
	padding: 10pt 20pt 1pt 15pt;
	height: fit-content;
	min-height: 5em;
	width: 23em;
	/* border: 2pt dotted pink; */
	/* filter: drop-shadow(0.1em 0.8em 1em #79afff); */
	/* border-radius: 100%; */
	/* box-shadow: 0px 2px 3px 0px rgba(212, 0, 255, 0.5), inset 0 -1px 3px 3px rgba(38, 0, 255, 0.4); */
	transition: all 150ms ease-in-out;

}


button {
	touch-action: manipulation;
	cursor: pointer;
	position: relative;
	padding: 1.25rem 3.75rem;
	border-radius: 1.87rem;
	font-size: 10pt;
  transition: all 150ms ease-in-out;
  border: 1px solid #01288045;
  background-image: linear-gradient(-180deg, #ffff 0%, #bfddff 100%);
  box-shadow: 0 0.5rem 0.625rem 0 rgba(0, 0, 0, 0.2), 0 -0.125rem 0.75rem var(--violetfonce) inset, 0 0.375rem 0.125rem rgb(191, 221, 255,0.4) inset, 0 0.125rem 0.25rem 0 rgb(191, 221, 255) inset;
}

button p {
	color: var(--violetfonce);
	background-image: linear-gradient(0deg, #fcfcfc -10%, #FEFAFD 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 2px 2px var(--bleu));
}

button::before {
	content: "";
	display: block;
	height: 0.125rem;
	position: absolute;
	top: 0.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 3.75rem);
	background: #fff;
	border-radius: 100%;

	opacity: 0.7;
	background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button::after {
	content: "";
	display: block;
	height: 0.125rem;
	position: absolute;
	bottom: 0.375rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 3.75rem);
	background: #fff;
	border-radius: 100%;

	filter: blur(1px);
	opacity: 0.05;
	background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button:hover {
	filter: brightness(1.1);
}

button:active {
	transform: scale(.96);
}


.bulles:hover {
	cursor:
		url("../img/curseur-pointeur.png") 2 2,
		pointer;
	/* background-color: rgb(255, 133, 255); */
	/* color: white; */
	width: 24em;
	padding: 10pt 13pt 1pt 18pt;
}


/* .petit-lettrage:hover #bulle1 {
	display: block;
} */








/* CSS */
/* .button-53 {
  padding: 12px 26px;
  border: 0;
  font-size: 16px;
  transition: all 150ms ease-in-out;

  border-radius: 8px;
  font-weight: 600;

  color: #000;

  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 70.48%, #FFF 93.62%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, rgba(30, 54, 87, 0.00) 0%, rgba(30, 54, 87, 0.01) 100%), #FAFAFA;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.08) 0 -2px 1px 0 inset, rgba(255, 255, 255, 0.5) 0 2px 1px 0 inset, 0 2px 5px -1px rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
}

.button-53:hover {
  background-color: #F5F5F5;
}

.button-53:active {
  background-color: #F1F1F1;
  box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.08) 0 1px 1px 0 inset, rgba(255, 255, 255, 0.1) 0 2px 1px 0 inset, 0 2px 5px -1px rgba(0, 0, 0, 0.05);
} */