.gallery {
	& a {
		text-decoration: none;
		display: inline-block;
		&:focus {
			outline: 2px solid black;
		}
		& img {
			width: 100px;
			display: block;
		}
	}
}

#gallery-fullview {
	width: 100vw;
	height: 100vh;
	padding: 2em 5vw 8vh 5vw;
	background-color: #888;
	box-sizing: border-box;
	border-radius: 10px;
	&::backdrop {
		background: rgb(200 200 200 /.8);
	}
	& figure {
		border: thin solid #aaa;
		margin: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background: #ccc;
	}
	& img {
		display: block;
		margin: auto;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	& figcaption {
		font-style: italic;
		text-align: center;
		background-color: white;
	}
	& button {
		position: absolute;
		width: 2rem;
		height: 2rem;
		cursor: pointer;
		border: 0;
		background-color: transparent;
		--fill: none;
		--stroke: white;
		&:focus {
			outline: none;
		}
		&[value=close],
		&[value=shuffle],
		&[value=play] {
			top: 0;
			right: 0;
			--fill: firebrick;
			&:hover, &:focus {
				--fill: red;
			}
		}
		&[value=shuffle],
		&[value=play] {
			& svg {
				&:nth-of-type(1) {
					display: inline;
				}
				&:nth-of-type(2) {
					display: none;
				}
			}
		}
		&[value=shuffle] {
			right: 4rem;
			.shuffle & svg {
				&:nth-of-type(1) {
					display: none;
				}
				&:nth-of-type(2) {
					display: inline;
				}
			}
		}
		&[value=play] {
			right: 8rem;
			.play & svg {
				&:nth-of-type(1) {
					display: none;
				}
				&:nth-of-type(2) {
					display: inline;
				}
			}
		}
		&[value=prev],
		&[value=next] {
			top: calc(50% - 100px);
			width: 100px;
			height: 200px;
			padding: 0;
			--stroke: #fff6;
			&:hover, &:focus {
				--stroke: skyblue;
			}
		}
		&[value=prev] {
			left: 2vw;
		}
		&[value=next] {
			right: 2vw;
		}
	}
}

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}
/* Grundlayout für SELFHTML-Beispiele */

body {
	margin: 1em auto;
	max-width: 60em;
	font-family: sans-serif;
	color: #333333;
}

h1 {
	font-size: 1.5rem;
	position: relative;
	padding-left: 3em;
}

h1:before {
	position: absolute;
	left: 0;
	content: "";
	width: 2rem;
	border: thin solid transparent;
	aspect-ratio: 1/1;
	background: url("https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg") no-repeat;
	background-size: cover;
}

html {
	background: transparent!important;
	--blue: #337599;
	--green: #93b946;
	--red: #c82f04;
	--yellow: #dfac20;
	--lightblue: #d6e3eb;
	--lightgreen: #ebf5d7;
	--lightred: #ffebe6;
	--lightyellow: #f9eed2;
}

.hinweis {
	border-inline-start: thick solid var(--red);
	padding-inline-start: 1em;
}

kbd {
	background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
	border: thin solid #aaa;
	border-radius: 2px;
	box-shadow: 1px 2px 2px #ddd;
	font-family: inherit;
	font-size: 0.9em;
	padding: 0 0.5em;
}