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

html { 
	background-image: url('../Images/LemonadeMouth2a.gif');
	background-size: 100% 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100vh;
	padding: 0;
	margin: 0;
}









body {
	/*background: #fff;*/
	margin: 0;
	padding: 60px;
	text-align: center;
	color: #6f9;
	font-family: brush-script-std, sans-serif;
	font-weight: 400;
	font-style: normal;
}



h1 {
	font-size: 60px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .2em;
	text-shadow: 6px 6px #cf0;
}


p {
	font-size: 2.22vw;
	line-height: 1.4em;
}







img.cover {
	object-fit: cover;
	margin: auto;
	width: 100vw;
	height: 100vh;
	-webkit-filter: hue-rotate(90deg); /* Safari 6.0 - 9.0 */
	filter: hue-rotate(90deg);
	z-index: 1;
	position: fixed;
	text-align: center;
	display: block;

}



iframe {
	opacity: 80%;
}

/*
iframe.animated {
	
-webkit-animation: filter-animation 20s infinite;
  animation: filter-animation 20s infinite;
}

@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }

  33% {
    -webkit-filter: hue-rotate(720deg);
  }
  
  66% {
    -webkit-filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(1440deg);
  }
}

@keyframes filter-animation {
  0% {
    filter: hue-rotate(0deg);
  }

  33% {
    filter: hue-rotate(720deg);
  }

  66% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(1440deg);
  }
}

*/

/* NOTES
The first publicized animations used: filter-animation 2s infinite; with hue-rotate keyframes being 0% = 0deg, 100% = 720deg;


*/