/* Use the border-box model for everything. */
html {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
img {  /* except images */
	box-sizing: content-box;
}

/* css variables */
:root {
	--color-aside: #a0a0a0;
	--image-max-edge-long: 640px;
	--image-max-edge-short: 320px;
	--image-max-edge-thumb: 160px;
}

/* switch between inline and stacking for page heading */
@media (width > 640px) {
	hgroup>p { font-style: italic; }
	hgroup>* { display: inline; }
}
@media (width <= 640px) {
	hgroup>h1 { margin-bottom: 0px; }
	hgroup>p { margin-top: 0px; }
}

/* primary content container sets up grid */
.primary-container {
	margin: 0px;
	margin-top: 1lh;
	padding: 0px;
}

.primary-container>ul,
 {
	display: grid;
	grid-template-columns: subgrid;
}

@media (width > 640px) {
	.primary-container {
		display: grid;
		grid-template-columns: 1fr 3fr 2fr;
	}
}

/* primary content, always place in "central" column */
.primary,
.primary-container>* {
	grid-column: 2;
	margin: 0;
}

/* secondary content, placed to the side when there is enough room */
.secondary {
	grid-column: 3;
	margin: 0;
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	border-left: 4px solid var(--color-aside);
	font-style: italic;
	color: var(--color-aside);
	max-height: 100%;
	margin-top: auto;
	margin-bottom: auto;
}

.secondary>*:first-child {
	margin-top: 0;
}

.secondary>*:last-child {
	margin-bottom: 0;
}

.secondary>* {
	margin-top: 0.5lh;
	margin-bottom: 0.5lh;
	padding: 0;
}

/* Sections */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
	padding-top: 0.5lh;
}

/* article text */
article>* {
	padding-top: 0.5lh;
	padding-bottom: 0.5lh;
}
article>p {
	text-indent: 1.5em each-line;
}

article>*:first-child {
	margin-top: 0;
}

article>*:last-child {
	margin-bottom: 0;
}

dt { font-weight: bold; }
dt>span { font-weight: normal; }
dd { font-style: italic; }

/* Images */
img {
	/* constrain max edge of all images to long edge value by default */
	max-width: var(--image-max-edge-long);
	max-height: var(--image-max-edge-long);
}
img.portrait {
	max-width: var(--image-max-edge-short);
	max-height: var(--image-max-edge-long);
}
img.landscape {
	max-width: var(--image-max-edge-long);
	max-height: var(--image-max-edge-short);
}
img.thumbnail{
	max-width: var(--image-max-edge-thumb);
	max-height: var(--image-max-edge-thumb);
}
img.hero{
	width: 100%;
}
img.pixel {
	image-rendering: pixelated;
}

/* Contact form */
.contact-form {
	margin-top: 0.5lh;
	grid-column: 2 / 3;
	display: grid;
	row-gap: 1lh;
	column-gap: 1ch;
	grid-template-columns: auto 1fr;
	grid-template-rows: minmax(1lh, auto);
}
.contact-form label {
	grid-column: 1 / 2;
}
.contact-form input,
.contact-form textarea,
.contact-form button
{
	grid-column: 2 / 3;
}
.contact-form textarea
{
	height: 4lh;
}

/* Trade offer meme in table format */
.trade-offer {
	width: 100%;
	text-align: center;
}

.line-through {
	text-decoration: line-through;
}

/* Image Gallery
https://paulsenon.github.io/poc-js-free-image-gallery-carousel/
 */
.gallery .gallery-container {
	position: relative;
	width: 100%;
	height: 0px;
	padding-bottom: 56.7%; /* 16/9 ratio */
	background-color: grey;
}
.gallery .gallery-container .gallery-content {
	position: absolute;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	height: 100%;
	display: flex;

	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	scroll-behavior: smooth;
}
.gallery .gallery-container .gallery-content .gallery-item {
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
}
.gallery .gallery-container .gallery-content .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
	background-color: white;
}
.click-zone {
	position: absolute;
	width: 20%;
	height: 100%;
	z-index: 3;
}
.click-zone.click-zone-prev { left: 0px; }
.click-zone.click-zone-next { right: 0px; }
.gallery:not(:hover) .arrow {
	opacity: 0;
}
.arrow {
	text-align: center;
	z-index: 3;
	position: absolute;
	display: block;
	width: 32px;
	height: 32px;
	background-color: white;
	border-radius: 50%;
	text-decoration: none;
	color: black;
	opacity: 0.5;
	transition: opacity 200ms ease;
}
.arrow:hover {
	opacity: .8;
}
.arrow span {
	position: relative;
	top: 6px;
}
.arrow.arrow-prev {
	top: 50%;
	left: 5px;
}
.arrow.arrow-next {
	top: 50%;
	right: 5px;
}
.arrow.arrow-disabled {
	opacity: 0.1;
}

.gallery:not(:hover) .gallery-controls {
	opacity: 0;
}
.gallery .gallery-container .gallery-controls {
  display: flex;
  width: 100%;
  justify-content: center;
  z-index: 4;
  position: absolute;
  right: 0;
  bottom: 1em;
  left: 0;
  text-align: center;
}
.gallery .gallery-container .gallery-controls .controls-dot {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  outline: none;
  background-color: #fff;
  opacity: .3;
  cursor: pointer;
  transition: opacity 200ms ease;
  border: 1px solid black;
}
.controls-dot:not(:first-child) {
	margin-left: 0.25em;
}
.gallery .gallery-container .gallery-controls .controls-dot:hover {
	opacity: 0.8;
}

.gallery:not(:hover) .gallery-container #toggleFullscreenVisual {
	opacity: 0;
}

.gallery .gallery-container #toggleFullscreenVisual {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 10px;
	right: 10px;

	cursor: pointer;
	z-index: 4;
	background-color: white;
	opacity: 0.3;
	transition: opacity 200ms ease;
}
.gallery .gallery-container #toggleFullscreenVisual:hover {
	opacity: 0.8;
}
#toggleFullscreen {
	display: none;
}
#toggleFullscreen:checked ~ main {
	height: 100vh;
	overflow: hidden;
}
#toggleFullscreen:checked ~ main .gallery .gallery-container {
	position: absolute;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	height: 100%;
	padding-bottom: 0px;
}
#toggleFullscreen:checked ~ main .gallery
#toggleFullscreenVisual {
	opacity: .6;
	background-color: grey;
	position: fixed;
}
#toggleFullscreen:checked ~ main .gallery .gallery-controls {
	position: fixed;
}
#toggleFullscreen:checked ~ main .gallery .gallery-controls
.controls-dot {
	opacity: .6;
	background-color: grey;
}

.hidden{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}