@font-face {
 font-family: "Writer";
 src: url("CSS/font/Writer-Bold.woff") format("woff");
}

@font-face {
 font-family: "Writer";
 src: url("CSS/font/Writer-Regular.woff") format("woff");
}


@font-face {
    font-family: 'Montserrat';
    src: url('CSS/Montserrat-Regular.woff') format('woff');
}




.marquee {
    position: absolute;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
}

#titrevertical{
position: absolute;
writing-mode: vertical-rl;
text-orientation: sideways-left;
}

body{
	background-color: black;
  margin-top: 50px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 100px;
	cursor:crosshair;
}

.conteneur{
margin-top: 50px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 100px;
cursor:crosshair;
background-color: blue;
}

p {
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Montserrat", Helvetica, sans-serif ;
text-justify: inter-word;
line-height: 120%;
}

.slide {
  animation-duration: 3s;
  animation-name: slide;
  animation-iteration-count: infinite;
}



.citation{
color: #ff005a;
font-size: 50px;
text-align: right;
line-height: 90% ;
font-style: normal;
font-weight: bold;
font-family: "Montserrat", Helvetica, sans-serif ;
text-justify: inter-word;
line-height: 120%;
}



div.sticky {
  position: -webkit-sticky;
  position: fixed;
	left: 0;
  top: 3;
	writing-mode: vertical-lr;
	text-orientation: mixed;
	border: none;

}


a{
font-size:30px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

a:hover{
font-size:30px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}


h5{
font-size:10px;
color: #ff005a;
opacity: 0%;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
transition-duration: 1s;
}


h5:hover{
font-size:10px;
color: #ff005a;
opacity: 10%;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
transition-duration: 5s;
}


h6{
font-size:30px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

h6:hover{
font-size:30px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

h7{
font-size:30px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}
h7:hover{
font-size:30px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through white;
}


h8{
font-size:30px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}
h8:hover{
font-size:30px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}


h9{
font-size:30px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}
h9:hover{
font-size:30px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}




#image1{	padding: 10px;
	overflow: hidden;
	width:300px;
	height: 400px;
	display: inline-block;
	border: dashed white;
}
#textebarré {
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#citation {
padding: 10px;
overflow: hidden;
width:1300px;
height: 250px;
display: inline-block;
border: none;
font-size:50px;
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#citation:hover{
padding: 10px;
overflow: hidden;
width:1300px;
height: 250px;
display: inline-block;
border: none;
font-size:50px;
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}


h1 {
font-size:40px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}



h2 {
font-size:400%;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
float: right;
}

h3 {
height:50px;
width:100px;
font-size:50px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}

h4 {
height:20px;
width:100px;
font-size:40px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}


.grostitre {
height:20px;
width:100px;
font-size:40px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}

.contenu-un{
	background-color:none;
	width:100px;
	margin:0;
	display:inline-block;
	font-size:18px;
	transition-duration:1s;
  transform: rotate(0deg);
  transition-delay: 1s;
 border-radius: 0 0;
 height:50px;
 transform: scale(1);
 text-align:center;

}
.contenu-un:hover{
	background-color:yellow;
	width:100px;
	display:inline-block;
	font-size:32px;
	transition-duration:0s;
	box-shadow: 1px 0px 42px 36px rgba(0,0,0,0.75);
	-webkit-box-shadow: 1px 0px 42px 36px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 0px 42px 36px rgba(0,0,0,0.75);
   transform: rotate(180deg);
   transition-delay: 0s;
  border-radius: 50% 50%;
  transform: scale(1.5);
  }

.contenu-deux{
	  background-color: none;
	  width: 100px;
	  height: 100px;
	  margin: 0;
	  display: inline-block;
	  font-size:18px;
	  transition-duration: 1s;
	}

	.contenu-deux : hover{
	  background-color: blue;
	  width: 200px;
	  height: 200px;
	  margin: 0;
	  display: inline-block;
	  font-size:18px;
	  transition-duration: 1s;
	}

  #titre{
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 200px;
	  display: inline-block;
		border: dashed white;
		color: white;
	}
	#titre1{
		padding: 0px;
		overflow: hidden;
		width:1374px;
		height: 200px;
		display: inline-block;
		border: none;
	}

	#tiret{
		padding: 0px;
		overflow: hidden;
		width:1374px;
		height: 50px;
		display: inline-block;
		border: none;
	}

	#titre2{
		padding: 10px;
		overflow: hidden;
		width:800px;
		height: 200px;
		display: inline-block;
		border: dashed white;
	}

	#soustitre{
	  overflow: hidden;
	  width:800px;
		height: 50px;
	  display: inline-block;
		border: dashed white;
	}

	#bienvenue {
	height:50px;
	width:125px;
	font-size:50px;
	color: #ff005a;
	font-style: normal;
	font-weight: bold;
	font-family: "Writer", Helvetica, sans-serif ;
	}

	#lienspages{
	  overflow: none;
	  width:800px;
		height: 135px;
	  display: inline-block;
		border: none;
	}

	#soustitre1{
		overflow: hidden;
		width:1000px;
		height: 100px;
		display: inline-block;
		border: dashed white;
	}
.blocimage{
	overflow: hidden;
	width:500px;
	height: 300px;
	display: inline-block;
	border: none;
	color: white;
}
.blocimage img{
width: 100%;
display:block;
}

	#content{
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 700px;
	  display: inline-block;
		border: dashed white;
	}


		#blocimage{
			background-color: black;
			padding: 10px;
		  overflow: hidden;
		  width:500px;
			height: 500px;
		  display: inline-block;
			border: dashed white;
		}


		#com{
			padding: 10px;
		  overflow: hidden;
		  width:500px;
			height: 500px;
		  display: inline-block;
			border: dashed;
			float: left;
		}

	#crédit{
		background-color:black;
		padding-top: 60px;
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 700px;
	  display: inline-block;
		border: dashed white;
	}

	#crédit2{
		background-color: black;
		padding: none;
		overflow: hidden;
		width:850px;
		height: 700px;
		display: inline-block;
		border: none;
		font-size:800px;
		color: #ff005a;
		font-style: normal;
		font-weight: bold;
		font-family: "Writer", Helvetica, sans-serif ;
	}

	#haine{
		background-color: black;
	  padding: 10px;
		overflow: hidden;
		width:500px;
		height: 650px;
		display: inline-block;
		border: dashed white;
		float: right;
	}


	#crédit3{
		background-color: black;
		padding: none;
		overflow: hidden;
		width:850px;
		height: 675px;
		display: inline-block;
		border: none;
		font-size:1000px;
		color: #ff005a;
		font-style: normal;
		font-weight: bold;
		font-family: "Writer", Helvetica, sans-serif ;
	}


	#content2{
		padding: 10px;
		overflow: hidden;
		width:600px;
		height: 400px;
		display: inline-block;
		border: dashed;
		float: right;
	}


		#dessin{
			padding: 0px;
			overflow: hidden;
			width:725px;
			height: 400px;
			display: inline-block;
			border: none;
			float:left;
		}


		#dessin1{
					padding: 0px;
					overflow: hidden;
					width:725px;
					height: 500px;
					display: inline-block;
					border: none;
					float:right;
				}

	#animdebut{
		overflow: hidden;
		width:820px;
		height: 720px;
		display: inline-block;
		border: dashed;
	}

	#blanc{
		overflow: hidden;
		width:820px;
		height: 725px;
		display: inline-block;
		border: none;
	}

	#blanc3{
		overflow: hidden;
		width:820px;
		height: 620px;
		display: inline-block;
		border: none;
	}

	#blanc1{
		overflow: hidden;
		width:725px;
		height: 500px;
		display: inline-block;
		border: none;
	}

	#grosselettre1{
		overflow: hidden;
		width:775px;
		height: 475px;
		display: inline-block;
		border: none;
		float: right;
	}

	#grosselettre{
		overflow: hidden;
		width:775px;
		height: 50px;
		display: inline-block;
		border: none;
		float: right;
	}


.disperselettre{
	padding: 10px;
	overflow: hidden;
	width:800px;
	height: 100px;
	display: inline-block;
	border: none;
	font-size:10px;
	color: white;
	opacity: 0%;
	line-height: 250% ;
	letter-spacing: 1px;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: none;
	transition-duration: 0.1s;
	}

.disperselettre:hover{
	text-align: bottom;
	padding: 10px;
	overflow: hidden;
	width:800px;
	height: 500px;
	display: inline-block;
	border: none;
	font-size:10px;
	color: white;
	opacity: 100%;
	line-height: 10% ;
	letter-spacing: 30px;
	font-style: bold;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: none;
	transition-duration: 0.1s;
	}

	#content3{
		padding: 10px;
		background-color: black;
		overflow: hidden;
		width:600px;
		height: 500px;
		display: inline-block;
		border: dashed white;
		float: right;
	}

	#content4{
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 700px;
	  display: inline-block;
		border: dashed;
	}
	#content5{
		overflow: hidden;
		width:1400px;
		height: 400px;
		display: inline-block;
	}
	#content6{
		overflow: hidden;
		width:100px;
		height: 900px;
		display: inline-block;
	}
	#content7{
		overflow: hidden;
		width:500px;
		height: 500px;
		display: inline-block;
		float: right;
	}

#citation1{overflow: hidden;
width:1500px;
height: 100px;
display: inline-block;

}

#citation2{overflow: hidden;
width:1000px;
height: 150px;
display: inline-block;
}

#citation3{
padding: 10px;
overflow: hidden;
width:1400px;
height: 550px;
display: inline-block;
border: none;
font-size:50px;
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#citation3:hover{
padding: 10px;
overflow: hidden;
width:1400px;
height: 550px;
display: inline-block;
border: none;
font-size:50px;
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}


#image{
	overflow: hidden;
	width:400px;
	height: 300px;
	display: inline-block;
}

.img1{
	overflow: hidden;
	width:350px;
	height: 300px;
	display: inline-block;
	opacity: 0;
}

.img1:hover{
	overflow: hidden;
	width:350px;
	height: 300px;
	display: inline-block;
	opacity: 1;
}

.img2{
	overflow: hidden;
	width:400px;
	height: 300px;
	display: inline-block;
	opacity: 0.5;
}
.img2:hover{
	overflow: hidden;
	width:350px;
	height: 300px;
	display: inline-block;
	opacity: 0;
}
.img3{
	overflow: hidden;
	width:500px;
	height: 250px;
	display: inline-block;
	opacity: 0;
}
.img3:hover{
	overflow: hidden;
	width:500px;
	height: 250px;
	display: inline-block;
	opacity: 1;
}
.img4{
	overflow: hidden;
	width:800px;
	height: 250px;
	display: inline-block;
	opacity: 0;
}
.img4:hover{
	overflow: hidden;
	width:700px;
	height: 250px;
	display: inline-block;
	opacity: 1;
}


#disperse2{
overflow: hidden;
width:725px;
height: 670px;
display: inline-block;
border: dashed;
font-size:100px;
color: #ff005a;
line-height: 250% ;
letter-spacing: 1px;
font-style: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
font

}
}

#disperse2:hover{
overflow: hidden;
width:725px;
height: 670px;
display: inline-block;
border: dashed;
font-size:10px;
color: red;
line-height: 10% ;
letter-spacing: 30px;
font-style: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;

transition-duration: 0.1s;

}
 .disperse2{
	overflow: hidden;
	width:820px;
	height: 25px;
	display: inline-block;
	border: ;
	font-size:10px;
	color: white;
	line-height: 250% ;
	letter-spacing: -7px;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: none;
		transition-duration: 0.1s;
	}

	.disperse2:hover{
	padding: 0px;
	overflow: hidden;
	width:820px;
	height: 25px;
	display: inline-block;
	border: none;
	font-size:10px;
	color: white;
	line-height: 100% ;
	letter-spacing: 30px;
	font-style: bold;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: line-through;
	transition-duration: 0.1s;
	}

	.disperse3{
	padding: 10px;
 	overflow: hidden;
	width:500px;
	height: 525px;
 	display: inline-block;
 	border: none;
 	font-size:1000px;
 	color: #ff005a;
 	line-height: 10% ;
 		letter-spacing: 60px;
	font-style: normal;
 	font-family: "Writer", Helvetica, sans-serif ;
 	text-decoration: none;
 		transition-duration: 0.5s;
 	}

 	.disperse3:hover{
 padding-top: 335px;
 	overflow: hidden;
	width:500px;
  height: 525px;
 	display: inline-block;
 	border: none;
 	font-size:20px;
 	color: #ff005a;
	opacity: 25%;
 	line-height: 250% ;
	letter-spacing: -8px;
 	font-style: bold;
 	font-family: "Writer", Helvetica, sans-serif ;
 	text-decoration: none;
	text-align: center;
 	transition-duration: 1s;
 	}

	.disperse4{
		padding: 10px;
		overflow: hidden;
		width:1374px;
		height: 25px;
		display: inline-block;
		border: none;
		font-size:40px;
		color: white;
		line-height: 10% ;
		letter-spacing: 30px;
		font-style: bold;
		font-family: "Writer", Helvetica, sans-serif ;
		text-decoration: line-through;
		transition-duration: 0.1s;
		}
	 }

	 .disperse4:hover{
	 padding: 10px;
	 overflow: hidden;
	 width:1374px;
	 height: 25px;
	 display: inline-block;
	 border: none;
	 font-size:40px;
	 color: white;
	 line-height: 10% ;
	 letter-spacing: 30px;
	 font-style: bold;
	 font-family: "Writer", Helvetica, sans-serif ;
	 text-decoration: line-through;
	 transition-duration: 0.1s;
	 }


textflicker{ background: none;
	       padding: 1em;
	       font-family: "Montserrat";
	       color: none;
	       font-size: 1em;
	       line-height: 1;
	       text-shadow: 0.06rem 0 0.06rem #a4e5f1, -0.125rem 0 0.06rem #ff0000;
	       letter-spacing: 0.125em;
	       animation-duration: 0.01s;
	       animation-name: textflicker;
	       animation-iteration-count: infinite;
	       animation-direction: alternate;
	}
	h1 { font-size: 7em; }

	@keyframes textflicker {
	  from {
	    text-shadow: 1px 0 0 #a4e5f1, -2px 0 0 #ff0000;
	  }
	  to {
	    text-shadow: 2px 0.5px 2px #a4e5f1, -1px -0.5px 2px #ff0000;
	  }
	}


	#textflicker1{ background: none;
		       padding: 1em;
		       font-family: "Montserrat";
		       color: white;
		       font-size: 1em;
		       line-height: 1;
		       text-shadow: 0.06rem 0 0.06rem #a4e5f1, -0.125rem 0 0.06rem #ff0000;
		       letter-spacing: 0.125em;
		       animation-duration: 0.05s;
		       animation-name: textflicker1;
		       animation-iteration-count: infinite;
		       animation-direction: alternate;
		}
	}
	h2 { font-size: 7em; }

	@keyframes textflicker1 {
		from {
			text-shadow: 6px 0 0 blue, -6px 0 0 #ff0042;
		}
		to {
			text-shadow: 6px 0.5px 2px blue, -1px -0.5px 6px #ff0042;
		}
	}


	.clignote {
  color:white;
  animation: clignote 1s infinite;

}
@keyframes clignote {
  10% { opacity: 0; }
}