body {
	background-color: black;
	font-family: arial;
}

.container {
	position: fixed;
	padding: 20px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}

.element {
	width: 100%;
    height: 100%;
    position: relative;
}

.special {
	width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
}


/* element-4
=========================================================== */

.element-4 {
	background-image: url("../img/time.gif");

	animation: mymove 1s linear infinite alternate;
}

@keyframes mymove {
  100% {background-position: center;}
}



/* element-5
=========================================================== */

.element-5 {
	z-index: 1;
  	background-color: blue;

	animation: fünf 4s infinite alternate;
}

@keyframes fünf {
	0% {
		width: 25%;
		transform: translateX(0);
		border-bottom-right-radius: 200px;		
	}
	100% {
		width: 100%;		
		transform: translateY(24vw);
	}
}


/* element-7
=========================================================== */

.element-7 {
	z-index: 2;
  	background-color: #92ff00;

	animation: sieben 4s ease-in-out infinite alternate;
}

@keyframes sieben {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-24vw);
		border-radius: 100%;
	}
}


/* element-8
=========================================================== */

.element-8 {
	background-image: url("../img/time.gif");
    background-position: center center;

	animation: acht 1s ease-in-out infinite alternate;
}

@keyframes acht {
	0% {
		transform: scale(0.5);
	}
	100% {
		transform: scale(1);
		filter: blur(0.5vw);
	}
}