:root {
  font-size: 100%;
  font-family: "Instrument Sans", sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  Justify-items: center;
  align-items: center;
}

body {
  background-color: black;
  /* overflow: hidden; */
}



.WE {
  grid-column: 1;
  grid-row: 1;
  color: rgb(105, 195, 230);
}

.LOVE {
  grid-column: 3;
  grid-row: 1;
  color: rgb(105, 195, 230);
}

.BEATS {
  grid-column: 2;
  grid-row: 2;
  color: rgb(105, 195, 230);
}

.TOO {
  grid-column: 1;
  grid-row: 3;
  color: rgb(105, 195, 230);
}

.O {
  grid-column: 3;
  grid-row: 2;
  color: rgb(105, 195, 230);
}

.O2 {
  grid-column: 2;
  grid-row: 3;
  color: rgb(105, 195, 230);
}

.O3 {
  grid-column: 3;
  grid-row: 3;
  color: rgb(105, 195, 230);
}

.O4 {
  grid-column: 1;
  grid-row: 2;
  color: rgb(105, 195, 230);
}

.O5 {
  grid-column: 2;
  grid-row: 1;
  color: rgb(105, 195, 230);
}



h1 {
  font-size: 500%;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  line-height: 2;
  animation: undefined-easeOutBounce 0.5s infinite alternate, puls 1s infinite alternate;
}

@keyframes puls {
	from { font-variation-settings: 'wght' 400 }
	to { font-variation-settings: 'wght' 900 }
  }

h2 {
  font-size: 900%;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  line-height: 2;
  animation: scale-easeOutBounce 0.5s infinite alternate;
}

@keyframes undefined-easeOutBounce {
	0% {
		transform: translateX(0%);
	}

	12% {
		transform: translateX(-10.89%);
	}

	24% {
		transform: translateX(-43.56%);
	}

	36% {
		transform: translateX(-98.01%);
	}

	54% {
		transform: translateX(-75.02%);
	}

	74% {
		transform: translateX(-98.37%);
	}

	82% {
		transform: translateX(-93.75%);
	}

	92% {
		transform: translateX(-99.34%);
	}

	96% {
		transform: translateX(-98.46%);
	}

	100% {
		transform: translateX(-100%);
	}

}



@keyframes scale-easeOutBounce {
	0% {
		transform: scale(1);
	}

	12% {
		transform: scale(0.89);
	}

	24% {
		transform: scale(0.56);
	}

	36% {
		transform: scale(0.02);
	}

	54% {
		transform: scale(0.25);
	}

	74% {
		transform: scale(0.02);
	}

	82% {
		transform: scale(0.06);
	}

	92% {
		transform: scale(0.01);
	}

	96% {
		transform: scale(0.02);
	}

	100% {
		transform: scale(0);
	}

}