body {
    margin: 40px auto;
    max-width: 650px;
    line-height: 1.6;
    font-size: 18px;
    color: #444;
    background-color: #fffdf8;
    padding: 0 10px
}
h1, h2, h3 {
    line-height: 1.2;
    text-align: center
}
p {
    text-align: center
}



.simple-bar-chart{
    --line-count: 10;
    --line-color: currentcolor;
    --line-opacity: 0.25;
    --item-gap: 2%;
    --item-default-color: #060606;
    --back-line-count: 5;

    height: 10rem;
    display: grid;
    grid-auto-flow: column;
    gap: var(--item-gap);
    align-items: end;
    padding-inline: var(--item-gap);
    --padding-block: 1.5rem; /*space for labels*/
    padding-block: var(--padding-block);
    position: relative;
    isolation: isolate;
}

.simple-bar-chart::after{
    content: "";
    position: absolute;
    inset: var(--padding-block) 0;
    z-index: -1;
    --line-width: 1px;
    --line-spacing: calc(100% / var(--back-line-count));
    background-image: repeating-linear-gradient(to top, transparent 0 calc(var(--line-spacing) - var(--line-width)), var(--line-color) 0 var(--line-spacing));
    box-shadow: 0 var(--line-width) 0 var(--line-color);
    opacity: var(--line-opacity);
}
.simple-bar-chart > .item{
    height: calc(1% * var(--val));
    background-color: var(--clr, var(--item-default-color));
    position: relative;
    animation: item-height 1s ease forwards
}
@keyframes item-height { from { height: 0 } }

.simple-bar-chart > .item > * { position: absolute; text-align: center }
.simple-bar-chart > .item > .label { inset: 100% 0 auto 0 }
.simple-bar-chart > .item > .value { inset: auto 0 100% 0 }

hr.space {
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 60%;
}

hr.comment{
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 20%;
}

p.question {
    font-weight: bold;
}