:root {
	--bg: #262626;
	--fg: #ffbf00;

	--white: #ffffff;
	--black: #262626;
	--grey: #626262;
	--yellow: #ffff87;
	--red: #ff5f5f;
	--pink: #ffafff;
	--cyan: #afffff;
	--blue: #5fafff;
	--green: #afffaf;
	--purple: #af87ff;

	--darken: brightness(90%);
}
/* LAYOUT */

* {
  font-family: Helvetica, sans-serif;
  color: var(--fg);
  line-height: 1.5;
}
body {
	color: var(--fg);
	background: var(--bg);
}
.swiper {
	width: 95vw;
	max-width: 95vw;
	height: 95vh;
	max-height: 95vh;
}

.swiper-button-prev,
.swiper-button-next {
	top: 90%;
  color: var(--green);
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > video,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 95vw;
  max-height: 49vh;
  object-fit: contain;
}

.gallery {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 150px;
	column-gap: 0.5rem;
	row-gap: 0.5rem;
}

.thumb {
	max-width: 258px;
	max-height: 150px;
	padding: 0.5rem;
}

.modal {
	position: fixed;
	z-index: 50;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--bg);
}

.toolbar {
	background: transparent; 
	position: absolute; 
	right: 0; 
	top: 0; 
	z-index: 100;
}

.toolbutton {
	/*padding: 0 0.5rem;*/
	/*height: 1.5rem;*/
	background: transparent; 
	font-family: mono;
}

.container {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
}

@media only screen and (min-width: 45em) {  /* 720px */
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 60em) { /* 960px */
  .gallery { grid-template-columns: repeat(3, 1fr); }
}