@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100..700&display=swap')

@font-face {
  font-family: 'Alkalami';
  src: url('https://dl.dropboxusercontent.com/scl/fi/prqi5qovrkyp1odo3l54a/Alkalami-Regular.ttf?rlkey=supyyuppl22wlnbtifro1vshj&st=i592p7v3&dl=0') format('truetype');
}

body {
  margin: 0;
  padding: 0;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  direction: rtl;
  background: url('BlankPage.png') repeat-y center top;
  background-size: contain; /* Or use 100% auto */
}

.page {
  position: relative;
  width: 100%;
  max-width: 90vw;
  aspect-ratio: 3497 / 2362;
  margin: 2rem auto;
}

#title {
  background-image: url('TitleTemplate.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.chapter {
  position: relative;
  width: 90vw;
  aspect-ratio: 6300 / 1704;
  left: 0.4%;
  background-image: url('ChapterTemplate.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sudanic-text {
  font-family: 'Alkalami', serif;
  position: absolute;
  font-size: 2rem;
  color: black;
  white-space: pre;
}

.arabic-text {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  position: absolute;
  font-size: 2rem;
  color: black;
  white-space: pre;
}

.english-text {
  position: absolute;
  font-family: 'Kameron', serif;
  direction: ltr;
}

.vowel {
  color: #bf0000;
}

.arabic-box {
  position: absolute;
  width: 32vw;
  right: 9.3%;
  font-size: 1.06vw;
  max-width: 100%;
  padding: 1.5rem;
  text-align: justify;
  direction: rtl;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  line-height: 1.55;
}

.english-box {
  position: absolute;
  width: 32vw;
  left: 9.3%;
  font-size: 1.02vw;
  max-width: 100%;
  padding: 1.5rem;
  text-align: justify;
  direction: ltr;
  font-family: 'Kameron', serif;
}