body {
    font-family: Gill, Helvetica, sans-serif;
    color           : #004;
    margin          : 0;
    background      : no-repeat url("../Images/UT-front-large.jpg") top left;
    background-size : cover;
    font-size       : 1.8vh;
    line-height     : 1.3rem;
    width           : 100vw;
    height          : 100vh;
    position        : fixed;
    top             : 0;
    left            : 0;
}
.all-content {
    width           : 100vw;
    height          : 100vh;
    margin          : 0;
    position        : absolute;
    overflow        : scroll;
    top             : 0;
    left            : 0;
    padding         : 0.5em 1em 8em 1em;
    background-color: rgba(255,255,255,0.85);
}
.lyrics {
    color           : #444;
    margin          : 0 3em 1em 3em;k
    font-family     : Gill, Helvetica, sans-serif;
    background      : no-repeat url("../Images/lyrics-nuit-bgd.jpg") top left;
    background-size : cover;
}

h1 ,h2 ,h3 ,h4 {
    text-align      : center;
    width           : 100%;
    display         : inline-block;
}
audio {
    width           : 40%;
    display         : inline-block;
    vertical-align  : top;
    padding         : 0.2em 0.5em;
    margin          : 0.1em 3%;
}

p, ul {
    max-width       : 40em;
    margin-left     : auto;
    margin-right    : auto;
}

div#link_block {
    display         : inline-block;
    width           : 100%;
}

div.verse     { margin-bottom: 1em; clear: both; }
div.verse_alt { margin: 0 8% 1em 0; }
div.indent    { margin-left: 2em; }
div#link_block a { display: inline-block; margin-right: 12px; }

img     { border-width: 0; display: inline-block; }
img.lsi { display: inline-block; clear: left; margin-right: 2em; }
img.rsi { display: inline-block; float: right; clear: right; margin-left: 2em; }
a       { text-decoration: none; font-style: normal; font-family: sans-serif; font-size: x-small }
a:link,
a:visited {
    color: #FFF; background-color: #000; text-decoration: none;
    border: 1px solid #CFC;
    padding: 1px 5px;
}
a:hover,
a:active {
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 1px 4px;
    color: white;
}

a.pix:link,
a.pix:visited {
    color: #FCC; background-color: #000; text-decoration: none;
    border: none; padding: 0;
}

.a-v {
    display         : inline-block;
    width           : 40%;
    min-width       : 20vw;
    max-width       : 40vw;
}
.container {
    display         : inline-block;
    width           : 100%;
    margin-bottom   : 0.5vh;
    border          : medium solid rgba(255, 255, 180, 0.9);
    border-radius   : 0.5rem;
}

.l { text-align     : left  ; }
.c { text-align     : center; }
.r { text-align     : right ; }

.details {
    width           : auto;
    padding         : 0.3em 0.5em;
}

h1,h2,h3  { text-align: center; }
em,strong { font-style: italic; font-weight: bold; }

.title-spacer {
    display         : inline-block;
    width           : 55%;
    min-width       : 10em;
    max-width       : 30em;
    line-height     : 1.3em;
    max-height      : 10em;
    padding         : 3px 0.7em;
    border-radius   : 0.3rem;
}

/*
 * The HTML that uses this CSS will set variable '--name', e.g. style="--name: target-1;".
 * Inside the HTML entity that does this, the following rules connect a base to a target:
 *  - .spring-load .springboard establishes which target is the base that positions the popup.
 *  - .spring-load .flyer       positions the popup with respect to its base.
 */
.title-spacer .springboard {
/* this identifies the base for positioning by name
 */
  anchor-name       : var(--name);
  border            : medium solid rgba(255, 180, 180, 1.0);
  border-radius     : 0.4em;
  padding           : 2px 0.5em;
  background-color  : rgba(255, 255, 255, 0.6);
}
.title-spacer .flyer {
  display           : block;
  width             : 20em;
  max-width         : 100%;
  min-width         : 8 em;
  padding           : 0.5em;
  background-color  : rgba(127, 0, 0, 0.8);
  border-radius     : 0.3em;
  color             : white;
  cursor            : pointer;
  position          : fixed;
  bottom            : 0;
  left              : 2vw;
  z-index           : 2;
  transform         : translateY(100%);
/* this popup element is positioned WRT the named element.
  position-anchor   : var(--name);    /*
  top               : anchor(bottom);
  left              : anchor(left);
 */
/*
  position-try-options: flip-block, flip-inline, flip-start;
 */
  transition        : opacity 0.2s ease, visibility 0.2s ease;
  transition-delay  : 0.3s;
  opacity           : 0;
  visibility        : hidden;
}

.title-spacer:focus-within ,
.title-spacer:hover {
  cursor            : pointer;
}

.title-spacer:focus-within .flyer ,
.title-spacer:hover .flyer {
  opacity           : 1;
  visibility        : visible;
  transform         : translateY(0%);
}
.title-spacer:focus-within .flyer::before ,
.title-spacer:hover        .flyer::before {
  content           : var(--track-name)": ";
  color             : rgba(255,255,255,0.7);
  font-size         : larger;
  text-align        : center;
}

summary {
    display         : inline-block;
    width           : 100%;
    font-weight     : bold;
    margin          : -0.5em -0.5em 0;
    padding         : 0.3em 0.5em;
}

.guest {
    margin          : 0.1em 0.1em 0.1em 5%;
    padding         : 0.1em;
    border          : thin solid rgba(255, 255, 180, 0.7);
    border-radius   : 0.5em;
}
.guest::before ,
.copyright::before ,
.songwriters::before {
    color           : rgba(255,255,255,0.7);
    font-size       : smaller;
    vertical-align  : middle;
}

.copyright::before {
    content         : "Copyright: ";
}
.guest::before {
    content         : "Guest artists: ";
}
.songwriters::before {
    content         : "Songwriters:";
}

auth { display      : inline-block;
       font-style   : italic;
       font-family  : sans-serif;
       text-align   : center; }

.small    { font-style: normal; font-family: sans-serif; font-size: small; }

.draggable-card {
  /* 1. Use absolute fixed positioning */
  position: fixed;

  /* 2. Read positions from dynamic CSS variables (defaults to 100px from top/left) */
  left: var(--x, 100px);
  top: var(--y, 100px);

  /* Prevent the browser from selecting text inside while dragging */
  user-select: none;
  touch-action: none; /* Prevents mobile scrolling issues while dragging */

  /* Basic styling */
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 250px;
}

.drag-handle {
  padding: 10px;
  background: #f1f1f1;
  cursor: move; /* Gives the user a visual "draggable" cursor clue */
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.card-content {
  padding: 15px;
}