I need to put this code inside an html box, so it all has to be in line, but css style does not load

The code below does not load the styles in the CSS inline, did I declare a tag wrongly?The code below does not load the styles in the CSS inline, did I declare a tag wrongly? I need to put this code inside an html box, so it all has to be in line.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>
<style>
   :root {
    --color: #44cc44;
  }
  
  .my-btn-container .DlocalGoButton {
    background-color: var(--color);
    padding: 15px;
  }
</style>

<body>
  <center>
    <script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
      const s = document.createElement("script");
      s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
        const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
          t = e.parentNode,
          n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
          c = document.createElement("div");
        c.classList.add("my-btn-container");
        c.classList.add("my-btn-container"); // we are adding our own class to apply css
        c.id = n, t.insertBefore(c, e);
        new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
          country: "UY",
          currency: "UYU",
          amount: "17000",
          lang: "",
          text: "quiero inscribirme"
        })
      });
    </script>

  </center>

</body>

</html>

Answer

You’re trying to reference a variable, which I don’t think is your intention:

.my-btn-container .DlocalGoButton {
  background-color: var(#44cc44); /*--Here, remove var()*/
  padding: 15px;
}

Advertisement

Answer