body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
}

.wrapper {
    display: flex;
    gap: 5px; /* space between boxes */
}

.box1 {
    width: 96.5vw;
    height: 150vh;
    background-color: rgb(36, 36, 36);
}

.box2 {
    width: 2vw;
    height: 150vh;
    background-color: rgb(36, 36, 36);
    text-align: right;
    padding-right: 5px;
}

/* Mobile view */
@media (max-width: 768px) {
    .wrapper {
        display: flex; /* keep side by side */
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .box1, .box2 {
        height: auto; /* height adjusts */
    }

    .box2 {
        /*flex-shrink: 0;*/
        width: 6vw;
        background-color: rgb(36, 36, 36); /* Ensure solid bg on both */
        text-align: right;
    }

    .box1 {
        flex: 1;
        overflow-x: auto;
    }

    pre {
        font-size: 12px; /* smaller font on mobile */
    }
}