body:not(.salat-screen) {
  background: #031820 !important;
}

body:not(.salat-screen) #content {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(3, 20, 29, 0.92), rgba(5, 44, 52, 0.74) 46%, rgba(2, 16, 26, 0.94)),
    radial-gradient(circle at 18% 16%, rgba(0, 255, 255, 0.2), transparent 30%),
    radial-gradient(circle at 82% 84%, rgba(255, 213, 92, 0.18), transparent 34%),
    url("background.jpg") center center / cover no-repeat !important;
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.72);
}

body:not(.salat-screen) #content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.24;
  background-size: 92px 92px;
  background-image:
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.24) 47%, rgba(255, 255, 255, 0.24) 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.16) 53%, transparent 54%),
    radial-gradient(circle at center, transparent 0 24px, rgba(244, 210, 116, 0.24) 25px 26px, transparent 27px);
}

body:not(.salat-screen) #content::after {
  content: "";
  position: absolute;
  inset: auto -8vw 0;
  height: 34vh;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(2, 16, 26, 0.86) 42%, rgba(2, 16, 26, 0.96)),
    linear-gradient(90deg, rgba(0, 255, 255, 0.12), rgba(244, 210, 116, 0.16), rgba(0, 255, 255, 0.12));
  clip-path: polygon(0 38%, 12% 24%, 27% 35%, 43% 18%, 59% 34%, 76% 22%, 100% 36%, 100% 100%, 0 100%);
}

body:not(.salat-screen) #content > * {
  position: relative;
  z-index: 2;
}

body:not(.salat-screen) #masjidName,
body:not(.salat-screen) #clock {
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.72) !important;
}

body:not(.salat-screen) table {
  background: rgba(1, 18, 26, 0.3);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}