/* reset and utility styles */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}:focus{outline:0;}body{line-height:1.2em;color:black;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}.clearfix{display:block;}

body{
  font-family: Helvetica, Arial, sans;
  font-size: 16px;
  line-height: 1.4em;
  background: -moz-linear-gradient(top, #fff 0%, #e0e0e0 50%) fixed;
  background: -webkit-gradient(linear, left top, left 50%, from(#fff), to(#e0e0e0)) fixed;
}

body, body *{
  box-sizing: border-box;
}

p{
  margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5{
  margin-bottom: .75em;
  line-height: 1.2em;
  font-weight: bold;
}

h1{
  font-size: 2em;
}

h2{
  font-size: 1.5em;
}

h3{
  font-size: 1.3em;
}

h4{
  font-size: 1.1em;
}

main{
  display: flex;
  /* min-width: 800px; */
}

header{
  display: flex;
}

main{
  margin: 0 auto;
  width: 100%;
  /*max-width: 1200px;*/
  background-color: white;
}

main > *{
  padding: 2em;
}

table{
  width: 100%;
}

table th, table td{
  padding: .25em 0;
}

table td{
  padding-left: 0;
}

table th{
  padding-right: .25em;
  font-weight: bold;
}

#avatar, #headings{
  text-align: center;
}

#highlights #headings{
  padding-bottom: .25em;
}

#avatar img{
  width: 50%;
  margin: 0 auto;
  border-radius: 100%;
  overflow: hidden;
}

#headings h1{
  font-size: 2em;
  margin-bottom: .25em;
}

#headings h2{
  font-size: 1.2em;
  font-weight: normal;
}

section{
  padding: 1em 0;
}

section:first-child{
  padding-top: 0;
}

#contact dt{
  font-weight: bold;
}

#details section{
  padding: 0 0 1em 0;
}

#highlights{
  width: 30%;
  border-right: 1px solid black;
}

#highlights table td{
  text-align: right;
}

#education dl dt{
  font-weight: bold;
}

#education dl dd{
  margin: 0 1em 1em 1em;
}

#education .subject{
  font-style: italic;
}

#education .location{
  display: block;
}

.year::before, .timeframe::before{
  content: "(";
}

.year::after, .timeframe::after{
  content: ")";
}

#testimonials dt{
  font-weight: bold;
  margin-bottom: .5em;
}

#testimonials dt span{
  display: block;
}

#testimonials dd{
  margin-bottom: 1em;
}

#testimonials q{
  quotes: "\201C" "\201D" "\2018" "\2019";
}

#testimonials q::before {
  content: open-quote;
}
#testimonials q::after {
  content: close-quote;
}

#details{
  width: 70%;
}

#work-experience h4{
  font-weight: normal;
  text-decoration: underline;
}

#work-experience .gig{
  margin: 2em 0 3em 0;
}

#work-experience .company-name{
  font-weight: bold;
}

#work-experience h4 span::after{
  content: " ";
}

#work-experience h4 span:last-child::after{
  content: "";
}

#work-experience h4 span.timeframe::after{
  content: ")";
}

#work-experience h4 .role{
  font-style: italic;
}

#work-experience .bullets dt,
#work-experience .bullets dd,
#work-experience .bullets dd ul,
#work-experience .bullets dd ul li{
  display: inline;
}

#work-experience .bullets dt{
  display: block;
  font-weight: bold;
  margin-top: 1em;
}

#work-experience .bullets dd ul li::after{
  content: ", ";
}

#work-experience .bullets dd ul li:last-child::after{
  content: "";
}