histoire.css

body {
    background-color: #000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    overflow-x: hidden;
    width: 100vw;
}
@media screen and (max-width: 600px) {
    .extrait1, .extrait2, .extrait3 {
        width: 50%;
    }
}

#menu {
	background: #000000;
	height: 45px;
	border-radius: 10px;
	margin-top: 20px;
    z-index: 999; 
	position: relative; 
    background-color: transparent;
}

#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: center;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
}
#menu a.dropdown-arrow:after {
	content: "\25BF";
	margin-left: 5px;
}
#menu li a:hover {
	color: #0099CC;
	background: #F2F2F2;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	color: #FFFFFF;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #444444;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #444444;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background:#444444;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:#FFFFFF}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}




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


@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000000;
    overflow: hidden;
}



.background span {
    width: 1vmin;
    height: 1vmin;
    border-radius: 1vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 9;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #ffffff;
    top: 40%;
    left: 42%;
    animation-duration: 7s;
    animation-delay: -178s;
    transform-origin: 1vw -8vh;
    box-shadow: -2vmin 0 0.9553472269256513vmin currentColor;
}
.background span:nth-child(1) {
    color: #7a0ce9;
    top: 97%;
    left: 31%;
    animation-duration: 240s;
    animation-delay: -328s;
    transform-origin: 16vw 14vh;
    box-shadow: 2vmin 0 0.6347864175484179vmin currentColor;
}
.background span:nth-child(2) {
    color: #7a0ce9;
    top: 41%;
    left: 39%;
    animation-duration: 14s;
    animation-delay: -299s;
    transform-origin: 2vw -21vh;
    box-shadow: -2vmin 0 0.32639366420531757vmin currentColor;
}
.background span:nth-child(3) {
    color: #ffffff;
    top: 72%;
    left: 39%;
    animation-duration: 44s;
    animation-delay: -316s;
    transform-origin: 23vw -11vh;
    box-shadow: 2vmin 0 1.0369643559550086vmin currentColor;
}
.background span:nth-child(4) {
    color: #ffffff;
    top: 22%;
    left: 35%;
    animation-duration: 118s;
    animation-delay: -278s;
    transform-origin: 5vw -5vh;
    box-shadow: 2vmin 0 0.48459574611719014vmin currentColor;
}
.background span:nth-child(5) {
    color: #7a0ce9;
    top: 72%;
    left: 33%;
    animation-duration: 64s;
    animation-delay: -102s;
    transform-origin: 22vw 17vh;
    box-shadow: -2vmin 0 0.5290001031328815vmin currentColor;
}
.background span:nth-child(6) {
    color: #7a0ce9;
    top: 33%;
    left: 88%;
    animation-duration: 409s;
    animation-delay: -328s;
    transform-origin: 8vw 11vh;
    box-shadow: -2vmin 0 0.4971022774854492vmin currentColor;
}
.background span:nth-child(7) {
    color: #ffffff;
    top: 41%;
    left: 51%;
    animation-duration: 361s;
    animation-delay: -258s;
    transform-origin: 2vw -11vh;
    box-shadow: -2vmin 0 0.36028323759700376vmin currentColor;
}
.background span:nth-child(8) {
    color: #7a0ce9;
    top: 83%;
    left: 54%;
    animation-duration: 82s;
    animation-delay: -198s;
    transform-origin: 11vw 0vh;
    box-shadow: -2vmin 0 0.5673903955342259vmin currentColor;
}
.background span:nth-child(9) {
    color: #ffffff;
    top: 24%;
    left: 93%;
    animation-duration: 259s;
    animation-delay: -174s;
    transform-origin: 11vw 3vh;
    box-shadow: -2vmin 0 1.2011557566475028vmin currentColor;
}
.background span:nth-child(10) {
    color: #7a0ce9;
    top: 36%;
    left: 13%;
    animation-duration: 7s;
    animation-delay: -89s;
    transform-origin: 20vw 3vh;
    box-shadow: -2vmin 0 0.6752599511654878vmin currentColor;
}
.background span:nth-child(11) {
    color: #7a0ce9;
    top: 3%;
    left: 94%;
    animation-duration: 262s;
    animation-delay: -209s;
    transform-origin: -7vw -4vh;
    box-shadow: 2vmin 0 0.3874299606447851vmin currentColor;
}
.background span:nth-child(12) {
    color: #7a0ce9;
    top: 1%;
    left: 47%;
    animation-duration: 342s;
    animation-delay: -268s;
    transform-origin: -21vw 16vh;
    box-shadow: -2vmin 0 0.3827144954365267vmin currentColor;
}
.background span:nth-child(13) {
    color: #ffffff;
    top: 89%;
    left: 16%;
    animation-duration: 399s;
    animation-delay: -247s;
    transform-origin: 23vw -21vh;
    box-shadow: -2vmin 0 0.3307006313317613vmin currentColor;
}
.background span:nth-child(14) {
    color: #ffffff;
    top: 11%;
    left: 18%;
    animation-duration: 264s;
    animation-delay: -103s;
    transform-origin: 17vw -13vh;
    box-shadow: -2vmin 0 0.35403966198100445vmin currentColor;
}
.background span:nth-child(15) {
    color: #7a0ce9;
    top: 43%;
    left: 86%;
    animation-duration: 225s;
    animation-delay: -153s;
    transform-origin: 3vw 18vh;
    box-shadow: 2vmin 0 0.3146212460640554vmin currentColor;
}
.background span:nth-child(16) {
    color: #7a0ce9;
    top: 61%;
    left: 65%;
    animation-duration: 15s;
    animation-delay: -216s;
    transform-origin: -21vw -22vh;
    box-shadow: 2vmin 0 0.271335495083846vmin currentColor;
}
.background span:nth-child(17) {
    color: #7a0ce9;
    top: 43%;
    left: 24%;
    animation-duration: 160s;
    animation-delay: -397s;
    transform-origin: -22vw 11vh;
    box-shadow: -2vmin 0 0.8865654251902848vmin currentColor;
}
.background span:nth-child(18) {
    color: #ffffff;
    top: 99%;
    left: 30%;
    animation-duration: 49s;
    animation-delay: -36s;
    transform-origin: 16vw 6vh;
    box-shadow: 2vmin 0 1.1319125522840694vmin currentColor;
}
.background span:nth-child(19) {
    color: #ffffff;
    top: 99%;
    left: 12%;
    animation-duration: 308s;
    animation-delay: -38s;
    transform-origin: 11vw 20vh;
    box-shadow: 2vmin 0 0.9547254906738281vmin currentColor;
}
.background span:nth-child(20) {
    color: #ffffff;
    top: 57%;
    left: 12%;
    animation-duration: 321s;
    animation-delay: -220s;
    transform-origin: 22vw 10vh;
    box-shadow: 2vmin 0 0.620449438050577vmin currentColor;
}
.background span:nth-child(21) {
    color: #7a0ce9;
    top: 83%;
    left: 16%;
    animation-duration: 278s;
    animation-delay: -357s;
    transform-origin: 4vw 1vh;
    box-shadow: 2vmin 0 0.44541932949913443vmin currentColor;
}
.background span:nth-child(22) {
    color: #ffffff;
    top: 69%;
    left: 52%;
    animation-duration: 162s;
    animation-delay: -256s;
    transform-origin: -15vw 6vh;
    box-shadow: 2vmin 0 0.3915590712464445vmin currentColor;
}
.background span:nth-child(23) {
    color: #ffffff;
    top: 27%;
    left: 63%;
    animation-duration: 254s;
    animation-delay: -345s;
    transform-origin: -6vw -24vh;
    box-shadow: 2vmin 0 0.4701736444779192vmin currentColor;
}
.background span:nth-child(24) {
    color: #ffffff;
    top: 58%;
    left: 40%;
    animation-duration: 284s;
    animation-delay: -315s;
    transform-origin: -5vw 1vh;
    box-shadow: -2vmin 0 0.40394023782756827vmin currentColor;
}
.background span:nth-child(25) {
    color: #ffffff;
    top: 30%;
    left: 84%;
    animation-duration: 40s;
    animation-delay: -368s;
    transform-origin: 23vw 7vh;
    box-shadow: 2vmin 0 1.010604213474371vmin currentColor;
}
.background span:nth-child(26) {
    color: #ffffff;
    top: 88%;
    left: 95%;
    animation-duration: 168s;
    animation-delay: -173s;
    transform-origin: -20vw 6vh;
    box-shadow: 2vmin 0 0.8646370262990137vmin currentColor;
}
.background span:nth-child(27) {
    color: #ffffff;
    top: 14%;
    left: 60%;
    animation-duration: 313s;
    animation-delay: -151s;
    transform-origin: -22vw -24vh;
    box-shadow: -2vmin 0 1.054822654428982vmin currentColor;
}
.background span:nth-child(28) {
    color: #7a0ce9;
    top: 17%;
    left: 53%;
    animation-duration: 196s;
    animation-delay: -149s;
    transform-origin: -13vw -24vh;
    box-shadow: 2vmin 0 1.2470500184911908vmin currentColor;
}
.background span:nth-child(29) {
    color: #ffffff;
    top: 64%;
    left: 20%;
    animation-duration: 353s;
    animation-delay: -251s;
    transform-origin: 12vw -6vh;
    box-shadow: -2vmin 0 0.8039206751778294vmin currentColor;
}
.background span:nth-child(30) {
    color: #7a0ce9;
    top: 27%;
    left: 7%;
    animation-duration: 400s;
    animation-delay: -121s;
    transform-origin: -9vw 18vh;
    box-shadow: -2vmin 0 0.718446253654127vmin currentColor;
}
.background span:nth-child(31) {
    color: #7a0ce9;
    top: 13%;
    left: 44%;
    animation-duration: 156s;
    animation-delay: -168s;
    transform-origin: 1vw -8vh;
    box-shadow: -2vmin 0 1.02588809502364vmin currentColor;
}
.background span:nth-child(32) {
    color: #7a0ce9;
    top: 40%;
    left: 79%;
    animation-duration: 388s;
    animation-delay: -243s;
    transform-origin: -17vw -9vh;
    box-shadow: -2vmin 0 1.1410378897950955vmin currentColor;
}
.background span:nth-child(33) {
    color: #ffffff;
    top: 22%;
    left: 90%;
    animation-duration: 44s;
    animation-delay: -95s;
    transform-origin: -2vw 20vh;
    box-shadow: 2vmin 0 0.7439868373648648vmin currentColor;
}
.background span:nth-child(34) {
    color: #7a0ce9;
    top: 19%;
    left: 64%;
    animation-duration: 324s;
    animation-delay: -40s;
    transform-origin: -2vw -3vh;
    box-shadow: -2vmin 0 1.2228909602210092vmin currentColor;
}
.background span:nth-child(35) {
    color: #7a0ce9;
    top: 20%;
    left: 38%;
    animation-duration: 215s;
    animation-delay: -313s;
    transform-origin: -15vw -16vh;
    box-shadow: 2vmin 0 0.38779249689787654vmin currentColor;
}
.background span:nth-child(36) {
    color: #ffffff;
    top: 99%;
    left: 46%;
    animation-duration: 333s;
    animation-delay: -269s;
    transform-origin: -3vw -11vh;
    box-shadow: 2vmin 0 0.32893910854006236vmin currentColor;
}
.background span:nth-child(37) {
    color: #ffffff;
    top: 57%;
    left: 66%;
    animation-duration: 307s;
    animation-delay: -105s;
    transform-origin: 7vw -3vh;
    box-shadow: 2vmin 0 0.33126900746928967vmin currentColor;
}
.background span:nth-child(38) {
    color: #7a0ce9;
    top: 62%;
    left: 25%;
    animation-duration: 154s;
    animation-delay: -30s;
    transform-origin: -5vw -14vh;
    box-shadow: 2vmin 0 0.7994988990419576vmin currentColor;
}
.background span:nth-child(39) {
    color: #7a0ce9;
    top: 68%;
    left: 67%;
    animation-duration: 288s;
    animation-delay: -145s;
    transform-origin: -8vw -18vh;
    box-shadow: 2vmin 0 1.131699868350424vmin currentColor;
}
.background span:nth-child(40) {
    color: #7a0ce9;
    top: 89%;
    left: 73%;
    animation-duration: 158s;
    animation-delay: -258s;
    transform-origin: 18vw -6vh;
    box-shadow: 2vmin 0 0.5726493421532679vmin currentColor;
}
.background span:nth-child(41) {
    color: #ffffff;
    top: 76%;
    left: 56%;
    animation-duration: 279s;
    animation-delay: -185s;
    transform-origin: 19vw -8vh;
    box-shadow: 2vmin 0 0.5712029817536768vmin currentColor;
}
.background span:nth-child(42) {
    color: #ffffff;
    top: 84%;
    left: 26%;
    animation-duration: 356s;
    animation-delay: -88s;
    transform-origin: -19vw 22vh;
    box-shadow: -2vmin 0 0.7873751512083329vmin currentColor;
}
.background span:nth-child(43) {
    color: #7a0ce9;
    top: 3%;
    left: 60%;
    animation-duration: 333s;
    animation-delay: -353s;
    transform-origin: 23vw -7vh;
    box-shadow: 2vmin 0 0.5323821185340152vmin currentColor;
}
.background span:nth-child(44) {
    color: #ffffff;
    top: 90%;
    left: 45%;
    animation-duration: 79s;
    animation-delay: -189s;
    transform-origin: -4vw 15vh;
    box-shadow: 2vmin 0 0.385947168806571vmin currentColor;
}
.background span:nth-child(45) {
    color: #ffffff;
    top: 43%;
    left: 43%;
    animation-duration: 80s;
    animation-delay: -141s;
    transform-origin: -10vw 13vh;
    box-shadow: -2vmin 0 0.4619019926995924vmin currentColor;
}
.background span:nth-child(46) {
    color: #ffffff;
    top: 98%;
    left: 50%;
    animation-duration: 400s;
    animation-delay: -307s;
    transform-origin: 16vw 13vh;
    box-shadow: -2vmin 0 1.1975239053536955vmin currentColor;
}
.background span:nth-child(47) {
    color: #ffffff;
    top: 79%;
    left: 20%;
    animation-duration: 368s;
    animation-delay: -387s;
    transform-origin: -5vw 4vh;
    box-shadow: -2vmin 0 0.3018141955706375vmin currentColor;
}
.background span:nth-child(48) {
    color: #7a0ce9;
    top: 26%;
    left: 8%;
    animation-duration: 254s;
    animation-delay: -53s;
    transform-origin: 15vw -7vh;
    box-shadow: -2vmin 0 0.5872285087386553vmin currentColor;
}
.background span:nth-child(49) {
    color: #7a0ce9;
    top: 24%;
    left: 14%;
    animation-duration: 129s;
    animation-delay: -86s;
    transform-origin: 14vw 2vh;
    box-shadow: -2vmin 0 1.1801043370798008vmin currentColor;
}


.shadow__btn {
	padding: 10px 20px;
	border: none;
	font-size: 17px;
	color: #fff;
	border-radius: 7px;
	letter-spacing: 4px;
	font-weight: 700;
	text-transform: uppercase;
	transition: 0.5s;
	transition-property: box-shadow;
	margin-left: 46%;
	margin-top: 20%;
	animation: appeartitre 2s both;
	animation-delay: 1s;
	position: relative; 
  }
  

.shadow__btn::after {
  content: 'l\'histoire complète'; 
  font-family: 'Candara', sans-serif;
  font-size: 14px;
  position: absolute;
  text-transform: lowercase;
  bottom: 100%; 
  left: 50%; 
  transform: translateX(-50%); 
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  opacity: 0; 
  transition: opacity 0.3s ease-in-out; 
  pointer-events: none; 
}

.shadow__btn:hover::after {
 	bottom: 130%; 
  	opacity: 1;
}

.shadow__btn {
	background: rgb(0, 0, 0);
	box-shadow: 0 0 25px rgb(255, 255, 255);
}
  
.shadow__btn:hover {
	box-shadow: 0 0 5px rgb(0,140,255),
				0 0 25px rgb(0,140,255),
				0 0 50px rgb(0,140,255),
				0 0 100px rgb(0,140,255);
}



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





  

.titre h4 {
    position: relative;
    color: #fff;
	margin-top: 26%;
	left: 42%;
}

.titre h4::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff;
    animation: glow 7s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {text-shadow: none;}
    25% {text-shadow: 0 0 5px #fff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 25px #ffffff, 0 0 30px #ffffff;}
    50% {text-shadow: 0 0 10px #fff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff;}
    75% {text-shadow: 0 0 5px #fff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 25px #ffffff, 0 0 30px #ffffff;}
}



.containerresume {
    height: 100px; 
}

.contentresume {
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 1px;
    position: absolute;
    top: 127%;
    left: 20%;
}

.hidden-textresume {
    opacity: 0; 
    transition: opacity 4s ease; 
	font-family: 'Candara', sans-serif;
}

.visibleresume {
    opacity: 1; 
}



.copyright{
    color: white;
    opacity: 1;
    font-family: 'Candara', sans-serif;
    left: 48%;
    top: 290%;
    z-index: 1003;
    position: absolute;
}