@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
filter: hue-rotate(0deg);
}
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background: linear-gradient(
0deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
}
body::before {
width: max(150vw, 150vh);
height: max(150vw, 150vh);
left: 50%;
top: 50%;
position: absolute;
content: ' ';
background-image: url('/assets/stars.svg');
background-size: min(8vw, 8vh);
animation: spin 20s ease-in-out infinite;
animation-direction: reverse;
}
h1 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
white-space: nowrap;
margin: 0;
display: block;
position: absolute;
top: 50%;
left: 50%;
color: black;
font-size: min(10vw, 10vh);
color: hsl(0deg, 100%, 60%);
animation: spin 8s ease-in-out infinite;
transform: translate(-50% -50%);
}