@import"https://fonts.googleapis.com/css2?family=Long+Cang&display=swap";body{height:100vh;font-family:Long Cang,cursive;background:#59afa5;margin:0}.container{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap-reverse;gap:10px;margin-bottom:60px;margin-top:40px;height:100%}.cassetteContainer h1{text-decoration:underline;text-decoration-color:#0f0909;text-decoration-thickness:3px}.trackList{background-color:#f9f6e9;width:80vw;max-width:700px;min-width:300px;padding:20px;border-radius:3px;box-shadow:-10px 10px 5px #397c73;margin-bottom:20px}.trackListTitle{display:flex;justify-content:space-between;align-items:center;border-bottom:rgb(210,123,123) 1px solid;height:40px}.trackList h2{font-size:32px;display:flex;justify-content:space-between;align-items:flex-end}.trackList h3{line-height:15px;padding-bottom:5px;border-bottom:rgb(211,203,203) 1px solid;font-size:22px}.cassetteContent{height:100%}.cassetteContainer{display:flex;justify-content:center;align-items:center;flex-direction:column}.cassette{text-align:center}.playOptions{display:flex;justify-content:center;align-items:center;width:50vw;gap:50px}p{font-size:2rem;font-weight:700;position:relative}h2{position:relative}img{width:36px;height:36px;background-color:none}.rectangle{box-shadow:-20px 20px 5px #397c73;width:85vw;max-width:450px;min-width:360px;height:280px;background:#1a1a1a;border-radius:1rem;display:flex;justify-content:center;z-index:-3;flex-wrap:wrap}.inner-rectangle{position:relative;display:flex;justify-content:flex-start;align-items:center;flex-direction:column;top:20px;width:90%;height:180px;background:#cebaa1;border-radius:10% 10% 5px 5px}.title{width:100%;height:28px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-right:0;border-left:0;line-height:0px;border-bottom:2px solid black}.title:nth-child(1){position:relative;padding-left:30px;display:flex;align-items:flex-start}.title p{font-size:24px}.title3{border-bottom:2px solid black;width:100%;max-height:60px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-right:0;border-left:0;line-height:10px;text-wrap:"break-word";word-wrap:break-word}.ribon-container{display:flex;align-items:center;justify-content:center;width:100%;height:80px;background:#a25b23}.box{display:flex;justify-content:space-evenly;align-items:center;position:relative;background:#272727;width:60%;border-radius:20px;border:2px solid #cebaa1;height:92%;max-height:250px}.cassette-body{position:relative;display:flex;justify-content:space-around;gap:100px;align-items:center;flex-direction:row;width:285px;border-bottom:50px solid #000000;border-left:25px solid transparent;border-right:25px solid transparent;height:20px;top:20px}.squares{position:relative;top:35px;height:15px;width:15px;border-radius:5px;border:3px solid rgb(249,246,233);background:#59afa5}.tape{position:relative;width:40%;height:35px;background:#59afa5;display:flex;justify-content:center;align-items:center;flex-direction:column}.window{position:absolute;width:100%;height:100%;overflow:hidden}.window:after{display:block;position:absolute;background:linear-gradient(transparent 13%,rgba(255,255,255,.4) 13%,rgba(255,255,255,.4) 24%,transparent 24%,transparent 34%,rgba(255,255,255,.4) 34%,rgba(255,255,255,.4) 50%,transparent 50%);content:"";width:100%;height:100%}.spool{position:absolute;height:46px;top:-6px;width:46px;background:#f9f6e9;border:1px solid rgb(249,246,233);border-radius:50%;box-shadow:0 0 0 1px #cfc9aee6,0 0 0 1px #cfc9aee6}.spool:after{content:"";display:block;padding-bottom:100%}.spool1{left:-50%;animation:spooling 60s linear infinite alternate-reverse}.spool2{right:-50%;animation:spooling 60s linear infinite alternate}.animation-playing{animation-play-state:running}.animation-paused{animation-play-state:paused}@keyframes spooling{0%{box-shadow:0 0 0 .5em #92918d,0 0 0 calc(.5em + 3px) #a8a492e6}to{box-shadow:0 0 0 2em #92918d,0 0 0 calc(2em + 3px) #a8a492e6}}.tape-wheel{position:relative;width:46px;height:46px;border-radius:50%;background:#f9f6e9;border:3px solid rgb(249,246,233)}.teethBox{position:relative;width:46px;height:46px;border-radius:50%}.small__circle{margin:0 auto;width:46px;height:46px;border-radius:50%;background-color:#59afa5}.block__cass{width:5px;height:5px;background-color:#f9f6e9;position:relative}.block1{left:21px}.block2{transform:rotate(50deg);left:38px;top:3px}.block3{transform:rotate(30deg);left:39px;top:20px}.block4{left:21px;top:27px}.block5{left:3px;top:-12px;transform:rotate(40deg)}.block6{left:3px;top:7px;transform:rotate(50deg)}.tape-ribbon{position:relative;width:40px;height:40px;background:#623d18;border-top-right-radius:50%;border-bottom-right-radius:50%;border:0px solid black;border-left:0}.tape-ribbon-two{position:relative;width:40px;height:40px;background:#623d18;border-top-left-radius:50%;border-bottom-left-radius:50%;border:1px solid black;border-right:0}.infoControlContainer{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:10px;height:250px}.nowPlaying{display:flex;justify-content:center;flex-direction:column;align-items:center;line-height:0px}.playOptions button{background:none;border:none}.playOptions img:hover{transform:scale(1.5);transition:.3s ease-in-out}.playing{animation:spin-teeth 2s linear infinite}.dog{position:relative;z-index:-1;bottom:-90px;animation:slideUp 20s ease-in-out infinite;animation-delay:20s}#reactPlayer{display:none;visibility:hidden}@keyframes spin-teeth{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide{0%{transform:translate(10px)}to{transform:translate(-5px)}}@keyframes slide2{0%{transform:translate(10px)}to{transform:translate(-5px)}}@keyframes slideUp{0%,to{transform:translateY(0)}50%{transform:translateY(-80px)}}