:root  
{  --ON:;
   --OFF: initial;
   --debug: var(--OFF);

   --error-color:       #FF0000;                           /* red            */
   --clickable:         #0000FF;                           /* blue           */
    
   --episode-image-width: 360px;
   --acter-width: 300px;
   --cast-width:  180px;
   --role-width:  250px;

   --base-font-size: 22px; 
   font-size: var(--base-font-size);
   background-color: lightGray;
}
.container                     
{  display: flex;
   flex-direction: column;  
   width: 800px;   
   background-color: white;
   gap: 12px;
}

.home
{  width: 1.2ch;
   height: 2.2ch;
   font-weight: 900;
   font-size: calc( var(--base-font-size) * 1.8);
   outline: 2px solid black;   
}
.title
{  display: grid;
   font-weight: 900;
   height: 4.2ch;
   grid-template-columns: 1fr 3ch;  
}
.index-header
{  display: block;   
   background-color: var(--debug) lightGreen;   
   outline: 2px solid black;
   padding-bottom: 12px;
   padding-left: 12px;
}
.index-watch
{  background-color: var(--debug) cyan;   
   outline: 2px solid black;
   padding-bottom: 12px;
   padding-left: 12px;
}
.truncate 
{  width: 100%;                                            /* can fill container             */
   white-space: nowrap;                                    /* text stays on one line         */
   overflow: hidden; 
   text-overflow: ellipsis;                                /* append '...'                   */
}
a
{  display: inline-block;
   text-decoration: none;                                  /* no underline on link           */   
   padding: 0px;                                           /* links line up with normal text */
   /* width: 100%;       */                                /* background color fills space   */
}                                                          /* order is important LVFHA       */   
a:link    { color: var(--clickable); background-color: #F0F0F0;          } /* almost whte    */                     
a:visited { color: var(--clickable); background-color: #F0F0F0;          } /* almost white   */   
a:focus   { color: white;            background-color: var(--clickable); } /* tab key        */
a:hover   { color: white;            background-color: var(--clickable); } /* mouse          */
a:active  { color: white;            background-color: var(--clickable); }
.unclickable
{  color: black;
   background-color: transparent;
}
.media-column
{  display: flex;
   flex-direction: column;
   padding-bottom: 12px;
   background-color: var(--debug) cyan;
   outline: 2px solid black;
}
.media-item
{  display: block;
   background-color: var(--debug) orange;  
   padding-right: 16px;
}
.media-item img
{  display: block;
   width:  calc( var(--base-font-size) * 1.4 );
   height: calc( var(--base-font-size) * 1.4 );
   border-radius: 14px;
   border: 4px solid var(--clickable);
}