@media print {
  .screen {
    display: none;
  }
}
html {
  scroll-behavior: smooth;
}
body > * {
  z-index: 100;
}
footer {
  position: relative;
  font-size: 1.7vh;
  z-index: 0;
  /* container-type: inline-size; */
}
#config #container {
  height: 35vh;
  /* height: 72vh; */
  overflow-y: scroll;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.5vh;
}
#config {
  position: fixed;
  right: 1vh;
  bottom: 1vh;
  width: 35vh;
  background: rgba(200, 200, 255, 0.85);
  padding: 5px;
  border: #bbb 1px solid;
  border-radius: 5px;
}
@media (scripting: none) {
  #presets {
    display: none;
  }
}
#config #presets button:target {
  background-color: #ada;
}
#config summary {
  font-size: 2vh;
  text-shadow: white 0 0 2px;
  cursor: pointer;
  text-align: center;
  list-style: none;
  background: url("img/arrow.svg") no-repeat 0.5em 50%;
  background-size: 1.2em;
  padding-left: 1em;
}
#config ul {
  list-style-type: none;
  padding-left: 2.5em;
}
#config fieldset {
  border: solid 2px rgba(200, 200, 255, 0.85);
}
#config input,
#config select,
#config button,
#config label {
  cursor: pointer;
}
#config input[type="checkbox"] {
  margin: 0.2em 0;
}
#config #actions {
  margin-top: 5px;
  text-align: right;
}
#config button {
  color: white;
  background: #4a4;
  border: transparent 1px solid;
  border-radius: 1.7em;
  margin: 5px 5px;
  padding: 0.4ex 0.8ex;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#config #presets button {
  background-color: white;
  color: black;
}
#config #presets a {
  /* height: 120%; */
  display: inline-block;
  text-align: center;
  line-height: 1.2em;
  vertical-align: middle;
  width: 2em;
  height: 3.2em;
  padding: 1ex 0.5ex 1ex 0.5ex;
  background: url("img/page.svg") no-repeat;
  background-size: auto 100%;
  background-position: center;
}
#config #presets a::after {
  content: " ⬇️";
}
img {
  border: none;
}
fieldset > * {
  margin: 0 0.5em;
  display: block;
}
input[type="range"] {
  width: 100%;
}
datalist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* writing-mode: vertical-lr; */
  width: 200px;
}

.hide {
  display: none !important;
}
:is(footer:has(#hidden:not(:target)) ~ main) .hide,
footer:has(#hidden:not(:target)) .hide {
  display: none !important;
}

footer:has(#identity:not(:checked)) ~ header,
footer:has(#flair:not(:checked)) ~ header {
  background: black;
}
@media print {
  body > header {
    background: black;
  }
}
@media screen {
  footer:has(#identity:hover) ~ header .identity,
  footer:has(#identity:hover) ~ address,
  footer:has(#identity:hover) ~ main .identity {
    outline: solid 3px rgba(0, 0, 255, 0.7);
  }
}
footer:has(#identity:not(:checked)) ~ header .identity,
footer:has(#identity:not(:checked)) ~ address,
footer:has(#identity:not(:checked)) ~ main .identity {
  display: none;
}

@media screen {
  footer:has(#flair:hover) ~ header .flair,
  footer:has(#contact:hover) ~ address,
  footer:has(#executive-summary:hover) ~ main .executive-summary,
  footer:has(#career-highlights:hover) ~ main .career-highlights,
  footer:has(#experience:hover) ~ main .experience,
  footer:has(#team-details:hover) ~ main .team-details,
  footer:has(#project-details:hover) ~ main .project-details,
  footer:has(#technology-profile:hover) ~ main .technology-profile,
  footer:has(#volunteer:hover) ~ main .volunteer,
  footer:has(#personal:hover) ~ main .personal,
  footer:has(#references:hover) ~ main .references,
  footer:has(#versions:hover) ~ main .versions {
    outline: solid 3px rgba(0, 0, 255, 0.7);
  }
}
footer:has(#flair:not(:checked)) ~ header .flair,
footer:has(#contact:not(:checked)) ~ address,
footer:has(#executive-summary:not(:checked)) ~ main .executive-summary,
footer:has(#career-highlights:not(:checked)) ~ main .career-highlights,
footer:has(#experience:not(:checked)) ~ main .experience,
footer:has(#team-details:not(:checked)) ~ main .team-details,
footer:has(#project-details:not(:checked)) ~ main .project-details,
footer:has(#technology-profile:not(:checked)) ~ main .technology-profile,
footer:has(#volunteer:not(:checked)) ~ main .volunteer,
footer:has(#personal:not(:checked)) ~ main .personal,
footer:has(#references:not(:checked)) ~ main .references,
footer:has(#versions:not(:checked)) ~ main .versions {
  display: none;
}

/* ATS hover */
@media screen {
  footer:has(#ats:hover) ~ header .ats,
  footer:has(#ats:hover) ~ address .ats,
  footer:has(#ats:hover) ~ main .ats,
  footer:has(#ats:hover) ~ header .noats,
  footer:has(#ats:hover) ~ address .noats,
  footer:has(#ats:hover) ~ main .noats {
    outline: solid 3px rgba(0, 0, 255, 0.7);
  }
}
/* ATS off */
footer:has(#ats:not(:checked)) ~ header .ats,
footer:has(#ats:not(:checked)) ~ address .ats,
footer:has(#ats:not(:checked)) ~ main .ats {
  display: none;
}
/* ATS on */
footer:has(#ats:checked) ~ main .references > div {
  width: 33%;
  justify-content: left;
}
footer:has(#ats:checked) ~ address > div a::before {
  content: " | ";
  margin-right: 1ex;
  color: #888;
}
footer:has(#ats:checked) ~ address > div a:first-child::before {
  display: none;
}
footer:has(#ats:checked) ~ address > div a img {
  display: none;
}
footer:has(#ats:checked) ~ address > div a {
  max-width: 80%;
}
footer:has(#ats:checked) ~ header .noats,
footer:has(#ats:checked) ~ address .noats,
footer:has(#ats:checked) ~ main .noats {
  display: none;
}

/* Detail level */
@media screen {
  footer:has(input[value="detail"]:hover) ~ main article section p {
    outline: solid 3px rgba(0, 0, 255, 0.7);
  }
}
footer:has(input[value="detail"]:checked) ~ main article section p {
  display: none;
}
@media screen {
  footer:has(#detail:hover) ~ main article .detail,
  footer:has(#detail:hover) ~ main article ul {
    outline: solid 3px rgba(0, 0, 255, 0.7);
  }
}
footer:has(#detail:not(:checked)) ~ main article .detail,
footer:has(#detail:not(:checked)) ~ main article ul {
  display: none;
}

/* Year cutoff */

footer:has(input[value="2020"]:checked) ~ main .y2019 {
  display: none;
}
footer:has(input[value="2020"]:checked) ~ main .y2018 {
  display: none;
}
footer:has(input[value="2020"]:checked) ~ main .y2016 {
  display: none;
}
footer:has(input[value="2015"]:checked) ~ main .y2014,
footer:has(input[value="2020"]:checked) ~ main .y2014 {
  display: none;
}
footer:has(input[value="2015"]:checked) ~ main .y2013,
footer:has(input[value="2020"]:checked) ~ main .y2013 {
  display: none;
}
footer:has(input[value="2010"]:checked) ~ main .y2007,
footer:has(input[value="2015"]:checked) ~ main .y2007,
footer:has(input[value="2020"]:checked) ~ main .y2007 {
  display: none;
}
footer:has(input[value="2010"]:checked) ~ main .y2006,
footer:has(input[value="2015"]:checked) ~ main .y2006,
footer:has(input[value="2020"]:checked) ~ main .y2006 {
  display: none;
}
footer:has(input[value="2010"]:checked) ~ main .y2005,
footer:has(input[value="2015"]:checked) ~ main .y2005,
footer:has(input[value="2020"]:checked) ~ main .y2005 {
  display: none;
}
footer:has(input[value="2010"]:checked) ~ main .y2001,
footer:has(input[value="2015"]:checked) ~ main .y2001,
footer:has(input[value="2015"]:checked) ~ main .y2001,
footer:has(input[value="2020"]:checked) ~ main .y2001 {
  display: none;
}

footer:has(input[value="2000"]:checked) ~ main .c2010,
footer:has(input[value="2000"]:checked) ~ main .c2015,
footer:has(input[value="2000"]:checked) ~ main .c2020 {
  display: none;
}
footer:has(input[value="2010"]:checked) ~ main .c2000,
footer:has(input[value="2010"]:checked) ~ main .c2015,
footer:has(input[value="2010"]:checked) ~ main .c2020 {
  display: none;
}
footer:has(input[value="2015"]:checked) ~ main .c2000,
footer:has(input[value="2015"]:checked) ~ main .c2010,
footer:has(input[value="2015"]:checked) ~ main .c2020 {
  display: none;
}
footer:has(input[value="2020"]:checked) ~ main .c2000,
footer:has(input[value="2020"]:checked) ~ main .c2010,
footer:has(input[value="2020"]:checked) ~ main .c2015 {
  display: none;
}

/* Font size */

html:has(input[value="8pt"]:checked) {
  font-size: 8pt;
  transition: ease all 0.1s;
}
html:has(input[value="10pt"]:checked) {
  font-size: 10pt;
  transition: ease all 0.1s;
}
html:has(input[value="12pt"]:checked) {
  font-size: 12pt;
  transition: ease all 0.1s;
}
html:has(input[value="14pt"]:checked) {
  font-size: 14pt;
  transition: ease all 0.1s;
}

/* Line spacing */

footer:has(input[value="tight"]:checked) ~ main * {
  line-height: 1.2em;
  transition: ease all 0.2s;
}
footer:has(input[value="regular"]:checked) ~ main * {
  line-height: 1.7em;
  transition: ease all 0.2s;
}
footer:has(input[value="loose"]:checked) ~ main * {
  line-height: 2.5em;
  transition: ease all 0.2s;
}

.mermaid:not([data-processed])::before {
  visibility: visible;
  color: silver;
  position: relative;
  top: 2rem;
  content: "🚫 Diagram not available.";
  font-size: 1rem;
  padding: 1rem;
  border: solid 1px silver;
  box-sizing: border-box;
  margin: auto;
}
.mermaid:not([data-processed]) {
  visibility: hidden;
  font-size: 0.0001em;
  line-height: 0;
  color: transparent;
  height: 5rem;
}