.audio-player { text-align: center; position: relative; display: inline-block; } .circle-container { position: relative; width: 200px; height: 200px; border-radius: 50%; background: #f0f0f0; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .audio-circle { position: absolute; width: 150px; height: 150px; background: #333; border-radius: 50%; opacity: 0.3; } audio { position: relative; z-index: 1; width: 90%; } .volume-control { width: 100px; margin-top: 20px; transform: rotate(90deg); -webkit-appearance: none; background: #ddd; height: 8px; border-radius: 5px; } .volume-control::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #333; cursor: pointer; } .volume-control::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #333; cursor: pointer; }