@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');
}




body{
	background: linear-gradient(white, black);
	background-color:none;
  margin-top: 50px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 100px;
	cursor:crosshair;
}
p {
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
}




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

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

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

#textebarré {
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}


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

h2 {
font-size:4px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}

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

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

h4 {
height:20px;
width:100px;
font-size:40px;
color: #000000;
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;
	}

	#content{
	  overflow: hidden;
	  width:1000px;
		height: 1700px;
	  display: inline-block;
	}
	#content2{
		overflow: hidden;
		width:400px;
		height: 1000px;
		display: inline-block;
	}
	#content3{
		overflow: hidden;
		width:600px;
		height: 2000px;
		display: inline-block;
	}
	#content4{
		overflow: hidden;
		width:800px;
		height: 200px;
		display: inline-block;
	}

	#content5{
		overflow: hidden;
		width:1200px;
		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:1300px;
height: 100px;
display: inline-block;
}

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

#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;
}



textflicker{ background: none;
	       padding: 1em;
	       font-family: "Writer";
	       color: none;
	       font-size: 1em;
	       line-height: 1;
	       text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
	       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 #ea36af, -2px 0 0 #75fa69;
	  }
	  to {
	    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
	  }
	}


	#textflicker1{ background: none;
		       padding: 1em;
		       font-family: "Montserrat";
		       color: blue;
		       font-size: 1em;
		       line-height: 1;
		       text-shadow: 0.06rem 0 0.06rem #ecca0f, -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: 2px 0 0 #ea36af, -2px 0 0 #ff0000;
		}
		to {
			text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #ff0000;
		}
	}


	div.sticky {
	  position: -webkit-sticky;
	  position: sticky;
	  top: 0;
	}


	#disperse{
	padding: 10px;
	overflow: hidden;
	width:1200px;
	height: 250px;
	display: inline-block;
	border: none;
	font-size:10px;
	color: white;
	line-height: 10% ;
	letter-spacing: 1px;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: none;
	}

	#disperse:hover{
	padding: 10px;
	overflow: hidden;
	width:1200px;
	height: 250px;
	display: inline-block;
	border: none;
	font-size:10px;
	color: white;
	line-height: 250% ;
	letter-spacing: 30px;
	font-style: bold;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: none;
	transition-duration: 1s;
	}


	#disperse2{
	padding: 10px;
	overflow: hidden;
	width:1200px;
	height: 250px;
	display: inline-block;
	border: none;
	font-size:10px;
	color: white;
	line-height: 250% ;
	letter-spacing: 1px;
	font-family: "Writer", Helvetica, sans-serif ;
	text-decoration: none;
	}

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


		#disperse3{
		padding: 10px;
		overflow: hidden;
		width:1200px;
		height: 250px;
		display: inline-block;
		border: none;
		font-size:10px;
		color: white;
		line-height: 20% ;
		letter-spacing: 1px;
		font-family: "Writer", Helvetica, sans-serif ;
		text-decoration: none;
		transition-duration: 0.5s;
		}

		#disperse3:hover{
		padding: 10px;
		overflow: hidden;
		width:1200px;
		height: 250px;
		display: inline-block;
		border: none;
		font-size:10px;
		color: white;
		line-height: 700% ;
		letter-spacing: 30px;
		font-style: bold;
		font-family: "Writer", Helvetica, sans-serif ;
		text-decoration: none;
		transition-duration: 1s;
		}


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

		#crédit2:hover{
			background-color: none;
			padding: none;
			overflow: hidden;
			width:1250px;
			height: 700px;
			display: inline-block;
			border: none;
			font-size:40px;
			color: #ff005a;
			font-style: normal;
			font-weight: bold;
			font-family: "Writer", Helvetica, sans-serif ;
			transition-duration: 1s;
		}


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

		}


		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;
		}