body {
    opacity: 1;
    animation: fadeIn 1.5s ease-out forwards; /* Ajustez la durée (2s) selon vos préférences */
    background-color: rgb(65, 57, 57); /* Fond noir pour l'effet initial */
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  ul { 
    
    margin: 150px auto 0; 
    padding: 0; 
    list-style: none; 
    display: table;
    width: 600px;
    text-align: center;
  }
  li { 
    display: table-cell; 
    position: relative; 
    padding: 15px 0;
  }
  a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    
    display: inline-block;
    padding: 15px 20px;
    position: relative;
  }
  a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  a:hover:after { 
    width: 100%; 
    left: 0; 
  }
  @media screen and (max-height: 300px) {
      ul {
          margin-top: 40px;
      }
  }
/* Header centrale */

#demo-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;  /* Le canvas sera au-dessus de l'image de fond */
}

.large-header {
	position: relative;
	width: 100%;
	background: #0c0202;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

#large-header {
	background-image: url('source/backanim.gif');
}

#large-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.72); /* Noir avec opacité de 0.5 pour un effet sombre */
  z-index: 0; /* S'assure que la superposition est sous le contenu */
}

.main-title {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title {
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

.main-title .thin {
	font-weight: 200;
}

@media only screen and (max-width : 768px) {
	.demo-1 .main-title {
		font-size: 3em;
	}
}