html {
	/* height: 100%; */
	/* overflow: hidden; */
}

@keyframes html {
}

body {
	font-size: min(18px, max(2vw,10px));
	margin: 0;
	background: #000;	
}

*{
	font-family: Sans Serif, Helvetica, Arial;
	color: #fff;
}

p {	
}

u {
  text-decoration: underline;
}


a {
	color: #fff;
}

div {
	margin: 6em 15vw 2em 15vw;
	width: 70vw;
	margin-bottom:10em;
}


div.logo_stack {
	display: grid;
	height: auto;
	grid-template-columns: min(35vw, 315px);
	grid-gap: 0;
	justify-content:center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	
}

img.logo_front, img.logo_back, img.logo_copy {
	place-self: center;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}

img.logo_front {
	z-index: 1;
}

img.logo_back {
	z-index: 0;
}

img.logo_copy {
	opacity: 0;
	z-index: 10;
}


img.logo_front {
	animation: 
		/* beat 2s ease-out 10s 1, */
		/* beat 2s ease-out 15s 1, */
		beat 2s ease-out infinite;
		/* beat 2s ease-out infinite; */
}


h1, h2 {
	margin-top:2em;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	
	font-size: 3em;
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
}

h2 {
	margin-top:1.2em;
	font-size: 1.4em;
	font-weight: 700;
}

h1.logo {
	margin-top:0;
	font-size: min(90px, 10vw);
	/* font-size: 5em; */
	font-family: Slackey;
	font-weight: 500;
	transform: skewX(10deg) skewy(0deg) scaleX(1.01) scaleY(0.95);
	animation: mover 59s ease-in infinite;
}

p {
	text-align: center;
	/* margin-top: 0.5em; */
	margin-top: 0;
	margin-bottom: 0.1em;
	font-style: normal;
	font-weight: 500;

}

*.small{
	font-size: 0.7em;
}

@keyframes mover {
	16% {
		transform: skewX(5deg) skewy(0.5deg) scaleX(1.01) scaleY(0.95);
		animation-timing-function: linear;
	}
	28% {
		transform: skewX(3deg) skewy(1.5deg) scaleX(0.98) scaleY(1);
		animation-timing-function: ease-out;
	}
	50% {
		transform: skewX(0deg) skewy(2deg) scaleX(0.95) scaleY(1.2);
		animation-timing-function:  ease-in;
	}
	66% {
		transform: skewX(7deg) skewy(2deg) scaleX(0.95) scaleY(1.2);
		animation-timing-function: linear;
	}
	80% {
		transform: skewX(10deg) skewy(1.3deg) scaleX(0.98) scaleY(1.15);
		animation-timing-function: ease-out;
	}
}

@keyframes beat {

  60% {
	transform: scale(1);
  }
  70% {
	transform: scale(0.98);
  }
  74% {
	transform: scale(1.05);
  }
  78% {
	transform: scale(0.98);
  }
  83% {
	transform: scale(1.10);
  }
  95% {
	transform: scale(0.99);
  }
}


/* slackey-regular - latin */
@font-face {
  font-family: 'Slackey';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/slackey-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
	   url('/fonts/slackey-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   url('/fonts/slackey-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	   url('/fonts/slackey-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
	   url('/fonts/slackey-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	   url('/fonts/slackey-v13-latin-regular.svg#Slackey') format('svg'); /* Legacy iOS */
}