span {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
}


#lets-roll {
    animation: breathe 3s linear infinite;
}

@keyframes breathe {
    0% {
        transform: scale(1.02, 1.02);
    }
    50% {
        transform: scale(.98, .98);
    }
    100% {
        transform: scale(1.02, 1.02);
    }
}

#dice {
    position: relative;
    animation: rotatedemdice 3s linear infinite;
}

@keyframes rotatedemdice {
    100% {
        transform: rotate(-360deg);
    }
}

#winner {
    position: relative;
    height: 50%;
    width: 50%;
    animation: rotate 3s linear infinite;
}

#winner:before {
    content: '';
    position: absolute;
    height: 25%;
    width: 25%;
    background: blue;
    animation: rotate 3s linear reverse infinite;
}

@keyframes rotate {
    0% {
        transform: scale(1.2, 1.2);
    }
    50% {
        transform: scale(.8, .8);
    }
    100% {
        transform: scale(1.2, 1.2);
    }
}

div {
    margin-top: -17%;
    height: 34%;
    width: 2%;
    top: 30%;
    border-radius: 20px;
    position: absolute;
}

div:nth-of-type(1) {
    animation: wave 17s 0.000s linear infinite;
}

div:nth-of-type(2) {
    animation: wave 17s -16.227s linear infinite;
}

div:nth-of-type(3) {
    animation: wave 17s -15.455s linear infinite;
}

div:nth-of-type(4) {
    animation: wave 17s -14.682s linear infinite;
}

div:nth-of-type(5) {
    animation: wave 17s -13.909s linear infinite;
}

div:nth-of-type(6) {
    animation: wave 17s -13.136s linear infinite;
}

div:nth-of-type(7) {
    animation: wave 17s -12.364s linear infinite;
}

div:nth-of-type(8) {
    animation: wave 17s -11.591s linear infinite;
}

div:nth-of-type(9) {
    animation: wave 17s -10.818s linear infinite;
}

div:nth-of-type(10) {
    animation: wave 17s -10.045s linear infinite;
}

div:nth-of-type(11) {
    animation: wave 17s -9.273s linear infinite;
}

div:nth-of-type(12) {
    animation: wave 17s -8.500s linear infinite;
}

div:nth-of-type(13) {
    animation: wave 17s -7.727s linear infinite;
}

div:nth-of-type(14) {
    animation: wave 17s -6.955s linear infinite;
}

div:nth-of-type(15) {
    animation: wave 17s -6.182s linear infinite;
}

div:nth-of-type(16) {
    animation: wave 17s -5.409s linear infinite;
}

div:nth-of-type(17) {
    animation: wave 17s -4.636s linear infinite;
}

div:nth-of-type(18) {
    animation: wave 17s -3.864s linear infinite;
}

div:nth-of-type(19) {
    animation: wave 17s -3.091s linear infinite;
}

div:nth-of-type(20) {
    animation: wave 17s -2.318s linear infinite;
}

div:nth-of-type(21) {
    animation: wave 17s -1.545s linear infinite;
}

div:nth-of-type(22) {
    animation: wave 17s -0.773s linear infinite;
}

@keyframes wave {
    0% {
        left: -2%;
        background: #3B44D1;
    }
    5% {
        background: #9337FE;
    }
    10% {
        height: 10%;
        margin-top: -5%;
        background: #C532FC;
    }
    15% {
        background: #F639F8;
    }
    20% {
        height: 34%;
        margin-top: -17%;
        background: #F236C8;
    }
    25% {
        background: #FF2F8D;
    }
    30% {
        height: 10%;
        margin-top: -5%;
        background: #EE3860;
    }
    35% {
        background: #DC5245;
    }
    40% {
        height: 34%;
        margin-top: -17%;
        background: #F38643;
    }
    45% {
        background: #F8B435;
    }
    50% {
        height: 10%;
        margin-top: -5%;
        background: #FAF444;
    }
    55% {
        background: #E0FF3B;
    }
    60% {
        height: 34%;
        margin-top: -17%;
        background: #E1FF3C;
    }
    65% {
        background: #46F443;
    }
    70% {
        height: 10%;
        margin-top: -5%;
        background: #54E67B;
    }
    75% {
        background: #4DF3A9;
    }
    80% {
        height: 34%;
        margin-top: -17%;
        background: #3AF9DA;
    }
    85% {
        background: #36EBF4;
    }
    90% {
        height: 10%;
        margin-top: -5%;
        background: #3DB3F3;
    }
    95% {
        background: #3C82F1;
    }
    100% {
        height: 34%;
        margin-top: -17%;
        left: 100%;
        background: #5B38EE;
    }
}