/* Arabic Styles - Common/default, next screen media, print, last smartphone */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Markazi+Text:wght@400;500;600;700&family=Reem+Kufi&family=Scheherazade:wght@400;700&display=swap');

.amiri, .amiri p {  /* default looks, element and enclosed paragraphs */
   font-family: Amiri, Sans-serif;
   font-size: 19px;
   line-height: 170%;
}

.markazi, .markazi p {
   font-family: 'Markazi Text', Sans-serif;
   font-size: 20px;
   line-height: 150%;
}

.scheherazade, .scheherazade p {
   font-family: Scheherazade, Sans-serif;
   font-size: 25px;
   line-height: 120%;
}

.amiri-relax, .amiri-relax p {   /* modified looks */
   line-height: 200%;
}

.norm_ar, .verse_ar {   /* default/normal styles */
   margin: 0 5% 0 3%;
   /*border:#009D4F solid 1px;*/
}

.norm-first_ar {
   margin: 2% 5% 0 3%;
}

.norm-verse_ar {
   margin:0;
   float: right;
   text-align-last: justify;
   width: 11.4em;
   /*border:red solid 1px;*/
}

.verse-one .norm-verse_ar {
   margin: auto;
   float: none;
}

.verse-display_ar .norm-verse_ar {
   margin:0 0.6em 0;
   width: 10.4em;
   /*border:red solid 1px;*/

}

.verse-display_ar {
   width:25em;
   margin:0 auto;
}

.verse-short .norm-verse_ar {
   width: 8.8em;
}

.ar {  /* utility - element mod */
   direction:rtl;
   /*border:blue solid 1px;*/
}

.just {
   text-align:justify;
}

.indent_ar {
   margin-right:5%;
}

.indent-first_ar {
   text-indent:2em;
}

.space-big_ar {
   margin-top: 2.5%;
}

.space-small_ar {
   margin-top: 1%;
}

.center {
   margin:0 auto;
}

.hide {
   display: none;
}

/* --- specific elements marked by ID ------------------- */

#page-title_ar {
   margin:0;
   float:right;
   direction:rtl;
   font-family:'Reem Kufi', Sans-serif;
   font-size:130%;
}

/* --- story styles styles ------------------------------ */

.story { /* base display styles, each font custom-overrides looks */
   float:right;
   width:50%;
   border:black solid 1px;
   padding:1% 2%;
   margin-right:2%;
}

.story-p1 {
   float:left;
   width:40%;
   margin-top:2%;
   margin-bottom:0;
   padding:0;
}

.story-p {
   float:left;
   width:40%;
   margin:0;
   padding:0;
   text-indent:2em;
}

/* font specific overrides, 2 cases: on same element or descendant */
.amiri.story, .amiri .story {font-size:24px; line-height:210%;}
.amiri.story-p1, .amiri .story-p1, .amiri.story-p, .amiri .story-p {font-size:18px}


@media only screen and (max-width: 540px) {

   .amiri.story, .amiri .story {
      font-size:20px;
   }

   .amiri.story-p1, .amiri .story-p1, .amiri.story-p, .amiri .story-p {
      font-size:16px;
      line-height:148%;
   }
   
   .story-p1 {
      margin-top:4%;
   }

}