<div className="Main-roulette">
<div className="roulette" style={{overflow:'hidden',display:'flex',listStyle:'none',margin:'0',height:'100%',width:'100%'}}>
<div className="Objects-red"><span className="Objects-text">1</span></div>
<div className="Objects-black"><span className="Objects-text">14</span></div>
<div className="Objects-red"><span className="Objects-text">2</span></div>
<div className="Objects-black"><span className="Objects-text">13</span></div>
<div className="Objects-red"><span className="Objects-text">3</span></div>
<div className="Objects-black"><span className="Objects-text">12</span></div>
<div className="Objects-red"><span className="Objects-text">4</span></div>
<div className="Objects-green"><span className="Objects-text">0</span></div>
<div className="Objects-black"><span className="Objects-text">11</span></div>
<div className="Objects-red"><span className="Objects-text">5</span></div>
<div className="Objects-black"><span className="Objects-text">10</span></div>
<div className="Objects-red"><span className="Objects-text">6</span></div>
<div className="Objects-black"><span className="Objects-text">9</span></div>
<div className="Objects-red"><span className="Objects-text">7</span></div>
<div className="Objects-black"><span className="Objects-text">8</span></div>
</div>

<div className="pointer"/>

</div>


<style>
	.Main-roulette{
	margin: 0px auto;
	overflow:hidden;
	width: 80%;
	background-color: var(--color-progress-bar);
	position: relative;
    text-align: center;
	position: relative;
	}
	.roullete{

	}

	.Objects-red{
	   min-width:80px;
    min-height: 80px;
	background: #b04a43;
	text-align: center;
	}
	.Objects-black{
	    min-width: 80px;
    	min-height: 80px;
		background: #444444;
		text-align: center;
	}
		.Objects-green{
	min-width: 80px;
    min-height: 80px;
	background: #6fb26b;
	text-align: center;

	}
	.Objects-text{
	margin-top: 40%;
    display: block;
	color: white;
	}
</style>