/* 'https://ribo.zone/free/snippets/#photopile' + edits. copy the code from the original if you want it */

.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  position: relative;
  left: 120px;
}
.photopile figure { 
  display: inline-block;
  background: var(--black);
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
  border: solid 1px var(--side);
}
.photopile figure:hover {
  cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym731.cur), auto;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 10px;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 15%;
}
.photopile button:hover, .photopile button:focus { 
  z-index: 3;
  cursor:pointer;
}
.photopile button:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}

:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  position: fixed;
  overflow-x: hidden;
  border: 1px solid var(--side);
  filter: sepia(0.2);
}
.popovers figure:popover-open {
  display: block;
  background: var(--black);
  width: 88vmin;
  height: 88vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 0 1rem;
  font-size: 100%;
  color: var(--white);
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  width: 80vmin;
  border: 4px rgb(0,0,0,0.55) inset;
  overflow-y: scroll;
}
.popovers figcaption {
  font-family: typewriter;
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 0.8rem;
}
figcaption > hr {
  right: 0;
}