<link rel="stylesheet" href="style.css" />

body{
	margin: 0;
	padding: 0;
	position: center;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

.container {

	height: 100vh;
	width: 100%;
	
}

@keyframes fade {
	0% { opacity: 1;
	}
	
	14% { opacity: 0;
	}
	
	28% { opacity: 0;
	}
		
	42% { opacity: 0;
	}
	
	56% { opacity: 0;
	}
	
	70% { opacity: 0;
	}
	
	84% { opacity: 0;
	}	
	
	100% { opacity: 1;
	}
}

#carroussel {
	z-index: -1;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	repeat: no-repeat;
	attachment: fixed;
	size: cover;
	position: absolute;
	object-fit: cover;
	animation: fade 42s ease-in-out infinite alternate;
}

#carroussel:nth-of-type(07) {
	animation-delay: 0s
}
#carroussel:nth-of-type(06) {
	animation-delay: 6s
}
#carroussel:nth-of-type(05) {
	animation-delay: 12s
}

#carroussel:nth-of-type(04) {
	animation-delay: 18s
}

#carroussel:nth-of-type(03) {
	animation-delay: 24s
}

#carroussel:nth-of-type(02) {
	animation-delay: 30s
}

#carroussel:nth-of-type(01) {
	animation-delay: 36s
}



#background{
	border: none;
	position: absolute;
	z-index: 2;
	}

#bloc{
	z-index: 3;
	text-align: center;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100px;
	bottom: 10px;

	
}

#mail{
	position: absolute;
	width: 100vw;
	bottom: 10px;
		
}

#insta{
	position: absolute;
	width: 100vw;
	bottom: -10px
}





/*media queries*/
@media (min-aspect-ratio: 16/9)
{
	#background {
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
	}
}

@media (max-aspect-ratio: 16/9)
{
	#background {
		background: url("") no-repeat;
  		background-size: cover;
		width: auto;
		height: 100vh;
		max-width: 100vw;
	}
}