html {font-family:sans-serif;font-size:62.5%;}
body {background-color:#222;color:#fff;font-size:1.5rem;margin:0;}

html, body, main {height:100%;}
main, main > div {display:flex;flex-direction:column;align-items:center;justify-content:center;}
main > div {flex:1;width:100%;}

progress {appearance:none;background-color:#333;border:none;border-radius:0.5vw;width:80vw;height:5vw;}
::-moz-progress-bar, ::-webkit-progress-inner-element {background-color:#fff;}

main ul {display:flex;gap:calc(8vw / 7);list-style-type:none;margin:2rem 0 0;padding:0;}
main li {background-color:#555;border-radius:0.5vw;cursor:pointer;position:relative;transition:0.15s all;width:9vw;height:9vw;}
main li:hover {background-color:#fff;transform:scale(1.1);z-index:1;}

footer {justify-self:flex-end;color:#404040;display:flex;justify-content:center;font-size:1em;height:1.4em;line-height:1.4em;margin-bottom:2rem;}
footer > div:not(:last-child):after {content:'\b7';margin:0 1.25rem;}
footer a {color:#404040;text-decoration:none;}