:root{--primary-color: rgb(24, 24, 24);--primary-background-color: rgb(221, 221, 221);--secondary-color: rgb(75, 75, 75);--secondary-background-color: rgb(255, 255, 255);--highlight-color: #fd8924;--box-shadow-color: rgb(201, 201, 201);--disabled-button-color: rgb(175, 175, 175);--border-radius: 1rem}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%}html{font-size:62.5%}body{font-size:1.5rem;font-family:Arial,Helvetica,sans-serif;font-weight:400;color:var(--primary-color);background-color:var(--primary-background-color)}.container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--primary-background-color);padding:1rem}.audio-player{width:100%;max-width:100rem;display:flex;margin:2rem 1rem;background-color:var(--secondary-background-color);border-radius:var(--border-radius);box-shadow:.2rem .2rem 1rem .2rem var(--box-shadow-color)}.play-button{min-width:13rem;min-height:13rem;border:none;background-color:transparent;outline:none;cursor:pointer}.play-button-icon{width:35px}.player-body{width:100%;padding:1rem}.title{width:100%;font-weight:600}.waveform{width:100%;min-height:8rem;padding:.5rem 0}.controls{display:flex;justify-content:space-between}.timecode{color:var(--secondary-color)}.volume{display:flex;align-items:center}.volume-icon{cursor:pointer}.volume-slider{margin:0 1rem;cursor:pointer;width:100%;outline:none;-webkit-appearance:none;background:transparent}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;height:1.5rem;width:1.5rem;border:none;border-radius:50%;background:var(--highlight-color);margin-top:-.6rem}.volume-slider::-moz-range-thumb{-webkit-appearance:none;height:1.5rem;width:1.5rem;border:none;border-radius:50%;background:var(--highlight-color)}.volume-slider::-ms-thumb{-webkit-appearance:none;height:1.5rem;width:1.5rem;border:none;border-radius:50%;background:var(--highlight-color)}.volume-slider::-webkit-slider-runnable-track{width:100%;height:.25rem;background-color:var(--secondary-color);border-radius:var(--border-radius)}.volume-slider::-ms-track{background:transparent;border-color:transparent;color:transparent;width:100%;height:.25rem;background-color:var(--secondary-color);border-radius:var(--border-radius)}.volume-slider[disabled]{cursor:not-allowed}.volume-slider[disabled]::-webkit-slider-thumb{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-moz-range-thumb{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-ms-thumb{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-webkit-slider-runnable-track{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-ms-track{background-color:var(--disabled-button-color)}input[type=range]{border:1px solid white}input[type=range]::-moz-range-track{height:5px;background:#ddd;border:none;border-radius:3px}input[type=range]:-moz-focusring{outline:1px solid white;outline-offset:-1px}input[type=range]:focus::-moz-range-track{background:#ccc}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{width:300px;height:5px;background:#ddd;border:none;border-radius:3px}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-runnable-track{background:#ccc}input[type=range]::-ms-track{width:300px;height:5px;background:transparent;border-color:transparent;border-width:6px 0;color:transparent}input[type=range]::-ms-fill-lower{background:#777;border-radius:10px}input[type=range]::-ms-fill-upper{background:#ddd;border-radius:10px}input[type=range]:focus::-ms-fill-lower{background:#888}input[type=range]:focus::-ms-fill-upper{background:#ccc}