*{margin:0;padding:0;box-sizing:border-box; transition:all 1s;}
*::before,*::after{box-sizing:border-box;transition:all 1s;}
body{
    display:flex;
    flex-direction: column; 
    height:100vh;
    z-index:-5;
}
.codePaper{
    height:35%;
}
#code{
    height:100%;
    overflow:hidden;
}
.token.selector,
.token.property,
.token.function{
    color:black;
}
#peppapigImg{
    display:none;
    position:absolute;
    top:-160px;
    left:50%;
    margin-left:-138px;
    opacity: 0;
}
.hand.left::before{
    content:'';
    display:none;
    width:22px;
    height:7px;
    background:#FFC4E0;
    border-radius:5px;
    position:absolute;
    left:0;
    top:0;
    transform-origin:right center;
    transform:rotate(50deg);
}
.hand.left::after{
    content:'';
    display:none;
    width:22px;
    height:7px;
    background:#FFC4E0;
    border-radius:5px;
    position:absolute;
    left:0;
    top:0;
    transform-origin:right center;
    transform:rotate(-50deg);
}

.hand.right::before{
    content:'';
    display:block;
    width:22px;
    height:7px;
    background:#FFC4E0;
    border-radius:5px;
    position:absolute;
    right:0;
    top:0;
    transform-origin:left center;
    transform:rotate(50deg);
}
.hand.right::after{
    content:'';
    display:block;
    width:22px;
    height:7px;
    background:#FFC4E0;
    border-radius:5px;
    position:absolute;
    right:0;
    top:0;
    transform-origin:left center;
    transform:rotate(-50deg);
}

.hand.left::before,
.hand.left::after,
.hand.right::before,
.hand.right::after{
    opacity: 0;
    display:block;
} 
.hand.right.active{
    animation: rotateAnimation 1s linear infinite;
}
@keyframes rotateAnimation{
    0%{ transform: rotate(30deg) }
    25%{ transform: rotate(0deg) }
    50%{ transform: rotate(-30deg) }
    75%{ transform: rotate(0deg) }
    100%{ transform: rotate(30deg) }
}

.head{
    width:160px;
    height:160px;
    position:relative;
    z-index:2;
}
.speaking{
    opacity: 0;
    display: none;
    position: absolute;
    width:265px;
    height:95px;
    border:4px #E795C0 solid;
    background:white;
    top:-113px; right:142%;
}
.speaking::before{
    content:'';
    display:block;
    border:25px transparent solid;
    border-top-color:#E795C0;
    position:absolute;
    top:100%;
    right:25px;
}
.speaking::after{
    content:'';
    display:block;
    border:21px transparent solid;
    border-top-color:white;
    position:absolute;
    top:100%;
    right:29px;
    margin-top:-1px;
}
.speaking.active{
    display:block;
    opacity: 1;
}
.speaking.active.Phone>pre{
    /* align-content:  */
    font-size:20px;
    font-family:方正舒体;
}
.speaking.active.Phone span{
    font-size:20px;
    color:#EE5253;
}.speaking.active.PC>pre{
    /* align-content:  */
    font-size:22px;
    font-family:方正舒体;
}
.speaking.active.PC span{
    font-size:28px;
    color:#EE5253;
}
button{
    outline:none;
    border:0;
    border:1px transparent solid;
    border-top-color:#FCC7B7;
    border-bottom-color:rgba(243,112,130,1);
    background:linear-gradient(180deg, rgba(255,159,160,1) 0%, rgba(243,112,130,1) 100%); 
    box-shadow:0 0 0 1px #C04564, 0px 5px 14px -3px rgba(0,0,0,0.75);
    cursor: pointer;
    font-size:24px;
    font-family:黑体;
    border-radius:5px;
    padding:10px;
    margin-right:20px;
    margin-top: 10px;
    transition:none;
}
button>span{
    transition:none;
    color:white;
}
button:hover{
    box-shadow: inset 0px 20px 108px -53px rgba(255,255,255,1),
    0 0 0 1px #C04564, 0px 5px 14px -3px rgba(0,0,0,0.75);
}
button.active >span{
    color:#B72959;
}
.buttonArea{
    position:fixed;
    right:0;
    display: flex;
    flex-direction: column;
    transition:none;
}
#adjustSpeed{
    position:fixed;
    right:0;
}