html,
body {
  margin: 0;
  background: linear-gradient(#3a4350, #2b333f);
  height: 100%;
  font-family: "Lucida Grande", arial, sans-serif;
}
#videoContainer {
  height: 100%;
  display: grid;
  place-content: center;
}
.video-js {
  width: 640px;
  height: 360px;
  max-width: 100vw;
}
.fullpage {
  height: 100% !important;
  width: 100% !important;
}
#videoContainer:not(:has(*))::before {
  content: "The video is playing in Picture-in-Picture.";
  color: #39e75f;
  line-height: 360px;
  text-align: center;
}
#videoContainer::after {
  content: "© copyright Blender Foundation | www.sintel.org";
  color: #cdcdcd;
  text-align: center;
  margin-top: 18px;
}
/* https://issues.chromium.org/issues/41493667 */
@media all and (display-mode: picture-in-picture) {
  body {
    background: rgb(32, 33, 36);
  }
}