*{box-sizing:border-box}html,body{padding:0;margin:0;height:100vh;max-height:100vh;overflow:hidden}body{font-family:Varela Round,sans-serif}.container{margin:auto;height:100%}h1{margin:0;height:15vh;line-height:15vh;text-align:center;font-size:6vh}#lock{width:100%;height:calc(100% - 15vh);padding-bottom:12vh;min-height:120px}.stars{margin:auto;display:block}svg.patternlock g.lock-lines line{stroke-width:1.5;stroke:#000;opacity:.5}svg.patternlock g.lock-dots circle{stroke:transparent;fill:#000;stroke-width:13.5}svg.patternlock g.lock-actives circle{fill:#000;opacity:.2;animation:lock-activate-dot .15s 0s ease 1;transform-origin:center}svg.patternlock g.lock-lines line{stroke-width:1.5;stroke-linecap:round}svg.patternlock.success g.lock-actives circle{fill:green}svg.patternlock.error g.lock-actives circle{fill:red}@keyframes lock-activate-dot{0%{transform:scale(0)}75%{transform:scale(1.1)}to{transform:scale(1)}}