.example {font-style: italic;} p.example {margin-left: 2rem}
.figure {margin: 1rem; text-align: center; }
.figure img {max-width: 90%; border: 1px solid #bbb; padding: 3px}
.caption {margin: 0.5rem}

.shower {display: inline-flex; padding: 0.5em;}
.shower-solution {display: none; font-style: italic}
.shown .shower-solution {display: inline-block}
span.caption {display: block;}

.shower-icon {display: inline-block; margin: 0 1em; width: 20px; height: 20px; vertical-align: middle; cursor: pointer;
background: url(key.png) no-repeat center center transparent; background-size: contain }

h4 textarea {font-size: 120%; font-weight: bold}

dfn{font-style: normal; text-shadow: 1px 0 0 #999; cursor: help; position: relative}
dfn:hover {background-color: #eee}
dfn:hover::after {position: absolute; left:0; bottom: 105%; content: attr(title); padding: 0.2em; border: 1px solid #bbb; border-radius: 5px; background-color: #fff;white-space:nowrap; overflow: visible }