.lock,.lock:after{-webkit-transition:all .1s ease-in-out}*{margin:0;padding:0;box-sizing:border-box;--locked-color:#86cdff;--unlocked-color:#ff9286;--main-color:#7a9bff}.container{display:flex;align-items:center;justify-content:center;min-height:700px}.lock{width:144px;height:126px;border:18px solid var(--locked-color);border-radius:30px;position:relative;cursor:pointer;transition:all .1s ease-in-out}.lock:after,.lock:before{content:"";position:absolute;display:block}.lock:after{background:var(--locked-color);width:18px;height:42px;top:30%;left:43%;margin:-3.5px 0 0 -2px;transition:all .1s ease-in-out}.lock:before{width:90px;height:84px;bottom:100%;left:51%;margin-left:-48px;border:18px solid var(--locked-color);border-top-right-radius:50%;border-top-left-radius:50%;border-bottom:0;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.lock:hover:before{height:96px}.unlocked{transform:rotate(10deg)}.unlocked:before{bottom:128%;left:31%;margin-left:-69px;transform:rotate(-45deg)}.unlocked,.unlocked:before{border-color:var(--unlocked-color)}.unlocked:after{background:var(--unlocked-color)}.unlocked:hover{transform:rotate(3deg)}.unlocked:hover:before{height:84px;left:40%;bottom:124%;transform:rotate(-30deg)}.splash{display:block;margin:auto;width:250px!important}