/* @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"); */

@font-face {font-family: GoldenHopes;
			src: url('GoldenHopes.otf') format("opentype");
}

h1, p {
	color: #FF00F0;
	text-align: center;
	text-shadow: 2px 2px 5px #EE0080;
	font-family: GoldenHopes, Fallback, sans-serif /* "Great Vibes", cursive; */;
	font-weight: 400;
	font-style: normal;
}

body {
	background-color: #000000;
}

.titre {
	text-align: center;
	font-size: 300%;
	height: 10%;
}

.titre img {
	height: 120px;
	filter: drop-shadow(2px 2px 5px #EE0080);
}

.constr{
	text-align: center;
	font-size: xx-large;	
}

.constr img {
	height: 100px;
	border-radius: 22px;
}


.wrapper {
	background-color: #FF00F0;
	height: 250px;
	overflow: hidden;
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

.wrapper:before, .wrapper:after {
	content: "";
	position: absolute;
	height: 130px;
	width: 150px;
	z-index: 2;
}

.wrapper:after {
	right: 0;
	top: 0;
	transform: rotateZ(180deg);
}

.wrapper:before {
	left: 0;
	top: 0;
}

.wrapper .track {
	display: flex;
	width: calc(150px * 13);
	animation: scroll 30s 0.5s linear infinite;
}

.wrapper .logo {
	width: 600px;
}

.wrapper .logo img {
	height: 180px;
}

@keyframes  scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-600px * 6));
	}
}