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



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




.clippyshape{
	z-index: 0;
	display: inline-block;	
	margin-top: 20vh;
	margin-left: auto;
	margin-right: auto;
	height: 60vh;
	width: 60vh;
	background-color: aquamarine;
	-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
	clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
	animation-name: shapechanger;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

.clippyshape2{
	position: absolute;
	z-index: 1;
	top: 20vh;
	left: 18vw;
	right: auto;
	mix-blend-mode: difference;
	height: 60vh;
	width: 60vh;
	background-color: turquoise;
	-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
	clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
	animation-name: shapechanger2;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}


.screenfit{

	height: 100vh;
	text-align: center;
}





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

@keyframes shapechanger {
	0% {-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
		clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);}


	50% {-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}

	100% {-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
		clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);}
}

@keyframes shapechanger2 {
	0% {-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}

	50% {-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
			clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);}

	100% {-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}


}