html, body {
    height: 100%;
    margin: 0;
    background: #141c98;


}



/* Container of both iframes */
.frames-container {
    margin: 0;
    display: grid;
    grid-gap: 0rem;
    height: 100%;


}

/* Default single-frame container attributes */
.frame-container {
    color: #ff0000;
    display: flex;
    display: -ms-flexbox;
    position: relative;
    min-width: 0;
    min-height: 100%;

}

.keypad {
    flex-grow: 1;
    min-height: 100%;

}

/* Landscape orientation */
@media (orientation: landscape) {
    .frames-container {
        grid-template-columns: repeat(1, 1fr);


    }

    .frame-container {
        flex-direction: column;

    }



    .keypad {
        width: 100vw;

    }

}

/* Protrait orientation */
@media (orientation: portrait) {
    .frames-container {
        grid-template-columns: repeat(1, 1fr);

    }

    .frame-container {
        flex-direction: row;

    }
    .player {
        height: calc(9 * (100vw / 16));

    }
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.keypadframe {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}