/* Define some variables */
:root {
  --header-color: rgb(201,171,32);
  --publication-background-color: rgba(255,255,255,0.05);
  --publication-text-color: rgb(201,171,32);
  --date-color: gray;

  --box-border-color: white;
  --box-shadow-color: gray;
  --box-background-color: rgba(255,255,255,0.05);

  --skill-text-color: rgba(255,255,255,0.7);
  --skill-border-color: rgba(255,255,255,0.5);
}

body {
  font-size: 16px;
}

/* Currently selected page - add bottom border (and adjust padding) */
a#resume:link {
  padding-bottom: 0.6em;
  border-bottom-width: 0.4em;
  border-bottom-style: solid;
}
a#resume:hover {
  padding: 1.05em 1.05em 0.7em 1.05em;
}

/* Mainbar layout (page-specific content) */
/* Note: these define the large font sizes, for smaller screens (large screens below) */
#mainbar {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.5em;
  margin: 2em;
  margin-top: 0em;
}
#mainbar h1 {
  color: var(--header-color);
  font-size: 3em;
  margin: 1em 0 .7em 0;
}
#mainbar h2 {
  margin-left: 1em;
  color: var(--header-color);
}
#mainbar h3 {
  margin-left: 2em;
  color: var(--header-color);
}


/* Education styles */

dl.education {
  margin: 0em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
dl.education dt {
  font-size: 1.25em;
  flex-basis: 20%;
  text-align: right;
  margin: 0.25em;
  font-style: italic;
  color: var(--date-color);
}
dl.education dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 1em 0em;
}
ul.degree {
  padding: 1px;
  margin-left: 10%;
  width: 80%;
  border: 6px solid var(--box-border-color);
  box-shadow: 3px 3px var(--box-shadow-color);
  border-radius: .5em;
  background-color: var(--box-background-color);
}
ul.degree li {
  list-style: none;
  margin: .5em;
}
ul.degree li.specialty {
  font-size: 1.5em;
  font-variant: small-caps;
}
ul.degree li.mark {
  font-size: 1.2em;
  font-style: italic;
  margin-left: 2em;
  margin-bottom: 1em;
}

/* Disable high school details for now (embarrassing) */

#high-school, #high-school-title {
  display: none;
}


/* Professional experience styles */

dl#professional {
  margin: 0em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
dl#professional > dt {
  font-size: 1.2em;
  flex-basis: 25%;
  margin: 0em;
  text-align: right;
}
p.role {
  font-size: larger;
}
p.role-dates {
  color: var(--date-color);
}
dl#professional > dd {
  flex-basis: 65%;
  margin: 1em 0 1em 1em;
}

/* Styling the individual employments */
ul.employments {
  list-style: none;
}
ul.employments dl {
  padding: .5em;
  background-color: var(--box-background-color);
  border-radius: .5em;
}
ul.employments dl dt {
  font-variant: small-caps;
  font-size: 1.12em;
  margin-left: 15%;
  margin-top: .5em;
}
ul.employments dl dd {
  margin: 0;
}
span.workload {
  padding: 0 .5em;
  font-style: italic;
}
ul.role-description {
  margin: 1em;
  list-style: none;
}
ul.role-description li {
  margin: 1em 0em 1em -1em;
}

/* Published works styles */
dl.publications {
  margin: 2em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  color: var(--publication-text-color);
}
dl.publications dt {
  font-size: 1.5em;
  flex-basis: 10%;
  text-align: right;
  margin: 1em;
  font-style: italic;
  color: var(--date-color);
}
dl.publications dd {
  font-size: 1.05em;
  flex-basis: 75%;
  display: block;
  background-color: var(--publication-background-color);
  padding: .7em 1em;
  margin: 0.4em 0 0.4em 3em;
  border-radius: 0.5em;
  border: 4px solid var(--box-border-color);
  box-shadow: 2px 2px var(--box-shadow-color);
}


/* Technical skills styling */

/* Styling the skill-collection list */
#skill-collection {
  margin: 2em;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
#skill-collection p {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-variant: small-caps;
  font-size: 1.15em;
  color: var(--skill-text-color);
  display: block;
  flex: auto;
  margin: 0.5em;
  padding: .3em;
  border: 1px solid var(--skill-border-color);
  border-radius: .7em;
  text-align: center;
}

/* Smaller font size and slight layout adjustments for large screens */
@media screen and (min-width: 1100px) {
  #mainbar {
    font-size: medium;
  }

  dl.education {
    margin: 2em;
  }
  dl.education dt {
    flex-basis: 15%;
    margin: 1em;
  }
  dl.education dd {
    margin: 1em;
  }

  dl#professional {
    margin: 2em;
  }
  dl#professional > dt {
    flex-basis: 19%;
    margin: 1em;
  }
  dl#professional > dd {
    flex-basis: 70%;
    margin: 1em;
  }
}