:root {
  --bg: rgb(233, 233, 233);
  --fg: rgb(11, 11, 11);
  --pink: rgb(238, 96, 168);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
}

* {
  box-sizing: border-box;
}

div.test-vid {
  margin: 10%;
  width: 33%;
  height: auto;
  border: 1px none var(--pink);
  video {
    width: 100%;
    height: auto;
  }
  .video-js {
    color: var(--pink);
  }
  .video-js .vjs-big-play-button {
    background: rgba(238, 96, 168, 0.0);
    backdrop-filter: blur(2px);
    color: var(--pink);
    border: 1px none var(--pink);
    font-size: 4em;
    /* border-radius: 0; */
  }
  .video-js .vjs-control-bar {
    background: var(--pink);
    color: var(--fg);
  }
  .video-js .vjs-play-progress {
    background: var(--fg);
  }
  .video-js .vjs-load-progress div {
    background: rgba(11, 11, 11, 0.15);
  }
  .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
  .video-js.vjs-touch-enabled:not(.vjs-scrubbing)
    .vjs-progress-control
    .vjs-mouse-display {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
  }
}