/*Pacifico, Sevillana, Merriweather, Days One, Bebas Neue*
Qucksand, Source Code Pro, Permanent Marker, Train One, Righteous, 
Kalnia, Diphylleia, Smooch, IBM Plex Mono, Poor Story, 
Amiri, Cinzel, Outfit, Sacramento, Rubik Doodle Shadow*/

body {
	margin:auto;
	max-width:900px;
	max-height:900px;
	overflow:hidden;
	
}

p {
	font-size: 60pt;
	font-family:Verdana;
	text-align:center;
	color:white;
}

h1{
	font-family:Verdana;
}

h1:hover{
	animation: header 3s forwards;
}

table{
	width:100%;
	table-layout:fixed;
}

tr {
	height:100px;
	table-layout:fixed;
}


td {

	height:100px;
	text-align:center;
	vertical-align:top;
	table-layout:fixed;
}

.trisquare {
    border-color: lightgray darkgray lightgray darkgray;
    border-style: solid;
    border-width: 75px 75px 75px 75px;
	top: 340px;
	left:200px;
	position:absolute;
    height: 0px;
    width: 0px;
	
	overflow:hidden;
	
	animation: tri 12s 3s forwards;
	-webkit-animation: tri 8s 3s forwards;
}

#bb1 {
	background-color: white;
	width:200px;
	height:200px;
	left:150px;
	top:380px;
	position:absolute;
	border-radius:50%;
	border: 2px solid black;
	overflow:hidden;
	
	animation: bb1 8s 2s forwards;
	-webkit-animation: bb1 5s 2s forwards;
}

#bb2 {
	background-color:white;
	top:500px;
	left:350px;
	position:absolute;
	width:50px;
	height:50px;
	overflow:hidden;
	
	animation: bb2 9s 1s forwards;
	-wekbit-animation: bb2 7s 1s forwards;
}

#bb3 {
	background-color: black;
	top:380px;
	left:465px;
	position:absolute;
	width:100px;
	height:100px;
	border-radius:50%;
	border:3px dotted yellow;
	overflow:hidden;
	
	animation: bb3 12s 3s forwards;
	-webkit-animation: bb3 4s 5s forwards;
}

#bb4 {
	background-color:black;
	top:450px;
	left:485px;
	position:absolute;
	width:80px;
	height:80px;
	border-radius:50%;
	border:2px groove green;
	overflow:hidden;
	
	animation: bb4 12s 5.5s forwards;
	-webkit-animation: bb4 5s 5.5s forwards;
}

#bb5 {
	background-color:black;
	top:465px;
	left:521px;
	position:absolute;
	width:105px;
	height:105px;
	border-radius:50%;
	border:3px dashed pink;
	overflow:hidden;
	
	animation: bb5 12s 6s forwards;
	-webkit-animation: bb5 5s 6s forwards;
}
	

@keyframes bb1 {
	0% {background-color:red;
		opacity: 0.0;}
	25% {background-color:red;
		opacity:0.5;}
	50% {background-color:red;
		opacity:.75;
		width:450px;
		left:740px}
	75% {background-color:red;
		opacity:.85}
	100% {background-color:red;
		opacity:1.0;}
}

@keyframes bb2 {
	0% {background-color:#007fff;
		opacity: 0.0;}
	25% {background-color:#007fff;
		opacity:0.5;}
	50% {background-color:#007fff;
		left:850px;
		opacity:.75;}
	75% {background-color:#007fff;
		opacity:1.0;
		height:75px;}
	100% {background-color:#007fff;
		opacity:1.0;
		top:385px;
		width:340px;}
}

@keyframes bb3 {
	from {background-color:yellow;}
	to {background-color:orange;
		top:490px;
		left:825px;
		opacity:.4;}
}

@keyframes bb4 {
	from {background-color:green;}
	to {background-color:purple;
		top:465px;
		left:780px;
		opacity:0.6;}
}

@keyframes bb5 {
	from {background-color:pink;}
	to {background-color:gray;
		top:385px;
		left:750px;
		opacity:0.8;}
}

@keyframes tri {
	0% {transform:rotate(275deg);}
	50% {transform:skewX(45deg);
		width:40%;
		height:40%}
	100% {transform:skewY(45deg);
		top:455px;
		left:540px;
		border-color: lavender lightblue pink lightgreen;}
}

#t1 {
	animation: letterflip_set1 10s 4.5s forwards;
	-webkit-animation: letterflip_set1 10s 4.5s forwards;
}

#y1 {
	animation: letterflip_set2 9.5s 5s forwards;
	-webkit-animation: letterflip_set2 9.5s 5s forwards;
}

#p1 {
	animation: letterflip_set3 9s 5.5s forwards;
	-webkit-animation: letterflip_set3 9s 5.5s forwards;
}

#o1 {
	animation: letterflip_set4 8.5s 6s forwards;
	-webkit-animation: letterflip_set4 8.5s 6s forwards;
}

#g1 {
	animation: letterflip_set5 8s 6.5s forwards;
	-webkit-animation: letterflip_set5 8s 6.5s forwards;
}

#r1 {
	animation: letterflip_set1 7.5s 7s forwards;
	-webkit-animation: letterflip_set1 7.5s 7s forwards;
}

#a1 {
	animation: letterflip_set2 7s 7.5s forwards;
	-webkit-animation: letterflip_set2 7s 7.5s forwards;
}

#p2 {
	animation: letterflip_set3 6.5s 8s forwards;
	-webkit-animation: letterflip_set3 6.5s 8s forwards;
}

#h1 {
	animation: letterflip_set4 6s 8.5s forwards;
	-webkit-animation: letterflip_set4 6s 8.5s forwards;
}

#y2 {
	animation: letterflip_set1 5.5s 9s forwards;
	-webkit-animation: letterflip_set1 5.5s 9s forwards;
}

@keyframes header{
	from {font-family:Verdana;
			color:black;}
	to {text-shadow: 3px 5px red;
			-webkit-text-stroke: 1px black;
			color:white;}
}

@keyframes letterflip_set1{
	0% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
	12.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family: Source Code Pro;
			color:black;
			border:1pt red solid;}
	25% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Pacifico;
			color:black;
			border:none;}
	37.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family: Amiri;
			color:black;
			text-decoration:orange underline;}
	50% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Trebuchet MS;
			color:black;
			text-decoration:none;}
	62.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Sacramento;
			color:black;
			text-decoration:overline wavy blue;}
	75% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family: Days One;
			color:black;
			text-decoration:none;}
	87.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Rubik Doodle Shadow;
			color:black;
			text-decoration: 5pt line-through green;}
	95% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Permanent Marker;
			color:black;
			text-decoration:none;}
	99%{transform:scaleY(0);
			-webkit-transform:scaleY(0);
			color:white;}
	100% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
}

@keyframes letterflip_set2 {
	0% {transform:scaleY(1);
		-webkit-transform:scaleY(1);
		color:black;}
	12.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family: Sevillana;
			color:black;}
	25% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Smooch;
			color:black;}
	37.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family: Permanent Marker;
			color:red;}
	50% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Cinzel;
			color:black;}
	62.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Outfit;
			color:black;
			font-size:45pt;}
	75% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family: IBM Plex Mono;
			color:black;
			font-size:75pt;}
	87.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Kalnia;
			color:black;
			font-size:60pt;}
	95% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Amiri;
			color:black;}
	99%{transform:scaleY(0);
			-webkit-transform:scaleY(0);
			color:white;}
	100% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
}

@keyframes letterflip_set3 {
	0% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
	12.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Train One;
			color:black;
			text-decoration:purple wavy line-through 5pt;}
	25% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Merriweather;
			color:black;
			text-decoration:none;}
	37.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Calibri;
			color:black;
			border:green 3pt dotted;}
	50% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Source Code Pro;
			color:black;
			border:none;}
	62.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Rubik Doodle Shadow;
			color:black;
			font-size:100pt;}
	75% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Amiri;
			color:black;
			font-size:80pt;}
	87.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Smooch;
			color:black;
			text-decoration:overline lightgreen solid 3pt;}
	95% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Times New Roman;
			color:black;
			text-decoration:none;}
	99%{transform:scaleY(0);
			-webkit-transform:scaleY(0);
			color:white;}
	100% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
}

@keyframes letterflip_set4 {
	0% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
	12.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Righteous;
			color:black;}
	25% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Days One;
			color:black;}
	37.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Kalnia;
			color:black;}
	50% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Quicksand;
			color:black;}
	62.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Sacramento;
			color:black;}
	75% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Permanent Marker;
			color:red;}
	87.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Poor Story;
			color:black;}
	95% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Calibri;
			color:black;}
	99%{transform:scaleY(0);
			-webkit-transform:scaleY(0);
			color:white;}
	100% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
}

@keyframes letterflip_set5 {
	0% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
	12.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Bebas Neue;
			color:black;}
	25% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Sevillana;
			color:black;}
	37.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Outfit;
			color:black;}
	50% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Merriweather;
			color:black;}
	62.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Diphylleia;
			color:black;
			font-size:40pt;}
	75% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Trebuchet MS;
			color:black;
			font-size:60pt;}
	87.5% {transform:scaleY(-1);
			-webkit-transform:scaleY(-1);
			font-family:Cinzel;
			color:black;}
	95% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			font-family:Pacifico;
			color:black;}
	99%{transform:scaleY(0);
			-webkit-transform:scaleY(0);
			color:white;}
	100% {transform:scaleY(1);
			-webkit-transform:scaleY(1);
			color:black;}
}