@media only screen and (orientation: portrait) {
    #responsive-div {
        width: auto;
        height: auto; 
        flex-direction: column;
    }
    .plot-emb {
        margin-left:2vw;
        width: 90vw;
        height:26vh;
    }
    .graph-container {
        width: 90vw;
        height: 75vh;
        flex-direction: column;
        margin-top: 2vh;
    }
    .sub-graph{
        width: 90vw;
        height: 26vh;
    }
    .graph-container-sce{
        width: 90vw;
        flex-direction: column;
        margin-top: 2vh;
    }
    .sub-graph-sce{
        width: 90vw;
        height: 26vh;
    }
}

@media only screen and (orientation: landscape) {
    #responsive-div {
        position: absolute;
        bottom: 0vh;
        right: 3vw; 
        width: 27vw; 
        height: 75vh; 
        flex-direction: column; 
        z-index: 10000;
    }
    .plot-emb {
        width: 27vw;
        height:26vh;
        margin:0;
    }
    .graph-container{
        width: 90vw;
        height: 26vh;
        flex-direction: row;
        margin-top:3vh;
        margin-left:5vw;
    }
    .sub-graph{
        width: 30vw;
        height: 26vh;
    }
    .graph-container-sce{
        width: 90vw;
        margin-top:3vh;
        margin-left:5vw;
        display:flex;
        flex-direction: row;
    }
    .sub-graph-sce{
        width: 30vw;
        height: 26vh;
    }
}