/* https://css-tricks.com/snippets/css/system-font-stack/ */
:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html{ height:100%; }

body {
  font-family: var(--system-ui);
  font-size: 1em;
  color: #666;
  background-color: #fff;
  margin: 0;
  padding: 2rem;
  height:100%;
  box-sizing:border-box;
}

header { 
  margin-bottom: 1em; 
  padding-right: 2rem;
  box-sizing: border-box;
}

main { 
  max-width:35rem; 
  min-width:15rem; 
}

footer { 
  margin-top: 2rem;
  border-top: 1px solid #666;
  padding: 1rem 0;
}

h1 { 
  display: inline-block;
  vertical-align:top;
  margin:0 2rem 1rem 0;
  font-weight: normal;
  font-size: 1rem;
  color: #000;
}

h2 {
  margin-bottom: .5em;
  font-size: 1rem;
  margin-top: 0;
  font-weight: normal;
  color: #000;
}

h3 {
  font-size: 1em;
  margin-bottom: 0;
  font-weight: normal;
  color: #666;
  margin-top:1rem
}

h4 {
  font-size: .9rem;
  margin: 0;
  font-weight: normal;
  color: #666;
}
.videos { margin-bottom:1rem !important }

a { color:#666 } 
.activePage { text-decoration:none !important; }

p {
  margin: 0 0 .75em 0;
  line-height: 1.5;
  font-size: .9em;
}

header ul {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 2rem;
  width: 15rem;
  box-sizing: border-box;
}

header ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  min-width:6rem;
}



/*header nav ul { */
/*  flex-direction: column;*/
/*  flex-wrap: wrap;*/
/*  display: flex;*/
/*  height: 4rem;*/
/*  margin:0*/
/*}*/
/*header nav ul li {*/
/*  flex: 0 0 25%;*/
/*  padding-right:2rem;*/
/*}*/

figure {
  padding:0;
  padding-right:2rem;
  margin:0;
  margin-bottom:2rem;
}

figure img {
  width:800px;
  /*margin-left:-2rem;*/
  max-width:calc(100vw - 4rem);
}

figcaption {
  font-size:.9em;
  font-style:italic;
}

.pubs {
  list-style: none;
  padding: 0; margin: 0;
  margin-bottom: 2.5em;
  margin-top: 1.1em;
}

.pubs li {
  margin-bottom: 1em;
}

.pubs li em { font-weight: 400; color: #000; font-style: normal;}

.portfolio {
  padding: 0;
  margin-top: 2rem;
}

.portfolio li:last-child:after { content: ''; }

.portfolio > li {
  margin-bottom: 3em;
  list-style: none;
}

.portfolio li ul { list-style: none; margin: 0 0 0 0; padding: 0; }

.media { display: block; font-size: .9em; margin: .5em 0; padding: 0; }
.videos li, .screenshots li, .publications li { padding: 0; margin: 0; }
.publications li { display:inline }

.portfolioItem { margin-top:2rem }

.videos ul > li, .screenshots ul > li, .publications ul > li { padding: 0; margin: 0 0; display: inline;  } 

ul li button { border:1px solid #999; color:#666; font-size:1em; padding:.25em .5em; font-family: 'Helvetica Neue', Helvetica, sans-serif;}

.icons { display: block; }
.indexVideo { width: 40em; height: 25em; margin-bottom: 2em; }
.image { width: 40em; height: 25em; margin-bottom: 2em; }

ul { list-style:none; padding:0; }
ul li { margin-bottom:1em; }
/*ul ul { margin:0; padding-left:1.25em;}*/


nav { 
  display:inline-block;
}

footer ul li { 
  display:inline-block;
  padding-right: 1rem;
}

#expression {
  padding-top:1rem;
  border-top:solid 1px #666;
}

#zoomorph img {
  display:inline;
  max-width:14rem;
  padding-right:1rem
}

@media only screen and (max-width: 33rem) {
  footer nav ul li {
    display:block;
    margin:0
  }
  footer nav ul { display: block }
  header nav ul li { margin-bottom:.5rem }
}

/*@media (prefers-color-scheme: dark) {*/
  body {
    background: #000;
    color: #ccc;
  }

  h1,h2 { color:white }

  a, ul li button, h3, h4 { color: #ccc }

  .pubs li em { color:#fff }
/*}*/