*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

a,
button,
img {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  background-color: transparent;
  border: none;
  outline: none;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%);
}

.magic-star {
  --size: 1.5vmax;
  animation: scale 700ms ease forwards;
  display: block;
  height: var(--size);
  left: var(--star-left);
  position: absolute;
  top: var(--star-top);
  width: var(--size);
}

.magic {
  position: relative;
  display: inline-block;
}

.magic > .magic-star > svg {
  animation: rotate 1000ms linear infinite;
  display: block;
  opacity: 0.7;
}

.magic > .magic-star > svg > path {
  fill: #dfdf18;
}

.magic > .magic-text {
  animation: background-pan 3s linear infinite;
  background: linear-gradient(to right, lime, #61e2e5, #383acf, red);
  background-size: 200%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

span {
  font-size: 2vmax;
  text-align: center;
}

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

  to {
    background-position: -200% center;
  }
}
@keyframes scale {
  from,
  to {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}