@media (orientation: portrait) {










    body {

        width: 100vw;
        overflow-x: hidden;
        margin: 0;
        touch-action: manipulation;



    }


    #header {


        position: fixed;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 6svh;
        top: 0;
        background-color: white;
        border-bottom: 1px solid;
        z-index: 10;


    }

    #x {


        height: 3.5svh;
        width: 3.5svh;
        margin-left: 1svh;

    }

    #mode {

        visibility: hidden;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        height: 4svh;
        max-width: 75vw;
        margin-right: 1svh;



    }

    #mode_icon {

        height: 3.5svh;
    }

    #mode_text {

        font-family: "rob_light";
        position: relative;
        margin-right: 0.5svh;
        font-size: 2svh;
    }





    #left_right {

        position: absolute;
        top: 7svh;
        width: 100vw;
        margin: 0;
        display: flex;
        flex-direction: column-reverse;





    }

    #left {

        position: relative;
        z-index: 5;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-top: 1px solid;

    }




    #infos {

        margin-top: 1svh;
        width: 95%;
        margin-left: 2.5%;


    }


    #title {

        font-family: 'rob_reg';
        font-size: 8vw;
        letter-spacing: -0.4vw;
        margin-bottom: 0.2svh;
        margin-top: 2.5svh;


    }


    #specs {

        margin-top: 0;
        font-family: 'rob_light';
        font-size: 5vw;
        letter-spacing: 0;
    }

    #text {


        font-family: 'rob_light';
        font-size: 4vw;
        letter-spacing: 0;
        text-align: justify;
        width: 90vw;
    }



    #right {

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        margin: 0;
        height: 60svh;


    }

    #media {

        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 55svh;

    }

    #media img {

        max-width: 90vw;
        max-height: 100%;
    }

    #media video {
        max-width: 90vw;
    }

    #media-caption {


        width: 100%;
        font-size: 3.2vw;
        pointer-events: none;
        position: absolute;
        font-family: 'rob_light_ital';
        text-align: center;
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: auto;
        margin-right: auto;
        bottom: 0;


    }

    .controls {

        position: relative;
        width: 100vw;
        height: 5svh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 11;
        top: 0;
        left: 0;


    }

    .controls button {
        background-color: transparent;
        border: none;
        font-size: 3svh;
        color: var(--darkgray);
    }

    button:hover {
        cursor: pointer;
        color: black;
    }

    #prev {
        margin-left: 4vw;

    }

    #next {
        margin-right: 4vw;
    }

    #media-index {
        font-family: "rob_light";
    }











    #grabber {
        visibility: hidden;
        width: 0;
        height: 0;
    }











}