* {
	padding: 0;
	margin: 0;
}

#wrapper {
	width: 80%;
	background-color: #f7f7f7;
	text-align: center;
	margin-top: 10%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1px;
	border-radius: 20px;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

p {
	font-size: 150%;
	font-family: 'Roboto', sans-serif;
	margin-top: 10px;
	margin-bottom: 10px;
}

div#textbereich img {
	width: 150px;
	height: 132px;
	margin-top: 15px;
}

#copyright {
    text-align: center;
    color: darkgray;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 65%;
    line-height: 100%;
}

@media screen and (min-width: 800px) {

#wrapper {
	width: 32%;
	animation-name: absenken;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

p {
	font-size: 200%;
}

div#textbereich img {
	width: 200px;
	height: 176px;
	margin-top: 15px;
}

@keyframes absenken {
	from{
			 margin-top: -300px;
			}
	to{
	   margin-top: 5%;
	  }

}

#copyright {
    text-align: center;
    /*color: darkgray;*/
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 50%;
    line-height: 100%;
    animation-name: fadein;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
    
@keyframes fadein {
    from{
        color: white;
    }
    to{
        color: darkgray;
    }
}
}