@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Open Sans Condensed";
    -webkit-animation: bg 30s linear infinite;
    animation: bg 30s linear infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #22475E;
    padding: .25rem 1rem;
}

@-webkit-keyframes bg {
    from,
    to {
        background: #22475E;
    }
    33% {
        background: #4C4A30;
    }
    66% {
        background: #421D26;
    }
}

@keyframes bg {
    from,
    to {
        background: #22475E;
    }
    33% {
        background: #4C4A30;
    }
    66% {
        background: #421D26;
    }
}

menu {
    margin-bottom: 4rem;
}

menu label {
    display: inline-block;
    font-size: 1.3rem;
    padding: .5rem 1rem;
    background: rgba(255, 255, 240, 0.3);
    cursor: pointer;
    transition: .5s;
}

menu label:first-of-type {
    border-radius: 5px 0 0 5px;
}

menu label:last-of-type {
    border-radius: 0 5px 5px 0;
}

menu input {
    display: none;
}

menu input:checked+label {
    background: rgba(255, 255, 240, 0.9);
    transition: 0;
}

.keyboard {
    width: 40rem;
    position: relative;
}

.key {
    display: inline-block;
    position: relative;
    width: 11.111%;
    padding-bottom: 35%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    background: ivory;
    vertical-align: top;
    cursor: pointer;
    border-radius: 5px;
    transition: 1s;
    color: rgba(255, 255, 255, 0.3);
}

.key:after {
    display: block;
    font-family: "Open Sans Condensed";
    font-size: 1.5rem;
    line-height: 2;
    text-align: center;
    content: attr(data-note);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
}

.keybind .key:after {
    content: attr(data-bind);
}

.key:hover {
    background: shade(ivory, 10%);
    transition: .2s;
}

.key.active {
    -webkit-animation: blacks 300ms;
    animation: blacks 300ms;
}

.key:focus {
    outline: 0;
}

.key:first-child,
.key:last-child {
    opacity: 0;
}

.key:first-child.active,
.key:last-child.active {
    -webkit-animation: secrets 300ms;
    animation: secrets 300ms;
}

[data-note*="#"] {
    position: absolute;
    z-index: 100;
    width: 12.5%;
    background: #111;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: translateX(-50%) scale(0.6);
    transform: translateX(-50%) scale(0.6);
    border-radius: 0 0 8px 8px;
}

[data-note*="#"]:after {
    font-size: 2.5rem;
    top: inherit;
    bottom: 100%;
}

[data-note*="#"]:hover {
    background: tint(black, 20%);
}

[data-note*="#"].active {
    -webkit-animation: blacks 300ms;
    animation: blacks 300ms;
}

@-webkit-keyframes secrets {
    from {
        opacity: .2;
        background: tint(black, 35%);
    }
}

@keyframes secrets {
    from {
        opacity: .2;
        background: tint(black, 35%);
    }
}

@-webkit-keyframes whites {
    from {
        background: tint(black, 35%);
        color: ivory;
        text-shadow: 0 0 1rem, 0 0 2rem, 0 0 3rem;
    }
}

@keyframes whites {
    from {
        background: tint(black, 35%);
        color: ivory;
        text-shadow: 0 0 1rem, 0 0 2rem, 0 0 3rem;
    }
}

@-webkit-keyframes blacks {
    from {
        background: tint(black, 35%);
        color: ivory;
        text-shadow: 0 0 1rem, 0 0 2rem, 0 0 3rem;
    }
}

@keyframes blacks {
    from {
        background: tint(black, 35%);
        color: ivory;
        text-shadow: 0 0 1rem, 0 0 2rem, 0 0 3rem;
    }
}