@page {
    size: auto;
    margin: 5em 5em 5em 5em;
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #4D4D4D;
}

@media screen {
  #content {
    margin-left: 2em;
    margin-right: 2em;
    height: 100%;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media print {
  #content {
    /* display: grid; */
    /* grid-template-columns: 30% 70%; */

    /*
    margin-left: 2em;
    margin-right: 2em;
    height: 100%;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    */
  }
}

h1 {
  width: 100%;
}

h2 {
  width: 100%;
}

h3 {
  width: 100%;
  margin-bottom: 0;
}

h4, h5, h6 {
  width: 100%;
  margin-bottom: 0;
}

ul {
  margin-left: 0;
  padding-left: 1em;
  margin-bottom: 1em;
}

/* @media print { */
/*     #contact { */
/*         grid-row-start: 2; */
/*     } */
/* } */

section#about h2 span {
  color: #6CE0F1;
}
section#experience h2 span {
  color: #FB4485;
}
section#education h2 span {
  color: #D3A4F9;
}
section#certifications h2 span {
  color: #FDA333;
}
section#interests h2 span {
  color: #C2E15F;
}

.date {
  color: grey;
  font-weight: bold;
}

@media screen {
  header {
    background-color: #4D4D4D;
    word-wrap: break-word;
    color: white;
    text-align: center;
    width: 100%;
    font-size: 400%;
    padding: 1em;
  }
}

@media print {
  header {
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    font-size: 300%;
  }
}

#side-section a {
  white-space: nowrap;
}

@media screen {
  #side-section {
    text-align: right;
    margin: 1em;
    flex: 0 0 10%;
    word-wrap: none;
  }
}

@media print {
  #side-section {
    /* display: grid; */
    /* grid-row-start: 2; */
    /* grid-template-columns: 50% 50%; */
    justify-content: space-between;
    margin: 1em;
    word-wrap: none;
  }
}

#interests ul,
#certifications ul,
#side-section ul {
  list-style-position: inside;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#main-section {
  margin: 1em;
  flex: 1 0 60%;
  flex-wrap: wrap;
}

section {
  margin-bottom: 1em;
}

/* Prevent double margins when e.g. ul has a bottom margin */
section :last-child {
  margin-bottom: 0;
}
#experience-grid :last-child {
  margin-bottom: 0;
}

#work-summary > p {
    margin-bottom: 1em;
}

@media screen {
  #experience-grid {
    display: grid;
    grid-column-gap: 1em;
    grid-template-columns: [work-date] max-content [work-right] 1fr;
  }

  #work-date {
    grid-column: work-date;
  }

  #work-title {
    grid-column: work-right;
  }

  #work-company {
    grid-column: work-right;
  }

  #work-summary {
    grid-column: work-right;
    margin-bottom: 1em;
  }
}

@media print {
  #experience-grid {
    /* display: grid; */
    grid-template-columns: 1fr;
  }

  #work-summary {
    margin-bottom: 1em;
  }
}

#certifications-grid {
  /* display: grid; */
  width: 100%;
  grid-column-gap: 1%;
  grid-template-columns: auto 1fr auto;
}

#certifications #name {
  text-align: left;
  font-weight: bold;
}

#vendor {
  flex: 0 0 auto;
  text-align: right;
  font-weight: lighter;
}

footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 1%;
  width: 100%;
  background-color: #4D4D4D;
  color: white;
  text-align: center;
}
@media print {
  footer {
    display: none;
  }
}