body { 
	background-color: White; 
	background-image: linear-gradient(Silver, White);
	color: black;
	display: grid;
	grid-template-rows: auto;
	gap: 0;
	min-height: 100vh;
	font-family: Calibri,Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 0 0 0 0;
	text-align: center;
	vertical-align: top;
	font-size: 15pt;
	border: 1px solid;
	
}

* p {
	font-size: 16pt;
	padding: 0em 0em 0em 0em;
}

*.info {		
	width: 5em;
	padding: 1em 1em 1em 1em;
	text-shadow: -4px 4px 5px grey; 
	box-shadow: -4px 4px 5px 5px grey;
}

img.animation {
	animation: scaleFrame 5s;
}

@keyframes scaleFrame {
	1% {
		transform: scale(0.1);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Links */

#linkpanel {
	display: grid;
	grid-template-columns: auto auto auto auto;
	gap: 2em; 
	justify-items: center;
	justify-self:  center;
	align-items: center;
	align-content: center;
    justify-content:  center; 
  
}


a{
	text-decoration:none;
	color: black;
	box-shadow: inset 0 0px 0 0px Silver;
	transition: all .5s ease;
}

a.Selected {
	background-color: DarkGray	
}

a.Headline {
	border-bottom: thin solid black;
}

td > a:hover,
a:focus {
	box-shadow: inset 0 -30px 0 DarkGray;
}



/* galerie */

#galerie {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	gap: 1em;
}

#galerie.bilder {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}


#galerie figure {
	position: relative;
	overflow: hidden;
	transition: all 0.25s ease-in;
}

#galerie figure img {
	width: 50%;
}

#galerie figure:hover,
#galerie figure:focus {
	z-index: 2;
	transform: scale(2);
	
}

#galerie figure:hover:before {
	opacity: 0;
}

#galerie figcaption {
	position: absolute;
	text-align: center;
    width: 50%;
	line-height: 1.5em;
	color: white;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	bottom: 0em;
	left: 25%;
	transition: all 1s ease;
	font-weight:normal;  
	font-size:0.4em
}

#galerie > figure:hover > figcaption {
	opacity: 1;
}

#galerie:after {
	clear: both;
	content: " ";
}