media-controller{--media-primary-color:hsl(203 100% 12%);--media-secondary-color:hsl(170 100% 32%);--media-control-hover-background:hsl(170 90% 42%);--media-icon-color:hsl(222.2 84% 4.9%);--media-text-color:hsl(222.2 84% 4.9%);--media-range-thumb-background:hsl(222.2 84% 4.9%);--media-range-bar-color:hsl(222.2 84% 4.9%);--media-control-background:hsl(210 40% 96.08%);--media-preview-background:hsl(170 100% 32%);--media-play-button-size:44px;background:transparent;width:100%}media-control-bar{width:100%;display:flex;justify-items:center;align-items:center;gap:10px}media-play-button{background-color:hsl(170 100% 32%);border-radius:17%;max-width:var(--media-play-button-size);max-height:var(--media-play-button-size);min-width:var(--media-play-button-size);min-height:var(--media-play-button-size)}media-play-button,media-play-button svg{width:100%;height:100%}media-time-display{background:transparent;font-size:12px}media-time-display,media-time-display:hover,media-volume-range{color:hsl(215.4 16.3% 46.9%)}media-volume-range #track{background:red;color:red;width:100%}media-time-range{color:hsl(215.4 16.3% 46.9%);width:100%;background-color:hsl(210 40% 96.08%)}media-mute-range,media-volume-range{background:transparent;margin:0 10px;width:-moz-fit-content;width:fit-content}media-volume-range{width:100%}media-playback-rate-button{background:transparent;color:hsl(222.2 47.4% 11.2%)}