html, body { background: #111; color: white; font-family: sans-serif; font-display: optional}
*, *::aftfter, *::before { padding: 0; margin: 0; box-sizing: border-box; }

.p-fixed { position: fixed !important; }
.p-relative { position: relative !important; }
.d-block { display: block !important; }
.d-fixed-center-XY { display: flex !important; align-items: center !important; justify-content: center !important; }

html.nojs .nojs-d-none {  display: none !important; }

.p-faraway {
	position: fixed !important;
	left: -100vh !important; right: -100vw !important; /* far away, but still focusable */
	height: 1px !important; width: 1px !important;
}

.link { cursor: pointer; }
.link:not(:hover) { text-decoration-line: underline; }




.main-fixed {
	width: 100vw;
	height: 100vh;
	overflow: auto;
	display: flex;
	top: 0;
	left: 0;
}

#i {
	border-radius: 1em;
	background: #333;

	padding: 5em;

	display: flex;
	align-items: center;

	height: min( 70% - 10rem, 100% - 2rem );
	width: max( 30em, min( 70% - 10rem, 100% - 2rem ) );
	counter-reset: counterimage;
}


#i .img, #when-not-selected,#i input:checked {
	/*! flex-grow: 1; */
	min-width: 10em;
	/*! height: 100%; */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: calc( 100% - 12em );
	height: calc( 100% - 2.4em );
	/*! padding: 0; */
	margin: 1.2em 6em;
	font-size: 1em;
	/*! margin: 0 4em; */
	box-sizing: border-box;
	margin-right: 6em;
}
#i .img {
	/*! position: relative; */
}

#i .img::after {
	content: counter(counterimage)" / "var(--images-length,"?");
	position: absolute;
	bottom: 2.7em;
	left: 50%;
	transform: translateX(-50%);
	background: #222d;
	padding: 1em;
	border-radius: 1em;
}

#i img {
	object-fit: contain;
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
}
#i .padded {
	
}


/* all input.hides */

#i > input.hides {
	font-size: 1em;
	counter-increment: counterimage; /* increment counter in inputs, reason is: other images are hidden and counter does not increment for display: none */
}
/* all input.hides w/o :checked */
#i > input.hides:not(:checked) {
	position: absolute; 
	appearance: none;
	height: 0;
	border: none;
	border-color: transparent;
	
	
	border-style: solid;
	border-width: 1em;
	display: inline-block;
	background-color:tansparent;
	top: 0;
	bottom: 0;
	margin: auto 2em;
}

/* all before the :checked */
#i > input.hides:not(:checked, :checked ~ *) {
	position: absolute; /* and stack one on top of other */
	left: 0;
	border-right-color: currentColor;
}
/* 1 after the :checked */
#i > input:checked + * + input.hides {
	right: 0;
	border-left-color: currentColor;
}


/* the not :checked */
#i > input.hides:not(:checked) {
}
/* the :checked */
#i > input.hides:checked {
	/* position: fixed;
	/* left: -100vh; right: -100vw; /* far away, but still focusable */
	/* height: 0; width: 0;
	/*  */
	appearance: none;
}

#i > input.hides:not(:checked ~ input) + #i {
	/* display: none; */
}


#when-not-selected {
	text-align: center;
	display: flex;
	justify-content:center;
	align-items: center;
}
#i > input:checked ~ #when-not-selected {
	display: none;
}









/* #i input.hides { outline: none; } */
/* #i > :not(img) {	width: 0; height: 0; border: 1px solid transparent; margin -1px; padding: 0; text-decoration: underline; position: absolute; top:-120vh; left: -120vh; } */
#i input.hides:not(:checked) + .img { display: none; }
#i input:focus-visible { outline: none; }
#i input:focus-visible + * { outline: auto; outline-width: 1px; outline-style: dashed; }

#i input.hides:checked + .img { /*! display: block; */ }
#i input.hides:checked + .img { /*! display: block; */ display: flex;justify-content: center;}
__#i input.hides:checked + .img { display: none; }