body { background: #fff;
       font-family: "Liberation Sans Narrow", sans-serif;
       font-weight: 200;
       color: #333;
       font-size: 1.33em; 
       padding: 0 0.4em;
       overflow-y: scroll; }
h1, 
h2 { font-size: 1em;   
     font-weight: 400; }
iframe { display: inline; }
img,
iframe { max-width: 100% !important;
         max-width: 640px !important;
         padding: 0.5em 1em 0.5em 0em; }

/*
 * Link handling
 */
a { color: #333;
    white-space: nowrap;
    text-decoration: dotted underline;
    text-decoration-color: #666; }
a:hover { color: #f25b62;
          text-decoration: underline;
          text-decoration-color: #f25b62; }

/* LINKS: DESKTOP 
   js adds/removes highlight class 
   todo: handle menu click then scroll to projects */
a.project.nohighlight { color: inherit; 
                        text-decoration: none; 
                        text-decoration-color:  #666;; }
a.project.nohighlight:hover { color: #f25b62; 
                              text-decoration: underline; } 
a.project.highlight { color: #f25b62;
                      text-decoration-color: #f25b62; }
/* LINKS: PHONE 
   style changes: put projects in list one per line
   to trigger all mobile:
      @media (hover:none),(hover:on-demand)
   to trigger only ios (safari and chrome based on top of safari-webkit):
      @supports (-webkit-touch-callout: none)
*/
@media 
(hover:none),
(hover:on-demand) {
  /* appears safari ios cannot do dotted underlines */
  a { text-decoration: underline !important; }
  a.project.nohighlight { 
    text-decoration: none !important;
    text-decoration-color: #999 !important; } 
  a.project:before { content: '\A';
                     white-space: pre; }
}
/* for ios specific safari: doesnt support dotted line, \A is not nice */
@supports (-webkit-touch-callout: none) {
  a.project:before { content: ''; }
  /* on ios ^ causes extra linebreaks. */
}

/* .nohighlight { color:green !important; text-decoration-color:blue !important; text-decoration: underline !important; } */

/* project links. 
   queried by js. 
   can't use div or group id method due to non js compatic scheme */

  
/* .project {text-decoration: dotted underline; } */
/* .acreativetech:hover ~ .creativetech { text-decoration: underline;}
.amaker:hover        ~ .maker { text-decoration: underline;}
.aperformer:hover    ~ .performer { text-decoration: underline;}
.aarticle:hover      ~ .article { text-decoration: underline;} */



/* for phone we use width. Many phones still ingore hover:none or handled or orientation*/
/*
@media (hover: none), (hover:on-demand) {
  .project { text-decoration: underline; }
  .nohighlight { text-decoration: underline; }
}

@media (orientation: landscape) { 
  _img{height:8vw;max-height:82px;} 
  p { width: 70% } 
}
@media (orientation: portrait)  { 
  _img{height:10vh;} 
  a{hanging-punctuation: force-end;}
  */
/* a:after {
  content: ', ';
}
a:last-of-type:after {
  content: '';
  */
/* } */