@font-face {
  font-family: "Viga";
  src: url("/assets/fonts/Viga/Viga-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "InstrumentSerif";
  src: url("/assets/fonts/Instrument_Serif/InstrumentSerif-Regular.ttf")
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  font-size: 16pt;
  font-family: "InstrumentSerif";
  background-image: url("/assets/images/crinkled_paper_dim.webp");
  background-size: contain;
}

body > header > h1 {
  width: max-content;
  margin: 0 auto;
  font-family: "Viga";
  font-size: 72pt;
}

header, main {
  margin-bottom: 3rem;
}

header, main, footer {
  padding: 16px;
}

.collage-link {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto 2rem auto;
  align-items: center;
  color: initial;
  font-weight: bold;

  > img {
    width: 250px;
  }

  &:hover {
    color: blue;
  }
}



@media (min-width: 1000px) {

  body {
    margin: 0 auto;
    background-size: cover;
    font-size: 18pt;
  }

  body > header > h1 {
    font-size: 96pt;
    transform: translateY(50px)
  }

  header, main {
    margin-bottom: 0rem;
  }
  
  main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
    width: fit-content;
    margin: 0 auto;
    align-items: end;
  }

  #about {
    order: 1;
    > img {
      width: 300px;
      transform: translateX(10px);
    }
    > span {
      transform: translateX(10px) translateY(-20px) rotate(-10deg);
    }
  }
  #portfolio {
    order: 2;
    > img {
      transform: translateX(40px) translateY(-40px);
      scale: 0.9;
    }
    > span {
      transform: translateX(130px) translateY(-145px) rotate(-77deg);
    }
  }
  #zines {
    order: 4;
    > img {
      transform: translateY(-80px) translateX(40px);
      scale: 1.2;
    }
    > span {
      transform: translateY(-90px) translateX(40px) rotate(3deg);
    }
  }
  #doodles {
    order: 3;
    > img {
      transform: translateY(-110px) translateX(20px);
      scale: 1.2;
    }
    > span {
      transform: translateY(-160px) translateX(15px) rotate(23deg);
    }
  }
  #animations {
    order: 5;
    > img {
      transform: translateY(-80px) translateX(20px);
    }
    > span {
      transform: translateY(-100px) translateX(50px) rotate(-10deg);
    }
  }
  #contact {
    order: 0;
    > img {
      transform: translateY(-30px)
    }
    > span {
      transform: translateY(-100px) translateX(-10px) rotate(55deg)
    }
  }

  .collage-link {
    margin: 0;
    text-decoration: none;
    > span {
      opacity: 0;
      transition: opacity 0.2s;
      scale: 1;
      font-weight: bold;
    }
    > img {
      width: 200px;
    }

    &:hover > span {
      opacity: 1;
      color: initial;
    }
  }
}