.portfolio-fixed {
  position: fixed;
  width: 100%;
  top: 3rem;
  background-color: var(--main-bg-colour);
}

@media(width <= 600px) {
  .portfolio-fixed {
    top: 6rem;
  }
}

.portfolio-fixed h1 {
  font-family: "Kalnia-Bold", serif;
  color: var(--stylised-text-dark);
  letter-spacing: 0.2rem;
  font-size: 2.5rem;
} 

.portfolio-fixed ul {
  width: 90%;
  padding: 0;
  font-family: "Kalnia";
  text-align: center;
  list-style-type: none;
  display: grid;
  grid-template-areas: "a b c d";
  place-items: center;
  grid-auto-columns: 25%;
 } 

.portfolio-fixed li {
  display: inline-block;
}

@media(width <= 620px) {
  .portfolio-fixed li {
    max-width: 7rem;
  }
}

.portfolio-scroll {
  padding-top: 13rem;
  --scroll-max-width: 1200px;
  --scroll-target-width: 80%;
}

@media(width <= 600px) {
  .portfolio-scroll {
    --scroll-target-width: 90%;
  }
}

.portfolio-scroll h2 {
  font-family: "Kalnia-Bold", serif;
  color: var(--stylised-text-dark);
  margin-bottom: 3rem;
 } 

.portfolio-scroll p {
  max-width: var(--scroll-max-width);
  width: var(--scroll-target-width);
  margin: 2rem 0;
}

.portfolio-scroll img {
  max-width: var(--scroll-max-width);
  width: var(--scroll-target-width);
}

.portfolio-anchor {
  display: block;
  position: relative;
  top: -16rem;
  visibility: hidden;
}

@media(width <= 600px) {
  .portfolio-anchor {
    top: -19rem;
  }
}

.portfolio-side-by-side {
  max-width: var(--scroll-max-width);
  width: var(--scroll-target-width);
  display: grid;
  place-items: start;
  grid-template-areas: "a b";
  grid-auto-columns: 50%;
}

.portfolio-side-by-side img {
  width: 90%;
}

.portfolio-side-by-side img:last-of-type {
  place-self: end;
}

.portfolio-side-by-side a {
  justify-self: end;
  align-self: center;
  text-decoration: none;
  color: black;
  padding: 0.2rem 0.6rem;
  border-color: var(--stylised-text-light);
  border-style: solid;
  border-radius: 1rem;
  border-width: thin;
  transition-duration: 0.1s;
}

@media (pointer: fine) {
  .portfolio-side-by-side a:hover {
    color: var(--stylised-text-light);
  }
}