@media screen and (max-aspect-ratio: 11/6) {
  #main {
    aspect-ratio: 5/3;
  }
}
@media screen and (max-aspect-ratio: 5/3) {
  #main {
    width: 100vw;
    aspect-ratio: unset;
  }
}
@media screen and (max-aspect-ratio: 3/2) {
  #main #uwu2 #pages .button {
    width: 4.3rem;
    margin: 0 0 0.18rem;
  }
  #main #uwu2 #pages .button * {
    font-size: 1rem;
  }
  #main #uwu2 #pages .button .fas {
    margin-right: 0.15rem;
  }
  #main #uwu4 {
    grid-area: 2/-7/4/-1;
    background: var(--color-gradient-3);
    border: 0.17rem solid var(--color-border-1);
    border-radius: 1rem;
    box-shadow: 0.2rem 0.2rem 2rem var(--color-shadow-3),
                inset 0 0 4rem var(--color-shadow-4);
    padding: 0.9rem;
  }
  #main #uwu4 .cobble {
    display: block;
    overflow-y: scroll;
  }
  #main #uwu4 .cobble::-webkit-scrollbar {
    display: none;
  }
  #main #uwu4 .cobble > div {
    background: unset;
    border: unset;
    box-shadow: unset;
    padding: unset;
  }
  #main #uwu4 .cobble > div > div {
    padding: 0 0 0.9rem 0;
  }
  #main #uwu5 {
    grid-area: 2/1/4/-7;
  }
}
@media screen and (max-aspect-ratio: 4/3) {
  #main {
    grid-template-columns: 6rem repeat(20, minmax(0, 1fr)) 6rem;
    grid-template-rows: 6rem 6rem minmax(0, 1fr);
  }
  #main #uwu2 #title h1 {
    font-size: 1.8rem;
  }
  #main #uwu2 #title h1 span {
    display: none;
  }
  #main #uwu2 #title h4 {
    font-size: 1rem;
  }
}
@media screen and (max-aspect-ratio: 8/7) {
  #main {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr) 5.5rem 1.5rem;
  }
  #main #uwu2 {
    grid-area: 1/2/2/-1;
  }
  #main #uwu3 {
    display: none;
    grid-area: 2/-4/2/-2;
    border-radius: 2rem;
  }
  #main #uwu4 {
    display: none;
    grid-area: 2/1/4/-2;
    background: unset;
    border: unset;
    box-shadow: unset;
    padding: unset;
  }
  #main #uwu4 .cobble {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 6rem minmax(0, 1fr);
  }
  #main #uwu4 .cobble > div {
    gap: 1.25rem;
  }
  #main #uwu4 .cobble > div > div {
    background: var(--color-gradient-3);
    border: 0.17rem solid var(--color-border-1);
    border-radius: 1rem;
    box-shadow: 0.2rem 0.2rem 2rem var(--color-shadow-3),
                inset 0 0 4rem var(--color-shadow-4);
    padding: 0.9rem;
  }
  #main #uwu4 .cobble #left {
    grid-area: 1/1/-1/1;
  }
  #main #uwu4 .cobble #right {
    grid-area: 2/2/-1/2;
  }
  #main #uwu5 {
    grid-area: 2/1/4/-2;
  }
  #main #uwu7 {
    display: block;
    grid-area: 2/-2/4/-1;
    border-radius: 0.5rem;
  }
  #main #uwu7 .fas {
    color: var(--color-text-3);
  }
  #main #uwu7:hover .fas {
    color: var(--color-text-3-hover);
  }
}
@media screen and (max-aspect-ratio: 2/3) {
  #main {
    padding: 0.5rem;
    gap: 0.75rem;
  }
}