body {
    display: flex;
}
@media (orientation: landscape) {
    body {
        flex-direction: row;
    }
}
@media (orientation: portrait) {
    body {
        flex-direction: column;      
    }
}

.cellDiv {
    background: white;
    max-width: 100%;
    max-height: 100%;
}
@media (orientation: landscape) {
    .cellDiv {
        width: 48vw;
        height: 96vh;

    }
}
@media (orientation: portrait) {
    .cellDiv {
        width: 96vh;
        height: 48vh;
    }
}

#cheatSheet {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

#armature {
    max-width: 100%;
    max-height: 70%;
    background: black;
    margin: 0 auto;
}
@media (orientation: landscape) {
    #armature {
        width: 5vw;
        height: 40vh;
    }
}
@media (orientation: portrait) {
    #armature {
        width: 10vw;
        height: 20vh;
    }
}

#key {
    max-width: 30%;
    max-height: 30%;  
    background: black;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    margin: 0 auto;    
}
@media (orientation: landscape) {
    #key {
        width: 15vw;
        height: 30vh;
    }
}
@media (orientation: portrait) {
    #key {
        width: 30vw;
        height: 15vh;
    }
}

.keyDown {
    background: wheat !important;
}