@property --color-background {
  syntax: "<color>";
  inherits: false;
  initial-value: #aefff7;
}

@property --color-text {
  syntax: "<color>";
  inherits: false;
  initial-value: #009640;
}

@keyframes colors {
	  0% { --color-background: initial; --color-text: initial; }
	 20% { --color-background: #bfa9fc; --color-text: #0f5c93; }
	 40% { --color-background: #ff9f9e; --color-text: #423c87; }
	 60% { --color-background: #ffd878; --color-text: #9d5e1c; }
	 80% { --color-background: #e4ff9d; --color-text: #879334; }
	100% { --color-background: initial; --color-text: initial; }
}
html, body {
	height: 100%;
}
html {
	display: grid;
	place-content: center;
	font-size: 25vmin;
    background-color: var(--color-background);
	color: var(--color-text);
	animation: colors 10s linear infinite;
}