.twitch-btn {
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    background: #9147ff;
    text-decoration: none;
}

.twitch-btn:hover {
    color: #fff;
    background: #772ce8;
}

.number {
    width:95px;
    height:80px;
    display:inline-block;
    text-align:center;
    line-height:80px;
    font-size:24px;
    color:#fff;
    border-bottom:1px solid #fff;
    position:relative;
    -moz-transition:transform .4s ease-out;
    -o-transition:transform .4s ease-out;
    -webkit-transition:transform .4s ease-out;
    -ms-transition:transform .4s ease-out
}

.number.red {
    background: linear-gradient(to bottom,#ff7a7b 0%,#ff7a7b 40%,#ff5959 40%,#ff5959 40%,#ff5959 100%);
}

.number.lightBlack {
    background: linear-gradient(to bottom,#333333 0%,#333333 40%,#000000 40%,#000000 40%,#000000 100%);
}

.number.green {
    background: linear-gradient(to bottom,#3fe694 0%,#3fe696 40%,#0ee07b 40%,#0ee07b 40%,#0ee07b 100%);
}

.roll {
    margin: 10px -30px;
    background-color: #000;
    box-shadow: 0 0 15px 6px rgba(0,0,0,.5);
    padding: 2px;
    position: relative;
}

.roulette-container {
    margin:0 -40px;
    height:100px;
    overflow:hidden;
}

.roulette-container .roll .numbers .numbers-container {
    height: calc(100% - 26px)
}

.roulette-container {
    transform: translate3d(-500px, 0px, 0px);
    transition-timing-function: cubic-bezier(0.12, 0.8, 0.38, 1);
    transition-duration: 6.8s;
}