:root {
  --slide-width: 960px;
  --slide-ratio-9-16: calc(16 / 9);
  --slide-ratio-16-9: calc(16 / 9);
  --slide-ratio-10-16: calc(16 / 10);
  --slide-ratio: var(--slide-ratio-16-9);
  --slide-height: calc(var(--slide-width) / var(--slide-ratio));

  --slide-count: 2;
  --slide-gap: 40px;
  --slide-outline-width: 5px;
  --slide-outline-color-current: #d00;
  --slide-outline-color-fucus: #fff8;

  --add-bgc: #282828;
  --common-bgc: #222;
  --slide-bgc: #fff;
  --dark-color: #000;
  --light-color: #fff;

  --progress-height: 5px;
  --progress-foreground: #d00;
  --progress-background: transparent;
  --progress-opacity: .75;

  --animation-time: .3s;
  --animation-easing: linear;

  --teleprompter-font-size: 10vh;
  --teleprompter-line-height: 1.4;
}

@media (max-width: 480px) {
  :root {
    --slide-count: 1;
    --slide-gap: 16px;
  }
}

@media (min-width: 481px) and (max-width: 760px) {
  :root {
    --slide-count: 2;
    --slide-gap: 24px;
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  :root {
    --slide-count: 3;
    --slide-gap: 40px;
  }
}

@media (min-width: 961px) {
  :root {
    --slide-count: 4;
  }
}