a {text-decoration:none;}article {position: relative;width: 20 rem;max-width: 20 rem;margin: 0 auto;}.toc {padding: 2.4rem;margin:2.4rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px;}.toc{/*border: 1px solid #20c360a8;*/}.toc, .toc ol > li:before, .chapter {position: relative;z-index: 2;}.toc ol {counter-reset: item;position: relative;}.toc ol > li:before {content: counters(item, ".") ". ";display: table-cell;padding-right: .8rem;width: 2.4rem;}.toc li {counter-increment: item;display: table;font-weight: 400;margin-bottom: 0rem;margin-left: 0;-webkit-transition: .3s;transition: .3s;width: 100%;}.toc li li {font-weight: 200;margin-bottom: 0;margin-left: 0;}.toc li > a {display: inline-block;width: 100%;}.toc li a:hover span {font-weight: 600;}.toc li a:hover .toc-page:before {border-bottom-width: 2px;}.chapter {display: inline-block;font-size: 1rem;line-height: 1.2rem;padding-right: .8rem;}.toc-page {float: right;}.toc, .toc ol > li:before, .chapter {background-color: #f7f9fb;} .toc h2 {font-size: 20px;} 
@media (min-width: 200px) and (max-width: 786px){
    .toc {
    padding: 1.1rem;
    margin: 0.4rem; 
    border-radius: 5px;
}
ol, ul {
    padding-left: 1rem !important;
}
.toc ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.4rem;
    width: 1.4rem;
}
 
}