/* import the font */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

body {
	min-height: 100vh;

	background-image: 
        linear-gradient(#f1c4e1a6, #81bcffc2, #1ef0c9cc),
        url("bubble.gif");
    background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.abs {
	position: absolute;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #E98AB6;
    box-shadow: 0 0 40px 10px #E98AB6;
    opacity: 40%;

    display: grid;
	place-items: center;
	font-family: "Marble";
	line-height: 1;
	color: transparent;

    cursor: none;
}

.abs:hover {
	background-color: transparent; /* the circle disappears */
	animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

@keyframes blink {
	0% {
		color: black;
		font-variation-settings: "REFL" 0;
	}
	100% {
		color: white;
		font-variation-settings: "REFL" 100;
	}
}

.dance {
	font-family: "Marble";
	font-size: 200px;
	font-variation-settings: "REFL" 0;

    display: inline-block; /* so the gradient spans the letter, not the full page width */
	background-image: linear-gradient(#ffdbe1, #8860a6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;

	/* properties for animations */
	animation-name: dance; /* must match the @keyframes name */
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: calc(var(--i) * 0.5s);
}

/* define the animation */
@keyframes dance {
	0% {
		font-variation-settings: "REFL" 0;
	}
	25% {
		font-variation-settings: "REFL" 100;
	}
	50% {
		font-variation-settings: "REFL" 80;
	}
	75% {
		font-variation-settings: "REFL" 300;
	}
	100% {
		font-variation-settings: "REFL" 0;
        transform: translate(0px, 800px);;
	}
}

.overlay {
	position: fixed;
	inset: 0; 
	background-image: radial-gradient(circle, transparent 200px, black 201px);
	pointer-events: none;
	display: none;
}

@media (max-width: 1000px) {
	.overlay {
		display: block;
	}
}