style.css

@charset "utf-8";
*{box-sizing: border-box; margin: 0; padding: 0;}
html{ height: 100%; }   
body{background-color: #202020;touch-action: pan-y;color: #666666;display: flex;align-items: center;height: 100%;}
.validate{margin: auto auto;padding: 10px 10px;display: flex;flex-direction: column;justify-content: space-between;}
.validate .tit{font-size: 28px;font-weight: 700;/* text-align: center; */margin: 10px 0 10px 0;position: relative;padding: 0px 0px 0px 27px;color: #d5d5d5;}
.validate .tit::before{content: '\f00c';font-family: "fontAwesome";font-size: 27px;position: absolute;left: -2px;top: 6px;/* color: #cfa83b; */}
.validate .pass{order: 2;position: relative;box-shadow: rgb(255 255 255 / 35%) 2px 2px 10px;border-radius: 10px;background: rgb(255 255 255);border: #8787874a solid 1px;margin: 10px 0px;}
.validate .pass .pwds{border: none;font-size: 16px;color: #000000;padding: 7px 48px 7px 20px;height: 56px;width: 100%;border-radius: 10px;background: transparent;}
.validate .pass .pwds:focus{outline: none;background-color: #fffdf4;}
.validate .pass .btog{border: none;font-size: 0px;color: #161616;padding: 7px 6px;height: 32px;width: 32px;border-radius: 20px;position: absolute;right: 12px;top: 12px;background-color: rgb(189 189 189);}
.validate .pass .btog::before{content:'\f06e'; font-family: "fontAwesome"; font-size:13px;}
.validate .pass .btog.view::before{content:'\f070';}
.validate .msgs{order: 1;background: rgb(90 90 90 / 50%);padding: 18px;margin: 10px 0;color: #efefef;font-size: 14px;border-radius: 10px;display: flex;flex-direction: column;gap: 13px;overflow: hidden;}
.validate .msgs>li{list-style: none;font-size: 12px;position: relative;padding: 0px 0px 0px 18px;transition: all 0.5s;overflow: hidden;}
.validate .msgs>li::before{content:'\f192';font-family: "fontAwesome"; font-size:13px;margin: 0px 4px 0px 0px; display: inline-flex;width: 13px;position: absolute;left: 0px;top: 2px;}
.validate .msgs>li.check{color: #3eb4ed;}
.validate .msgs>li.check::before{content:'\f00c';}