@import"https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap";:root{--border: 9px}*{text-align:center;box-sizing:border-box}.cassette-player{background-color:#add8e6;max-width:575px;margin:50px auto 0;padding:50px;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border:black solid 4px;zoom:.8}#audioPlayer{width:100%;margin-top:50px}#audioPlayer .btn{height:100%;width:100%;background-color:#000;color:#efefef;border-radius:10px}.footer{padding:15px;text-align:center;position:fixed;bottom:0;left:0;right:0;color:#000}.cassette{background-color:#000;height:300px;width:100%;border-radius:25px;padding:25px}.label-container{border-radius:15px;height:75%}.white{background-color:#fff;height:30%;padding-top:25px}.tape-container{height:50%;display:flex;flex-direction:row;background-color:#fff}.white-space{background-color:#fff;height:100%;flex:1}.wheel-container{display:flex;align-items:center;justify-content:space-around;flex:6;border:white 5px solid;border-radius:500px;background-color:#000}.wheel{width:60px;height:60px;background-color:#000;border-radius:50%}.wheel-2{transform:rotate(90deg)}.wheel-overlap{width:100%;height:100%;border-radius:50%;position:relative}.inner-circle{top:5px;left:5px;position:absolute;width:50px;height:50px;border-radius:50%;background-color:#bebebe}.bar{position:absolute;height:60px;margin:0 auto 0 28px;width:4px;background-color:#bebebe;z-index:10}.wheel-overlap .bar:nth-child(2){transform:rotate(60deg)}.wheel-overlap .bar:nth-child(3){transform:rotate(90deg)}.wheel-overlap .bar:nth-child(4){transform:rotate(120deg)}.wheel-overlap .bar:nth-child(5){transform:rotate(150deg)}.wheel-overlap .bar:nth-child(6){transform:rotate(180deg)}.wheel-overlap .bar:nth-child(7){transform:rotate(210deg)}.red{background-color:red;height:20%;border-radius:0 0 20px 20px}.white{display:flex;flex-direction:row}.label{text-align:center;font-family:Reenie Beanie,cursive;font-size:1.5rem;flex:6;text-decoration:underline;color:#000}.trapazoid{border-bottom:20px solid white;border-left:25px solid transparent;border-right:25px solid transparent;height:0;width:100%}.spin1{animation:rotate 2.5s linear infinite}.spin2{animation:rotate2 2.5s linear infinite}.spinReverse1{animation:reverse 2.5s linear infinite}.spinReverse2{animation:reverse2 2.5s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes rotate2{to{transform:rotate(450deg)}}@keyframes reverse{to{transform:rotate(-360deg)}}@keyframes reverse2{to{transform:rotate(-450deg)}}.row{display:flex;flex-direction:row}.col-xs-3{flex:1;padding:1em;height:5em}.label-title{font-family:Reenie Beanie,cursive;font-size:1.5rem;float:right;margin-top:.3em;margin-right:2em;color:#000}@media only screen and (max-width: 500px){.cassette-player{padding-left:5px;padding-right:5px}}