:root {
  --sildeshowControlsColor: #b6b6b6; 
  --slideshowBarColor: rgba(25, 25, 25, 1);
  --slideBackgroundColor: rgba(20, 20, 20, 1);
  --slideBorderColor: #606060;
  --slideSelectorGap: 5px;
  --closeButtonSize: 2rem;
  --loadingCircleSize: 3rem;
  --thumbnailSize: clamp(100px, 80px + 2vw, 200px);
  --slideshowFontSize: clamp(1rem, .8rem + 1vw, 2rem);
  
  --amountToMove: calc(var(--slideSelectorGap) + var(--thumbnailSize));
}

#slideshowWindow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 99;
  display: none;
  background-color: #000;
  overflow: auto;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .1s, transform .1s;
  grid-template-rows: auto 1fr auto;
}

#slideshowCloseButtonContainer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background-color: var(--slideshowBarColor);
  box-sizing: border-box;
  padding: 3px;
}

#slideshowCloseButtonContainer button {
  margin: 0 10px 0 0;
  padding: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  color: var(--sildeshowControlsColor);
  height: var(--closeButtonSize);
  width: var(--closeButtonSize);
  font-size: var(--closeButtonSize);
  cursor: pointer;
  transition: filter 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

#slideshowCloseButtonContainer button:hover {
  filter: brightness(1.5);
}

#slideshowCloseButtonContainer button:active {
  filter: brightness(2);
}

#slideshowCloseButtonContainer button:focus-visible {
  outline: var(--focusStyle);
  filter: brightness(1.5);
}

#slideContainer {
  width: 100%;
  flex: 1;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
  position: relative;
  min-height: calc(var(--loadingCircleSize) + 20px);
  border-top: var(--slideBorderColor) solid 2px;
  border-bottom: var(--slideBorderColor) solid 2px;
}

#slideSelectorContainer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  min-width: var(--minWebsiteSize);
  width: 100%;
  height: fit-content;
  background-color: var(--slideshowBarColor);
  align-items: center;
  box-sizing: border-box;
}

.windowDisplayed {
  display: grid !important;
}

.windowVisuals {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.fullBodyNoScroll {
  overflow: hidden;
}