:root {
	--backgrounnd-color: #161A28;
	--red_krayola: #ED1B5C;

	;
}

*,
*::after,
*::before {
	box-sizing: border-box;
}

html {
	background-color: var(--backgrounnd-color);
}

body {
	margin: 0;
}

.animate-container {
	position: fixed;
	height: 200vh;
	width: 200vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	top: -50%;
	left: -50%;
	transform: rotate(-45deg);
}

.info-block {
	position: fixed;
	padding: 120px;
	z-index: 100;
	border-radius: 5px;
	background: var(--red_krayola);
	box-shadow: 0px 24px 60px 0px rgba(5, 7, 12, 0.50);
	color: #FFF;
	font-size: 64px;
	font-style: normal;
	font-family: 'Circe Extra', sans-serif;
	font-weight: 800;
	line-height: 100%;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.container {
	position: relative;
}

.background-icon {
	width: 100%;
	height: 83px;
	background: url('../assets/icons/icon.svg');
	background-repeat: repeat-x;


}

.background-icon-animate-1 {
	animation: moveBackground1 10s linear infinite;

}

.background-icon-animate-2 {
	animation: moveBackground2 10s linear infinite;
}

@keyframes moveBackground1 {
	0% {
	  transform: translateX(0);
	}
  
	50% {
	  transform: translateX(-10%);
	}
  
	100% {
	  transform: translateX(0);
	}
  }

  @keyframes moveBackground2 {
	0% {
	  transform: translateX(0);
	}
  
	50% {
	  transform: translateX(10%);
	}
  
	100% {
	  transform: translateX(0);
	}
  }

@media screen and (max-width: 685px) {
	.info-block {
	
		padding: 15%;
		font-size: 48px;
		letter-spacing: 0.48px;
		
	}
}
@media screen and (max-width: 475px) {
	.info-block {
		padding: 10%;
		font-size: 32px;
		letter-spacing: 0.32px;
	}
	.background-icon {
		height: 100%;
	}
	.animate-container {
		height: 200vh;
		width: 300vw;
		gap: 50px;
		justify-content: center
	}
}