@font-face {
  font-family: "Roboto";
  src: url(/fonts/Roboto-Regular.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(/fonts/Roboto-Italic.ttf);
  font-style: italic;
}

@font-face {
  font-family: "Roboto Slab";
  src: url(/fonts/RobotoSlab-VariableFont_wght.ttf);
}

@font-face {
  font-family: "Roboto Serif";
  src: url(/fonts/RobotoSerif-VariableFont_GRAD\,opsz\,wdth\,wght.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Roboto Serif";
  src: url(/fonts/RobotoSerif-Italic-VariableFont_GRAD\,opsz\,wdth\,wght.ttf);
  font-style: italic;
}

@font-face {
  font-family: "Roboto Mono";
  src: url(/fonts/RobotoMono-VariableFont_wght.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Roboto Mono";
  src: url(/fonts/RobotoMono-Italic-VariableFont_wght.ttf);
  font-style: italic;
}

:root {
  --color-light-yellow: rgb(254, 255, 224);
  --color-deep-yellow: rgb(254, 244, 106);
  --color-light-purple: rgb(110, 78, 225);
  --color-deep-purple: rgb(29, 11, 94);
  --color-light-gray: rgb(243, 243, 243);
  --color-dark-gray: rgb(54, 54, 54);
  --text-color: rgb(17, 17, 17);
  --section-icon-color: var(--color-light-purple);
  --fg-highlight-color: var(--color-light-purple);
  --bg-highlight-color: var(--color-light-gray);
}

.content {
  max-width: 800px;
  margin: auto;
  margin-top: 2%;
  padding-left: 2%;
  padding-right: 2%;

  font-family: "Roboto Serif", sans-serif;
  font-size: 14pt;
  color: var(--text-color);
  line-height: 1.4;
  text-align: justify;
}

code {
  font-family: "Roboto Mono", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Slab", sans-serif;
}

h1:has(i),
h2:has(i),
h3:has(i),
h4:has(i),
h5:has(i),
h6:has(i) {
  font-family: "Roboto Serif", serif;
  font-weight: 600;
}

.header {
  margin-bottom: 4%;
}

h1.name {
  margin-bottom: 1ex;
  font-family: "Roboto", sans-serif;
}

.name .brkt {
  display: inline-block;
  user-select: all;
}

.name .brkt::before {
  content: "{";
  color: #aaa;
  margin-right: 3px;
}

.name .brkt::after {
  content: "}";
  color: #aaa;
  margin-left: 3px;
}

h2>a,
h3>a {
  border-bottom: 1px dotted;
}

h2>a:hover,
h2:target>a,
h3>a:hover,
h3:target>a {
  border-bottom: 1px solid;
}

li+li {
  margin-top: 1ex;
}

a.plain {
  color: inherit;
  text-decoration: none;
}

a:not(.plain),
.link {
  color: #2a55a2;
  text-decoration: underline;
}

.contact {
  font-size: 1.1rem;
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
}

.contact p {
  margin-top: 0.8ex;
  margin-bottom: 0.8ex;
}

.selectable {
  user-select: all;
}

.tiny {
  font-size: 0.7rem;
}

button#reveal-email {
  font-family: "Roboto", sans-serif;
  background: #ffffff;
  border: 2px solid #2a55a2;
  border-radius: 5px;
  color: #2a55a2;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 200ms, color 200ms;
}

button#reveal-email:hover {
  background: #2a55a2;
  color: #ffffff;
}

.has-arrow>span {
  border-bottom: 1px dotted;
}

.has-arrow:hover>span {
  border-bottom: 1px solid;
}

.has-arrow:hover .icon.arrow {
  margin-left: 0.3em;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

.icon.arrow {
  filter: invert(28%) sepia(41%) saturate(2297%) hue-rotate(198deg) brightness(85%) contrast(87%);
  /* ^ this approximates #2a55a2 */
  transition: all cubic-bezier(.36, 1.55, .7, 1.49) 200ms;
}

.banner-photo {
  width: 100%;
  background: #eee;
  border-radius: 3px;
}

.summary-box {
  border: 1px solid #aaa;
  padding-right: 2rem;
  font-size: 1.2rem;
  background: var(--bg-highlight-color);
  border-radius: 3px;
}

.nojustify {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* needed for :target::before rule */
  position: relative;
}

footer {
  margin-top: calc(3ex/0.7);
  font-size: 0.7rem;
  color: var(--color-dark-gray);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: rgb(227, 227, 227);
    --fg-highlight-color: var(--color-deep-yellow);
    --bg-highlight-color: var(--color-dark-gray);
    --section-icon-color: rgb(255, 231, 102);
  }

  body {
    background-color: #222;
  }

  a:not(.plain),
  .link {
    color: #77a4f6;
  }

  .name .brkt::before {
    color: #666;
  }

  .name .brkt::after {
    color: #666;
  }

  .icon:not(.arrow) {
    filter: invert();
  }

  .icon.arrow {
    filter: invert(60%) sepia(98%) saturate(1443%) hue-rotate(192deg) brightness(101%) contrast(93%);
    /* ^ this approximates #77a4f6 */
  }

  button#reveal-email {
    background: #2a55a2;
    border-radius: 5px;
    color: white;
  }

  button#reveal-email:hover {
    background: #223559;
  }

  .summary-box {
    border: 1px solid var(--color-light-purple);
  }

  footer {
    color: var(--color-light-gray);
  }
}

@media (width <=600px) {
  .content {
    text-align: left;
  }
}

@media (width >600px) {
  .content {
    text-align: justify;
  }
}

@media (width >900px) {

  h1:target::before,
  h2:target::before,
  h3:target::before,
  h4:target::before,
  h5:target::before,
  h6:target::before {
    position: absolute;
    left: -2.0rem;
    content: " §";
    color: var(--section-icon-color);
  }
}