@media print, screen {
  .root {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 66em;
    /* grid-template-rows: repeat(3, 3.5em) 2em repeat(5, 6em) 2em 4em 2em 7em 2em 7em 2em 5em; */
    --jc-background: #fcfffe;
    --jc-text-0: #2bb673;
    --jc-text-1: #5b7467;
    --jc-text-2: #98aaa1;
  }

  /*
Color Scheme

Main: #2bb673
Background: #aab9b2

*/

  body {
    font-size: 14pt;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--jc-background);
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  div {
    color: var(--jc-text-1);
  }

  p {
    margin: 0 0.3em;
  }

  a {
    color: var(--jc-text-0);
  }

  .leftColumn {
    width: 288px;
  }

  .rightColumn {
    width: 940px;
  }

  .fullColumn {
    width: 100%;
  }

  /* Contact */

  .contactType {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    font-size: 1.2em;
    color: var(--jc-text-0);
  }

  .contactContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .contactBody {
  }

  .noMargin {
    margin-bottom: 0;
  }

  /* Title */

  h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    font-size: 6em;
    margin: 0em 0em;
    color: var(--jc-text-0);
  }

  .titleSubtitleContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .titleContainer {
    display: flex;
    align-items: center;
  }

  /* Subtitle */

  .subtitle {
    font-size: 1.2em;
    max-width: 500px;
    font-weight: 700;
    color: var(--jc-text-0);
  }

  .bio {
    font-size: 1.1em;
    max-width: 600px;
  }

  /* Section Header */

  .sectionHeader {
    position: absolute;
    padding: 0 30px;
    left: 10em;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    font-size: 2em;
    color: var(--jc-text-0);
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
    background-color: var(--jc-background);
  }

  .sectionHeaderContainer {
    position: relative;
    display: flex;
    align-items: center;
    height: 3em;
    margin: 10px 0px;
  }

  .leftLineContainer {
    height: 3em;
  }

  /* Jobs */

  .jobContainer {
    position: relative;
    margin-bottom: 1.3em;
    width: 260px;
  }

  strong {
    font-weight: 600;
  }

  .info {
    color: var(--jc-text-2);
  }

  .infoTitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: #2bb673;
  }

  /* Achievements */

  .achievements {
    line-height: 1.5em;
  }

  .projectsNames {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    color: var(--jc-text-0);
    margin-right: 1em;
  }

  .projectsLanguages {
    color: var(--jc-text-2);
  }

  .projectsContainer {
    grid-area: 13 / 1 / 14 / 2;
    display: flex;
    flex-direction: row;
  }

  .projectsNames p {
    padding: 3px 0;
  }

  .projectsLanguages p {
    padding: 3px 0;
  }

  .projectsDetailContainer p {
    padding: 3px 0;
  }

  .jobDetailContainer {
    display: flex;
    align-items: center;
  }

  ul {
    margin: 0px;
  }

  .jobImage {
    position: absolute;
    right: 0;
    top: 17.5%;
    height: 65%;
  }

  .skillInfo {
    font-size: 1.1em;
  }

  .skillDetail {
    padding-top: 0.2em;
    height: 4em;
  }

  .skillInfoTitle {
    line-height: 1.6em;
    margin: 0px;
    display: inline-block;
  }

  .languages {
    font-size: 1.1em;
    height: 2em;
  }

  .skills {
    margin: 0px;
    line-height: 1.6em;
    display: inline-block;
  }

  .technologies {
    font-size: 1.1em;
    height: 2em;
  }
}

@media print {
  .root {
    width: 700px;
    font-size: 8pt;
    /* border: #2bb673 2px solid; */
  }
  .leftColumn {
    margin-left: 10px;
    width: 145px;
  }
  .rightColumn {
    width: 540px;
    white-space: nowrap;
  }

  .bio {
    width: 350px;
  }
  .jobDetailContainer {
    align-items: flex-start;
  }
  .infoTitle {
    font-size: 1em;
  }
  .jobImage {
    height: 50%;
    right: 20px;
  }
  ul {
    padding-inline-start: 0px;
    padding-left: 0px;
  }
  .languages,
  .technologies {
    height: 1em;
  }
  .sectionHeaderContainer {
    margin: 5px 0px;
  }
}