*{box-sizing:border-box}body{background-color:#0095dd;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;min-height:100vh;margin:0}h1{font-size:45px;color:#fff}canvas{background:#f0f0f0;display:block;border-radius:5px}.btn{cursor:pointer;border:0;padding:10px 20px;background:#000;color:#fff;border-radius:5px}.btn:focus{outline:0}.btn:hover{background:#222}.btn:active{transform:scale(0.98)}.rules-btn{position:absolute;top:30px;left:30px}.rules{position:absolute;top:0;left:0;background:#333;color:#fff;min-height:100vh;width:400px;padding:20px;line-height:1.5;transform:translateX(-400px);transition:transform 1s ease-in-out}.rules.show{transform:translateX(0)}