html{min-height:90vh}
body{ min-height:105%;background:#25a url(bg_filou4.jpg) no-repeat fixed center top; background-size:cover;
font-family:Arial,Helvetica,sans-serif;font-size:110% ;color:#fff;text-align:center;line-height:120%;}
footer{position:fixed;padding:.2em; bottom:2px;left:4px;color:#999}
h1{margin:15px 0;padding:0;font-size:115%;}
#hallo h1,h2 {margin:14px;font-size:105%;}
/* a{font-weight:bold;text-decoration:none;color:#66f;}   */
a:hover,a:active{color:#fff;background-color: #000;}
.verweis {color:#00e;text-decoration:underline}

.mitte{width:94%;margin-left:auto;margin-right:auto; border-spacing:6px;}
.mitte a{color:#ddf}
.schatten { font-family:"Comic Sans MS";color:#c8e; font-size:250%;font-weight:900;padding:10px; animation:textshadow 6s infinite alternate;}

@keyframes textshadow {
	5%   { text-shadow: 1px 1px 1px #666 }
	15%  { text-shadow: 2px 2px 2px #ff0 }
	40%  { text-shadow: 3px 3px 3px #f00 }
	60%  { text-shadow: 3px 3px 3px #0ff }
	80%  { text-shadow: 2px 2px 2px #ffc }
	100% { text-shadow: 2px 1px 1px #000 }
}


.rolling {font-family:"Comic Sans MS";font-size:250%;font-weight:900;margin-left:10%;margin-right:10%;top:40px;	animation: rolling 5s 1s infinite alternate ease-in-out;}
@keyframes rolling {	from { transform: translate(0) }	to   { transform: translate(calc(30% - 300px)) }}


.bg{background-color:#69e;padding:4px;}
.eiei {position:absolute; top:260px; left:72%; width:140px;}
.gif-wrapper{ position: absolute; transform: translate3D(-50%, -75%, 0); animation: div-img 30s infinite linear; }
.gif-img{
    height:50px;
    width:100px;
    position: absolute;
    left: 29%;
    transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -15px, 0) rotate3d(0, 0, 1, 75deg);
    border-radius: 25px;
    animation: gif-ani 30s infinite linear;
}
@keyframes div-img{
	0%   { top:73%;	left:50%; }
	5%   { top:78%; }
	10%  { top:73%; }
	15%  { top:78%; }
	20%  { top:73%; }
	25%  { top:78%; left:calc(90% - 135px); }
	30%  { top:73%;	}
	35%  { top:78%;	}
	40%  { top:73%;	}
	45%  { top:78%;	}
	50%  { top:73%;	left:50%; }
	55%  { top:78%; }
	60%  { top:73%; }
	65%  { top:78%;	}
	70%  { top:73%; }
	75%  { top:78%;	left:135px; }
	80%  { top:73%;	}
	85%  { top:78%;	}
	90%  { top:73%; }
	95%  { top:78%; }
	100% { top:73%; left:50%; }
}

@keyframes gif-ani{
	0%   {transform: rotate3d(0, 1, 0, 0deg)   translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
	20%  {transform: rotate3d(0, 1, 0, 45deg)  translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
	25%	 {transform: rotate3d(0, 1, 0, 90deg)  translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);} 
	30%	 {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
	70%  {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
	75%	 {transform: rotate3d(0, 1, 0, 90deg)  translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);} 
	80%	 {transform: rotate3d(0, 1, 0, 45deg)  translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
	100% {transform: rotate3d(0, 1, 0, 0deg)   translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
}


@media only screen and (min-width:320px)  {
nav{display:block;text-align:center;padding:0 3px;}
nav ul li{display:inline;max-width:160px;}
label.open-menu-label{display:none;} 
} 

@media (min-width: 280px) and (max-width: 320px) { h1 { font-size:22px; } }