html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}


@media screen and (orientation:portrait) {
    .show-landscape {
        display: none;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
    }
}

@media screen and (orientation:landscape) {
    .show-portrait {
        display: none;
    }

    main {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    #content {
        width: 50%;
        height: 100vh;
        overflow-y: scroll;
        scrollbar-width: none;
    }

    #side-img {
        width: 50%;
        position: fixed;
        height: 100vh;

        right: 0;
        top: 0;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
    }
}