p {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 30%);
  background-clip: text;
  color: transparent;
}

.rotate-list span {
  animation: rotateList 4s linear infinite;
  color: #3f91ef;
  opacity: 0;
  position: absolute;
}
.rotate-list span:nth-child(2) {
  animation-delay: 2s;
}
@keyframes rotateList {
  0% { opacity: 0; }
  20% { opacity: 0; transform: translateY(50px); }
  30% { opacity: 1; transform: translateY(0px); }
  70% { opacity: 1; transform: translateY(0px); }
  80% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 0; }
}

.box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  animation: boxMove 15s infinite;
}
@keyframes boxMove {
  0%   {top: 0px; left: 0px; background: red; width: 50px;}
  25% {top: 100px; background: yellow; width: 75px;}
  50% {top: 200px; left: 100px; background: yellow; width: 75px;}
  75% {left: 0px; background: yellow; width: 75px;}
  100%   {top: 0px; background: red; width: 50px;}
}

sudo apt install nodejs npm

npx create-react-app tic-tac-toe
cd tic-tac-toe
npm start

const root = ReactDOM.createRoot(document.getElementById("tic-tac-toe"));
root.render(<Game />);

npm run build

<link rel="stylesheet" type="text/css" href="/documents/7/tic-tac-toe.css">
<div id="tic-tac-toe"></div>
<script src="/documents/8/tic-tac-toe.js" async=""></script>

clip-path: polygon(0 0,100% 15%,100% 100%,0 85%)