Count down customization

Hi!

Please could someone help me with this count down on my page , the code i have is configured for 30 minutes and i only need this timer for 10 minutes, below i copy the code i am already using

HTML

<center>
  <h2 id="timer"></h2>
</center>

<script>
  var countDownDate = new
Date("Apr 6, 2023 11:00:00").getTime();var x = setInterval(function() {var now = new
Date().getTime();var distance = countDownDate - now;var minutes = Math.floor((distance % (1000 * 60 *
60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) /
1000);document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s ";if (distance < 0)
{clearInterval(x);document.getElementById("timer").innerHTML = "Tu tiempo ha terminado";} }, 1000); </script>

and the other question is, it's possible to edit the design of the count down in order to be something like this? 10 minutes

thank you so much, i hope you can help me.