.reading-tools{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    padding:10px 14px;
    background:#fafafa;
    border:1px solid #eee;
    border-radius:12px;
}

.reading-title,
.font-btn{
    display:flex;
    align-items:center;
}

.reading-title{
    gap:8px;
    font-weight:700;
    color:#444;
}

.font-control{
    display:flex;
    gap:8px;
}

.font-btn{
    justify-content:center;
    gap:2px;
    width:42px;
    height:42px;
    border:0;
    border-radius:10px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    cursor:pointer;
    font:700 1em/1 inherit;
    white-space:nowrap;
    transition:.25s;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.font-btn i,
.font-btn span{
    line-height:1;
}

.font-btn i{
    font-size:.95em;
}

.font-btn:hover{
    background:var(--primary-color);
    color:#fff;
    transform:translateY(-2px);
}

.font-btn:active{
    transform:scale(.94);
}

.font-btn.reset{
    width:60px;
}

#content{
    transition:.25s;
}

@media(max-width:767px){

    .reading-tools{
        padding:10px;
    }

    .reading-title{
        font-size:14px;
    }

    .font-btn{
        width:36px;
        height:36px;
        font-size:13px;
    }

    .font-btn.reset{
        width:52px;
    }

}