:root {
  --salat-title-size: clamp(28px, 5.4vmin, 86px);
  --salat-clock-size: clamp(56px, 10.5vmin, 150px);
  --salat-date-size: clamp(16px, 2.6vmin, 40px);
  --salat-table-size: clamp(22px, 4.4vmin, 72px);
  --salat-prayer-name-size: clamp(18px, 3.2vmin, 52px);
  --salat-iqama-size: clamp(20px, 3.8vmin, 62px);
  --salat-next-size: clamp(18px, 3.5vmin, 56px);
  --salat-countdown-size: clamp(44px, 8.4vmin, 128px);
  --salat-alert-size: clamp(42px, 8vmin, 130px);
}

#masjidName {
  font-size: var(--salat-title-size) !important;
}

#clock {
  font-size: var(--salat-clock-size) !important;
}

#dateBox {
  font-size: var(--salat-date-size) !important;
}

#content > table {
  font-size: var(--salat-table-size) !important;
}

#content > table td:first-child,
#content > table th {
  font-size: var(--salat-prayer-name-size) !important;
}

#content > table td:nth-child(2) {
  font-size: var(--salat-table-size) !important;
}

#content > table td:nth-child(3) {
  font-size: var(--salat-iqama-size) !important;
}

#nextPrayer {
  font-size: var(--salat-next-size) !important;
}

#countdown {
  font-size: var(--salat-countdown-size) !important;
}

#iqamaAlert {
  font-size: var(--salat-alert-size) !important;
}

body.salat-portrait {
  --salat-title-size: clamp(24px, 4.4vmin, 48px);
  --salat-clock-size: clamp(42px, 8vmin, 78px);
  --salat-date-size: clamp(13px, 2.4vmin, 22px);
  --salat-table-size: clamp(26px, 5.2vmin, 54px);
  --salat-prayer-name-size: clamp(16px, 3.1vmin, 28px);
  --salat-iqama-size: clamp(20px, 4.2vmin, 42px);
  --salat-next-size: clamp(16px, 3.1vmin, 28px);
  --salat-countdown-size: clamp(38px, 7.4vmin, 72px);
}

body.salat-tv {
  --salat-title-size: clamp(48px, 7vmin, 86px);
  --salat-clock-size: clamp(84px, 12vmin, 150px);
  --salat-date-size: clamp(24px, 3.5vmin, 44px);
  --salat-table-size: clamp(48px, 7vmin, 78px);
  --salat-prayer-name-size: clamp(34px, 5vmin, 58px);
  --salat-iqama-size: clamp(40px, 5.8vmin, 66px);
  --salat-next-size: clamp(24px, 3.6vmin, 44px);
  --salat-countdown-size: clamp(58px, 8vmin, 96px);
}

body.salat-screen #masjidName {
  font-size: var(--salat-title-size) !important;
}

body.salat-screen #clock,
body.salat-countdown-below #clock,
body.salat-tv #centerStage #clock {
  font-size: var(--salat-clock-size) !important;
}

body.salat-screen #dateBox {
  font-size: var(--salat-date-size) !important;
}

body.salat-screen #content > table td:first-child,
body.salat-screen #content > table th,
body.salat-tv #content > table td:first-child,
body.salat-tv #content > table th {
  font-size: var(--salat-prayer-name-size) !important;
}

body.salat-screen #content > table td:nth-child(2),
body.salat-tv #content > table td:nth-child(2) {
  font-size: var(--salat-table-size) !important;
}

body.salat-screen #content > table td:nth-child(3),
body.salat-tv #content > table td:nth-child(3) {
  font-size: var(--salat-iqama-size) !important;
}

body.salat-screen #nextPrayer,
body.salat-countdown-below #nextEventCircle #nextPrayer,
body.salat-tv #nextStatusCircle #nextPrayer {
  font-size: var(--salat-next-size) !important;
}

body.salat-screen #countdown,
body.salat-countdown-below #nextEventCircle #countdown,
body.salat-tv #nextStatusCircle #countdown {
  font-size: var(--salat-countdown-size) !important;
}

body.salat-screen #iqamaAlert,
body.salat-countdown-below #iqamaAlert,
body.salat-tv #iqamaAlert {
  font-size: var(--salat-alert-size) !important;
}

body.salat-box-scale #content > table td:first-child {
  font-size: var(--box-name-size, var(--salat-prayer-name-size)) !important;
}

body.salat-box-scale #content > table td:nth-child(2) {
  font-size: var(--box-time-size, var(--salat-table-size)) !important;
}

body.salat-box-scale #content > table td:nth-child(3) {
  font-size: var(--box-iqama-size, var(--salat-iqama-size)) !important;
}