@media (max-aspect-ratio: 1.2) {
  #title > h1 {
    z-index: 1;
  }
}

@media (max-aspect-ratio: 0.9) {
  #content {
    flex-direction: column;
  }

  #main {
    gap: calc(12 * var(--vh, 1vh));
  }

  #links {
    align-self: flex-start;
  }

  .link {
    transform: unset;
  }

  .link:after {
    content: none;
  }
}

@media (max-aspect-ratio: 0.65) {
  #title > h1 {
    font-size: calc(12 * var(--vh, 1vh));
    line-height: calc(11 * var(--vh, 1vh));
  }

  #title > h2 {
    font-size: calc(2.7 * var(--vh, 1vh));
  }

  #main {
    gap: calc(13 * var(--vh, 1vh));
  }
}

@media (max-aspect-ratio: 0.57) {
  #title > h1 {
    font-size: calc(10 * var(--vh, 1vh));
    line-height: calc(8.9 * var(--vh, 1vh));
  }

  #title > h2 {
    font-size: calc(2.3 * var(--vh, 1vh));
  }

  #main {
    gap: calc(17 * var(--vh, 1vh));
  }

  #links {
    gap: calc(0.5 * var(--vh, 1vh));
  }

  .link {
    font-size: calc(3.7 * var(--vh, 1vh));
  }

  #p-br-1 {
    display: inline-block;
  }

  #p-br-2 {
    display: none;
  }
}

@media (max-aspect-ratio: 0.49) {
  #title > h1 {
    font-size: calc(8 * var(--vh, 1vh));
    line-height: calc(6.8 * var(--vh, 1vh));
  }

  #title > h2 {
    font-size: calc(1.8 * var(--vh, 1vh));
  }

  #main {
    gap: calc(2 * var(--vh, 1vh));
  }

  #about {
    font-size: calc(1.8 * var(--vh, 1vh));
    line-height: calc(2.1 * var(--vh, 1vh));
  }

  #links {
    gap: calc(0.4 * var(--vh, 1vh));
  }

  .link {
    font-size: calc(3.3 * var(--vh, 1vh));
  }
}