/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body { display: grid }
html { height: 80% }
body { background: #222 }

.loading-text {
	place-self: center;
	background: linear-gradient(90deg, #7337FF, #CB97FF, #F6BAFF) -100%/ 200%;
	/* being excessively careful with compat, 
	 * though this has been supported unprefixed and 
	 * in the shorthand across major browsers for a while;
	 * but it catches the latest browser versions supported 
	 * on Wndows XP, 7 and 8; yeah, they exist in 2025 */
	-webkit-background-clip: text;
	        background-clip: text;
	/* use color, don't use -webkit-text-fill-color anymore, 
	 * was meant to solve a problem we haven't had in years */
	color: transparent;
	font: 900 clamp(2em, 10vw, 10em) exo, sans-serif;
	animation: shimmer 2s linear infinite
}

@keyframes shimmer { to { background-position: 100% } }

/* avoid problems in high contrast mode */
@media (forced-colors: active) {
  p {
    background: #212121;
    color: #8A58FF
  }
}