/* Start General Stuff */

/* Bootstrap icons */
/* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"); */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  /* to prevent text lines breaking at spaces */
  white-space: nowrap;
  /* hide text which does not fit inside its element */
  overflow: auto;
  overflow-y: auto;
  /* ellipsis: hint on hidden text (overflown) by "..." */
  text-overflow: clip;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
  /* line-height: 1.5; */

  /* color: hsl(130, 60%, 66%); */
  /* font-size: 1.25rem; */
  /* background-color: hsl(204, 6%, 17%); */
  /* color: hsl(120, 1%, 21%);*/
  /* font-size: 1.25rem; */
  /* background-color: hsl(210, 17%, 98%); */
  /* background: #eeeeee;*/

  background-color: #1E1E1E;
  color: #FFFFFF;

}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3 {
  font-weight: var(--fw-700);
}

/* Root font-size on the document level */
html {
  font-size: 20px;
}

@media (max-width: 900px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 12px;
  }
}

/* End General Stuff */

/* Start Layout Related */
main {
  /* overflow: hidden; */
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;

  /* color: hsl(130, 60%, 66%); */
  /* font-size: 1.25rem; */
  /* background-color: hsl(204, 6%, 17%); */
  /* color: hsl(120, 1%, 21%);*/
  /* font-size: 1.25rem; */
  /* background-color: hsl(210, 17%, 98%); */
}

.main-rows-daily-prayers {
  grid-template-rows:
    auto
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr;
}

.main-rows-prayer-content {
  grid-template-rows:
    auto
    auto
    1fr
    1fr
    1fr;
}

.main-rows-rakaa-player {
  grid-template-rows:
    auto
    1.5fr
    1fr
    1fr
    1fr
    auto;
    auto;
}

/* End Layout Related */

/* Start Styling Related */

.title {
  max-width: 80%;
  justify-self: center;
  /* color: hsl(107, 64%, 50%); */
  /* color: black;*/
  color: white;
  /*background-color: #2C2C2C;*/
  /*font-family: "Acme", sans-serif;*/
  font-family: 'Poppins', Arial, 'Times New Roman', Tahoma, Verdana, 'Lucida Sans Unicode', Helvetica, sans-serif;
  font-size: 1.8rem;
  font-weight: bolder;
  direction: ltr;
  unicode-bidi: embed;
  text-transform: uppercase; /* Uppercase text */

  padding: 0.2rem 0.5rem;
  margin: 1.5rem 0;
  /* outline-color: rgb(12, 64, 220);
  outline-style: solid; */
}

/* ======================= */
.main-prayers {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.prayer-view {
    color: #FFFFFF;
    background-color: #2C2C2C;
    padding: 20px;
    margin: 1px;
    text-align: center;
}

.word-pairs {
  display: flex;
  /* justify-content: space-between;*/
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  width: 100%;
}

.pair-container {
  width: 30%;
  text-align: center;
}

.word-pair {
  /*display: inline-block;*/
  display: block;
  text-align: center;
  /* vertical-align: middle; */
  white-space: nowrap; /* Prevent words from wrapping */
}

.word {
  display: block;
  /*font-size: 20px;*/
  font-size: 1.2rem;
  font-weight: bold;
}

.word-ltr {
  direction: ltr;
  unicode-bidi: embed;
  font-family: Arial, 'Times New Roman', Tahoma, Verdana, 'Lucida Sans Unicode', Helvetica, sans-serif;
}

.word-rtl-ar {
  direction: rtl;
  unicode-bidi: embed;
  font-family: 'Noto Naskh Arabic', Arial, sans-serif;
}

.word-rtl-he {
  direction: rtl;
  unicode-bidi: embed;
  font-family: 'David', 'Gisha', Arial, 'Arial Hebrew', Tahoma, Verdana, sans-serif;
}

.link-container {
  text-decoration: none; /* Removes underline from the link */
  color: inherit; /* Inherits the color from the parent element */
}

.subtitles {
  /*display: flex;*/
  /*display: inline-block;*/
  display: block;
  font-size: 1.8rem;
  /* justify-content: space-between;*/
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  text-align: center;
  /* vertical-align: middle; */
  width: 100%;
  /*white-space: nowrap;*/ /* Prevent words from wrapping */
  white-space: normal;
  /*word-wrap: break-word;*/
  /*overflow-wrap: break-word;*/
  padding: 1rem;
}

#video_player {
    width: 100%;
    max-width: 800px;
    height: 150px;
    margin-bottom: 1.5rem;
}

.button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.btn-group {
  display: flex; /* Group the other buttons together */
}

.btn {
  background-color: #f2f2f2;
  border: none;
  color: #333;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #ddd;
}

.btn i {
  font-size: 1.5rem;
}

/* End Styling Related */