styles.css

@font-face {
  font-family: "hafs";
  src: url("https://fonts.hassaanmv.com/fonts/UthmanicHafs1 Ver14.woff2")
      format("woff2"),
    url("https://fonts.hassaanmv.com/fonts/UthmanicHafs1 Ver14.woff")
      format("woff");
  font-display: block;
}
body {
  direction: rtl;
  /* font-size: 16px; */
}
.main {
  margin: 1em auto;
  max-width: 50em;
  min-width: 20em;
}
.ayahbox {
  font-family: hafs;
  font-size: 1.6em;
  text-align: justify;

  border-style: solid; /*for chromium*/
  margin: 0.5em; /* to allow for background color by extending border transparent parts*/
  padding: 0 1.2em;
  border-image-slice: 30% 30.5%;
  border-image-width: 2em;
  border-image-repeat: round round;
  border-image-source: url("image/ayahbox-orig.svg");
  border-image-outset: 0.6em; /* margin + .1em for optical alignment*/
  background-color: beige;
}

.footer {
  padding-top: 1em;
  text-align: center;
  direction: ltr;
}

a {
  color: inherit;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: #ccc;
  }
  .ayahbox {
    border-image-source: url("image/ayahbox-dark.svg");
    background-color: #222;
  }
  .footer {
    color: #ccc;
  }
}