:root {
  --background: #f4e8ce;
  /* --body: #003015; */
  /* --header: #000; */
  --body: #332318;
  --header: #7a2202;
  --subtle: #ba9;
  --link: #00200a;

  --page-width: 900px;

  --body-font: "Nunito Sans", sans-serif;

  --flex-basis: 22em;
}

/* @media (prefers-color-scheme: dark) { */
/*   :root { */
/*     --background: #003015; */
/*     --body: #f4e8ce; */
/*     --header: #fff; */
/*   } */
/* } */

body {
  background-color: var(--background);
  color: var(--body);
  font-family: var(--body-font);
  font-size: 14px;
  margin: 1em 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--link);
}

@media print {
  a {
    text-decoration: none;
    color: blue;
  }

  body {
    margin: 0;
  }
}

header,
main,
footer {
  max-width: var(--page-width);
  width: 100%;
}

h1 {
  font-weight: 500;
  font-size: 2.5em;
  margin: 0;
  color: var(--header);
  text-align: center;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  margin: 0.5em 0;
  color: var(--header);
}

p {
  margin: 0.5em 0.5em 1em 0.5em;
}

header {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 1em;


  & p {
    margin: 0.5em 0 0 0;
  }

  & section {
    flex: 1 1 var(--flex-basis);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

#profile-picture {
  flex: 1;
  margin: 0.5em;
  align-self: start;

  & img {
    width: 10em;
    height: auto;
    flex: 0 0 10em;
    border-radius: 1em;
    object-fit: cover;
    padding: 0.5em;
  }

  @media print {
    & img {
      width: 7em;
      height: auto;
      flex: 0 0 7em;
      border-radius: 1em;
      object-fit: cover;
      padding: 0.5em;
    }
  }
}

#details {
  flex: 2 1 var(--flex-basis);
  margin: 0.5em;
  padding: 0.5em;
  align-self: flex-end;

  & section {
    flex: 1 1;
  }
}

#basic-details {
  flex: 1;
  justify-content: flex-start;
  align-items: start;

  & p {
    text-align: center;
  }
}

header dl {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;

  & div {
    align-items: stretch;
    flex: 1 0 10em;
    padding: 0 1em 0.5em 0;

    & dd {
      padding: 0;
      margin: 0 0 0 0.5em;
    }

    & dt {
      padding: 0;
      margin: 0 0 0 0;
    }
  }
}

#skills {
  & dl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    & div {
      flex: 1 0 20em;
      padding: 0 2em 0.5em 0;

      & dd {
        padding: 0;
        margin: 0 0 0 0.5em;
      }

      & dt {
        padding: 0;
        margin: 0;
      }

      & p {
        padding: 0;
        margin: 0;
      }
    }
  }
}

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

  & section {
    margin: 0;
  }
}

#work-experience {
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;

  flex-wrap: wrap;

  & h2 {
    width: 100%;
  }

  & section {
    flex: 1 1 var(--flex-basis);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    & h3 {
      width: 100%;
    }

    & div {
      margin: 0.5em;
      border-left: 1px solid var(--subtle);
      flex: 1 1;
    }
  }

  & #softwire,
  #corndel,
  #corndel-softwire,
  #return-to-softwire {
    flex-basis: 100%;
  }
}

article {
  margin: 0.25em 1em;
}

dt,
dd {
  margin: 0;
}

hgroup h3,
hgroup h4,
hgroup h5,
hgroup p {
  display: inline;
  margin: 0 0.5em 1em 0;
}

hgroup p {
  font-style: italic;
}

@media print {
  #softwire {
    margin: 2em 0 0 0;
  }
}

#softwire div {
  & article {
    flex: 1 1 var(--flex-basis);
  }
}

#education article {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

#work-experience>section>div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

footer {
  margin: 2em 0;
}