details {
	position: relative;
	text-align: center;
}

details > div {
	position: absolute;
	left: 50%;
	bottom: calc( var( --main_footer_height ) - 0.5rem );
	width: calc( var( --device_width ) - 100% );
	height: calc( var( --device_height ) - var( --main_footer_height ) );
	padding: 1rem;
	font-size: 0.75rem;
	text-align: left;
	transition: transform 0.5s ease;
	transform-origin: bottom left;
	transform: scale( 0 );
	background-color: var( --secondGreenColorHSL );
	border-radius: 0.5rem;
	box-shadow: var( --secondShadow );
	overflow-y: scroll;
	z-index: 100;
}

details > summary {
	padding-top: 0.5rem;
	list-style: none;
}

summary > img {
	width: calc( var( --main_footer_height ) - 1rem );
	height: calc( var( --main_footer_height ) - 1rem );
}

details > summary::-webkit-details-marker {
 display: none;
}

details h4 {
	padding: 0.75rem 0 0.5rem 0;
}
details h4 ~div {
	line-height: 1.5;
}

details[open] > div {
/*	transition: transform 0.5s ease;*/
	transform: scale( 1 );
}

h5, code {
	font-weight: 600;
	white-space: pre;
}

h5 {
	padding-top: 0.75rem;
	padding-bottom: 0.5rem;
}