:root{padding:4em 2em 2em}BODY,H2,H3,H4,H5,H6,TH,TD{font-family:arial,helvetica,sans-serif}body{display:flex;flex-direction:column;align-items:center;justify-content:center}H1{font-size:3em;font-family:arial,helvetica,sans-serif;font-weight:bolder;background-color:#d600ff;border-radius:.05em;padding:.1em 3em;box-shadow:0 0 .15em #6b5332;text-shadow:0em 0em 1px rgb(107,83,50)}.flex{display:flex;row-gap:1em;column-gap:1em}.col{flex-direction:column}.row{flex-direction:row}main{background-color:#00ff9f;border-radius:.25em;box-shadow:0 0 .5em #6b5332;flex-wrap:wrap;padding:1em;max-width:400px}svg{border-radius:.1em;border:5px solid rgb(65,54,40)}svg rect{stroke:#000;stroke-width:2px}#svgCanvas,#svgPreview{background-color:#00b8ff}#info{width:160px;margin-top:1em}#info>.text{font-weight:700}.left{font-size:1.1em;float:left}.right{font-size:1em;float:right}#gameOver{font-size:1.5em;font-weight:bolder;text-align:center}#restart-button{background:#881400;border-bottom:6px inset rgba(0,0,0,.5);border-left:6px inset rgba(0,0,0,.5);border-right:6px inset rgba(255,255,255,.5);border-top:6px inset rgba(255,255,255,.5);box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;text-transform:uppercase;width:auto}#restart-button:is(:focus, :hover){background-color:#a81000}.restart{background-color:#7fffd4}.instructions{background-color:#8a2be2;width:7em;height:5em;margin:.1em;align-items:center;display:inline-block;font-size:.7em;font-weight:bolder;text-align:center}
