body {
    padding: 0;
    margin: 0;
    background: #787688;
    height: 100vh;
}

@supports (-webkit-touch-callout: none) {
    body {
        max-height: -webkit-fill-available;
    }
}

.center_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent {
    height: 100%;
    margin: 0 auto;
}

.container {
    width: 60%;
    height: 60%;
    margin: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-outer {
    height: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.main-inner {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0.5rem solid #EEE;
}

.flex-row {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.flex-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.flex1 {
    flex-grow: 1;
}

.flex2 {
    flex-grow: 2;
}

.flex3 {
    flex-grow: 3;
}

.flex4 {
    flex-grow: 4;
}

.flex5 {
    flex-grow: 5;
}

.bg-black {
    background: #111;
}

.bg-white {
    background: #F5F5F5;
}

.frame {
    border: solid 0.5px #888;
}

.key {
    background: #EEE;
    box-shadow: inset 0px 0px 0px 2px #F5F5F5;
    -webkit-box-shadow: inset 0px 0px 0px 2px #F5F5F5;
    -moz-box-shadow: inset 0px 0px 0px 2px #F5F5F5;
    cursor: pointer;
}

.key-active {
    background: #787890;
    box-shadow: inset 0px 0px 4px 2px #F5F5F5;
    -webkit-box-shadow: inset 0px 0px 4px 2px #F5F5F5;
    -moz-box-shadow: inset 0px 0px 4px 2px #F5F5F5;
    cursor: pointer;
}

.key-pressed {
    background: #289378 !important;
    box-shadow: inset 0px 0px 4px 2px #F5F5F5;
    -webkit-box-shadow: inset 0px 0px 4px 2px #F5F5F5;
    -moz-box-shadow: inset 0px 0px 4px 2px #F5F5F5;
    cursor: pointer;
}