:root  
{  --ON:;
   --OFF: initial;
   --debug: var(--ON);
   --error-color: red;                           /* should never be seen */

   --bg-7: var(--debug) yellow; 
   --bg-6: var(--debug) gray; 
   --bg-5: var(--debug) lightGray;
   --bg-4: var(--debug) lightGreen;
   --bg-3: var(--debug) orange;
   --bg-2: var(--debug) pink;
   --bg-1: var(--debug) cyan;   
   --bg-0: var(--debug) var(--error-color);
  
   --c-6: var(--debug) black; 
   --c-5: var(--debug) gray;
   --c-4: var(--debug) green;
   --c-3: var(--debug) brown;
   --c-2: var(--debug) hotPink;
   --c-1: var(--debug) blue;   
   --c-0: var(--debug) var(--error-color);

   --gap-8: 50px;
   --gap-7: 30px;
   --gap-6: 20px;
   --gap-5: 15px;
   --gap-4: 10px;
   --gap-3:  5px;
   --gap-2:  2px;
   --gap-1:  1px;
   --gap-0:  0px;
   
   
   --base-font-size: 20px; 
   font-size: var(--base-font-size);
   color: var(--error-color);                              /* default text color  */
   
   --clickable: #0000FF;                                   /* blue                */
   --normal: #000000;                                      /* black               */
   --placeholder-color: lightGray;                         /* photo not available */
                                                           
   --role-color: #FFFFFF;                                 /* white  */
   --actor-color-0: var(--role-color);
   --actor-background-0: var(--error-color);
   --actor-color-1: var(--role-color);                   
   --actor-background-1: #0000E0FF;                       /* blue   */
   --actor-color-2: var(--role-color);
   --actor-background-2: #008000E0;                       /* green  */
   --actor-color-3: var(--role-color);
   --actor-background-3: #905000D0;                       /* brown  */
   --actor-color-4: var(--role-color);
   --actor-background-4: var(--error-color);
   
   --actress-color-0: var(--role-color);
   --actress-background-0: var(--error-color);
   --actress-color-1: var(--role-color);
   --actress-background-1: var(--error-color);
   --actress-color-2: var(--role-color);
   --actress-background-2: var(--error-color);
   --actress-color-3: var(--role-color);
   --actress-background-3: var(--error-color);
   --actress-color-4: var(--role-color);
   --actress-background-4: var(--error-color);
 
   --minor-color: var(--role-color);
   --minor-background: #707070E0;  
     
   --acter-width: 400px;
   --acter-heigth: auto;
   --role-width: 480px;
   --role-height: auto;
}   
                                                                                                                                 
.container                     
{  display: flex;
   flex-direction: column;  
   width: 650px;   
   gap: var(--gap-0);  
   background-color: var(--bg-7);         /* margin between containers */
}
.index-contents,
.index-footer,
.index-header
{  background-color: lightGray;
   color: black;
}


.media-column
{  display: flex;
   flex-direction: column;
   gap: 10px;
   background-color: lightGray;
   color: black;  
}
.media-column-item
{   background-color: orange; 
}
.media
{  display: grid;
   flex-direction: row;
   grid-template-columns: 60px 1fr;  
   gap: 0px;
}
.media img
{  background-color: white;
   width:  calc( var(--base-font-size) * 1.4 );
   height: calc( var(--base-font-size) * 1.4 );
   border-radius: 8px;
}
.xmedia-row    img,
.media-column img
{  display: block;
   margin-right: 0px;
   padding: 4px;
   outline: 4px solid var(--clickable);
}
a
{  background-color: transparent;   
   color: var(--clickable);
   text-decoration-line: none;  
   border-radius: 6px;
   padding: 0px;   
}
a:hover,
a:focus
{  background-color: var(--clickable);   
   color: white;
}