style.css

#Component{ height: 800px; padding: 30px; counter-reset: section;}
/* General */
    .Target{scroll-margin:200px 0 0 0px;position: relative; display: block; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.2); background: #222; font-size: .8em;white-space: nowrap; padding: 1.5rem 0rem 1.5rem 4.3rem;}
    .Target:target{background:#444}
/* Content */
    .Target + div{ display: none;}
    .Target:target + div{ display: block;}
/* Count */
    .Target::before { background: rgba(255, 255, 255, 0.1); border-radius: 100%;text-align: center; width: 2rem; top: 50%; margin-top: -1rem; color: #fff; display: block; position: absolute; left: 1rem; height: 2rem; line-height: 2rem; counter-increment: section; content: counter(section);}
/* Open */
    .Target::after { background: rgba(255, 255, 255, 0.1); text-transform: uppercase; letter-spacing: 0.2em; border-radius: 1rem;text-align: center; font-size: 0.8em; top: 50%; margin-top: -.8rem; color: #fff; display: block; position: absolute; right: 2rem; padding: 0rem 1rem; text-align: center; height: 1.6rem; line-height:1.6rem;  content: 'open';}
    .Target:target::after { display: none;}
/* Hover */
    .Target:hover{ background: #111;}
    .Target:hover::after{ background: #000;}
/* Responsive */
    @media only screen and (max-width:340px) {
        .Target::after{ display: none;}
    }
/* Placeholder */
    .Placeholder{ padding: 100px 0px; color: #fff;text-align: center; background: #555;  content: "TEST CONTENT"; display: block;}
    .Placeholder:before{ content: "TEST CONTENT";letter-spacing: 2px; font-size: 15px;}
    .Placeholder:after{ content: "CSS INDEPENDIENT"; display: block; font-size: 11px; color: rgba(255,255,255,0.4);}
/* Header & Footer Test */
    .Header{ height: 200px; background: rgb(182, 191, 198);}
    .Footer{ height: 1000px; background: rgb(182, 191, 198);}