/*  Ein Kommentar in CSS */

/*  Der * definiert den "global reset" Hier werden alle Elemente angesprochen, die später nicht anders definiert werden. */
*
{
	font-family:  arial, sans-serif;
}


html,body
{
	height:100%;
	width:100%;
	margin:auto;
	padding:auto;
}

body 
{
	_background: white;
	color:black;
}

a
{
	color:black;
	text-decoration:none;
}

.background
{
	height: 100%;
	width: 100%;
	background: linear-gradient(75deg,rgba(0, 93, 242, 1) 0%, rgba(71, 158, 245, 1) 49%, rgba(0, 136, 255, 1) 100%);
	background-size: cover;
	background-repeat: none;
	_animation: bgchange infinite 120s;
	_-webkit-animation: bgchange infinite 120s;
	_-moz-animation: bgchange infinite 120s;
	_transition: background-image 1s;
	_animation-direction: alternate;
	_-webkit-animation-direction: alternate;
	_-moz-animation-direction: alternate;
}

.content
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align: left;
	border-radius: 24px;
	background: rgba(0, 0, 0, 0.7);
	_backdrop-filter: blur(20px);
	_-webkit-backdrop-filter: blur(20px);
	padding:48px;

}

.content h1
{
	color: rgba(255, 255, 255, 0.8);
	font-size: 36px;
	font-weight: bold;
}

.content h2
{
	color: rgba(255,255,255,.7);
	font-size: 16px;
	font-weight:normal;
	letter-spacing: 1px;
	_line-height: 32px;
	margin-bottom:60px;
}


.content a
{
		color: rgba(255, 255, 255, 0.8);
		width: fill;
		font-size: 14px;
		font-weight: bold;
		background: rgb(37, 22, 255);
		_backdrop-filter: blur(20px);
		_-webkit-backdrop-filter: blur(20px);
		padding: 16px 60px;
		border-radius: 16px;
}

@keyframes bgchange
{
	00%,08%
	{
		background-image: url(../images/bg4.jpg);
		_background-color:blue;
	}
	10%,18%
	{
		background-image: url(../images/bg2.jpg);
		_background-color: darkmagenta;
	}
	20%,28%
	{
		background-image: url(../images/bg3.jpg);
		_background-color: darkred;
	}
	30%,38%
	{
		background-image: url(../images/bg1.jpg);
		_background-color: orangered;
	}
	40%,48%
	{
		background-image: url(../images/bg5.jpg);
		_background-color: gold;
	}
	50%,58%
	{
		background-image: url(../images/bg6.jpg);
		_background-color: yellowgreen;
	}
	60%,68%
	{
		background-image: url(../images/bg6.jpg);
		_background-color: yellowgreen;
	}
	70%,78%
	{
		background-image: url(../images/bg7.jpg);
		_background-color: yellowgreen;
	}
	80%,88%
	{
		background-image: url(../images/b8.jpg);
		_background-color: yellowgreen;
	}
	90%,98%
	{
		background-image: url(../images/bg9.jpg);
		_background-color: yellowgreen;
	}
}

@-webkit-keyframes bgchange
{
	00%,08%
	{
		background-image: url(../images/bg4.jpg);
		_background-color:blue;
	}
	10%,18%
	{
		background-image: url(../images/bg2.jpg);
		_background-color: darkmagenta;
	}
	20%,28%
	{
		background-image: url(../images/bg3.jpg);
		_background-color: darkred;
	}
	30%,38%
	{
		background-image: url(../images/bg1.jpg);
		_background-color: orangered;
	}
	40%,48%
	{
		background-image: url(../images/bg5.jpg);
		_background-color: gold;
	}
	50%,58%
	{
		background-image: url(../images/bg6.jpg);
		_background-color: yellowgreen;
	}
	60%,68%
	{
		background-image: url(../images/bg6.jpg);
		_background-color: yellowgreen;
	}
	70%,78%
	{
		background-image: url(../images/bg7.jpg);
		_background-color: yellowgreen;
	}
	80%,88%
	{
		background-image: url(../images/b8.jpg);
		_background-color: yellowgreen;
	}
	90%,98%
	{
		background-image: url(../images/bg9.jpg);
		_background-color: yellowgreen;
	}
}

@-moz-keyframes bgchange
{
	00%,08%
	{
		background-image: url(../images/bg4.jpg);
		_background-color:blue;
	}
	10%,18%
	{
		background-image: url(../images/bg2.jpg);
		_background-color: darkmagenta;
	}
	20%,28%
	{
		background-image: url(../images/bg3.jpg);
		_background-color: darkred;
	}
	30%,38%
	{
		background-image: url(../images/bg1.jpg);
		_background-color: orangered;
	}
	40%,48%
	{
		background-image: url(../images/bg5.jpg);
		_background-color: gold;
	}
	50%,58%
	{
		background-image: url(../images/bg6.jpg);
		_background-color: yellowgreen;
	}
	60%,68%
	{
		background-image: url(../images/bg6.jpg);
		_background-color: yellowgreen;
	}
	70%,78%
	{
		background-image: url(../images/bg7.jpg);
		_background-color: yellowgreen;
	}
	80%,88%
	{
		background-image: url(../images/b8.jpg);
		_background-color: yellowgreen;
	}
	90%,98%
	{
		background-image: url(../images/bg9.jpg);
		_background-color: yellowgreen;
	}
}


@media screen and (max-width:800px) 
{
	
img
{
	max-width:100%;
	height:auto;
}
	
.content
{
	
	padding:12px;

}

.content h1
{
	font-size: 24px;
}

.content h2
{
	font-size: 10px;
	letter-spacing: 2px;
	margin-bottom:40px;
}


.content a
{
		font-size: 12px;
		background: rgba(255,255,255,.1);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		padding: 16px;
		margin-bottom:32px;
		border-radius: 4px;
		position:relative;
		top:-10px;
}

	
}