main.css

:root {
  background: linear-gradient(0deg, #DDF, #FFF);
  box-sizing: border-box;
  min-height: 100vh;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  max-width: 768px;
  margin: 1em auto;
  padding: 0 1em;
}

header {
  text-align: center;
}

section {
  margin-bottom: 1em;
}

@media (min-width: 768px) {
  header,
  section {
    padding: 0 1.5em;
  }

  body {
    padding: 0;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'xp header'
      'xp edu'
      'xp lang'
      'xp ref'
      'techs techs'
      'footer footer';
  }

  header { grid-area: header }
  footer { grid-area: footer }
  #xp { grid-area: xp }
  #edu { grid-area: edu }
  #lang { grid-area: lang }
  #ref { grid-area: ref }
  #techs { grid-area: techs }
}

footer {
  clear: both;
  text-align: center;
}

:link {
  color: #00F;
}

:visited {
  color: #600090;
}





.avatar {
  max-width: 100%;
  max-height: 40vh;
}

.site-title {
  font-weight: bold;
  font-size: 2em;
}

.title {
  font-variant: small-caps;
  font-size: 1.5em;
  font-weight: bold;
}

.subtitle {
  margin: 0.5em 0;
  font-weight: bold;
  font-size: 1.3em;
}
  .subtitle::before,
  .subtitle::after {
    content: ' — '
  }

.details {
  margin-top: 0.5em;
  margin-bottom: 0;
}





section > ul li {
  padding: 0.5em 0;
}
  section > ul li:not(:last-child) {
    border-bottom: 1px solid black;
  }

#xp .role,
#edu .role {
  font-weight: bold;
}

#xp .date:not(:last-child)::after,
#edu .date:not(:last-child)::after {
  content: '\a';
  white-space: pre;
}

#xp .employer:not(:last-child)::after,
#edu .school:not(:last-child)::after {
  content: ', ';
}





#lang .fluency { font-style: italic }
#lang .fluency::before { content: '(' }
#lang .fluency::after { content: ')' }





#techs ul li { border: none }
#techs ul ul { display: inline }
#techs ul ul::before { content: '(' }
#techs ul ul::after { content: ')' }

#techs ul ul li { display: inline }
#techs ul ul li + li::before { content: ' | ' }

#techs > ul > li {
  display: inline-block;
  margin: 0.5em;
  padding: 0.5em;
  background-color: #FFF8;
  border-radius: 0.5em;
}