.video-background-controls button {
  font-size: 32px;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  height: 32px;
  width: 32px;
  border-radius: 16px;
  line-height: 32px;
  border: none;
  background: none;
  appearance: none;
  color: white;
  filter: drop-shadow(0px 0px 1px black);
  cursor: pointer;
  opacity: 1;
  transition: all 250ms ease-in-out;
  margin-left: 10px; }
  .video-background-controls button:hover {
    opacity: 0.5; }

:root {
  --seek-bar-thumb-color: #fff;
  --seek-bar-progress-background: #fff;
  --seek-bar-background: rgba(255, 255, 255, 0.4); }

.seek-bar-wrapper {
  height: 6px;
  background: var(--seek-bar-background);
  position: relative; }
  .seek-bar-wrapper .seek-bar-progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    background: transparent !important;
    border: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; }
    .seek-bar-wrapper .seek-bar-progress::-webkit-progress-bar {
      background: transparent; }
    .seek-bar-wrapper .seek-bar-progress::-webkit-progress-value {
      background: var(--seek-bar-progress-background); }
    .seek-bar-wrapper .seek-bar-progress::-moz-progress-bar {
      background: var(--seek-bar-progress-background); }
  .seek-bar-wrapper .seek-bar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    top: calc(50% - 10px);
    z-index: 1;
    display: block;
    width: 100%;
    height: 20px;
    margin: 0;
    cursor: pointer;
    background: transparent; }
    .seek-bar-wrapper .seek-bar::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      appearance: none;
      height: 6px;
      cursor: pointer;
      background: transparent;
      border: 0;
      border-radius: 0; }
    .seek-bar-wrapper .seek-bar::-moz-range-track {
      -moz-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      cursor: pointer;
      background: transparent;
      border: 0;
      border-radius: 0; }
    .seek-bar-wrapper .seek-bar::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      margin-top: 3px;
      cursor: pointer;
      background: var(--seek-bar-thumb-color);
      border: 0;
      border-radius: 8px;
      transform: translateY(-50%);
      transition: opacity 0.4s ease-in-out; }
    .seek-bar-wrapper .seek-bar::-moz-range-progress {
      margin-top: 0;
      background: transparent;
      border: 0; }
    .seek-bar-wrapper .seek-bar::-moz-range-thumb {
      -moz-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      margin-top: 0;
      cursor: pointer;
      background: var(--seek-bar-thumb-color);
      border: 0;
      border-radius: 8px;
      transition: opacity 0.4s ease-in-out; }
  .seek-bar-wrapper ::-webkit-slider-thumb {
    opacity: 0; }
  .seek-bar-wrapper ::-moz-range-thumb {
    opacity: 0; }
  .seek-bar-wrapper:hover .seek-bar:not([disabled])::-webkit-slider-thumb {
    opacity: 1; }
  .seek-bar-wrapper:hover .seek-bar:not([disabled])::-moz-range-thumb {
    opacity: 1; }