.marquee
	ul.content
		each cont in ['THIS', 'IS', 'A', 'MARQUEE', 'TEXT', 'SCROLL', 'MADE', 'WITH', 'CSS']
			li= cont
		

$width: 80vw
$height: 20vh
$elNum: 9
$dispNum: 4
$duration: 10s
*, body
	margin: 0
	padding: 0
	box-sizing: border-box
body
	height: 100vh
	display: flex
	justify-content: center
	align-items: center
	.marquee
		width: $width
		height: $height
		background: #000
		color: white
		overflow: hidden
		position: relative
		&:before, &:after
			position: absolute
			top: 0
			width: 10rem
			height: 100%
			content: ""
			z-index: 1
		&:before
			left: 0
			background: linear-gradient(to right, #000 0%, transparent 100%)
		&:after
			right: 0
			background: linear-gradient(to left, #000 0%, transparent 100%)
		.content
			list-style: none
			height: 100%
			display: flex
			animation: scroll $duration linear infinite
			li
				display: flex
				justify-content: center
				align-items: center
				width: $width / $dispNum
				flex-shrink: 0
				font-size: 2rem
				white-space: nowrap
@keyframes scroll
	0%
		transform: translateX(0vw)
	100%
		transform: translateX(calc(-1 * #{($width / $dispNum) * $elNum}))		
@media (max-width: 600px)
	$width: 100vw
	$height: 16vh
	$dispNum: 3
	html
		font-size: 12px
		.marquee
			width: $width
			height: $height
			&:before, &:after
				width: 5rem
			.content
				li
					width: $width / $dispNum
	@keyframes scroll
		0%
			transform: translateX(0vw)
		100%
			transform: translateX(calc(-1 * #{($width / $dispNum) * $elNum}))	
	

let dispNum: number = parseInt( $('.marquee').css('width') ) / parseInt( $('li').css('width') )
for (let i: number = 0; i < dispNum; i++) 
	$('ul li:nth-child(' + i + ')').clone().appendTo(".content")