body{
    background:#FFF3B0;
    font-family:"Zen Maru Gothic",sans-serif;
    color:#335C67;
}

.vv-box{
    width:100%;
    max-width:460px;
    margin:40px auto;
    padding:28px;
    background:#FFF8D6;
    border:2px solid #E09F3E;
    border-radius:18px;
    box-sizing:border-box;
}

.vv-title{
    text-align:center;
    font-size:30px;
    font-weight:700;
    color:#9E2A2B;
    margin-bottom:10px;
}

.vv-sub{
    text-align:center;
    color:#335C67;
    line-height:1.6;
    margin-bottom:24px;
}

.vv-input{
    width:100%;
    padding:14px;
    border:2px solid #E09F3E;
    border-radius:10px;
    background:#FFFFFF;
    color:#335C67;
    font-size:16px;
    box-sizing:border-box;
    margin-bottom:16px;
}

.vv-input::placeholder{
    color:#7A8A90;
}

#vv-player{
    width:100%;
    margin:18px 0;
    accent-color:#335C67;
}

.vv-btn{
    width:100%;
    padding:15px;
    margin:10px 0;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    color:#FFF8D6;
}

.record{
    background:#335C67;
}

.record:hover{
    background:#264A53;
}

.stop{
    background:#9E2A2B;
}

.stop:hover{
    background:#7D2021;
}

.upload{
    background:#E09F3E;
    color:#335C67;
}

.upload:hover{
    background:#C9872E;
}

#vv-message{
    text-align:center;
    color:#335C67;
    margin-top:18px;
}

.vv-cute-btn{
    display:inline-block;
    padding:13px 26px;
    background:#335C67;
    color:#FFF8D6;
    text-decoration:none;
    border:2px solid #E09F3E;
    border-radius:10px;
    transition:.2s;
}

.vv-cute-btn:hover{
    background:#9E2A2B;
    color:#FFF8D6;
}

.vv-btn-wrap{
    text-align:center;
    margin:30px 0;
}