*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#f3f3f3;
    font-family:Arial,Helvetica,sans-serif;
}

.container{
    width:100%;
    max-width:1100px;
    margin:30px auto;
    text-align:center;
}

h1{
    margin-bottom:10px;
}

#display{

    width:240px;

    margin:0 auto 20px;

    padding:12px;

    background:white;

    border-radius:10px;

    font-size:22px;

    font-weight:bold;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}

#keyboard{

    position:relative;

    width:960px;

    height:260px;

    margin:auto;

}

/********************/
/* 白键 */
/********************/

#whiteKeys{

    position:absolute;

    left:0;

    top:0;

    display:flex;

    z-index:1;

}

.white{

    position:relative;

    width:64px;

    height:240px;

    background:white;

    border:1px solid #333;

    cursor:pointer;

    transition:.08s;

}

.white:hover{

    background:#eef6ff;

}

.white:active{

    background:#cfe5ff;

}

/********************/
/* 黑键 */
/********************/

#blackKeys{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:0;

    z-index:100;

}

.black{

    position:absolute;

    top:0;

    width:40px;

    height:150px;

    background:#111;

    border-radius:0 0 5px 5px;

    cursor:pointer;

    transition:.08s;

}

.black:hover{

    background:#333;

}

.black:active{

    background:#666;

}

/********************/
/* 标签 */
/********************/

.white span{

    position:absolute;

    left:50%;

    bottom:10px;

    transform:translateX(-50%);

    white-space:nowrap;

    font-size:13px;

    font-weight:bold;

    color:#222;

    pointer-events:none;

}

.black span{

    position:absolute;

    left:50%;

    bottom:10px;

    transform:translateX(-50%);

    white-space:nowrap;

    font-size:11px;

    font-weight:bold;

    color:white;

    pointer-events:none;

}

/********************/
/* 手机 */
/********************/

@media(max-width:1000px){

#keyboard{

transform:scale(.82);

transform-origin:left top;

}

}