/* Raster children display at 4 CSS px per logical image pixel.
   The backdrop chooses a larger print, then crops to the viewport. */
* { box-sizing: border-box; }
html { min-height: 100%; scrollbar-color: #805252 #2e0b10; }
body { margin: 0; overflow-x: hidden; color: #e6eed0;
  background: #2e0b10 url('../images/prayers/cloth-tile.png') center top / 1600px 1600px repeat fixed;
  image-rendering: pixelated; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.field { position: relative; width: 1000px; min-height: 100svh; margin: 0 auto; }
.ground { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ground img { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 1200px; height: auto; }
img { display: block; image-rendering: pixelated; }
.necklace { position: absolute; inset: 0; height: 850px; }
.chain { position: absolute; top: 0; left: 100px; width: 800px; height: 800px; }
.chain img { width: 800px; height: 800px; }
.bead { position: absolute; width: 160px; height: 160px; color: #fbffe2; }
.bead .rest, .bead .rest img { width: 160px; height: 160px; }
.bead .attention { display: none; position: absolute; top: -50px; left: -50px; }
.bead .attention, .bead .attention img { width: 260px; height: 260px; }
.bead-name { display: none; position: absolute; top: 160px; left: -30px; width: 220px;
  text-align: center; font: 16px 'Times New Roman', serif; background: #230c31; }
.bead:hover, .bead:focus { z-index: 3; }
.bead:hover .rest, .bead:focus .rest { visibility: hidden; }
.bead:hover .attention, .bead:focus .attention, .bead:hover .bead-name, .bead:focus .bead-name { display: block; }
.bead-basket-case { left: 245px; top: 180px; }
.bead-effette-waif-cavalcade { left: 595px; top: 180px; }
.bead-st-augustine { left: 420px; top: 0; }
.bead-again { left: 285px; top: 390px; }
.bead-pathetic { left: 555px; top: 390px; }
.crucifix { position: absolute; left: 460px; top: 655px; width: 85px; height: 135px; }
.crucifix span { display: none; position: absolute; bottom: 0; left: 0; color: #fff;
  font: 14px 'Times New Roman', serif; background: #230c31; }
.crucifix:hover span, .crucifix:focus span { display: block; }
.song { position: relative; min-height: 100svh; padding-bottom: 64px; }
.art-placement { position: absolute; top: 0; bottom: 0; width: 800px; pointer-events: none; }
.opened-art { display: block; position: sticky; top: 0; width: 800px; height: 800px; }
.opened-art img { width: 800px; height: 800px; }
.writing { position: relative; padding-top: 20px; width: 440px; }
.close-song { border: 0; padding: 0 8px; margin: 0 10px 12px 0; color: inherit;
  background: transparent; font: 24px 'Times New Roman', serif; }
.song-name { color: inherit; font: 18px 'Times New Roman', serif; }
.lyrics { font: 16px/1.35 'Courier New', monospace; }
.lyrics p { margin: 0 0 3px; }
.lyrics p span { padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.verse-gap { height: 20px; }
.reading .necklace { display: none; }
.song-basket-case .art-placement { left: -130px; }
.song-basket-case .writing { margin-left: 590px; color: #c7ffff; }
.song-basket-case .lyrics p span, .song-basket-case .song-name { background: #172347; }
.song-effette-waif-cavalcade .art-placement { left: 325px; }
.song-effette-waif-cavalcade .writing { margin-left: 30px; width: 365px; color: #d7fcad; }
.song-effette-waif-cavalcade .lyrics { font: 17px/1.25 Arial, sans-serif; }
.song-effette-waif-cavalcade .lyrics p span, .song-effette-waif-cavalcade .song-name { background: #233a31; }
.song-st-augustine .art-placement { left: 190px; }
.song-st-augustine .writing { margin-left: 30px; padding-top: 520px; width: 570px; color: #2d075c; }
.song-st-augustine .lyrics { font: 19px/1.12 'Times New Roman', serif; }
.song-st-augustine .lyrics p span, .song-st-augustine .song-name { background: #e4cbec; }
.song-st-augustine .close-song { background: #e4cbec; }
.song-again .art-placement { left: -90px; }
.song-again .writing { margin-left: 550px; width: 435px; color: #ffeaa3; }
.song-again .lyrics { font: 16px/1.3 Arial, sans-serif; }
.song-again .lyrics p span, .song-again .song-name { background: #342241; }
.song-pathetic .art-placement { left: -190px; }
.song-pathetic .writing { margin-left: 525px; width: 450px; color: #ffb7eb; }
.song-pathetic .lyrics { font: 17px/1.2 'Times New Roman', serif; }
.song-pathetic .lyrics p span, .song-pathetic .song-name { background: #33142e; }

@media (min-width: 701px) and (max-width: 1100px) {
  .field { width: 100%; }
  .chain { left: calc(50% - 400px); }
  .bead-basket-case { left: calc(50% - 255px); }
  .bead-effette-waif-cavalcade { left: calc(50% + 95px); }
  .bead-st-augustine { left: calc(50% - 80px); }
  .bead-again { left: calc(50% - 215px); }
  .bead-pathetic { left: calc(50% + 55px); }
  .crucifix { left: calc(50% - 40px); }
  .song-basket-case .writing, .song-again .writing,
  .song-pathetic .writing { margin-left: 45%; width: 53%; }
  .song-basket-case .art-placement, .song-again .art-placement,
  .song-pathetic .art-placement { left: -250px; }
  .song-st-augustine .writing { width: calc(100% - 60px); }
}

@media (max-width: 700px) {
  .field { width: min(360px, 100%); }
  .ground img { left: 0; transform: translateY(-50%); }
  .necklace { height: 650px; }
  .chain { left: 0; top: 55px; width: 360px; height: 360px; }
  .chain img { width: 360px; height: 360px; }
  .bead, .bead .rest, .bead .rest img { width: 96px; height: 96px; }
  .bead .attention { top: -32px; left: -32px; }
  .bead .attention, .bead .attention img { width: 160px; height: 160px; }
  .bead-name { top: 105px; left: -32px; width: 160px; font-size: 14px; }
  .bead-basket-case { left: 52px; top: 125px; }
  .bead-effette-waif-cavalcade { left: 212px; top: 125px; }
  .bead-st-augustine { left: 132px; top: 28px; }
  .bead-again { left: 72px; top: 225px; }
  .bead-pathetic { left: 192px; top: 225px; }
  .crucifix { left: 157px; top: 346px; width: 48px; height: 66px; }
  .art-placement { width: 320px; height: 320px; bottom: auto; }
  .opened-art, .opened-art img { width: 320px; height: 320px; }
  .opened-art { position: static; }
  .song .art-placement { left: 20px; }
  .song .writing { width: calc(100% - 24px); margin-left: 12px; padding-top: 330px; }
  .song .lyrics { font-size: 15px; line-height: 1.3; }
  .song-st-augustine .writing { padding-top: 285px; }
  .song-effette-waif-cavalcade .art-placement { left: 100px; }
  .song-effette-waif-cavalcade .writing { padding-top: 255px; }
  .song-again .art-placement { left: 0; }
  .song-again .writing { padding-top: 330px; }
  .song-pathetic .art-placement { left: -30px; }
  .song-pathetic .writing { padding-top: 310px; }
}