* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    font-size: 1em;
}

body {
  font-family: 'sans-serif';
  font-size: 17px;
  background-color: #FFFFFF;
  color: #4F6071;
  padding: 50px;
  font-weight: 425;
}
.wrapper {
    width:960px;
    margin:0 auto;
  }
  
header {
    width:230px;
    float:left;
    position:fixed;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased; 
    padding-top: 4.0em;
  }
section { width: 670px; float: right; padding-top: 0.0em; padding-bottom: 0px; }
section.top {padding-top: 3em;}
section.sub {padding-bottom: 1em;}
section.exp {padding-top: -20em;}

.img-me {
  float: center;
  margin: auto;
  width: 70%;
  border-radius: 25%;
  box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.3);
  margin-top: 0rem;
  margin-bottom: 0.5em;
}

h1, h2, h3, h4, h5, h6 {
  color:#222;
  margin:0 0 10px;
}
h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 18px;}

h1, h2, h3 { line-height:1.1; }

.hidden {
    display: none;
}

.unhidden {
    display: table;
    position:relative;
/*    width:80%;
*/}

/* adapted from Eric Wallace */

.collection {
    list-style: none;
    padding: 0;
    margin: 1.5em 0 2.9em
}

.collection li {
    display: flex;
    margin-bottom: 1.7em
}

.collection .thumb {
    width: 9em;
    flex-shrink: 0;
    margin-right: 1em;
}

.collection .thumb img {
    width: 100%;
    border-radius: .2em
}

.collection .text {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.collection h3 {
    margin: -.2em 0 .1em
}

.collection a h3:hover {
    text-decoration: underline
}

.collection p {
    margin: 0;
    font-size: 0.95em
}

.collection .date {
    color: #888
}

.collection .venues {
    color: #000; 
}

.collection .stars {
    display: flex;
    align-items: center
}

.collection .stars img {
    height: 1.1em;
    margin-right: .3em;
    opacity: .4
}

.collection .stars span {
    color: #888
}

.collection .buttons {
    margin: .2em 0 0
}

.collection .buttons a {
    margin: 0 .3em .5em 0;
    background: none;
    /* color: darkred; */
    border-radius: 0;
    border: none;
    padding: 0;
    font-size: 1em
}

.collection .authors {
    font-size:  0.9em;
}

span.me {font-weight: 600}

@media print, screen and (max-width: 960px) { 
    div.wrapper { width: auto; margin: 0; }
    header, section, footer { float: none; position: static; width: auto; }
    header {padding-top: 1.0em;}
    .image img { width: 50%; }
    .collection .thumb {width: 30%;}
    .collection li {font-size: 0.9em;}
    .collection .buttons {font-size: 0.9em;}
    .collection .authors {font-size: 0.9em;}
    .collection .venues {font-size: 0.9m;}
    .collection h3 {font-size: 0.9em;}

    
}