html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

canvas {
  display: block;
  margin: auto;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}


html {

	font-family: 'Yantramanav', sans-serif;
	font-size: 160px;

}


@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@900&display=swap');
@import url('./"../CooperHewitt-Bold.otf"CooperHewitt-Bold.otf');

@keyframes bounceIn {


  from {
	transform: scale(1);
	opacity: 0.3;
	/*filter: blur(20px);*/
  }
 to {
	transform: scale(2);
	opacity: 90;
  }

}

.typzContainer {

	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0;
	padding: 5px 5px;

	color: #FFF;
	background-color: rgba(50, 50, 50, 0);
	letter-spacing: -5px;

	width:100%;
	height:100%;

}

#tA {

	display: block;

	position: absolute;

	text-align: center;

	margin:auto;
	width: 100%;
	height: 200px;

	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	transform-origin: 50% 0%;

	animation : bounceIn 4s infinite alternate;

	filter: drop-shadow(-10px 0px 0px rgba(0, 255, 210, .8));

	mix-blend-mode:difference;


}

#tB {

	display: block;

	position: absolute;

	text-align: center;

	margin:auto;
	width: 100%;
	height: 200px;

	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	filter: drop-shadow(10px 0px 0px rgba(0, 255, 210, .8));

	transform-origin: 50% 100%;

	/*animation-timing-function: ease-in-out;*/
	animation : bounceIn 3s infinite alternate;

	mix-blend-mode: difference;	

}

#tM {

	position:absolute;
	font-size: 70px;
	letter-spacing: -2px;
	left:40px;
	bottom:0px;
	height: 50px;



}