.animated-lyrics,body {
    display: -webkit-box;
    display: -ms-flexbox
}

.footer,.keyboard .row .key,.keyboard .row .space,body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

* {
    margin: 0;
    padding: 0
}

body,html {
    height: 100vh;
    width: 100vw;
    font-size: 100%;
    vertical-align: baseline
}

body {
    font: 400 1em/1.4em "Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #2f343a;
    color: #fff;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility
}

.animated-lyrics {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.keyboard .row,.keyboard-wrap {
    display: -webkit-box;
    display: -ms-flexbox
}

.animated-lyrics .lyric {
    opacity: 0;
    font-size: 54px;
    color: #ef7126
}

.animated-lyrics .animated {
    -webkit-animation: fadeInOut 1s;
    animation: fadeInOut 1s
}

.keyboard-wrap {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.keyboard {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    width: 630px
}

.keyboard .row {
    position: relative;
    margin: 10px;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.keyboard .row .space.active,.keyboard .row .space:active,.keyboard .row:nth-child(1) .key.active,.keyboard .row:nth-child(1) .key:active,.keyboard .row:nth-child(2) .key.active,.keyboard .row:nth-child(2) .key:active {
    color: #ef7126;
    border-color: #ef7126;
    box-shadow: 0 0 12px -2px #ef7126
}

.keyboard .row:nth-child(2) {
    -webkit-transform: translateX(2.5%);
    transform: translateX(2.5%)
}

.keyboard .row:nth-child(3) {
    margin-left: 8.5%;
    margin-right: 14%
}

.keyboard .row:nth-child(3) .key {
    color: #717d8c
}

.keyboard .row:nth-child(3) .key:hover {
    color: #a6a6a6;
    border-color: #a6a6a6
}

.keyboard .row:nth-child(3) .key.active,.keyboard .row:nth-child(3) .key:active {
    color: #a6a6a6;
    border-color: #a6a6a6;
    box-shadow: 0 0 9px -2px #a6a6a6
}

.keyboard .row .key,.keyboard .row .space {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ccc;
    width: 49px;
    height: 49px;
    border: 2px solid #717d8c;
    border-radius: 6px;
    transition: all .08s ease-in-out
}

.keyboard .row .key:hover,.keyboard .row .space:hover {
    color: #ef7126;
    border-color: #ef7126
}

.keyboard .row .key.active,.keyboard .row .key:active,.keyboard .row .space.active,.keyboard .row .space:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}

.keyboard .row .key:nth-child(5),.keyboard .row .key:nth-child(6),.keyboard .row .space:nth-child(5),.keyboard .row .space:nth-child(6) {
    color: #717d8c
}

.keyboard .row .key:nth-child(5):hover,.keyboard .row .key:nth-child(6):hover,.keyboard .row .space:nth-child(5):hover,.keyboard .row .space:nth-child(6):hover {
    color: #a6a6a6;
    border-color: #a6a6a6
}

.keyboard .row .key:nth-child(5).active,.keyboard .row .key:nth-child(5):active,.keyboard .row .key:nth-child(6).active,.keyboard .row .key:nth-child(6):active,.keyboard .row .space:nth-child(5).active,.keyboard .row .space:nth-child(5):active,.keyboard .row .space:nth-child(6).active,.keyboard .row .space:nth-child(6):active {
    color: #a6a6a6;
    border-color: #a6a6a6;
    box-shadow: 0 0 9px -2px #a6a6a6
}

.keyboard .row .key b,.keyboard .row .key span,.keyboard .row .space b,.keyboard .row .space span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.keyboard .row .key b,.keyboard .row .space b {
    font-family: "Titillium Web"
}

.keyboard .row .key span,.keyboard .row .space span {
    font-size: 9px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.keyboard .row .space {
    width: 49%;
    margin-left: 27.5%
}

.footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.footer p {
    font-size: 11px;
    color: #ccc
}

.footer p a {
    color: #8edc9d;
    text-decoration: none
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}