:root {
  --bg-color: #000000;
}

.reveal .slides section[data-transition="fade"],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides > section > section:not([data-transition]) {
  transition: opacity 2s !important;
}

.reveal.fade .backgrounds .slide-background {
  transition-duration: 2s !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--bg-color);
}

.reveal {
  background: var(--bg-color);
}

.reveal .slides section {
  background: var(--bg-color);
}

.image-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: var(--bg-color);
}

.image-slide .slide-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: var(--bg-color);
}

.image-slide.video-active img {
  display: none;
}

.image-slide.video-active .slide-video.active {
  display: block;
}