@import "css/common.css";
:root
{  --acter-gap: 8px;
}
.acter-header
{  display: flex;  
   flex-direction: row;  
   align-items: top;
   gap: 0px;
   background-color: var(--debug) lightGreen;   
   outline: 2px solid black;
}
.acter-information
{  display: flex;
   flex-direction: column;
   width: 100%;                                  /* place "home" link at far right */
   margin-top: 8px;
   margin-left: 20px;   
   color: black;  
   gap: 0px;
   background-color: var(--debug) lightGray;          
}
.acter-name
{  font-size: calc( var(--base-font-size) * 1.2 ); 
   font-weight: 600;
   background-color: var(--debug) orange; 
   line-height: 1.1;
   color: black;
   padding-bottom: 0px;                          /* no extra space before AKA */
}
.acter-data
{  background-color: var(--debug) #00FF00; 
   color: black;
   padding-bottom: 12px;
}
.media-row
{  display: flex;,
   flex-direction: row;
   padding-bottom: 12px;
   background-color: var(--debug) cyan;
}
.media
{  display: block;
   background-color: var(--debug) orange;  
   padding-right: 16px;
   outline: 4px solid var(--debug) yellow;
}
.media 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);
}