@media (max-aspect-ratio: 1/1) {
    body {
        flex-direction: column;
        align-items: flex-start;
    }

    nav-bar {
        flex-direction: row;
        text-align: center;
        order: 100;
        width: 100%;
        height: 12vw;
        bottom: 0;
        left: 0;
    }

    main {
        max-height: calc(100vh - 12vw);
        width: 100%;
    }
}

@media not all and (max-aspect-ratio: 1/1) {
    body {
        align-items: flex-start;
    }

    nav-bar {
        flex-direction: column;
        flex-wrap: wrap;
        width: 12vmin;
        height: 100vh;
        top: 0;
        left: 0;
    }

    main {
        height: 100vh;
    }
}