body,html{overflow:hidden}*{margin:0;color:#fff;font-family:Nova Mono,serif;-webkit-user-select:none;-moz-user-select:none;user-select:none}a{text-decoration:none;display:inline-block}body{background-image:url(/img/door.png);background-size:100% 100%;background-position:50%;background-repeat:no-repeat;height:100vh;margin:0}.bottom,.button,.container,.keys,.shadow,.shine{position:absolute}.container{background:#000;width:400px;height:620px;margin:40px auto;border-radius:10px;border:6px solid grey;top:-150px;right:930px;left:-50px;bottom:0;transform:scale(.6);transform-origin:center}.shine{width:300px;height:400px;top:-123px;left:-50px;z-index:2;transform:rotate(35deg)}.display{display:flex;justify-content:center;align-items:center;background:#333;border-radius:5px;width:300px;height:100px;margin:30px auto 0;text-align:center;position:relative}svg{height:24px;max-height:24px;width:139px}.pin-circle{transition:all .1s ease-out;fill:#fff;stroke-width:2px;stroke:#000;outline-offset:-2px;outline-width:2px;&.entered{fill:#000}&.success{fill:green;stroke:green}&.error{fill:red;stroke:red}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.shake{animation:shake .3s}.text{top:0;bottom:0;margin:auto;font-size:35px}.text.success{color:#8ac147}.text.failure{color:#c63623}.keys{width:300px;right:0;left:0;margin:40px auto;position:relative;z-index:3}.key{border-radius:5px;padding:5px 24px;font-size:32px;display:inline-block;margin:10px 0}.key:not(:nth-child(3n)){margin-right:42px}.key:hover{cursor:pointer;background:#444}.key:active{color:#000;background:#555}.key.delete{font-size:25px;padding-right:15px;padding-left:15px}.button{width:40px;height:40px;background:#aaa;bottom:22px;right:0;left:0;border-radius:100%;border:3px solid #555;margin:auto;z-index:9999}.shadow{width:40px;height:10px;top:9px;left:3px;border-bottom:20px solid hsla(0,0%,47%,.7);border-radius:0 0 20px 20px;transform:rotate(-40deg)}.bottom{width:100%;height:100px;background:grey;bottom:0}.copyIcon{margin-left:5px;width:20px;height:auto;z-index:1000;position:relative}.copyIcon:hover{cursor:pointer}@media (max-width:320px){.container{transform:translate(-50%,-50%) scale(.8)}}