@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;
            * { font-size:1rem; }
            .fas { margin-right:0.15rem; }
        }
        #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;
            .cobble {
                display:block;
                overflow-y: scroll;
                &::-webkit-scrollbar { display: none; }
                &>div {
                    background: unset;
                    border: unset;
                    box-shadow: unset;
                    padding:unset;
                    &>div { padding:0 0 0.9rem 0;}
                }
            }
        }
        #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);
        #uwu2 #title {
            h1 {
                font-size: 1.8rem;
                span { display: none; }
            }
            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;
        #uwu2 {
            grid-area:1/2/2/-1;
        }
        #uwu3 {
            display: none;
            grid-area:2/-4/2/-2;
            border-radius: 2rem;
        }
        #uwu4 {
            display: none;
            grid-area:2/1/4/-2;
            background: unset;
            border: unset;
            box-shadow: unset;
            padding: unset;
            .cobble {
                display: grid;
                grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                grid-template-rows:6rem minmax(0,1fr);
                &>div {
                    
                    gap:1.25rem;
                }
                &>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;
                }
                #left {
                    grid-area: 1/1/-1/1;
                }
                #right {
                    grid-area: 2/2/-1/2;
                }
            }
        }
        #uwu5 {
            grid-area:2/1/4/-2;
        }
        #uwu7 {
            display: block;
            grid-area:2/-2/4/-1;
            border-radius:0.5rem;
            .fas { color:var(--color-text-3) }
            &:hover .fas { color:var(--color-text-3-hover) }
        }
    }
}
@media screen and (max-aspect-ratio:2/3) {
    #main {
        padding:0.5rem;
        gap:0.75rem;
    }
}