@charset "UTF-8";
/* CSS Document */



@font-face{
	font-family: bigJohn;
	src: url("BIGJOHN.otf");
}	




.clippyshape{
	position: absolute;
	margin-top: 20vh;
	margin-left: auto;
	margin-right: auto;
	height: 60vh;
	width: 60vh;
	background-color: aquamarine;
	-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
	clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
	animation-name: shapechange;
	animation-duration: 5s;
	animation-iteration-count: infinite;

	
}

.clippyshape2{
	position: absolute;
	margin-top: 20vh;
	margin-left: auto;
	margin-right: auto;
	height: 60vh;
	width: 60vh;
	background-color: aquamarine;
	-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
	clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
	animation-name: sizechange;
	animation-duration: 5s;
	animation-iteration-count: infinite;

	
}


.screenfit{

	height: 100vh;
}





@keyframes sizechange {
	0%{height: 60vh;}
	0%{width: 60vh;}
	50%{height: 80vh;}
	50%{width: 80vh;}
	100%{height: 60vh;}
	100%{width: 60vh;}
}

@keyframes shapechange {
	from {-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
		clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);}

	to {-webkit-clip-path: circle(50% at 50% 50%);
		clip-path: circle(50% at 50% 50%);}

}