/* Base */
:root{
  --max-width: 980px;
  --accent:#2d3748;
  --muted:#6b7280;
  --hr:#e5e7eb;
  --bg:#ffffff;
}
*{box-sizing:border-box}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  color: var(--accent);
  max-width: var(--max-width);
  margin: 2rem auto;
  background: var(--bg);
  padding: 1rem;
}

/* Header */
#header{
  text-align: center;
  margin-bottom: 1rem;
}
h1{
  font-size: 2.2rem;
  margin: 0;
  letter-spacing: 0.06em;
}
h1 .first-name{font-weight:700}
h1 .last-name{font-weight:300}
.role{
  margin: .4rem 0;
  color: var(--muted);
  font-weight: 600;
}
hr{border:none;height:1px;background:var(--hr);margin:1rem 0}

/* Layout */
main{
  display: grid;
  grid-template-columns: 36% 64%;
  gap: 1.5rem;
}
.column{padding:0 1rem}

/* Left column */
#mainLeft{
  border-right: 1px solid var(--hr);
  padding-right: 1.25rem;
}
.contact p, .skills p, .education ul{
  margin: .4rem 0;
}
.contact a{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
.contact a:hover{border-bottom-color:var(--hr)}
.skills ul, .education ul, .languages ul, .projects ul, .experience ul{
  margin: .4rem 0 1rem 1.2rem;
}
.skills li{margin: .25rem 0}

/* Right column */
#mainRight{padding-left:1.25rem}
.about p{margin:0.2rem 0 1rem 0}
.experience h3{margin-bottom:0.2rem}
.period{color:var(--muted);font-size:0.95rem;margin:0 0 0.5rem 0}

/* Footer */
footer{margin-top:2rem;text-align:center;color:var(--muted);font-size:0.9rem}

/* Responsive */
@media (max-width: 800px){
  main{grid-template-columns: 1fr; padding:0}
  #mainLeft{border-right:none;border-bottom:1px solid var(--hr);padding-bottom:1rem}
  #mainRight{padding-top:1rem}
}