html, body {
    height: 100%;
    margin: 0;
}

/* Youtube player */
.player {
    background-color: #000;
}

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

/* Default single-frame container attributes */
.frame-container {
    color: white;
    display: flex;
    display: -ms-flexbox;
    position: relative;
    min-width: 0;
}

.keypad {
    flex-grow: 1;
}

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

    .frame-container {
        flex-direction: column;
    }

    .player {
        width: 70vw;
        height: 100vh;
        align-items: center;
        justify-content: center;
    }

    .keypad {
        width: 30vw;
    }

    .video-container {
        position: relative;
        width: 100%;
        height: calc(9 * (100vw / 16));
    }
}

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

    .frame-container {
        flex-direction: row;
    }

    .keypad {
        height: calc(100vh - (9 * (100vw / 16)));
    }

    .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;
}