html {background-color:#222;font-family:'opensans',sans-serif;font-size:62.5%;height:100%;}
body {color:#fff;font-size:1.6rem;margin:4rem;}

header {font-weight:bold;text-align:center;}
header:after {content:' POINTS';font-weight:normal;}

main {margin:0 auto;width:50rem;}

main section {margin-bottom:1rem;position:relative;}
main section:before {color:#303030;content:attr(id);font-size:2.5rem;font-weight:bold;position:absolute;bottom:0;left:-4.5rem;text-transform:uppercase;transform:rotate(-90deg);width:0;height:0;}

main div {background-color:#282828;color:#666;cursor:pointer;line-height:2.5rem;margin-bottom:2px;padding:0 1rem;overflow:hidden;position:relative;vertical-align:top;}
main div:before {content:attr(data-points);display:inline-block;margin-right:1rem;text-align:center;width:4rem;}

main div.multiple:not([data-multiplier="0"]):not([data-multiplier="1"]):before {content:attr(data-multiplier)'×'attr(data-points);}

main div.active {background-color:#444;color:#fff;}
main div.hidden {font-size:0;height:0.5rem;}


footer {text-align:center;}
footer div {color:#444;display:inline-block;margin:1rem 2rem 0;}
footer div a {color:#444;}