@media all and (orientation: portrait) {

    /* ---------------------------------------------- general ------------------------------------------- */

    h1 {
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transition: 1s all ease-in-out;
        /*    transform: translate(-50%,0);*/
        padding-top: 3.5svh;
    }

    img {
        /*    margin-top: 0.5vh;*/
        height: 52.5svh;
        width: auto;
        /* edit for when image are too wide*/
        max-width: 98svw;
        object-fit: contain;
        background: white;
        position: relative;
        transform: scale(1);
    }


    /* ---------------------------------------------- bottomnav ------------------------------------------- */

    #bottomnav {
        z-index: 1;
        font-size: 3.5svh;
        display: flex;
        position: absolute;
        bottom: 3.5svh;
        text-align: center;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: space-around;
    }


    .navItem {
        display: flex;
        flex: 1;
        flex-direction: column-reverse;
    }

    .navItem .title {
        cursor: pointer;
        color: var(--c);
        font-size: 4svh;
    }

    .navItem .title:hover {
        color: var(--m);
    }

    .navItem .description {
        /*
    text-shadow:
            1px 1px 0 var(--c),
            -1px 1px 0 var(--m),
            -1px -1px 0 var(--y),
            1px -1px 0 var(--k);
*/
        line-height: 0.5svh;
        display: none;
        position: absolute;
        bottom: 5svh;
        width: 100%;
        left: 0;
        /*        background: #fff;*/
    }
}