@font-face {
  font-family: "Century Gothic";
  src: url("CenturyGothic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

:root {
  --accent-color: #001437;
  --video-bg: #001437;
  --video-border: none;
}

body {
  color: #ffffff;
  background-color: var(--accent-color);
}

.video-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh; /* fallback */
  height: 100dvh;
}

#video-player {
  aspect-ratio: 9 / 16;
  border-radius: 0;
  width: auto;
  height: auto;
  max-height: 100%;
}

.vds-video-layout {
  --video-brand: #b01731;
  --video-controls-color: #ffffff;
  --video-focus-ring-color: #8ea5c6;
  --video-focus-ring: 0 0 0 2px var(--media-focus-ring-color);
  --video-font-family: "Century Gothic", sans-serif;
  --video-border-radius: 6px;

  --video-fullscreen-chapter-title-font-size: 16px;
  --video-gesture-seek-width: 20%;

  /* Load. */
  --video-load-button-size: 56px;
  --video-load-button-border: var(--color);
  --video-load-button-bg: var(--media-brand);
  --video-load-button-border-radius: 100%;

  --video-sm-load-button-size: 48px;

  /* Buttons. */
  --video-sm-button-size: 32px;
  --video-sm-play-button-size: 40px;
  --video-sm-play-button-transform: translateY(25%);
  --video-sm-play-button-bg: rgba(0 20 55 / 1);

  /* Sliders. */
  --video-slider-thumbnail-border: 1px solid #f5f5f5;
  --video-slider-thumbnail-border-radius: 2px;
  --video-volume-slider-max-width: 72px;

  --video-sm-slider-focus-track-height: 12px;

  /* Time. */
  --video-time-bg: unset;
  --video-fullscreen-time-font-size: 16px;

  --video-sm-time-font-size: 14px;
  --video-sm-start-duration-bg: rgba(0 0 0 / 0.64);
  --video-sm-start-duration-padding: 3px 6px;
  --video-sm-start-duration-color: var(--video: controls-color);

  /* Captions. */
  --video-captions-offset: 78px;
  --video-captions-transition: bottom 0.15s linear;

  --video-sm-captions-offset: 48px;
  --video-lg-fullscreen-captions-offset: 54px;

  --video-sm-captions-offset: 48px;
}
:where(.vds-slider .vds-slider-track-fill) {
  z-index: 2;
  background-color: #00c1de;
  width: var(--slider-fill, 0%);
  will-change: width;
}