html, body, img, ul, li {
	margin: 0;
	padding: 0;
}

body {
	position: relative; 
	font-family: courier;
	font-weight: 900;	
}

body::after {
	content: "";
	position: fixed;
	top: 0;
	background: url(IMG/icosa222.svg) repeat;
	width: 100vw;
	height: 100vh;
	opacity: 0.3;
	scale: 2;
	z-index: -1;
}

header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

#styleswitch            {
	position: relative;
	margin-left: 2em;
	padding: 2em 1em;
	 font-size: 0.7em;
	 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	color: rgb(89, 233, 233); 
	text-align: left;  
}

#styleswitch a         {
	color: #acacac;
	text-decoration: none;
}

#styleswitch a:nth-child(2)         {
	color: #818181;
	text-decoration: none;
}

#styleswitch a:hover         {
	text-decoration: underline;
}

#me_button {
	position: relative;
	display: flex; 
	align-content: center;
	padding: 2em 1em;
	font-size: 60%;
	height: 9em;
	
	transition: all 2s ease;	 
}

#me_button div {
	width: 0;
	height: 0;
	margin: 0.2em;
	position: relative; 
	top: 0;
	left: 2.7em;
	border-left: 1.4em solid rgb(250, 110, 110);
	border-right: 1.4em solid rgb(250, 110, 110);
	border-bottom: 1.4em solid rgb(255, 162, 162);
	border-top: 1.4em solid rgb(255, 166, 166);
  }

  #me_button div:first-child {
	width: 0;
	height: 0; 
	margin: 0.2em;
	border-left: 1.5em solid transparent;
	border-right: 1.5em solid transparent;
	border-bottom: 2.8em solid rgb(143, 255, 255);
	border-top: none;
	position: relative; 
	left: 2em; top: 0em;
	rotate: 0deg; 
  }

  #me_button:hover #dreieck {
	 
	animation-name: header;
	animation-duration: 1s;
	animation-iteration-count: initial;
	animation-delay: 0s;
	animation-direction: normal;
	animation-timing-function: step-start;
	animation-fill-mode: both;
  }

@keyframes header { 
0% {rotate: 0deg; left: 2em; top: 0;} 
1% {rotate: 0deg; left: 2em; top: 0;} 
12% {rotate: 0deg; left: 2em; top: 0;}   
22% {rotate: -0deg; left: 2em; top: 0;}
33% {rotate: -45deg; left: 2em; top: 1.5em;}    
51% {rotate: -110deg; left: 3.7em; top: 3.2em;}
63% {rotate: -160deg; left: 6em; top: 4.2em;}
78% {rotate: -210deg; left: 8em; top: 2.8em;}
85% {rotate: -270deg; left: 10em; top: 0em;}
100% {rotate: -270deg; left: 10em; top: 0em;}
}


nav {display: none;}

nav {
	position: fixed;
	margin: 0 6em;
	color: rgb(255, 255, 231);
	text-shadow: 2px 2px 3px rgb(250, 110, 110), -2px -2px 3px rgb(42, 188, 255);	
	font-size: 2.6em;
} 

nav a {
	color: rgb(255, 255, 231);
	text-decoration: dotted;
}

main {
	min-height: 50vh;
	width: 90%; 
	padding: 0 5%;
}

.titel {	
	position: relative; 
	width: 100%; 
	text-align: center; 
	font-size: 7vw;
	color: rgb(255, 255, 231);
	text-shadow: 4px 3px 2px rgb(250, 110, 110), -4px -3px 2px rgb(42, 188, 255);
	
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;	 
	transition: transform 2s ease;
    margin: 24vh auto 0 auto;
}

.titel a, .titel a:active, .titel a:checked {
	color: rgb(255, 255, 231);
	text-decoration: none;
}

.titel:hover {
	transform: scale(1.04);
}

.pics {
	display: flex;
	justify-content: center;
	width: 100%;
}

.pics img {
	height: 5em;
	padding: 0.2em;
}