:root {
  font-family:
    system-ui, "Roboto", "Helvetica", "Cantarell", "Noto Sans", sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-size: 100%;

  --header-bg: #f9fafb;
  --anchor-color: #2563eb;
  --main-text-color: #1e293b;
  --light-text-color: #a3a3a3;
}

header {
  background-color: var(--header-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
header a {
  color: var(--light-text-color);
  text-decoration: none;
}
header svg {
  stroke: var(--light-text-color);
}
header svg:hover {
  stroke: var(--anchor-color);
  opacity: 0.7;
}
header a:hover {
  color: var(--anchor-color);
  opacity: 0.7;
}
footer {
  color: var(--light-text-color);
}
main {
  color: var(--main-text-color);
}
main a {
  color: var(--anchor-color);
  text-decoration: underline;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.about {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
}

.about svg {
  stroke: var(--light-text-color);
}
.about .animated-path {
  opacity: 0.4;
  stroke: var(--anchor-color);
}
.about div:hover .animated-path {
  opacity: 0.8;
  stroke-dasharray: 100;
  animation-name: dash;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 750;
  }
}
section + section {
  border-top: 1px solid;
}
ul {
  list-style-type: none;
}

@view-transition {
  navigation: auto;
}