
.resume {
  --font-size: 10pt;
  --font-size-position: calc(var(--font-size) + 1pt);

  --gap-horizontal: 0ch;
  --gap-vertical: 6pt;
  --gap-list-vertical: 4pt;

  /* --right-width: 66ch; */
  /* --left-width: 20ch; */
  /* --full-width: calc(var(--left-width) + var(--gap-horizontal) + var(--right-width)); */

  --rule-color: #333;
  --rule-style: solid;
  --rule-width: 0.5pt;
  --rule: var(--rule-width) var(--rule-style) var(--rule-color);

  --debug-border: 1px solid blue;

  padding: 0;
  font-family: Georgia;
  /* font-family: "Officina Sans ITC Pro"; */
  font-size: var(--font-size);

  /* counter-reset: pageNumber 1; */
}

div.resume {
  user-select: text;
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: calc(86ch + var(--gap-horizontal));
}

div.resume header .header-flex {
  display: flex;
  flex-wrap: wrap;
}

div.resume header .header-flex > div.header-flex-text {
  font-size: calc(var(--font-size) + 2pt);
  white-space: nowrap;
  flex: 0 0;
}

div.resume header .header-flex > div.header-flex-text:first-child {
  font-weight: bold;
}

div.resume header .header-flex > div.header-flex-space {
  flex: 1 1;
}

div.resume > div {
  overflow: auto;
  max-width: calc(86ch + var(--gap-horizontal));
}

.resume code {
  font-family: "Andale Mono";
}

/* .resume header, .resume hr { */
/*   margin-left: auto; */
/*   margin-right: auto; */
/*   width: var(--full-width); */
/* } */

.resume hr {
  border: none;
  border-top: var(--rule);
  color: var(--rule-color);
}

.resume .omit {
  visibility: collapse;
}

.resume section, .resume footer {
  /* padding-bottom: var(--gap-vertical); */
  padding-top: var(--gap-vertical);
}

.resume section.no-padding-top {
  padding-top: 0;
}

.resume body > :not(:last-child) {
  border-bottom: var(--rule);
}

.resume section.level3 {
  padding-top: var(--gap-vertical);
  padding-bottom: var(--gap-vertical);
}

.resume .title, .resume header td {
  font-size: calc(var(--font-size) + 2pt);
  font-weight: 600;
}

.resume h1, .resume p {
  margin-block-start: 0pt;
  margin-block-end: 0pt;
}

.resume h2 {
  text-transform: uppercase;
  font-size: inherit;
  margin-block-start: var(--gap-vertical);
  margin-block-end: var(--gap-vertical);
}

.resume h2.tagline {
  text-transform: none;
  font-size: inherit;
  font-weight: normal;
  font-style: italic;
  margin-block-start: 0;
  margin-block-end: 0;
}

.resume h3 {
  display: none;
}

.resume span.todo {
  padding: 3px;
  color: red;
  border: 1px solid red;
  border-radius: 3px;
}

.resume span.todo::before {
  content:
  "todo!"
  ;
}

.resume div.position-flex {
  font-size: calc(var(--font-size-position));
  margin-bottom: var(--gap-vertical);
}

/*  ____           _ _   _                 */
/* |  _ \ ___  ___(_) |_(_) ___  _ __  ___ */
/* | |_) / _ \/ __| | __| |/ _ \| '_ \/ __|*/
/* |  __/ (_) \__ \ | |_| | (_) | | | \__ \*/
/* |_|   \___/|___/_|\__|_|\___/|_| |_|___/*/
/*                                         */

div.resume div.position-flex {
  display: flex;
  flex-wrap: wrap;
}

div.resume div.position-flex > div {
  /* margin: 2pt; */
}

div.resume div.position-flex > div.position-flex-text {
  white-space: nowrap;
  flex: 0 0;
}

div.resume div.position-flex > div.position-flex-space {
  flex: 1 1;
}

div.resume div.position-flex > div {
  font-size: var(--font-size-position);
  white-space: nowrap;
}

div.resume div.position-flex > div:not(:first-child) {
  padding-left: 2pt;
}

div.resume div.position-flex > div:not(:last-child) {
  padding-right: 2pt;
}

div.resume div.position-flex > div.position-flex-text.position-flex-company {
  font-weight: bold;
}

div.resume div.position-flex > div.position-flex-text.position-flex-company:has(+ .position-flex-title)::after {
  font-weight: normal;
  /* content: ","; */
}

.resume div.position-flex > div.position-flex-space::before {
  content:
  ". . . . . . . . . . . . . . . . . . . . "
  ". . . . . . . . . . . . . . . . . . . . "
  ". . . . . . . . . . . . . . . . . . . . "
  ". . . . . . . . . . . . . . . . . . . . "
  ". . . . . . . . . . . . . . . . . . . . "
  ;
  text-align: justify;
  overflow: hidden;
  height: calc(var(--font-size-position) + 1pt);
  display: block;
  white-space: break-spaces;
}

.resume footer {
  font-size: x-small;
  text-align: center;
}

/*  _     _     _       */
/* | |   (_)___| |_ ___ */
/* | |   | / __| __/ __|*/
/* | |___| \__ \ |_\__ \*/
/* |_____|_|___/\__|___/*/
/*                      */

.resume ul {
  margin-block-start: var(--gap-vertical);
  padding-left: 20pt;
}

.resume li {
  margin-block-end: var(--gap-list-vertical);
}

.resume li > ul {
  margin-block-start: var(--gap-list-vertical);
}

/* ul that have more than one child */
.resume section.columns-two.level3 > ul, .resume .columns-two .level3 > ul {
  column-gap: 14pt;
  columns: 2;
}

/*  ____                    ____                 _        */
/* |  _ \ __ _  __ _  ___  | __ ) _ __ ___  __ _| | _____ */
/* | |_) / _` |/ _` |/ _ \ |  _ \| '__/ _ \/ _` | |/ / __|*/
/* |  __/ (_| | (_| |  __/ | |_) | | |  __/ (_| |   <\__ \*/
/* |_|   \__,_|\__, |\___| |____/|_|  \___|\__,_|_|\_\___/*/
/*             |___/                                      */

.resume section.level3:not(.allow-breaks) {
  break-inside: avoid;
}

.resume li:not(.allow-breaks) {
  break-inside: avoid;
}

/*  ____  _    _ _ _     */
/* / ___|| | _(_) | |___ */
/* \___ \| |/ / | | / __|*/
/*  ___) |   <| | | \__ \*/
/* |____/|_|\_\_|_|_|___/*/
/*                       */

.resume .skill-product {
  display: none;
}

/*  ____       _                 */
/* |  _ \  ___| |__  _   _  __ _ */
/* | | | |/ _ \ '_ \| | | |/ _` |*/
/* | |_| |  __/ |_) | |_| | (_| |*/
/* |____/ \___|_.__/ \__,_|\__, |*/
/*                         |___/ */

.debug div, .debug table {
  border: 1px solid red;
}

.debug h2 {
  border: 1px solid black;
}

section.debug > section {
  border: var(--debug-border);
}

