@font-face {
  font-family: "Old London";
  src: url("fonts/OldLondon.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}

html {
  scrollbar-color: #111 #000;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #111;
  border: 2px solid #000;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #202020;
}

.hero h1 em,
.contact h2 em {
  font-family: "Old London", serif;
  font-style: normal;
  font-weight: 400;
}

.reveal.visible,
.reveal-done {
  opacity: 1;
  transform: none;
}

.work {
  transition: opacity .22s ease, transform .32s cubic-bezier(.22, .8, .3, 1);
}

.work.filter-leaving {
  opacity: 0;
  transform: scale(.965);
}

.work.filter-entering {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .work {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}