body {
	background-color: purple;
	text-align: center;
}

#fireworks {
	z-index: -10;
	position: absolute;
	width: 100%;
	height: 100%;
}

#content {
	z-index: 1;
	position: relative;
}

marquee {
	color: cyan;
	font-size: 24pt;
	font-family: "Flubber";
}

h1 {
	background: linear-gradient(to bottom, yellow, orangered);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-size: 96pt;
	font-family: "ActionIsShaded";
	margin: 20pt;
}

@font-face {
  font-family: "ActionIsShaded";
  src: url("fonts/ActionIsShaded.ttf");
}

@font-face {
  font-family: "Flubber";
  src: url("fonts/FLUBBER_.TTF");
}


/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	margin: 0 auto;
	clear:both;
	display: inline-block;
}

@keyframes flip {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  animation-duration: 5s;
  animation-name: flip;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* hide back of pane during swap */
.flipper > * {
	backface-visibility: hidden;
	width:100%;

	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.flipper > *:first-child {
	z-index: 2;
}

/* back, initially hidden pane */
.flipper > *:first-child + * {
	z-index: 1;
	transform: rotateY(180deg);
}