html {
	height: 100%;
}

/* postition 'fixed' and backgroud-size 'cover' ! */
body::after {
    content:"";
    background: url(bodybkg.jpg) no-repeat center center;
    opacity:0.10;
    top:0;
    left:0;
    bottom:0;
    right:0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
    position:fixed;
    z-index:-1;
}

body {
    background-color: #141B1E;
    color: white;
	font: 14px Roboto, Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 8px;
	min-height: 100%;
}

.headline {
    font-size: 24px;
    font-weight: bold;
}

.text {
    font-weight: normal;
}

/* "blkscr" and "blkani" define size and position of the block screen elements */
/* the entire block screen */
.blkscr {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 2147483647;
    cursor: default;
    display: flex;
    justify-content: center;
}

.blkani {
    display: inherit;
    align-self: center;
    width: 50vmin;
    height: 50vmin;
}

/* a circulating element */
.circelm {
	display: inherit;
	position: relative;
}
/* circulating element 1 */
.circelm1 {
    background-color: rgba(77,182,172,0.20);
    left: 19vmin;
    top: 19vmin;
    width: 12vmin;
    height: 12vmin;
}
/* circulating element 2 */
.circelm2 {
    background-color: rgba(255,64,129,0.20);
    left: 7vmin;
    top: 19vmin;
    width: 10vmin;
    height: 10vmin;
}
/* circulating element 3 */
.circelm3 {
    background-color: rgba(255,214,0,0.20);
    left: -1vmin;
    top: 21vmin;
    width: 6vmin;
    height: 6vmin;
}

/* key frames for circulation 1 */
@keyframes circ1 {
	from {
		transform: rotate(180deg)
				   translate(-3.5vmin)
				   rotate(-180deg);
	}
	to {
		transform: rotate(540deg)
				   translate(-3.5vmin)
				   rotate(-540deg);
	}
}
/* key frame for circulation 2 */
@keyframes circ2 {
	from {
		transform: rotate(90deg)
				   translate(-3.5vmin)
				   rotate(-90deg);
	}
	to {
		transform: rotate(450deg)
				   translate(-3.5vmin)
				   rotate(-450deg);
	}
}
/* key frame for circulation 3 */
@keyframes circ3 {
	from {
		transform: rotate(0deg)
				   translate(-5vmin)
				   rotate(0deg);
	}
	to {
		transform: rotate(360deg)
				   translate(-5vmin)
				   rotate(-360deg);
	}
}

/* animation "circulation 1" */
.actor1 {
	animation: circ1 6s infinite linear;
}
/* animation "circulation 2" */
.actor2 {
	animation: circ2 6s infinite linear;
}
/* animation "circulation 3" */
.actor3 {
	animation: circ3 6s infinite linear;
}