/*******************************/
/* Construct slides for images */
/*******************************/

div#slides {
  align-items: center;
  background-color: rgba(var(--background), .75);
  display: none;
  height: 100vh;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 201; }



/*******************************/
/* Construct slides for images */
/*******************************/

div#slides>.slides>.slide {
  align-items: center;
  display: flex;
  height: 100%;
  left: 100%;
  justify-content: center;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 300ms ease-in-out;
  width: 100%; }

div#slides>.slides>.slide.active {
  left: 0;
  opacity: 1; }



/*******************************/
/* Construct slides for images */
/*******************************/

div#slides>.slides>.slide>img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; }



/*******************************/
/* Construct slides for images */
/*******************************/

div#slides>.back,
 div#slides>.next,
 div#slides>.exit {
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 8rem;
  color: rgba(var(--foreground), 1);
  cursor: pointer;
  font-size: 6rem;
  font-weight: bold;
  height: 8rem;
  position: fixed;
  text-align: center;
  padding-bottom: 1rem;
  transition: all 300ms ease-in-out;
  user-select: none;
  width: 8rem;
  z-index: 202; }


div#slides>.back {
  background-color: rgba(var(--color-pink-dark), .75);
  background-image: url('../images/back.svg');
  left: 1rem;
  top: calc(50% - .5rem); }

div#slides>.next {
  background-color: rgba(var(--color-pink-dark), .75);
  background-image: url('../images/next.svg');
  right: 1rem;
  top: calc(50% - .5rem); }

div#slides>.exit {
  background-color: rgba(var(--color-blue-dark), .75);
  background-image: url('../images/exit.svg');
  left: 1rem;
  top: 1rem; }


div#slides>.back:hover,
 div#slides>.next:hover {
  background-color: rgba(var(--color-pink-dark), .85); }

div#slides>.exit:hover {
  background-color: rgba(var(--color-blue-dark), .85); }