/*!
 * Styling for Flickity v1.0.0 for the webcomics galleries on mangastudies.com/lostinscanlation
 * See the Flicity site for full documentation and styling
 * http://flickity.metafizzy.co
 */

:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body { 
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: #212529;
  background-color: #fff;
}

h1, .h1 {
  margin:0.5em;
}

.LISlink img {
  vertical-align:super;
  position:absolute;
  top:0.5em;
  right:0.5em;
  z-index: 1000;
}

/* gallery backdrop */
.gallery {
  background: #F0F0F0;
  padding-bottom: 3rem;
}

/* panel size and number */
.comic-panel {
  margin-top:1rem;
  width:100%;
  text-align:center;
  counter-increment: comic-panel;
}
.comic-panel:after {
  display: block;
  text-align: center;
  content: " p."counter(comic-panel);
  line-height: 1em;
  font-size: 1em;
  color: #808080;
  margin: 0.5em 0;
}
.comic-panel img {
  max-height: 75vh;
  overflow: auto;
  width:auto;
  vertical-align:middle;
}

/* navigation dots position */
.flickity-page-dots {
  bottom: 1rem;
}

/* navigation dots appearance */
.flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid #99CCCC;
}

/* selected dot appearance */
.flickity-page-dots .dot.is-selected {
  background: #99CCCC;
}

/* colour next&back arrows */
.flickity-prev-next-button .arrow {
  fill: #FFFFFF;
}
.flickity-prev-next-button {
  background: #99CCCC;
}

/* hover colour for arrows and dots */
.flickity-prev-next-button:hover {
  background: #808080;
}
.flickity-page-dots .dot:hover {
  border: 2px solid #808080;
}
.flickity-page-dots .dot.is-selected:hover {
  background: #808080;
}