*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, picture, video, canvas, svg { display: block; float:left; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p { overflow-wrap: break-word; hyphens: auto; }
a, a:visited { color: #84aff0; }

body { background-color:#242322; color: #f0eedf; line-height: 1.5; font-family: "Nunito", sans-serif; font-size: 1.2em; }

#header { grid-area: header; height: 50px; }
#left { grid-area: left; width: 100px; }
#mid { grid-area: mid; padding: 100px 50px 50px 50px; }
#space { grid-area: space; width: 150px; }
#pic { grid-area: pic; padding-right: 100px; }
#right { grid-area: right; width: 100px; }
#published_left { grid-area: published_left; padding: 50px; text-align: right; }
#published_right { grid-area: published_right; padding: 50px; }
#awards_left { grid-area: awards_left; padding: 50px; text-align: right; }
#awards_right { grid-area: awards_right; padding: 50px; }
#footer { grid-area: footer; padding: 0 0 20px 50px; }

#grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'left mid mid space pic right'
    'left published_left published_right published_right published_right right'
    'left awards_left awards_right awards_right awards_right right'
    'left footer footer footer footer right';
/*  gap: 10px; */
}

/* #grid-container > div { background-color: rgba(255,255,255,0.02); } */

.big, .lil { font-family: "Vollkorn", serif; line-height:1; }
.big { font-size:4em; }
.lil { font-size:1.8em; }

#mid p:first-of-type { padding-top: 50px; }
p:not(:last-of-type) { padding-bottom: 20px; }

svg { width:30px; height:30px; margin-right:10px; }

#connect { font-size: 0.8em; }