html {
	--tooltip-width: clamp(160px, 400vw / 9, 480px);
}

#spacer {
	height: 280px;
}

#infographic {
    margin: 0px calc(var(--tooltip-width) * 0.5 - 40px) 0px; /* half the width, -40px */
}

.song {
    border: 1px solid var(--text-color);
    border-spacing: 1px;
    display:table;
    height:calc(1.5 * var(--line-height));
    width:calc(100% - 4px);
    margin-bottom:var(--line-height);
}

#infographic > h2 {
	margin: 0px;
}

.song > div {
    display:table-cell;
    position:relative;
    cursor:pointer;
}

.song > div.altered {
    background-image:url('stripe.png');
}

.song:hover > div {
    opacity:0.25;
}

.song:hover > div:hover {
    opacity:1;
}

.tooltip {
    display:none;
    position:absolute;
    top:100%;
    left:50%;
    margin-top:10px;
    margin-left: calc(var(--tooltip-width) * -0.5 - 10px); /* half the width, +10px */
    width:var(--tooltip-width); /* the width */
    padding:5px 10px;
    border-width:1px;
    border-style:solid;
    border-radius:1px;
	background: var(--background-image);
	background-blend-mode: multiply;
    background-size: 100%;
	background-color: var(--background-color);
    z-index:1;
}

.tooltip:before {
    content:'';
    position:absolute;
    top:-10px;
    left:50%;
    margin-left:-10px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid var(--text-color);
}

.tooltip > h3, .tooltip > p {
	margin:0px;
}

.song > div:focus {
    outline:none;
}

.song > div:hover .tooltip, .song > div:focus .tooltip {
    display:block;
    outline:none;
}

#infographic:hover .song > div:focus .tooltip {
    display:none;
}

#infographic:hover .song > div:focus:hover .tooltip {
    display:block;
    outline:none;
}