media.css

@media (min-width: 576px) {
  body > footer,
  body > header,
  body > main,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 1.2);
  }
}

@media (min-width: 768px) {
  body > footer,
  body > header,
  body > main,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 1);
  }
}

@media (min-width: 992px) {
  body > footer,
  body > header,
  body > main,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 2);
  }
}

@media (max-width: 990px) {
  nav.container-fluid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav.container-fluid div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
  }
}

/*added a breakpoint for the navbar*/
@media (max-width: 360px) {
  nav.container-fluid div a {
    font-size: 0.84rem;
  }
}