.gradient-background{
    background: linear-gradient( #23a6d5, #23d5ab);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.turntable{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 300px;
    background: #ebebeb;
    border-radius: 10%;
}

.disc{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 230px;
    height: 230px;
    background: #2d3e4f;
    border-radius: 50%;
}

.disc:after{
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #ebebeb;
    border: solid 2px #db3a3a;
}

.label{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background: #ffd166;
}

.label:before,
.label:after{
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
}

.label:before{
    width: 70px;
    height: 70px;
    background: #ffd166;
    border: solid 1px #ff4d80;
}

.label:after{
    width: 65px;
    height: 32.5px;
    bottom: 32.5px;
    background: #ff4d80;
    border-radius: 32.5px 32.5px 0 0;
}

.disc-font{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 0.8em;
    text-align: center;
    z-index: 10;
    position: absolute;
    color: #331832;
}

.disc-title{
    margin: 20px;   
}

.disc-group{
    top: 50px;
    left: 10px;
    width: 60px;
}

.buttons{
    position: absolute;
    margin: auto;
    top: 250px;
    left: 230px;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #fecb2f;
    border-radius: 50%;
}

.buttons:before,
.buttons:after{
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.buttons:before{
    background: #ff4b3e;
    left: 20px;
}

.buttons:after{
    background: #ff784f;
    left: 40px;
}

.tone-arm{
    position: absolute;
    margin: auto;
    top: 0;
    left: 255px;
    bottom: 220px;
    right: 0;
    width: 20px;
    height: 40px;
    background: #b7b6b6;
    border-radius: 10%;
    transform: rotate(20deg);
}

.tone-arm:before,
.tone-arm:after{
    content: "";
    position: absolute;
    margin: auto;
    background: #b7b6b6;
}

.tone-arm::before{
    left: 0;
    right: 1px;
    top: 40px;
    width: 7px;
    height: 120px;
}

.tone-arm:after{
    left: -2px;
    right: 0;
    bottom: 0;
    top: 300px;
    width: 20px;
    height: 30px;
    border-radius: 20%;
}

.disc-reflection-left, .disc-reflection-right{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
}

.disc-reflection-left{
    background: #36495d;
    clip-path: polygon(50% 50%, 0 75%, 10% 100%);
}
.disc-reflection-right{
    background: #36495d;
    clip-path: polygon(90% 0, 50% 50%, 100% 25%);
}

.disc-groove{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    border: solid 2px #2d3e4f;
}

.disc-groove:before,
.disc-groove:after{
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 50%;
    border: solid 2px #2d3e4f;
}

.disc-groove:before{
    content: "";
    width: 180px;
    height: 180px;
}

.disc-groove:after{
    content: "";
    width: 160px;
    height: 160px;
}

.spin{
    animation: spin 4s linear infinite;
}

.oscillating{
    animation: oscillating 2s linear infinite;
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@keyframes oscillating {
    0%{transform: rotate(20deg);}
    30%{transform: rotate(20.5deg);}
    60%{transform: rotate(20deg);}
    90%{transform: rotate(20.5deg);}
    100%{transform: rotate(20deg);}
}