/* ChrisUmbel.com — style recreated from the 2017 site (web.archive.org snapshot) */

@font-face {
  font-family: BodyFont;
  src: url(../fonts/Greyscale_Basic_Regular.ttf) format("truetype");
}

@font-face {
  font-family: BodyFont;
  src: url(../fonts/Greyscale_Basic_Bold.ttf) format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: BodyFont;
  src: url(../fonts/Greyscale_Basic_Regular_Italic.ttf) format("truetype");
  font-style: italic;
}

@font-face {
  font-family: BodyFont;
  src: url(../fonts/Greyscale_Basic_Bold_Italic.ttf) format("truetype");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: 'Aldrich';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Aldrich-Regular.ttf) format("truetype");
}

body {
  font-family: BodyFont, "Trebuchet MS", Verdana, sans-serif;
  font-size: 21px;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
  color: #333333;
  line-height: 26px;
  letter-spacing: 1px;
}

#MainContainer {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  text-align: left;
  padding-top: 30px;
}

/* The original floated MinorContent (sidebar) right of MajorContent. We keep
   the menu on the left and the major content on the right to mirror the
   two-column proportions (200px + 700px) of the original layout. */
#MinorContent {
  float: left;
  width: 200px;
}

#MajorContent {
  float: right;
  width: 700px;
}

.clear {
  clear: both;
}

A:hover {
  text-decoration: underline;
  color: #850808;
}

A {
  text-decoration: none;
  color: #80080a;
}

.header {
  line-height: 95px;
  width: 100%;
  background-color: #80080a;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0px;
  text-align: center;
  margin: 0;
  padding-top: 35px;
}

.header A {
  margin: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 95px;
  text-decoration: none;
  color: white;
  font-family: 'Aldrich', sans-serif;
  letter-spacing: 32px;
}

.header A:hover {
  color: white;
  text-decoration: none;
}

.header_sub {
  width: 100%;
  height: 10px;
  background-color: #000000;
  margin: 0;
}

.footer {
  font-size: 9pt;
  text-align: center;
  padding: 30px 0 20px 0;
  color: #444;
}

.footer A {
  font-size: 9pt;
}

/* left-hand menu (mirrors the original .menu) */
.menu {
  width: 160px;
  padding-right: 30px;
  padding-top: 0px;
}

.menu A {
  font-size: 24px;
  line-height: 30px;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu_lines {
  width: 160px;
  height: 12px;
  padding-bottom: 15px;
}

/* "Download PDF" link beneath the menu (resume page only) */
.menu_download {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
}

.menu_download A {
  font-size: 21px;
}

.title_text {
  font-weight: bold;
}

H1 {
  font-weight: bold;
  font-size: 28px;
}

STRONG {
  font-weight: bold;
  font-size: 24px;
}

em {
  font-style: italic;
}

.content {
  width: 690px;
}

.content_piece {
  width: 690px;
}

.content_lines {
  width: 690px;
  height: 12px;
}

.codeview_blog,
pre.wp-block-code,
pre.ruby,
pre.javascript,
pre.csharp,
pre.python,
pre.xml {
  width: 690px;
  max-width: 100%;
  background: #CCCCCC;
  padding: 8px;
  box-sizing: border-box;
  overflow-x: auto;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
}

.output_blog {
  width: 690px;
  max-width: 100%;
  background: #000000;
  color: Lime;
  padding: 8px;
  box-sizing: border-box;
  overflow-x: auto;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

/* inline code inside paragraphs */
code {
  font-family: "Consolas", "Courier New", monospace;
  letter-spacing: 0;
}

.label {
  display: inline-block;
  width: 140px;
  font-weight: bold;
  vertical-align: top;
}

.spacer {
  height: 20px;
}

.spacer_small {
  height: 10px;
}

/* images in articles keep their original float behaviour */
.content_piece img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 1em 0;
}

figure.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

figure.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

/* ---- resume-specific styling, built on the same vocabulary ---- */
.resume_section {
  margin-bottom: 10px;
}

.profile_pic {
  float: right;
  width: 270px;
  height: auto;
  margin: 4px 0 12px 18px;
  border: 1px solid #80080a;
}

.resume_headline {
  font-style: italic;
  color: #444;
  margin-top: 0;
}

.entry {
  margin-bottom: 18px;
}

.entry_title {
  font-weight: bold;
  font-size: 24px;
  line-height: 26px;
}

.entry_sub {
  font-style: italic;
  color: #444;
  font-size: 23px;
}

.entry_dates {
  font-size: 20px;
  color: #444;
  letter-spacing: 0;
}

/* gap below the profile email, roughly matching the space above the location */
.contact_email {
  margin-bottom: 21px;
}

.entry_desc {
  margin-top: 4px;
}

/* skills — compact 3-column list so it stays small */
.skills_list {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  column-count: 3;
  column-gap: 24px;
  -webkit-column-count: 3;
  -webkit-column-gap: 24px;
}

.skills_list li {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0;
  margin-bottom: 4px;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

/* article list (post history) */
.post_list {
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
}

.post_list li {
  margin-bottom: 14px;
}

.post_date {
  font-size: 15px;
  color: #444;
  letter-spacing: 0;
  display: block;
}

.article_meta {
  font-size: 15px;
  color: #444;
  letter-spacing: 0;
  margin-bottom: 16px;
}

.back_link {
  margin-top: 24px;
}

@media (max-width: 920px) {
  #MainContainer { width: 96%; }
  #MinorContent, #MajorContent, .content, .content_piece, .content_lines,
  .codeview_blog, .output_blog, pre.wp-block-code { width: 100%; float: none; }
  .menu { width: 100%; padding-right: 0; }
  /* lay the nav items out in a centered row on small screens */
  .menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 24px;
  }
  .menu_download { text-align: center; }
  /* stack the headshot above the text instead of floating it beside it */
  .profile_pic {
    float: none;
    display: block;
    margin: 0 auto 16px auto;
  }
  .header A { font-size: 46px; letter-spacing: 12px; }
  .header { line-height: 60px; }
}

/* Print / PDF: keep the page looking like the web résumé, but drop the menu
   and footer. These rules drive both browser printing and the build-time PDF
   (tools/gen_pdf.py renders this page with headless Chromium). */
@media print {
  #MinorContent, .footer, .profile_pic { display: none; }
  /* breathing room between the black bar under the header and the content */
  .header_sub {
    margin-bottom: 40px;
  }
  #MainContainer {
    width: 100%;
    margin: 0;
    padding-top: 0;
  }
  #MajorContent {
    float: none;
    width: 100%;
  }
  .content {
    width: 100%;
  }
  body {
    color: #000;
  }
}