#slider {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 9px;
}

#categories {
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  width: 180px;
  vertical-align: top;

  & .category {
    display: inline-block;
    cursor: pointer;
    padding: 1px 0;
    width: 50%;
    list-style: none;
    vertical-align: middle;
    font-size: 14px;

    &:hover,
    &.currentcat {
      color: #159;

      @media (prefers-color-scheme: dark) {
        color: #4af;
      }
    }
  }
}

#thumbnails {
  display: inline-block;
  flex-basis: 260px;
  flex-grow: 1;

  & .slide {
    display: none;
    opacity: 0;
    transition: opacity 0.7s;
    margin: 0 auto;
    padding: 4px 0;
    width: 97%;

    &.currentslide {
      display: flex;
      flex-wrap: wrap;
    }

    &.currentreveal {
      opacity: 1;
    }
  }

  & .thumbnail {
    display: block;
    position: relative;
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    width: 90px;
    height: 60px;
    margin: 1px;
  }

  & .currentmovie,
  & .thumbnail:hover {
    opacity: 0.5;
  }

  & [data-tip] {
    position: relative;

    &::before {
      font-size: 13px;
      line-height: 17px;
      font-variant-numeric: tabular-nums;
      border-radius: 3px;
      padding: 4px 8px;
      top: 110%;
      white-space: pre;
    }

    &:hover::before {
       display: block;
    }
  }
}

video,
audio {
  display: block;
}

#poster {
  cursor: pointer;
  width: 100%;

  &.showing {
    opacity: 1;
  }

  &.hidden {
    display: none;
  }
}

#status {
  position: absolute;
  z-index: 2;
  margin: 20% 0;
  width: 100%;
  text-align: center;
  color: black;
  font-size: 900%;

  @media (prefers-color-scheme: dark) {
    color: #eee;
  }

  &.showing {
    opacity: 0.8;
    z-index: 1;
  }

  &.hidden {
    display: none;
    opacity: 0;
    z-index: -1;
  }
}

#movie {
  display: inline-block;
  position: relative;
  margin-top: 5px;
  background-color: transparent;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#player {
  margin: 0;
  width: 100%;
  max-height: 100vh;
  max-height: calc(100vh - 25px);
}