:root {
  display: block;
  position: relative;

  /* CSS property defaults */
  --scrolling-video-text-font-family: var(--sans);
  --scrolling-video-seondary-font-family: "Barlow Condensed", var(--sans, sans-serif);
  --scrolling-video-text-font-size: 18px;
  --scrolling-video-text-line-height: 1.5em;
  --scrolling-video-text-color: var(--white, white);
  --scrolling-video-text-background: #000000aa;
  --scrolling-video-text-border: none;
  --scrolling-video-text-max-width: 350px;
  --scrolling-video-text-alignment: start;
  --scrolling-video-text-radius: 0px;

  --scrolling-video-watermark-height: 30px;
  --scrolling-video-watermark-margin: 10px;
  --scrolling-video-watermark-bottom: 0px;
  --scrolling-video-watermark-right: 0px;

  --scrolling-video-object-fit: cover;
  --scrolling-video-object-position: center;

  --scrolling-video-safe-color: #B3C3FF;
  --scrolling-video-danger-color: #FF9C89;
}

scrolling-video div {
  color: var(--scrolling-video-text-color);
  margin: var(--page-padding, 15px);
  max-width: min(var(--scrolling-video-text-max-width), 100%);
  background: var(--scrolling-video-text-background);
  padding: 20px;
}
scrolling-video div p {
  font-family: var(--scrolling-video-text-font-family);
  font-size: var(--scrolling-video-text-font-size);
  line-height: var(--scrolling-video-text-line-height);
  border: var(--scrolling-video-text-border);
  justify-self: var(--scrolling-video-text-alignment);
  max-width: min(var(--scrolling-video-text-max-width), 100%);
  border-radius: var(--scrolling-video-text-radius);
  margin-bottom: 5px;
}

scrolling-video div .title {
  font-family: var(--scrolling-video-seondary-font-family);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 1.5px;
}

scrolling-video h2 {
  position: relative;
  margin-left: 16px;
  margin-top: 0px;
}

scrolling-video h2.title::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 55%;
  transform: translate(0, -50%);
  left: -16px;
  width: 6px;
  height: 32px;
}

scrolling-video h2.title.good::before {
  background: var(--scrolling-video-safe-color);
}

scrolling-video h2.title.risk::before {
  background: var(--scrolling-video-danger-color);
}


scrolling-video h3.subtitle {
  text-transform: none;
  margin: 0;
  font-size: 20px;
}


@media only screen and (max-width: 600px) {
  :root {
    --scrolling-video-watermark-height: 20px;
    --scrolling-video-text-max-width: 300px;
  }
}