@property --x {
  syntax: "<length>";
  inherits: false;
  initial-value: 1vw;
}

@property --y {
  syntax: "<length>";
  inherits: false;
  initial-value: 1vh;
}

body{
  display: grid;
  place-content: center;
  height: 100vh;
  margin:0;
  background-color: #0c2251;
  font-size: min(4rem, 12vw);
  font-family: 'Panchang-Bold';
  color: #967f94;
}
a {
  text-decoration: none;
  color: currentColor;
}

p {
  width: 1400px;
  height: 200px;
  /* background: #0c2251; */
  /* background: pink; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

}
p:hover span {
  position: static;
}

span {
  position: fixed;
  
}

#P {
  animation: P 3s infinite;
}

@keyframes P {
  0% {top: calc(20 * var(--y)); left: calc(30 * var(--x));}
  50% {top: calc(70 * var(--y)); left: calc(90 * var(--x));}
  80% {top: calc(32 * var(--y)); left: calc(80 * var(--x));}
  100% {top: calc(20 * var(--y)); left: calc(30 * var(--x));}

}

#L {
  animation: L 3s infinite -300ms;
}

@keyframes L {
  0%   { top: calc(15 * var(--y)); left: calc(20 * var(--x)); }
  50%  { top: calc(60 * var(--y)); left: calc(85 * var(--x)); }
  80%  { top: calc(25 * var(--y)); left: calc(70 * var(--x)); }
  100% { top: calc(15 * var(--y)); left: calc(20 * var(--x)); }

}

#U {
  animation: U 3s infinite -600ms;
}

@keyframes U {
  0%   { top: calc(25 * var(--y)); left: calc(35 * var(--x)); }
  50%  { top: calc(75 * var(--y)); left: calc(60 * var(--x)); }
  80%  { top: calc(30 * var(--y)); left: calc(90 * var(--x)); }
  100% { top: calc(25 * var(--y)); left: calc(35 * var(--x)); }

}

#R {
  animation: R 3s infinite -900ms;
}

@keyframes R {
  0%   { top: calc(10 * var(--y)); left: calc(50 * var(--x)); }
  50%  { top: calc(65 * var(--y)); left: calc(20 * var(--x)); }
  80%  { top: calc(40 * var(--y)); left: calc(75 * var(--x)); }
  100% { top: calc(10 * var(--y)); left: calc(50 * var(--x)); }

}

#I {
  animation: I 3s infinite -600ms;
}

@keyframes I {
  0%   { top: calc(35 * var(--y)); left: calc(10 * var(--x)); }
  50%  { top: calc(80 * var(--y)); left: calc(45 * var(--x)); }
  80%  { top: calc(20 * var(--y)); left: calc(65 * var(--x)); }
  100% { top: calc(35 * var(--y)); left: calc(10 * var(--x)); }

}

#V {
  animation: V 3s infinite -1500ms;
}

@keyframes V {
  0%   { top: calc(18 * var(--y)); left: calc(70 * var(--x)); }
  50%  { top: calc(55 * var(--y)); left: calc(30 * var(--x)); }
  80%  { top: calc(42 * var(--y)); left: calc(90 * var(--x)); }
  100% { top: calc(18 * var(--y)); left: calc(70 * var(--x)); }

}

#E {
  animation: E 3s infinite -1800ms;
}

@keyframes E {
  0%   { top: calc(28 * var(--y)); left: calc(55 * var(--x)); }
  50%  { top: calc(72 * var(--y)); left: calc(15 * var(--x)); }
  80%  { top: calc(33 * var(--y)); left: calc(80 * var(--x)); }
  100% { top: calc(28 * var(--y)); left: calc(55 * var(--x)); }

}

#R2 {
  animation: R 3s infinite -2100ms;
}

@keyframes R2 {
  0% {top: calc(20 * var(--y)); left: calc(30 * var(--x));}
  50% {top: calc(70 * var(--y)); left: calc(90 * var(--x));}
  80% {top: calc(32 * var(--y)); left: calc(80 * var(--x));}
  100% {top: calc(20 * var(--y)); left: calc(30 * var(--x));}

}

#S {
  animation: S 3s infinite -2400ms;
}

@keyframes S {
  0%   { top: calc(22 * var(--y)); left: calc(40 * var(--x)); }
  50%  { top: calc(85 * var(--y)); left: calc(75 * var(--x)); }
  80%  { top: calc(38 * var(--y)); left: calc(25 * var(--x)); }
  100% { top: calc(22 * var(--y)); left: calc(40 * var(--x)); }

}