/**
 * Author: Vera Konigin
 * Site: https://groundedwren.neocities.org
 * Contact: vera@groundedwren.com
 * 
 * File Description: Styles for the comic gallery demo.
 * CSS variables come from https://groundedwren.neocities.org/styles/gwBoilerPlatePersonalization.css
 */

#comicContainer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  justify-items: center;
  align-items: center;
}

#comicFigure {
  max-width: calc(100% - 70px); /* 70px is the width of both nav buttons */
  overflow-x: auto;
}

#comicImg {
  max-width: calc(100% - 6px); /* 6px for the border */
  min-width: 350px; /* This is the smallest size the image will be before we start a horizontal scroll instead. You can change this value to whatever. */
  border-color: black; /* Default color */
  border: 3px solid var(--border-color); /* You may replace var(--border-color) with whatever color your want */
}

#comicPageNum {
  float: right;
  margin-left: 2px;
}

#comicContainer figure {
 text-align: center; 
}

.nav-button {
  width: 35px;
}