body {
	background-color: #da291c;
	overflow: hidden;
}

.ligne-croix {
	height: 50px;
	width: 100%;
	background-image: url("../assets/croix.png");
	background-size: 50px 50px;
	background-repeat: repeat-x;
	animation: scrollLeft 40s linear infinite;
}

.ligne-croix-2 {
	flex: 1;
	height: 50px;
	width: 100%;
	background-image: url("../assets/croix.png");
	background-size: 50px 50px;
	background-repeat: repeat-x;
	animation: scrollRight 40s linear infinite;
}

.scroll-container {
	flex-direction: column;
	height: 100vh;
}

.spirale {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100;
	width: 60%;
	opacity: 0.2;
	transform: translate(-50%, -50%) rotate(0deg);
	animation: rotateIt 30s linear infinite;
}

@keyframes scrollLeft {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -100% 0;
	}
}

@keyframes scrollRight {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 100% 0;
	}
}

.cervelas {
	position: fixed;
	height: 80%;
	top: 50%;
	left: 50%;
	tranform: translate(-50%, -50%) scale(1);
	z-index: 999999;
	animation: zoomInOut 5s ease-in-out infinite;
}

@keyframes zoomInOut {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.1);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes rotateIt {
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}