:root {  
  --purple: rgb(123, 31, 162);
  --violet: rgb(103, 58, 183);
  --pink: rgb(244, 143, 177);
}

body {
  background-color: black;
  height: 100vh;
  margin: 0rem;
  overflow: hidden; 
}

#blob {
	background-color: white;
	height: 500px;
	aspect-ratio: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	background: linear-gradient(to right, magenta, orange);
	animation: rotates 20s infinite;
}

#blur {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(12vmax);
}

h1 {
  color: white;
  font-family: "Rubik", sans-serif;
  font-size: clamp(2em, 2vw, 4em);
  font-weight: 400;
  margin: 0px;
  padding: 20px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
}

h1 > .magic {
  animation: background-pan 3s linear infinite;
  background: linear-gradient(
    to right,
    var(--purple),
    var(--violet),
    var(--pink),
    var(--purple)
  );
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

@keyframes rotates {
  from {rotate: 0deg;} 
  50% {scale: 1 1.5;}
  to {rotate: 360deg;}
}

@keyframes background-pan {
  from {
    background-position: 0% center;
  }
  
  to {
    background-position: -200% center;
  }
}