*,::after,::before{padding:0;margin:0;box-sizing:border-box}ol,ul{list-style:none}img{width:100%;height:100%;object-fit:cover;vertical-align:top}a{text-decoration:none}a,button{transition:all .2s ease}body{font-family:monospace,sans-serif;font-size:1rem;color:#222;background-image:url(../img/image.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;height:100dvh}.container{width:min(90%,1600px);margin:0 auto}.keys{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;gap:1rem;padding-top:300px}.key{display:flex;flex-direction:column;gap:10px;border:4px solid #000;border-radius:5px;margin:1rem;width:100px;text-align:center;color:#fff;padding:1rem .5rem;background:rgba(0,0,0,.4);text-shadow:0 0 5px #000;transition:all 70ms}.key kbd{font-size:1.8rem;font-weight:700}.key span{color:#ffc600}.playing{transform:scale(1.1);border-color:#ffc600;box-shadow:0 0 10px #ffc600}