/* Inter by Rasmus Andersson @ https://rsms.me/inter/ */
@font-face {
  font-family: 'Inter';
  font-weight: normal;
  font-display: swap;
  src: local('Inter'), local('Inter Regular'), local('Inter-Regular'), url('/font/Inter/Inter-Regular.woff2') format('woff2'), url('/font/Inter/Inter-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-weight: bold;
  font-display: swap;
  src: local('Inter Bold'), local('Inter-Bold'), url('/font/Inter/Inter-Bold.woff2') format('woff2'), url('/font/Inter/Inter-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-weight: 300;
  font-display: swap;
  src: local('Inter Light'), local('Inter-Light'), url('/font/Inter/Inter-Light.woff2') format('woff2'), url('/font/Inter/Inter-Light.woff') format('woff');
}
html {
  scrollbar-color: hsl(0, 0%, 43%) hsl(0, 0%, 14%);
  font-size: calc(0.08vw + 0.04vh + 16.05px);
}
html.light-mode {
  scrollbar-color: auto;
}
@media (max-width: 960px) {
  html {
    font-size: calc(0.4vw + 0.1vh + 12.55px);
  }
}
body {
  margin: 0;
  background-color: hsl(0, 0%, 8%);
  color: hsl(0, 0%, 95%);
  font-family: 'Inter', 'Roboto', 'San Francisco', 'Segoe UI', 'Arial', sans-serif;
  transition: background 0.15s linear;
}
html.light-mode body {
  color: black;
  background-color: transparent;
}
:focus {
  outline: 3px solid #1960C9;
}
@supports selector(:focus-visible) or selector(:-moz-focusring) {
  :focus {
    outline: none;
  }
}
:-moz-focusring {
  outline: 3px solid #1960C9;
}
:focus-visible {
  outline: 3px solid #1960C9;
}
#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.4em;
  font-size: 1.7rem;
  background-color: hsl(0, 0%, 3.5%);
  color: hsl(0, 0%, 78.5%);
  box-sizing: border-box;
  transition: background 0.15s linear, color 0.15s linear;
}
#navbar a {
  color: inherit;
  text-decoration: none;
}
#navbar .text {
  display: flex;
  align-items: center;
}
#navbar .text h1 {
  font-size: inherit;
  font-weight: normal;
  margin: 0;
}
#navbar .text .root-link {
  display: flex;
  align-items: center;
}
#navbar .text img {
  width: 1.9em;
  height: 1.9em;
  border-radius: 100%;
  margin-right: 0.3em;
}
#navbar .text .name {
  font-weight: bold;
}
#navbar .text .arrow {
  font-family: 'Source Code Pro', 'Consolas', monospace;
  padding: 0 0.3em;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html.light-mode #navbar {
  background-color: hsl(0, 0%, 97%);
  color: hsl(0, 0%, 22%);
}
#navbar #theme-toggle {
  margin-right: 0.2em;
}
#theme-toggle .theme-toggle-btn {
  display: block;
  position: relative;
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 1em;
  width: 1.5em;
  height: 1.5em;
  cursor: pointer;
}
#theme-toggle .theme-toggle-btn > svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.325s ease;
}
#theme-toggle .theme-toggle-btn > svg > * {
  transition: all 0.15s ease;
}
#theme-toggle .theme-toggle-btn .icon-sun {
  color: hsl(0, 0%, 95%);
}
#theme-toggle .theme-toggle-btn .icon-sun circle {
  transform-origin: 12px 12px;
}
#theme-toggle .theme-toggle-btn .icon-sun rect {
  transition-delay: 0.033s;
}
#theme-toggle .theme-toggle-btn .icon-moon {
  color: black;
}
#theme-toggle .theme-toggle-btn .icon-moon .base {
  transform-origin: 6.8px 12px;
}
#theme-toggle .theme-toggle-btn .icon-moon .star-1 {
  transform-origin: 15px 11px;
  transition-delay: 0.06s;
}
#theme-toggle .theme-toggle-btn .icon-moon .star-2 {
  transform-origin: 22px 11px;
  transition-delay: 0.0665s;
}
#theme-toggle .theme-toggle-btn .icon-moon .star-3 {
  transform-origin: 19px 5px;
  transition-delay: 0.073s;
}
html.light-mode #theme-toggle .theme-toggle-btn .icon-sun,
html:not(.light-mode) #theme-toggle .theme-toggle-btn .icon-moon {
  transform: rotate(-33.75deg);
  visibility: hidden;
  z-index: -1;
}
html.light-mode #theme-toggle .theme-toggle-btn .icon-moon,
html:not(.light-mode) #theme-toggle .theme-toggle-btn .icon-sun {
  animation: 0.325s iconPositiveRotate ease;
}
html:not(.light-mode) #theme-toggle .theme-toggle-btn .icon-moon .base,
html:not(.light-mode) #theme-toggle .theme-toggle-btn .icon-moon .star {
  transform: scale(0);
}
html:not(.light-mode) #theme-toggle .theme-toggle-btn .icon-moon .star {
  transition-delay: 0s;
}
html.light-mode #theme-toggle .theme-toggle-btn .icon-sun circle {
  transform: scale(0);
  transition-delay: 0.0325s;
}
html.light-mode #theme-toggle .theme-toggle-btn .icon-sun rect {
  height: 0;
  transition-delay: 0s;
}
@keyframes iconPositiveRotate {
  from {
    transform: rotate(33.75deg);
  }
}
#footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 1rem;
  padding: 1em 0;
  background-color: hsl(0, 0%, 4.5%);
  color: hsl(0, 0%, 95%);
}
#footer .nav-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 60em;
  margin-bottom: 1em;
}
#footer .nav-wrapper .nav-item {
  flex: 1;
  display: flex;
  justify-content: center;
}
#footer .nav-wrapper .nav-item:nth-child(1) {
  animation: 0.45s navItemIn cubic-bezier(0.4, 0.1, 0.5, 1);
}
#footer .nav-wrapper .nav-item:nth-child(2) {
  animation: 0.53s navItemIn cubic-bezier(0.4, 0.1, 0.5, 1);
}
#footer .nav-wrapper .nav-item:nth-child(3) {
  animation: 0.61s navItemIn cubic-bezier(0.4, 0.1, 0.5, 1);
}
@keyframes navItemIn {
  from {
    transform: translateX(-1.25em);
    opacity: 0.15;
  }
}
#footer .nav-wrapper .nav-item:nth-child(1) a::before {
  left: 100%;
}
#footer .nav-wrapper .nav-item:nth-child(3) a::before {
  left: 0;
}
#footer .nav-wrapper h3 {
  font-size: 1.12em;
  margin: 0.75em 0;
}
#footer .nav-wrapper ul {
  padding: 0;
  margin: 0;
}
#footer .nav-wrapper ul li {
  list-style: none;
  margin: 0.52em 0;
  color: hsl(0, 0%, 85%);
}
#footer .nav-wrapper ul li:nth-last-of-type(1) {
  margin-bottom: 0;
}
#footer .nav-wrapper ul a {
  white-space: nowrap;
}
#footer hr {
  width: 5.5em;
  margin: 0.3em 0;
  border: 1px solid hsl(0, 0%, 42%);
  animation: 0.4s borderIn cubic-bezier(0.55, 0.05, 0.5, 0.95);
}
@keyframes borderIn {
  from {
    width: 3.5em;
    opacity: 0.25;
  }
}
#footer .side-note {
  font-size: 0.9em;
  font-weight: 300;
  color: hsl(0, 0%, 80%);
  animation: 0.4s sideNoteIn ease-in;
}
@keyframes sideNoteIn {
  from {
    opacity: 0.1;
  }
}
#footer .side-note em {
  font-style: normal;
}
#footer a {
  position: relative;
  text-decoration: none;
  padding: 0 0 0.2em;
  color: inherit;
}
#footer a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  border-bottom: 1px solid hsl(0, 0%, 85%);
  transition: all 0.225s ease;
}
#footer a:hover::before {
  left: 0 !important;
  width: 100%;
}
html.light-mode #footer {
  background-color: hsl(0, 0%, 19%);
  color: white;
}
html.light-mode #footer .nav-wrapper ul li {
  color: #e6e6e6;
}
html.light-mode #footer hr {
  border-color: #787878;
}
html.light-mode #footer .side-note {
  color: #d9d9d9;
}
html.light-mode #footer a::before {
  border-bottom-color: #e6e6e6;
}
@media (max-width: 700px) {
  #footer {
    padding: 1em 0.5em;
  }
  #footer .nav-wrapper {
    flex-flow: column;
  }
  #footer .nav-wrapper .nav-item:not(:nth-last-of-type(1)) {
    margin-bottom: 0.3em;
  }
  #footer .nav-wrapper .nav-item:nth-last-of-type(1) ul li {
    margin-bottom: 0 !important;
  }
  #footer .nav-wrapper h3 {
    text-align: center;
  }
  #footer .nav-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #footer .nav-wrapper ul li {
    margin: 0.52em 0.5em !important;
  }
  #footer hr {
    width: 4.5em;
  }
}