Circular Text with HTML, CSS, and JavaScript

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
  </head>
  <body>
    <div class="circle">
        <div class="text">
         <p>sotospez  1234567891234567890  sotospez  123456789123456789  </p>       
        </div>
     </div>
    <script src="lib/script.js"></script>
  </body>
</html>

/* Add your styles here */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
:root{
  --size:300px;
  --pad:10px 0;
}
body {
    margin:0;
    padding: 50px;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    
}
.circle{
    margin:0;
    position:  relative;
    width: var(--size);
    height:  var(--size);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #000;
}
p{
    margin:0;
    padding:0;

}
.text {
    position: absolute;
    width: var(--size);
    height:  var(--size);
    margin:0;
    padding:0;
    animation:spin 15s linear infinite;
}
@keyframes spin 
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

.text span {
    position: absolute;
    display: inline-block;
    left:50%;
    font-size: 1em;    
    transform-origin: 0 calc((var(--size)/2));
    margin:0;
    text-transform: uppercase;
    padding: var(--pad);
}

    const text = document.querySelector('.text p');
    let len = text.innerHTML.length;
       text.innerHTML = text.innerHTML.split("").map(
        (char, i) =>
        `<span style="transform:rotate(${i * (360/len)}deg)">${char}</span>`
       ).join("");