@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family:Raleway;
}

.keys {
    width:100%;
    display: inline-flex;
    position:fixed;
    bottom:30px;
}

.key {
    font-size:1.5em;
    padding:10px;
    margin:auto;
    justify-content: space-around;
    border: 2px solid yellowgreen;
    border-radius:20px;
    background-color: rgba(255,255,255,0.5);
    text-align:center;
    width:8%;
    transition: 0.05s all;
    min-width:60px;
}

.key >span {
    width:100%
}

kbd {
    font-size:3em;
}

.background {
    width:100%;
    height:100%;

    background-color:black;
    background-image: url("drumset.png");
    background-position:center center;
    background-repeat:no-repeat;
    /*background-size: contain;*/
    -webkit-box-shadow: inset 0px 0px 50px 70px rgba(0,0,0, 0.85);
    -moz-box-shadow:    inset 0px 0px 50px 70px rgba(0,0,0, 0.85);
    box-shadow:         inset 0px 0px 50px 70px rgba(0,0,0, 0.85);
}
body {
    width:100vw;
    height:100vh;
    padding:0;
    margin:0;
}

.playing {
    transform: scale(1.1);
    color: yellowgreen;
}

h1 {
    margin:0px;
    padding:30px
}

.retro {
    color:white;
    font-size:2em;
    text-shadow: 2px 2px 2px yellowgreen , 4px 4px 2px red ;
}
a {
    text-decoration: none;
    color:yellowgreen;
    font-size:2em;
    text-shadow: 2px 2px 2px red , 4px 4px 2px blue ;
}