body{margin:0 10px;}
#main {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 900px;
  margin: 0 auto;
  color: #2c3e50;
}

header{
  display:flex;
  justify-content: space-between;
}
h1{font-size:3em;}
h3 span{font-weight:normal; font-size:0.7em; float:right;}
h3 img{max-width:16px;max-height:16px;}

#work, #projects{ display: grid; gap: 20px; }
#work h2, #projects h2{ grid-column:1/3; }

ul.details{list-style:disclosure-closed;}

@media only screen and (max-width: 680px){
  body {margin:0 20px;}
  #work, #projects{ display: block; }
  ul.details{ display:flex; flex-direction:column; justify-content: space-around; margin: 20px 0 30px 0px; }
}

@media print {
  body{ font-size: 0.7em; }
  h1{ font-size: 2.4em; margin: 0.3em 0; }
  h2{ margin: 0.4em 0; }
  h3{ margin: 0.5em 0; }
  ul{ margin: 0.4em 0; }
  ul.details{ margin: 0.4em 0; }
  #work{ gap: 4px 20px; }
}