body {
	width: 100%;
	overflow-x: hidden;
	font-family: sans-serif;
}

/* vlakken */
.poster {
	position: relative;
	width: 1100px;
	height: 1400px;
	margin:0 auto;
	
	background-image: linear-gradient(135deg, #000000 20%, #CFCFCF 45%, #FFFFFF 50%, #CFCFCF 55%, #000000 80%);
}

.zwart {
	position: relative;
	width: 60%;
	height: 85%;
	top:7.5%;
	left:20%;
	
	background-image: linear-gradient(135deg, #9A00EE 20%, #FFCC99 40%, #FF076A 70%, #9A00EE 100%);
}

.zwart:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background: linear-gradient(120deg, #00F260, #0575E6, #00F260);
	background-size: 300% 300%;

	-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
	clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);

  	animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}

/* motion */
@keyframes gradient-animation {
	0% {
		background-position: 15% 0%;
	}
	50% {
		background-position: 85% 100%;
	}
	100% {
		background-position: 15% 0%;
	}
}

@keyframes frame-enter {
	0% {
		-webkit-clip-path: polygon(0% 100%, 20px 100%, 20px 20px, calc(100% - 20px) 20px, calc(100% - 20px) calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 100% 100%, 100% 0%, 0% 0%);
	  	clip-path: polygon(0% 100%, 20px 100%, 20px 20px, calc(100% - 20px) 20px, calc(100% - 20px) calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 100% 100%, 100% 0%, 0% 0%);
	}
	25% {
		-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
	  	clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
	}
	50% {
	 	-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
		clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
	}
	75% {
		-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
	  	clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
	}
	100% {
		-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
	  	clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
	}
}

/* lijnen */
.line {
	width: 90%;
	height: 4px;
	left: 5%;
	position: absolute;
	background-color: #9B30FF;
}
.line1 {
	top: 172px;
}
.line2 {
	top: 190px;
}
.line3 {
	top: 236px;
}
.line4 {
	top: 356px;
}
.line5 {
	top: 624px;
}
.line6 {
	top: 1046px;
}
.line7 {
	top: 1250px;
}

/* teksten */
h1 {
	position: absolute;
	top: 46px;
	left: 3%;
	color: #7FFF00;
}
.at {
	position: absolute;
	top: 88px;
	left: 3%;
	color: #9B30FF;
}

h2 {
	position: absolute;
	top: 12px;
	right: 44px;
	color: #7FFF00;
	font-size: 4em;
}
h3 {
	position: absolute;
	top: 117px;
	right:55px;
	width:12em;
	color: #9B30FF;
	font-size: .8em;
	line-height: 1.71em;
	text-align: right;
}

.copyright {
	position: absolute;
	width: 22em;
	top: 39%;
	right:95%;
	
	text-align:right;
	color: #7FFF00;
	
	transform-origin:right bottom;
	transform: rotate(-90deg);
}

.disclaimer {
	position: absolute;
	width:22em;
    top: 37.7%;
	left: 95%;
	
	color: #7FFF00;
	
	transform-origin:left bottom;
	transform: rotate(90deg);
}

.datum {
	position: absolute;
	bottom: .25%;
	left: 50%;
	
	color: #7FFF00;
	font-family: sans-serif;
	font-weight: bold;
	
	transform:translateX(-50%);
}

/* bal */
.cirkel {
	position:absolute;
	width: 858px;
	height: 812px;
	top: 294px;
	left: 121px;
	
  	border-radius: 50%;
  	background-image: linear-gradient(to bottom left, #C8F526 , #7FFF00, #1E90FF);
	background-size: 800% 100%;
	
	animation-name: bounce;
	animation-duration: 1s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(.6,0.08,0.8,.6);
	animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translateY(-152px);     }
  to   { transform: translateY(152px); }
}