body {
  background-image: url('data:image/svg+xml,<svg id="visual" viewBox="0 0 960 540" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="%23222831"></rect><path d="M555 540L531 522C507 504 459 468 461.7 432C464.3 396 517.7 360 519.3 324C521 288 471 252 461 216C451 180 481 144 479 108C477 72 443 36 426 18L409 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%23222831"></path><path d="M542 540L532.2 522C522.3 504 502.7 468 516.7 432C530.7 396 578.3 360 579 324C579.7 288 533.3 252 530.7 216C528 180 569 144 595.7 108C622.3 72 634.7 36 640.8 18L647 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%23262c34"></path><path d="M567 540L584.5 522C602 504 637 468 653.7 432C670.3 396 668.7 360 651.3 324C634 288 601 252 581.7 216C562.3 180 556.7 144 572.8 108C589 72 627 36 646 18L665 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%23292f38"></path><path d="M724 540L727.2 522C730.3 504 736.7 468 713.8 432C691 396 639 360 636.7 324C634.3 288 681.7 252 699.2 216C716.7 180 704.3 144 692.8 108C681.3 72 670.7 36 665.3 18L660 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%232d333b"></path><path d="M703 540L720.3 522C737.7 504 772.3 468 791.2 432C810 396 813 360 807.2 324C801.3 288 786.7 252 782.3 216C778 180 784 144 787.2 108C790.3 72 790.7 36 790.8 18L791 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%2331373f"></path><path d="M820 540L823.8 522C827.7 504 835.3 468 839.2 432C843 396 843 360 842 324C841 288 839 252 838 216C837 180 837 144 831 108C825 72 813 36 807 18L801 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%23353a42"></path><path d="M872 540L875.3 522C878.7 504 885.3 468 887.7 432C890 396 888 360 884.3 324C880.7 288 875.3 252 868.8 216C862.3 180 854.7 144 851.5 108C848.3 72 849.7 36 850.3 18L851 0L960 0L960 18C960 36 960 72 960 108C960 144 960 180 960 216C960 252 960 288 960 324C960 360 960 396 960 432C960 468 960 504 960 522L960 540Z" fill="%23393e46"></path></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/*
  page location bar
*/

.page_location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  position: fixed;
  top: 25vh;
  left: 10vw;
}

.page_location > div:nth-child(odd) {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  aspect-ratio: 1;

  border: 1px var(--color-text) solid;
  border-radius: 50%;

  font-size: 1.25rem;
  font-weight: bold;

  transition: border-color .5s;
}

.page_location > div:nth-child(odd) > p {
  translate: 0 -1px;
}

.page_location > div:nth-child(odd).active {
  border-color: var(--color-accent);
}

.page_location > div:nth-child(even) {
  width: 1px;
  height: 13vh;
  background-color: var(--color-text);
}

/*
  about me
*/

.about_me {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about_me > img {
  position: absolute;
  right: 30vw;

  width: clamp(10rem, 14vw, 20rem);
  aspect-ratio: 1;

  border-radius: 50%;

  translate: 1.5rem -1.5rem;

  animation-delay: 1s;
}

.about_me > p {
  animation-delay: .5s;
}

.about_me_post {
  width: clamp(15rem, 25vw, 30rem);
  height: fit-content;
  background-color: var(--color-primary);

  border-radius: 1rem;
  box-shadow: 0 0 10px var(--color-background) inset;

  padding: 1.5rem;

  animation-delay: 1.5s;
}

.about_me_post > h3 {
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
}

.about_me_post > a {
  font-size: 1.3rem;
  margin-bottom: .5rem;
}

@media only screen and (max-width: 800px) {
  .about_me > img {
    position: relative;
    right: 0;

    translate: 0 0;
  }

  .about_me_post {
    padding: 1.3rem;
  }

  .about_me_post > h3 {
    margin-bottom: .5rem;
  }

  .about_me_post > a {
    font-size: 1.2rem;
  }
}

/*
  projects
*/

.projects {
  display: flex;
  flex-direction: column;
  gap: 3rem;

  margin-top: 40vh;
}

.projects > div {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

  margin-left: 3rem;
}

.project {
  display: flex;
  flex-direction: column;
  gap: .5rem;

  padding: .5rem;

  animation-delay: .3s;
}

.project > h3 > a {
  font-weight: normal;
  width: fit-content;
}

.project_images {
  display: flex;
  gap: 1rem;
}

.project_images > img {
  height: 2.5rem;
}

@media only screen and (max-width: 800px) {
  .projects {
    margin-top: 30vh;
  }

  .projects > div {
    margin-left: 1.5rem;
  }
}

/*
  tools
*/

.tools {
  display: flex;
  flex-direction: column;

  margin-top: 40vh;
  margin-bottom: 20vh;
}

.tools > div {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

  margin-left: 3rem;
}

.tool {
  display: grid;
  grid-template-columns: 25vw max-content;
  align-items: center;
  gap: clamp(.5rem, 4vw, 10rem);

  animation-delay: .3s;
}

.tool > span {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.tool > span > h3 {
  font-weight: normal;
  color: var(--color-accent);
}

.tool > img {
  width: clamp(6rem, 8.5vw, 15rem);
}

@media only screen and (max-width: 800px) {
  .tools {
    margin-top: 30vh;
    gap: 3rem;
  }

  .tools > div {
    margin-left: 1.5rem;
  }
}