@font-face {
  font-family: "monospace";
  src: url("fonts/ShareTechMono-Regular.woff2") format("woff2"), url("fonts/ShareTechMono-Regular.woff") format("woff"), url("fonts/ShareTechMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "serif";
  src: url("fonts/ZillaSlab-Regular.woff2") format("woff2"), url("fonts/ZillaSlab-Regular.woff") format("woff"), url("fonts/ZillaSlab-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "serif";
  src: url("fonts/ZillaSlab-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Italic.ttf") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/FiraSans/CourierPrime-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans/FiraSans-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans/FiraSans-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans/FiraSans-Italic.ttf") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans/FiraSans-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/Fira_Mono/FiraMono-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/Fira_Mono/FiraMono-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/FiraMono/FiraMono-Italic.ttf") format("truetype");
  font-style: italic;
}
:root {
  --font-large: 35px;
  --font-medium: 28px;
  --font-modest: 18px;
  --font-small: 16px;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  :root {
    --font-large: 25px;
    --font-medium: 20px;
    --font-modest: 16px;
    --font-small: 16px;
  }
}
:root {
  --accent: #dc1e61;
  --black-gray: rgb(30, 30, 30);
  --dark-gray: rgb(50, 50, 50);
  --gray: rgb(100, 100, 100);
  --light-gray: rgb(200, 200, 200);
}
:root {
  --hover-duration: 0.3s;
}

* {
  box-sizing: border-box;
}

::selection {
  background-color: rgba(220, 30, 97, 0.2666666667);
}

.block {
  display: block;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.full-width {
  width: 100%;
}

.content-width {
  width: max-content;
}

.full-height {
  height: 100%;
}

.content-height {
  height: max-content;
}

.no-margin {
  margin: 0;
}

.auto-margin {
  margin-left: auto !important;
  margin-right: auto !important;
}

.no-overflow-x {
  overflow-x: hidden;
}

.text-center {
  text-align: center !important;
}

.bold {
  font-weight: bolder;
}

.accent {
  color: #dc1e61;
}

.accent-two {
  color: #350d9a;
}

.black {
  color: black;
}

.black-gray {
  color: rgb(30, 30, 30);
}

.dark-gray {
  color: rgb(50, 50, 50);
}

.gray {
  color: rgb(100, 100, 100);
}

.light-gray {
  color: rgb(200, 200, 200);
}

.white {
  color: white;
}

.color-inherit {
  color: inherit !important;
}

.green {
  color: #92c10c;
}

.purple {
  color: #750869;
}

.cyan {
  color: #28b0bb;
}

.bg-accent {
  background-color: #dc1e61;
}

.bg-black {
  background-color: black;
}

.bg-black-gray {
  background-color: rgb(30, 30, 30);
}

.bg-dark-gray {
  background-color: rgb(50, 50, 50);
}

.bg-gray {
  background-color: rgb(100, 100, 100);
}

.bg-white {
  background-color: white;
}

.bg-transparent {
  background-color: transparent;
}

.bg-black-transparent {
  background-color: rgba(0, 0, 0, 0.5);
}

.border-dark-gray {
  border-color: rgb(50, 50, 50);
}

.pre {
  white-space: pre;
}

.wrap {
  white-space: pre-wrap;
}

.nowrap {
  white-space: nowrap;
}

.no-animation {
  animation-duration: 0s !important;
}

.font-large {
  font-size: var(--font-large) !important;
  line-height: calc(var(--font-large) * 1.2);
}

.font-medium {
  font-size: var(--font-medium) !important;
  line-height: calc(var(--font-medium) * 1.2);
}

.font-modest {
  font-size: var(--font-modest) !important;
  line-height: calc(var(--font-modest) * 1.2);
}

.font-small {
  font-size: var(--font-small) !important;
  line-height: calc(var(--font-small) * 1.2);
}

.portrait {
  display: none;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  .portrait {
    display: inherit;
  }
}

.anti-portrait {
  display: inherit;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  .anti-portrait {
    display: none;
  }
}

body {
  font-size: var(--font-modest);
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  body.expanded > #content > div {
    transform: none !important;
  }
}

section {
  padding: 30px 0 20px;
}
section > * {
  position: relative;
  max-width: 80%;
  width: 850px;
  margin: 0 auto;
}

h1 {
  font-size: var(--font-large);
  white-space: pre;
  line-height: calc(var(--font-large) * 2);
}

p {
  padding-left: 25px;
  white-space: pre-wrap;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  p {
    padding-left: 0;
  }
}

body:after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url("/images/map.svg");
}

#about {
  padding-top: 50px;
  --profile-size: 220px;
}
#about > * {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  column-gap: 50px;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #about {
    --profile-size: 150px;
  }
  #about h1 {
    margin: auto;
  }
  #about > * {
    flex-direction: column;
  }
}
#about img.affiliation {
  max-width: calc(1.5 * var(--font-modest));
  max-height: var(--font-modest);
  transform: translateY(15%);
}
#about p a {
  background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 0, 180, 0.8), rgba(0, 100, 200, 0.8));
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  color: #dc1e61;
  transition: background-size 0.3s, color 0.3s;
}
#about p a:hover {
  background-size: 0 3px, 100% 3px;
  cursor: pointer;
}
#about #profile {
  width: var(--profile-size);
  margin-top: 10px;
}
#about #profile img {
  width: 100%;
  height: var(--profile-size);
  border-radius: 100%;
  margin-bottom: 10px;
}
#about #profile #name {
  transform: translateX(3px);
}
#about #profile p {
  max-width: 100%;
  padding: 0;
  text-align: center;
}
#about #profile p code.fill {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 6px;
}
#about #profile p a#cv {
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #about #profile {
    width: 100%;
  }
  #about #profile img {
    display: block;
    width: var(--profile-size);
    margin: auto auto 10px;
  }
}

#news.full .optional {
  height: max-content;
  visibility: visible;
  transform: none;
  opacity: 1;
}
#news > div {
  margin-top: 0;
}
#news > div ul {
  margin-top: 50px;
  list-style-type: none;
}
#news > div ul li {
  display: grid;
  grid-template-columns: 120px 1fr 180px;
  column-gap: 10px;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #news > div ul li {
    display: block;
    margin-bottom: 20px;
  }
}
#news > div ul li h3 {
  margin-top: 0;
  margin-bottom: 0;
}
#news > div ul li code {
  display: flex;
  margin-top: 3px;
  margin-right: 10px;
  color: rgb(100, 100, 100);
  align-items: center;
}
#news > div ul li code.fill {
  display: flex;
  padding: 2px 10px;
  border-radius: 5px;
  justify-content: space-between;
}
#news > div ul li code i {
  margin: 5px;
  font-size: calc(0.7 * var(--font-small));
  transform: translateY(-15%);
}
#news > div ul li span:last-child {
  text-align: right;
}
#news > div ul li.toggle {
  margin-top: 5px;
}
#news > div ul a {
  background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 0, 180, 0.8), rgba(0, 100, 200, 0.8));
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  color: #dc1e61;
  transition: background-size 0.3s, color 0.3s;
}
#news > div ul a:hover {
  background-size: 0 3px, 100% 3px;
  cursor: pointer;
}
#news > div ul .optional {
  height: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #news > div ul {
    padding-inline-start: 0;
  }
}

#publications > div {
  margin-top: 0;
}
#publications > div h1 {
  white-space: pre-wrap;
  line-height: calc(var(--font-large) * 1);
}
#publications > div > .grid {
  display: grid;
  grid-template-columns: 20% 75%;
  column-gap: 5%;
  margin-top: 40px;
  margin-bottom: 10px;
  --em-button-background: white;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #publications > div > .grid {
    grid-template-columns: 100%;
    grid-template-rows: max-content;
    row-gap: 70px;
  }
}
#publications #paper-img {
  position: relative;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #publications #paper-img {
    display: none;
  }
}
#publications #paper-img::before {
  position: absolute;
  display: block;
  content: "";
  background-color: rgba(0, 0, 0, 0.05);
  width: 95px;
  height: 80px;
  transform: translateY(min(max((var(--y-offset) - 180px) * 20, -150px), 80px));
  top: 10vw;
  right: -30px;
  bottom: 10vw;
  z-index: 0;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #publications #paper-img::before {
    content: none;
  }
}
#publications #paper-img::after {
  position: absolute;
  display: block;
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  height: 240px;
  transform: translateY(min(max((var(--y-offset) - 180px) * -10, 0px), 100px));
  top: 10px;
  left: -2vw;
  right: 5vw;
  z-index: 0;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #publications #paper-img::after {
    transform: none;
    transition: none;
  }
}
#publications #paper-img img {
  position: relative;
  transform: translateY(min(max((var(--y-offset) - 160px) * -10, 0px), 100px));
  transform-origin: left;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.3);
  z-index: 5;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #publications #paper-img img {
    display: block;
    transform: none;
    transform-origin: top;
    width: auto;
    height: 100%;
    margin: auto;
  }
}
#publications #papers {
  z-index: 1;
}
#publications #papers .paper-links {
  font-size: var(--font-small);
  margin-left: 1.5em;
}
#publications #papers .paper-links img.icon {
  height: 1em;
  transform: translateY(0.153em) scale(0.9);
}
#publications #papers .paper-links a, #publications #papers .paper-links button.bib {
  display: inline-block;
  background-color: rgb(240, 240, 240);
  margin-right: 1em;
  margin-bottom: 0.5em;
  padding: 3px 10px 5px 10px;
  border-radius: 3px;
  font-family: "Fira Mono", monospace;
  font-size: 0.8em;
  transition-property: color;
  transition-duration: 0.3s;
}
#publications #papers .paper-links a:hover, #publications #papers .paper-links button.bib:hover {
  color: #dc1e61;
  cursor: pointer;
}
#publications #papers .paper-links a.arxiv, #publications #papers .paper-links button.bib.arxiv {
  padding: 0;
  color: white;
}
#publications #papers .paper-links a.arxiv > span, #publications #papers .paper-links button.bib.arxiv > span {
  padding: 3px 10px 5px 10px;
}
#publications #papers .paper-links a.arxiv > span:first-child, #publications #papers .paper-links button.bib.arxiv > span:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
#publications #papers .paper-links a.arxiv > span:last-child, #publications #papers .paper-links button.bib.arxiv > span:last-child {
  position: relative;
  display: inline-flex;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  overflow-x: hidden;
}
#publications #papers .paper-links a.arxiv > span:last-child::before, #publications #papers .paper-links button.bib.arxiv > span:last-child::before {
  position: absolute;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 0, 180, 0.8), rgba(0, 100, 200, 0.8), #dc1e61);
  background-position: -10em;
  background-repeat: no-repeat;
  width: 130%;
  height: 100%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  content: "";
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: background-position, opacity;
  transition-duration: 0.3s;
}
#publications #papers .paper-links a.arxiv span, #publications #papers .paper-links button.bib.arxiv span {
  position: relative;
}
#publications #papers .paper-links a.arxiv:hover > span:last-child::before, #publications #papers .paper-links button.bib.arxiv:hover > span:last-child::before {
  background-position: right center;
  opacity: 1;
}
#publications #papers .paper-links a.hf, #publications #papers .paper-links button.bib.hf {
  padding: 0;
  color: white;
}
#publications #papers .paper-links a.hf > span, #publications #papers .paper-links button.bib.hf > span {
  padding: 3px 10px 5px 10px;
}
#publications #papers .paper-links a.hf > span:first-child, #publications #papers .paper-links button.bib.hf > span:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
#publications #papers .paper-links a.hf > span:last-child, #publications #papers .paper-links button.bib.hf > span:last-child {
  position: relative;
  display: inline-flex;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  overflow-x: hidden;
}
#publications #papers .paper-links a.hf > span:last-child::before, #publications #papers .paper-links button.bib.hf > span:last-child::before {
  position: absolute;
  background: linear-gradient(to right, #f7c911, #fa9a00, rgba(0, 100, 200, 0.8), #fa9a00);
  background-position: -10em;
  background-repeat: no-repeat;
  width: 130%;
  height: 100%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  content: "";
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: background-position, opacity;
  transition-duration: 0.3s;
}
#publications #papers .paper-links a.hf span, #publications #papers .paper-links button.bib.hf span {
  position: relative;
}
#publications #papers .paper-links a.hf span.bg-hf, #publications #papers .paper-links button.bib.hf span.bg-hf {
  background-color: #fa9a00;
}
#publications #papers .paper-links a.hf:hover > span:last-child::before, #publications #papers .paper-links button.bib.hf:hover > span:last-child::before {
  background-position: right center;
  opacity: 1;
}
#publications #papers pre.bib {
  display: grid;
  background: #fbe4ec;
  border-radius: 3px;
  padding: 0.5em 1em;
  grid-template-columns: 2em 1fr;
  column-gap: 0.5em;
  font-size: var(--font-small);
}
#publications #papers pre.bib button {
  position: relative;
  background-color: #e6477f;
  width: 2em;
  height: 2em;
  padding: 3px;
  border-radius: 3px;
  color: white;
  overflow: hidden;
}
#publications #papers pre.bib button::before {
  position: absolute;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 0, 180, 0.8), rgba(0, 100, 200, 0.8), #dc1e61);
  background-position: -2em;
  background-repeat: no-repeat;
  width: 130%;
  height: 100%;
  content: "";
  border-radius: 3px;
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: background-position, opacity;
  transition-duration: 0.3s;
}
#publications #papers pre.bib button:hover::before {
  background-position: right center;
  opacity: 1;
}
#publications #papers pre.bib button.selected i.far {
  opacity: 1;
  animation: fadeIn 1s ease-out;
}
#publications #papers pre.bib button.selected i.fas {
  animation: fadeOut 1s ease-out;
}
#publications #papers pre.bib button i {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(25%);
}
#publications #papers pre.bib button i.fas {
  opacity: 0;
}
#publications #papers pre.bib code {
  background: #fdf2f6;
  border-radius: 3px;
  padding: 10px;
  overflow-x: scroll;
  font-family: "Fira Mono", monospace;
  font-size: 0.8em;
}
#publications #papers pre.bib code strong {
  color: #350d9a;
}
#publications #papers pre.bib code emph {
  color: #dc1e61;
}
#publications #papers a.paper {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: var(--font-small);
}
#publications #papers a.paper:not(:first-child) {
  margin-top: 20px;
}
#publications #papers a.paper::before {
  content: "\f360";
  margin-right: 10px;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  color: rgb(100, 100, 100);
  font-size: var(--font-small);
}
#publications #papers a.paper:hover {
  cursor: pointer;
}
#publications #papers a.paper:hover > span:first-child::after {
  width: 100%;
}
#publications #papers a.paper > span {
  position: relative;
  max-width: calc(100% - 3em);
}
#publications #papers a.paper > span:first-child {
  display: inline-block;
  padding-bottom: 0.3em;
  margin-bottom: 0.2em;
  font-size: var(--font-modest);
  font-weight: bold;
}
#publications #papers a.paper > span:first-child::after {
  position: absolute;
  display: block;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 0, 180, 0.8), rgba(0, 100, 200, 0.8));
  content: "";
  width: 0;
  height: 3px;
  left: 0;
  bottom: 0;
  transition-property: width;
  transition-duration: 0.3s;
}
#publications #papers a.paper > span:not(:first-child) {
  display: block;
  margin-left: 1.5em;
}
#publications #papers a.paper img.icon {
  height: 1em;
  transform: translateY(0.1em) scale(1.2);
}
#publications #papers a.paper .lowercaps {
  font-size: 0.75em;
}
#publications a.em-button {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  margin-right: 20px;
  z-index: 20;
}

#map.scroll-opacity {
  position: relative;
  background-color: white;
  transform: none;
  overflow: hidden;
  overflow-x: visible;
  opacity: 1;
  --em-button-color: white;
  --em-button-fill: white;
}
#map.scroll-opacity::before {
  position: absolute;
  content: "";
  background-image: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)), url("/images/map.svg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(-100px);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
}
#map.scroll-opacity .scroll-opacity:not(.path-container) {
  transform: translateX(-100px);
}
#map.scroll-opacity .scroll-opacity:not(.path-container).inview {
  transform: none;
}
#map.scroll-opacity a {
  position: relative;
  display: block;
  background-color: rgb(30, 30, 30);
  width: max-content;
  z-index: 2;
}
#map.scroll-opacity a > em::after {
  content: "\f074";
  transform: translateY(200%);
  margin-left: 10px;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  font-size: 80%;
}
#map.scroll-opacity.inview::before {
  opacity: 1;
  transform: none;
}

.path-container {
  position: relative;
  width: 100%;
  color: rgb(100, 100, 100);
}
.path-container.scroll-opacity {
  transform: none;
}
.path-container .fa-shoe-prints {
  position: absolute;
  animation: brightenUp 10s linear infinite;
}
.path-container .fa-shoe-prints:nth-child(1) {
  left: -100px;
  top: -80px;
  transform: rotate(51.91deg);
  animation-delay: 0.25s;
}
.path-container .fa-shoe-prints:nth-child(2) {
  left: -50px;
  top: -40px;
  transform: rotate(11.91deg);
  animation-delay: 0.5s;
}
.path-container .fa-shoe-prints:nth-child(3) {
  left: 167.6px;
  top: -39.63px;
  transform: rotate(-2.97deg);
  animation-delay: 0.75s;
}
.path-container .fa-shoe-prints:nth-child(4) {
  left: 209.87px;
  top: -42.69px;
  transform: rotate(-6.51deg);
  animation-delay: 1s;
}
.path-container .fa-shoe-prints:nth-child(5) {
  left: 259.36px;
  top: -46.28px;
  transform: rotate(-6.25deg);
  animation-delay: 1.25s;
}
.path-container .fa-shoe-prints:nth-child(6) {
  left: 343.54px;
  top: -47.35px;
  transform: rotate(3.63deg);
  animation-delay: 1.5s;
}
.path-container .fa-shoe-prints:nth-child(7) {
  left: 381.14px;
  top: -38.62px;
  transform: rotate(42.94deg);
  animation-delay: 1.75s;
}
.path-container .fa-shoe-prints:nth-child(8) {
  left: 378.45px;
  top: -7.34px;
  transform: rotate(128.11deg);
  animation-delay: 2s;
}
.path-container .fa-shoe-prints:nth-child(9) {
  left: 342.38px;
  top: -4.02px;
  transform: rotate(-176.11deg);
  animation-delay: 2.25s;
}
.path-container .fa-shoe-prints:nth-child(10) {
  left: 313.85px;
  top: -19.38px;
  transform: rotate(-144.17deg);
  animation-delay: 2.5s;
}
.path-container .fa-shoe-prints:nth-child(11) {
  left: 295.6px;
  top: -57.56px;
  transform: rotate(-134.43deg);
  animation-delay: 2.75s;
}
.path-container .fa-shoe-prints:nth-child(12) {
  left: 259.43px;
  top: -85.96px;
  transform: rotate(-164.18deg);
  animation-delay: 3s;
}
.path-container .fa-shoe-prints:nth-child(13) {
  left: 227.07px;
  top: -71.36px;
  transform: rotate(154.79deg);
  animation-delay: 3.25s;
}
.path-container .fa-shoe-prints:nth-child(14) {
  left: 207.99px;
  top: -9.75px;
  transform: rotate(79.21deg);
  animation-delay: 3.5s;
}
.path-container .fa-shoe-prints:nth-child(15) {
  left: 234.52px;
  top: 19.3px;
  transform: rotate(60.42deg);
  animation-delay: 3.75s;
}
.path-container .fa-shoe-prints:nth-child(16) {
  left: 297.72px;
  top: 35.74px;
  transform: rotate(23.84deg);
  animation-delay: 4s;
}
.path-container .fa-shoe-prints:nth-child(17) {
  left: 347.22px;
  top: 35.17px;
  transform: rotate(-20.63deg);
  animation-delay: 4.25s;
}
.path-container .fa-shoe-prints:nth-child(18) {
  left: 411.32px;
  top: 15.14px;
  transform: rotate(-38.35deg);
  animation-delay: 4.5s;
}
.path-container .fa-shoe-prints:nth-child(19) {
  left: 487.08px;
  top: -16.26px;
  transform: rotate(-38.68deg);
  animation-delay: 4.75s;
}
.path-container .fa-shoe-prints:nth-child(20) {
  left: 570.6px;
  top: -43.39px;
  transform: rotate(-24.24deg);
  animation-delay: 5s;
}
.path-container .fa-shoe-prints:nth-child(21) {
  left: 657.33px;
  top: -50.73px;
  transform: rotate(7.72deg);
  animation-delay: 5.25s;
}
.path-container .fa-shoe-prints:nth-child(22) {
  left: 742.45px;
  top: -41.56px;
  transform: rotate(17.08deg);
  animation-delay: 5.5s;
}
.path-container .fa-shoe-prints:nth-child(23) {
  left: 811.26px;
  top: -30.14px;
  transform: rotate(19.14deg);
  animation-delay: 5.75s;
}
.path-container .fa-shoe-prints:nth-child(24) {
  left: 889.62px;
  top: -10.82px;
  transform: rotate(16.56deg);
  animation-delay: 6s;
}
.path-container .fa-shoe-prints:nth-child(25) {
  left: 944.22px;
  top: -2.13px;
  transform: rotate(8.76deg);
  animation-delay: 6.25s;
}
.path-container .fa-shoe-prints:nth-child(26) {
  left: 992.94px;
  top: -15.23px;
  transform: rotate(-63.74deg);
  animation-delay: 6.5s;
}
.path-container .fa-shoe-prints:nth-child(27) {
  left: 992.94px;
  top: -50.23px;
  transform: rotate(-133.74deg);
  animation-delay: 6.75s;
}
.path-container .fa-shoe-prints:nth-child(28) {
  left: 957.94px;
  top: -65.23px;
  transform: rotate(183.74deg);
  animation-delay: 7s;
}
.path-container .fa-shoe-prints:nth-child(29) {
  left: 932.94px;
  top: -35.23px;
  transform: rotate(123.74deg);
  animation-delay: 7.25s;
}
.path-container .fa-shoe-prints:nth-child(30) {
  left: 912.94px;
  top: 25.23px;
  transform: rotate(103.74deg);
  animation-delay: 7.5s;
}
.path-container .fa-shoe-prints:nth-child(31) {
  left: 907.94px;
  top: 77.23px;
  transform: rotate(103.74deg);
  animation-delay: 7.75s;
}
.path-container .fa-map-pin {
  position: absolute;
  color: #dc7f1e;
  opacity: 0.5;
}
.path-container .fa-map-pin:nth-child(1) {
  left: 365.38px;
  top: -30px;
  transform: rotate(-20deg);
  animation: pin1 10s infinite;
  animation-delay: 1.8s;
}
.path-container .fa-map-pin:nth-child(2) {
  left: 972.94px;
  top: -35.23px;
  transform: rotate(10deg);
  animation: pin2 10s infinite;
  animation-delay: 6.5s;
}

@keyframes brightenUp {
  0%, 20% {
    color: inherit;
  }
  10% {
    color: #dc1e61;
  }
}
@keyframes pin1 {
  0%, 30% {
    opacity: 0.5;
    transform: rotate(-20deg);
  }
  5% {
    opacity: 1;
    transform: rotate(-20deg);
  }
  10% {
    opacity: 1;
    transform: rotate(-20deg) scale(1.5) translateY(-5px);
  }
}
@keyframes pin2 {
  0%, 30% {
    opacity: 0.5;
    transform: rotate(10deg);
  }
  5% {
    opacity: 1;
    transform: rotate(10deg);
  }
  10% {
    opacity: 1;
    transform: rotate(10deg) scale(1.5) translateY(-5px);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#notes.scroll-opacity {
  padding-bottom: 80px;
  transform: none;
  opacity: 1;
}
#notes.scroll-opacity h1 {
  display: block;
  margin: auto;
  border-top: 2px solid rgb(235, 235, 235);
  padding: 30px 50px;
  padding-bottom: 10px;
  font-weight: normal;
}
#notes.scroll-opacity h3 {
  font-size: var(--font-medium);
}
#notes.scroll-opacity button code {
  font-size: var(--font-modest);
}
#notes.scroll-opacity > * {
  margin-top: 0;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #notes.scroll-opacity > * {
    max-width: 100%;
  }
  #notes.scroll-opacity > * p {
    padding-top: 10px !important;
  }
}
#notes.scroll-opacity #notes-content {
  max-width: 85%;
  width: 850px;
  margin: auto;
  font-size: var(--font-small);
  font-family: "Fira Sans";
}
#notes.scroll-opacity #notes-content a {
  background-color: rgb(70, 70, 70);
  display: block;
  margin: 20px 20px;
  padding: 10px 20px;
  color: white;
  transition-property: background-color, transform;
  transition-duration: 0.3s;
}
#notes.scroll-opacity #notes-content a i {
  margin-right: 1em;
}
#notes.scroll-opacity #notes-content a:hover {
  background-color: gray;
  cursor: pointer;
}
#notes.scroll-opacity #notes-content .notes-item {
  transform: none;
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  padding: 0px 20px;
  opacity: 1;
  visibility: visible;
  justify-content: space-between;
  transition-property: opacity;
  transition-duration: 0.3s;
}
#notes.scroll-opacity #notes-content .notes-item > div {
  display: grid;
  grid-template-columns: 50px auto;
  max-width: 500px;
  width: 100%;
  min-height: 50px;
  column-gap: 20px;
  text-align: left;
}
#notes.scroll-opacity #notes-content .notes-item > div .notes-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#notes.scroll-opacity #notes-content .notes-item > div .bold {
  display: inline-block;
  text-align: left;
  white-space: pre-wrap;
}
#notes.scroll-opacity #notes-content .notes-item > div .tags {
  display: flex;
  justify-content: flex-start;
}
#notes.scroll-opacity #notes-content .notes-item > div .tags code {
  background-color: rgb(235, 235, 235);
  margin-top: 3px;
  margin-right: 10px;
  border-radius: 5px;
  padding: 1px 3px;
  opacity: 0.8;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #notes.scroll-opacity #notes-content .notes-item > div {
    max-width: 100%;
  }
}
@media (max-width: 650px) {
  #notes.scroll-opacity #notes-content .notes-item > div {
    grid-template-columns: auto;
  }
  #notes.scroll-opacity #notes-content .notes-item > div .notes-icon {
    display: none;
  }
}
#notes.scroll-opacity #notes-content .notes-item span {
  width: max-content;
  padding: 0;
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
  cursor: pointer;
}
#notes.scroll-opacity #notes-content .notes-item span.date {
  width: 200px;
}
@media (max-aspect-ratio: 4/3), (max-width: 820px) {
  #notes.scroll-opacity #notes-content .notes-item span.date {
    display: none;
  }
}
#notes.scroll-opacity #notes-content .notes-item:before {
  position: absolute;
  background: linear-gradient(to top, rgba(255, 0, 0, 0.8), rgba(255, 0, 180, 0.8), rgba(0, 100, 200, 0.8));
  width: 10px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom left;
  content: "";
  left: -20px;
  top: 0;
}
@media (max-width: 650px) {
  #notes.scroll-opacity #notes-content .notes-item:before {
    display: none;
  }
}
#notes.scroll-opacity #notes-content .notes-item:hover .project-icon {
  border: rgba(50, 50, 50, 0.3) solid 8px;
  transition-property: border;
  transition-duration: 0.3s;
}
#notes.scroll-opacity #notes-content .notes-item:hover:before {
  transform: none;
  transition-property: transform;
  transition-duration: 0.3s;
}

#art-ad-section {
  background-image: linear-gradient(-125deg, black 50%, white 50%);
  background-size: 350% 120%;
  background-position: left;
  transform: none;
  opacity: 1;
  position: relative;
  transition-property: background-position;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  --em-button-fill: white;
  --em-button-background: black;
  --em-button-color: white;
  --em-button-accent: black;
}
#art-ad-section::before {
  position: absolute;
  background-image: url("/images/art-ad/art-bg.jpg"), url("/images/art-ad/art-bg-low.jpg");
  background-size: cover;
  background-position: left;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  transition-property: opacity;
  transition-duration: 1s;
}
#art-ad-section > div {
  z-index: 20;
}
#art-ad-section p {
  position: relative;
  width: max-content;
  z-index: 20;
}
#art-ad-section a {
  position: absolute;
  right: 0;
  z-index: 20;
}
#art-ad-section.inview {
  background-position: right;
}
#art-ad-section.inview::before {
  opacity: 0.3;
}

/*# sourceMappingURL=index.css.map */