/* =========================================================================
	CSS IMPORT TODO TO REPLACE
   ========================================================================= */

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');*/

/* =========================================================================
	ANIMATIONS
   ========================================================================= */

	:root {
		--delay: 500ms;
		--duration: 6s;	

		--long-duration: 240s;
		--background-duration: 30s;


		--dasharray-start: 3000;
		--dasharray-end: 1500;
	}

	@keyframes draw {
		0%		{ stroke-dashoffset: var(--dasharray-start); }
		100%	{ stroke-dashoffset: var(--dasharray-end); }
	}

	@keyframes color_change {
		0%		{ stroke: #d98880; }
		7.5%	{ stroke: #f1948a; }
		15%		{ stroke: #c39bd3; }
		22.5%	{ stroke: #bb8fce; }
		30%		{ stroke: #7fb3d5; }
		37.5%	{ stroke: #85c1e9; }
		45%		{ stroke: #76d7c4; }
		52.5%	{ stroke: #73c6b6; }
		60%		{ stroke: #7dcea0; }
		67.5%	{ stroke: #82e0aa; }
		75%		{ stroke: #f8c471; }
		82.5%	{ stroke: #f0b27a; }
		90%		{ stroke: #e59866; }
		100%	{ stroke: #f1948a; }
	}


/* =========================================================================
	HTML FLAVOUR
   ========================================================================= */

	:root
	{
		/* PALETTE : Flat UI Russian Palette https://flatuicolors.com/palette/ru */	
		--red:	#e15f41;
		--pink:	#f78fb3;

		--valid-green: #23DC3DBB;
		--invalid-red: #ff0000BB;

		/* FONT SIZES */
		--s-size:	16px;
		--m-size:	18px;
		--l-size:	21px;
		--xl-size:	48px;
	}

	html
	{
		min-height: 100%; /* make sure it is at least as tall as the viewport */
		position: relative;
		scroll-behavior:smooth;
		font-smooth: always;
		-webkit-font-smoothing : antialiased;
	}


	*
	{
		margin: 0; padding: 0;
		box-sizing: border-box;
		font-family: Poppins, sans-serif;
	}

		a
		{
			display: inline-block;
			text-decoration: none;
			transition: all ease-in .4s;
			cursor: pointer;
		}

			a:hover
			{
				opacity: .75;
				transform: scale(.98);
			}

/* =========================================================================
	HEADER
   ========================================================================= */

	header
	{
		padding-top: max(10px, 2.5vh);

		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		justify-content: center;

		text-align: center;

		color: white;
	}

		/* ------------------------------
			FIRST ROW
		   ------------------------------ */

			header a.row
			{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				justify-content: center;

				text-align: center;

				color: white;
			}

				header img.logo
				{
					display: inline-block;
					margin-right: 2vw;

					width: 100px;
					height: 100px;
					border: 5px solid white;
					border-radius: 100%;
					box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;

					vertical-align: middle;
				}

				header .title
				{
					display: inline-block;
				}

					header h1
					{
						font-size: var(--xl-size);
						letter-spacing: -2.5px;
						text-shadow: 1px 3px 0 #969696, 1px 5px 5px #aba8a8;
					}

					header h2
					{
						position: relative;
						top: -10px;
						font-size: var(--s-size);
						text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
					}

		/* ------------------------------
			SECOND ROW
		   ------------------------------ */

			header ul
			{
				padding-top: max(10px, 2.5vh);
				color: white;
			}

				header ul li
				{
					display: inline-block;
					margin-right: max(3px, 2vw);

					width: min(120px);

					font-size: var(--l-size);

					text-transform: lowercase;
					font-weight: bolder;
					white-space: nowrap;
					text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

					border: 3px solid white;

					box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
				}

					header ul li:last-child { margin-right: 0px; }

					header ul li a { color: white; }


/* =========================================================================
	SECTIONS
   ========================================================================= */

	/* ------------------------------
		ALERT SECTION
	   ------------------------------ */

		#alert
		{
			background: var(--invalid-red);

			text-transform: unset;

			color: white;
		}

			#alert h2
			{
				font-weight: bolder;
				text-transform: uppercase;
			}

	/* ------------------------------
		NORMAL SECTION
	   ------------------------------ */

		section
		{
			background-color: #FFFFFFDD;

			max-width: min(800px, 94vw);
			margin-top: max(20px, 5vh);
			margin-left: auto;
			margin-right: auto;
			margin-bottom: max(10px, 2.5vh);

			padding: 3vw;
			padding-top: 3vh;
			padding-bottom: 3vh;



			text-align: left;

			font-size: var(--m-size);

			color: black;


			border-radius: 4px;
			box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		}

		section h2
		{
			margin-bottom: max(18px, 4.5vh);
			min-height: 100%;
		}

		section p
		{
			margin-bottom: max(12px, 3vh);
			min-height: 100%;
		}

			section > *:last-child
			{ margin-bottom: 0px; }

		section img
		{
			display: block;
			margin-right: auto;
			margin-left: auto;
			height: 100%;
		}

		section a
		{
			color: var(--pink);

			background: #833AB4;
			background: -webkit-linear-gradient(to top right, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
			background: -moz-linear-gradient(to top right, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
			background: linear-gradient(to top right, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

			transition: all ease-in .4s;

			text-shadow: none;

		}

		section li
		{
			margin-left: 24px;
		}

	/* ------------------------------
		CREDIT SECTION
	   ------------------------------ */

	#credit
	{
		/* MARGES */
		margin-top: max(20px, 5vh);
		margin-bottom: max(10px, 2.5vh);
		/* ALIGN */
		text-align: center;
		/* TEXT */
		font-size: var(--m-size);
		font-style: normal;
		text-transform: lowercase;
		/* STYLE */
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
		color: white;
	}

		#credit a { color: white; }


		#arnaud-logo
		{
			/* POSITION */
			height: var(--xl-size);
			vertical-align: middle;
			transform: translateY(-3px); /* dirty quick fix, let's keep it 😉 */
			/* MARGES */
			margin-left: 4px;
			/* STYLE */
			filter: invert(100%) drop-shadow(0 0 2px black);
		}


/* =========================================================================
	FIRST DISPLAY CONTENT ANIMATION
   ========================================================================= */

	#alert		{ animation: .6s ease-in alternate backwards first_display .8s; }
	#credit		{ animation: .6s ease-in alternate backwards first_display_credit .8s; }

	header .logo{ animation: .8s ease-in alternate backwards first_display .65s; }
	header h1	{ animation: .8s ease-in alternate backwards first_display .6s; }
	header h2	{ animation: .8s ease-in alternate backwards first_display .4s; }
	header ul	{ animation: .8s ease-in alternate backwards first_display .2s; }

	#content	{ animation: .6s ease-in alternate backwards first_display 0s; }


	@keyframes first_display {
		0% {
			transform: translateY(min(-250%, -40vh));
			opacity: 0;
		}
		100% {
			transform: translateY(0vh);
			opacity: 1;
		}
	}

	@keyframes first_display_credit {
		0%		{ opacity: 0; }
		100%	{ opacity: 1; }
	}


/* =========================================================================
	BACKGROUND
   ========================================================================= */

	#animated-background
	{
		position:fixed;
		top:0; bottom:0; left:0; right:0;
		width: 100vw; height: 100vh;
		z-index: -10;

		overflow: hidden;

		opacity: 60%;
	}

		/* cursive text */
		#animated-background svg
		{
			position: absolute;
			overflow: visible !important;
		}

	/* ------------------------------
		GRADIENT ANIMATION
	   ------------------------------ */

		#animated-background, #gradient
		{
			background: orange; /* alternative if gradient unsupported */
			background: linear-gradient(45deg, rgba(131,58,180,1) 10%, rgba(253,29,29,1) 20%, rgba(252,176,69,1) 30%, rgba(131,58,180,1) 40%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 60%, rgba(131,58,180,1) 70%, rgba(253,29,29,1) 80%, rgba(252,176,69,1) 90%, rgba(252,176,69,1) 100%);
		}

		#gradient
		{
			position: fixed;
			top:0vh; bottom:0; left:0; right:0;
			width: 500vw; height: 500vh;

			animation: background_gradient var(--background-duration) linear alternate infinite;
			animation-delay: 1.5s;
		}

		@keyframes background_gradient {
			0% { transform: translate(0, -400vh); }
			100% { transform: translate(-400vw, 0); }
		}


	/* ------------------------------
		DRAWS SPEED AND DELAYS
	   ------------------------------ */

		/* SPEED */

		.path, .path-fast, .path-slow
		{	
			will-change: auto;

			stroke-dasharray: var(--dasharray-start);
			stroke-dashoffset: var(--dasharray-start);
			animation:	var(--duration)linear 0s 1 normal forwards draw,
						var(--duration)linear 0s infinite alternate-reverse forwards color_change;

			stroke-width: 6;
			fill: none;
			stroke: #546de5;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

			.path-fast	{ animation-duration: calc(var(--duration) / 1.5); }

			.path-slow	{ animation-duration: calc(var(--duration) * 1.5); }


		/* DELAY */

		.time0	{ animation-delay: calc(var(--delay) * 0); }
		.time1	{ animation-delay: calc(var(--delay) * 1); }
		.time2	{ animation-delay: calc(var(--delay) * 2); }
		.time3	{ animation-delay: calc(var(--delay) * 3); }
		.time4	{ animation-delay: calc(var(--delay) * 4); }
		.time5	{ animation-delay: calc(var(--delay) * 5); }
		.time6 	{ animation-delay: calc(var(--delay) * 6); }
		.time7	{ animation-delay: calc(var(--delay) * 7); }
		.time8	{ animation-delay: calc(var(--delay) * 8); }
		.time9	{ animation-delay: calc(var(--delay) * 9); }
		.time10	{ animation-delay: calc(var(--delay) * 10); }
		.time11	{ animation-delay: calc(var(--delay) * 11); }
		.time12	{ animation-delay: calc(var(--delay) * 12); }
		.time13	{ animation-delay: calc(var(--delay) * 13); }
		.time14	{ animation-delay: calc(var(--delay) * 14); }
		.time15	{ animation-delay: calc(var(--delay) * 15); }
		.time16	{ animation-delay: calc(var(--delay) * 16); }
		.time17	{ animation-delay: calc(var(--delay) * 17); }
		.time18	{ animation-delay: calc(var(--delay) * 18); }
		.time19	{ animation-delay: calc(var(--delay) * 19); }
		.time20	{ animation-delay: calc(var(--delay) * 20); }
		.time21	{ animation-delay: calc(var(--delay) * 21); }
		.time22	{ animation-delay: calc(var(--delay) * 22); }
		.time23	{ animation-delay: calc(var(--delay) * 23); }
		.time24	{ animation-delay: calc(var(--delay) * 24); }
		.time25	{ animation-delay: calc(var(--delay) * 25); }
		.time26	{ animation-delay: calc(var(--delay) * 26); }
		.time27	{ animation-delay: calc(var(--delay) * 27); }
		.time28	{ animation-delay: calc(var(--delay) * 28); }
		.time29	{ animation-delay: calc(var(--delay) * 29); }
		.time30	{ animation-delay: calc(var(--delay) * 30); }
		.time31	{ animation-delay: calc(var(--delay) * 31); }
		.time32	{ animation-delay: calc(var(--delay) * 32); }
		.time33	{ animation-delay: calc(var(--delay) * 33); }


	/* ------------------------------
		CURSIVE TEXTS TRANSLATIONS
	   ------------------------------ */

		#left-right	{ animation: var(--long-duration) linear alternate infinite forwards translation_left_right; }
		#right-left	{ animation: var(--long-duration) linear alternate infinite forwards translation_right_left; }
		#up-down	{ animation: var(--long-duration) linear alternate infinite forwards translation_up_down; }
		#down-up	{ animation: var(--long-duration) linear alternate infinite forwards translation_down_up; }


		@keyframes translation_left_right {
			0%		{ transform: translateX(0px); }
			100%	{ transform: translateX(max(30vw,30vh)); }
		}

		@keyframes translation_right_left {
			0%		{ transform: translateX(0px); }
			100%	{ transform: translateX(max(-30vw,-30vh)); }
		}

		@keyframes translation_up_down {
			0%		{ transform: translateY(0px); }
			100%	{ transform: translateY(max(30vw,30vh)); }
		}

		@keyframes translation_down_up {
			0%		{ transform: translateY(0px); }
			100%	{ transform: translateY(max(-30vw,-30vh)); }
		}


	/* ------------------------------
		DRAWS POSITIONS
	   ------------------------------ */

	:root
	{
		--sizeUnit: min(1vh,1vw);

		/* Cursive Sizes */
		--cs-XS:	.30;
		--cs-S:		.45;
		--cs-M:		.60;
		--cs-L:		.75;
		--cs-XL:	.90;
		--cs-XXL:	1.05;
		--cs-XXXL:	1.20;
	}

	#funambule {}

		#funambule-fun-line {
			top: 0vh;
			left: calc(0vw + 0*var(--sizeUnit));
			height: calc(var(--cs-XL)*20*var(--sizeUnit));
		}

		#funambule-ambule-line {
			top: 0vh;
			left: calc(0vw + 30*var(--sizeUnit));
			height: calc(var(--cs-XL)*20*var(--sizeUnit));
		}

	#ordinateur {}

		#ordinateur-or-line {
			top: 90vh;
			left: calc(80vw + 0px);
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#ordinateur-din-line {
			top: 90vh;
			left: calc(80vw + 6*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#ordinateur-ateur-line {
			top: calc(90vh - 1.5*var(--sizeUnit));;
			left: calc(80vw + 19.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#ordinateur-t-line {
			top: calc(90vh - 1.5*var(--sizeUnit));
			left: calc(80vw + 25.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*1.5*var(--sizeUnit));
		}

		#ordinateur-i-line {
			top: calc(90vh - 1*var(--sizeUnit));
			left: calc(80vw + 11*var(--sizeUnit));
			height: calc(var(--cs-XS)*1.5*var(--sizeUnit));
		}

	#abracadabra {}

		#abracadabra-abr1-line {
			top: 85vh;
			left: calc(4vw + 0px);
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#abracadabra-a1-line {
			top: calc(85vh + 6*var(--sizeUnit));
			left: calc(4vw + 19*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#abracadabra-c1-line {
			top: calc(85vh + 6*var(--sizeUnit));
			left: calc(4vw + 27*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#abracadabra-a2-line {
			top: calc(85vh + 6*var(--sizeUnit));
			left: calc(4vw + 32*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#abracadabra-d-line {
			top: calc(85vh + 3*var(--sizeUnit));
			left: calc(4vw + 39.5*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#abracadabra-abr2-line {
			top: calc(85vh - 0*var(--sizeUnit));
			left: calc(4vw + 48*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#abracadabra-a3-line {
			top: calc(85vh + 6*var(--sizeUnit));
			left: calc(4vw + 67*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

	#correspondance {}

		#correspondance-c-line {
			top: 50vh;
			left: calc(60vw + 0px);
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#correspondance-orres-line {
			top: 50vh;
			left: calc(60vw + 4.5*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#correspondance-p-line {
			top: 50vh;
			left: calc(60vw + 23*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#correspondance-on-line {
			top: 50vh;
			left: calc(60vw + 30*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#correspondance-d-line {
			top: 50vh;
			left: calc(60vw + 39*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#correspondance-an-line {
			top: 50vh;
			left: calc(60vw + 44*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#correspondance-ce-line {
			top: 50vh;
			left: calc(60vw + 53.5*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

	#bulle {}

		#bulle-line {
			top: 25vh;
			left: calc(80vw + 0px);
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

	#fleuve {}

		#fleuve-line {
			top: 24vh;
			left: calc(10vw + 0px);
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

	#bleu {}

		#bleu-line {
			top: 7vh;
			left: calc(50vw + 0px);
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

	#elle {}

		#elle-line {
			top: 72vh;
			left: calc(32vw + 0px);
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

	#merveilleux
	{
		transform: scale(var(--cs-XXXL)) translate(3vw, 4vh);
		transform-origin: top left;
	}

		#merveilleux-line
		{
			top: calc(10*var(--sizeUnit)); left: 0px;
			height: calc(20*var(--sizeUnit));
		}

		#merveilleux-x-line
		{
			top: calc(6.5*var(--sizeUnit)); left: calc(100*var(--sizeUnit));
			height: calc(20*var(--sizeUnit));
		}

		#merveilleux-i-line
		{
			top: calc(0*var(--sizeUnit)); left: calc(54*var(--sizeUnit));
			height: calc(20*var(--sizeUnit));
		}

	#grenouille {}

		#grenouille-gren-line {
			top: 0vh;
			left: calc(62vw + 0*var(--sizeUnit));;
			height: calc(var(--cs-XL)*20*var(--sizeUnit));
		}

		#grenouille-ouille-line {
			top: calc(0vh - 1*var(--sizeUnit));
			left: calc(62vw + 33*var(--sizeUnit));
			height: calc(var(--cs-XL)*20*var(--sizeUnit));
		}

		#grenouille-i-line {
			top: 0vh;
			left: calc(62vw + 46.5*var(--sizeUnit));
			height: calc(var(--cs-XL)*20*var(--sizeUnit));
		}

	#inventer {}

		#inventer-line {
			top: 62vh;
			left: 10vw;
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#inventer-t-line {
			top: calc(62vh + 0.5*var(--sizeUnit));
			left: calc(10vw + 28.5*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

		#inventer-i-line {
			top: 62vh;
			left: calc(10vw + 0*var(--sizeUnit));
			height: calc(var(--cs-M)*20*var(--sizeUnit));
		}

	#hurluberlu {}

		#hurluberlu-line {
			top: 60vh;
			left: 54vw;
			height: calc(var(--cs-L)*20*var(--sizeUnit));
		}

	#humeur {}

		#humeur-line {
			top: 24vh;
			left: 24vw;
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

	#murmurer {}

		#murmurer-line {
			top: 2vh;
			left: 80vw;
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}


	#mouvement {}

		#mouvement-m-line {
			top: 48vh;
			left: 11vw;
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#mouvement-ouvement-line {
			top: calc(48vh - 0.5*var(--sizeUnit));
			left: calc(11vw + 9*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

		#mouvement-t-line {
			top: calc(48vh - 1*var(--sizeUnit));
			left: calc(11vw + 43.5*var(--sizeUnit));
			height: calc(var(--cs-S)*20*var(--sizeUnit));
		}

	#personnellement {}

		#personnellement-pers-line {
			top: 88vh;
			left: 60vw;
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#personnellement-onnellement-line {
			top: 88vh;
			left: calc(60vw + 9.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#personnellement-t-line {
			top: calc(88vh + 0.25*var(--sizeUnit));
			left: calc(60vw + 34.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}


	#confortablement {}

		#confortablement-c-line {
			top: 75vh;
			left: 2vw;
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#confortablement-onf-line {
			top: 75vh;
			left: calc(2vw + 2.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#confortablement-ort-line {
			top: 75vh;
			left: calc(2vw + 10.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#confortablement-t1-line {
			top: 75vh;
			left: calc(2vw + 15*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#confortablement-ablement-line {
			top: 75vh;
			left: calc(2vw + 17.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}

		#confortablement-t2-line {
			top: calc(75vh + 0.75*var(--sizeUnit));
			left: calc(2vw + 35.5*var(--sizeUnit));
			height: calc(var(--cs-XS)*20*var(--sizeUnit));
		}