body {
	background-color: white;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


/* text
=========================================================== */

p {
	z-index: 1;
	font-family: arial;
	font-size: 3vw;
	position: absolute;
	left: 0;
	top: 0;
	padding-left: 5px;
	padding-right: 5px;
	background-color: white;
	border-bottom: 2px solid black;
	border-right: 2px solid black;

  	animation: text 60s steps(1) infinite;
}

@keyframes text {
	 0% {opacity: 1;}
	 10% {opacity: 0;}
}


/* numbers
=========================================================== */

.numbers {
	z-index: 1;
	font-family: arial;
	font-size: 3vw;
	position: fixed;
	right: 0;
	top: 0;
	padding-left: 5px;
	padding-right: 5px;
	background-color: white;
	border-bottom: 2px solid black;
	border-left: 2px solid black;

	animation: my-animation 60s linear infinite;
	animation-timing-function: steps(6); 
}

@keyframes my-animation {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}


/* element
=========================================================== */

.element {
	width: 100%;
    height: 100%;

    border: 2px solid black;
    background-color: blue;

    position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-image: url("../img/katze.png");

	animation: katze 60s steps(6)  infinite;
}

@keyframes katze {
	0% {
		transform: scale(1);
		border: 2px solid black;
	}
	100% {
		transform: scale(0);
		border: 2px solid black;
	}
}