/* import the font */
body {
	background-color: black;
	color: white; 
	 }


@font-face {
	font-family: "Example";
	src: url("circlesquaredanceVF.ttf") format("truetype");
}

/* add it to a class */
.test-interaction {
	font-family: "Example";
	font-size: 200px;
	font-variation-settings: "wght" 0, "wdth" 0;
	transition: 1s; /* this makes the magic happen! */
	cursor: crosshair; /* this changes the mouse cursor */
}

/* when the mouse hovers over the element */
.test-interaction:hover {
	font-variation-settings: "wght" 100, "wdth" 0;
	color: orange;
}

/* when the mouse is pressed down on the element */
.test-interaction:active {
	font-variation-settings: "wght" 0, "wdth" 100;
	color: red;
}

.test-animation {
	font-family: "Example";
	font-size: 200px;
	font-variation-settings: "wdth" 0;

	/* properties for animations */
	animation-name: example-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

/* define the animation */
@keyframes example-animation {
	0% {
		font-variation-settings: "wdth" 0, "wght" 100; 
		transform: translate(0px, 0px)
	}
	25% {
		font-variation-settings: "wdth" 100, "wght" 0;
		transform: translate(200px, 0px)
	}
	50% {
		font-variation-settings: "wdth" 80, "wght" 80;
		transform: translate(200px, 200px);
		color: orange;
	}
	75% {
		font-variation-settings: "wdth" 100, "wght" 50;
		transform: translate(0px, 200px);
	}
	100% {
		font-variation-settings: "wdth" 0, "wght" 0;
		transform: translate(0px, 0px);
		color: red;
	}
}