html,body{
	margin:0;
	padding:0;
	font-family: Segoe Light, Segoe UI Light, Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
}

.title{
	margin: 3vw 0;
	width:100%;
	text-align: center;
	font-size: 7vmin;
	font-family: inherit;
	position:relative;
	z-index:2;

	opacity: 0;
	animation: fade-in 1s 0.3s 1;
	animation-fill-mode: forwards;

}

.title, .title>a {
	color:black;
	font-weight: 200;
	text-decoration: none;
	cursor:default;
}

nav {
	margin-top: 1em;
	margin-bottom:4em;
	text-align:center;
}
nav a {
	color: black;
	font-size:1.3em;
	padding: 0.5em;
	
	opacity: 0;
	animation: fade-in 1s 0.5s 1;
	animation-fill-mode: forwards;
}

nav{
	position:relative;
	z-index:3;
}



.page{/*anker hochschieben*/
	position:relative;
	padding-top:30vh;
	top: -30vh;
}
.page{
	text-align:center;
	display:none;
}
.page:target{
	display:block;
}


a{
outline: 0;
text-decoration: none;
color: hsl(206, 100%, 50%);
transition: color 0.25s;
}

.bold{
	font-weight: bolder !important;
}

h1{
	font-weight:normal;
	font-size:2.5em;
}
.text{
	font-size:1.3em;
	line-height:1.5em;
	margin-bottom:3em;
	opacity:0;
}



.page img{
	opacity:0;
	display: block;
	max-width:95vw;
	max-height: 95vh;
	margin: 0 auto 4em auto;
}

.page:target div.text{
	animation: fade-in 1s 0s 1;
	animation-fill-mode: forwards;
}

.page:target img:first-of-type{
	animation: fade-in-scale 1s 0s 1;
	animation-fill-mode: forwards;
}
.page:target img:nth-of-type(2){
	animation: fade-in-scale 1s 0.4s 1;
	animation-fill-mode: forwards;
}
.page:target img:nth-of-type(3){
	animation: fade-in-scale 1s 1s 1;
	animation-fill-mode: forwards;
}
.page:target img, .page:target .text{
	animation: fade-in-scale 1s 1.6s 1;
	animation-fill-mode: forwards;
}

content{display:block;min-height:100vh}
footer {
	position:relative;
	width:100%;
	margin-top: 0vh;
	bottom: 20vh;
	text-align: center;
	font-size: 2vh;
	font-weight: 100;
	opacity:0;
	animation: fade-in 1s 2s 1;
	animation-fill-mode: forwards;
}

@keyframes fade-in-scale {
    0% {opacity: 0;transform: scale(0.9);}
    50% {opacity: 1;transform: scale(1);}
	100% {opacity: 1;transform: scale(1);}}

@keyframes fade-in {
    0% {opacity: 0;transform: scale(1);}
    100% {opacity: 1;transform: scale(1);}}
	
	
	
#menue-button{display:none;}
@media  (max-width: 48em) , (max-height:35em) {
	#menue-button{
		display:block;
		position:absolute;
		top:0.5vw;
		right:1.5vw;
		z-index:10;
	}
	#menue-button:not(.mclose){
		opacity: 0;
		animation: fade-in 1s 0.5s 1;
		animation-fill-mode: forwards;
	}
	#menue-button.mclose{
		opacity: 1;
		animation: none;
		animation-fill-mode: forwards;
	}
	#menue-button img{margin: 3vw 0;max-height:7vmin;}
	nav a{display:block;animation: none;opacity: 1;}
	nav {display:none;}
	nav:target {padding-top:4em; display:block;}
	
h1{
	font-weight:light;
	font-size:1.7em;
}

.page img{
	max-width:100vw;
	max-height: 100vh;
	
}