@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700&display=swap");*,*::after,*::before{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%}@media only screen and (max-width: 50em){html{font-size:56.25%}}@media only screen and (max-width: 28.125em){html{font-size:50%}}body{box-sizing:border-box;font-size:1.6rem;font-family:"Inconsolata", monospace, sans-serif;background-image:-webkit-gradient(linear, left top, right bottom, color-stop(21%, rgba(69,214,120,0.5)), color-stop(41%, rgba(78,238,134,0.9)));background-image:linear-gradient(to right bottom, rgba(69,214,120,0.5) 21%, rgba(78,238,134,0.9) 41%);min-height:100vh;background-size:cover;background-repeat:no-repeat}.container{padding:4rem;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center}@media only screen and (max-width: 50em){.container{width:100%}}.form{background-image:-webkit-gradient(linear, left top, right bottom, from(#45D678), to(#3AA460));background-image:linear-gradient(to bottom right, #45D678, #3AA460);border-radius:5px;height:auto;width:55.5rem;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;padding:inherit;flex-wrap:wrap;align-content:center;box-shadow:0 1px 2px rgba(0,0,0,0.5);-webkit-animation:moveUp 1s;animation:moveUp 1s}@media only screen and (max-width: 50em){.form{width:48rem}}@media only screen and (max-width: 28.125em){.form{width:39rem;padding:2rem}}.form label{font-size:2rem;text-transform:capitalize;align-self:center}.form__box{align-content:center;width:100%;border:1px solid #3AA460;height:10rem;box-shadow:0 1px 4px rgba(0,0,0,0.2)}.form__box:not(:last-child){margin:5rem 0}.form__box--1{height:15rem;border-radius:inherit;padding:2rem;display:-webkit-box;display:flex;flex-wrap:wrap}.form__box--1 label{text-align:center;margin:.5rem auto}.form__box--2{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;flex-wrap:wrap;align-content:center;position:relative}@media only screen and (max-width: 50em){.form__box--2{width:100%}}@media only screen and (max-width: 28.125em){.form__box--2{width:41rem;margin:-2rem;border:1px solid rgba(0,0,0,0.05);box-shadow:none}}.form__box--2 label{margin-left:2rem;font-size:1.8rem;width:11rem;font-weight:bolder;position:relative}@media only screen and (max-width: 50em){.form__box--2 label{margin-left:1.3rem;font-size:1.8rem;width:11rem}}@media only screen and (max-width: 50em){.form__box--2 label[for="hasNumber"],.form__box--2 label[for="hasSymbol"],.form__box--2 label[for="length"]{margin-left:0rem}}@media only screen and (max-width: 28.125em){.form__box--2 label[for="hasUppercase"],.form__box--2 label[for="hasLowercase"]{margin-left:0}}.form__warning{color:#d80000;vertical-align:middle;line-height:3;width:100%;text-align:center;height:1rem}.form__pwfield{width:60%;margin-left:auto;font-size:3.5rem;font-family:inherit;background-color:rgba(0,0,0,0.5);border:1px solid #3aa460;border-radius:2px;color:#EFEFEF;padding:.5rem;font-family:"Consolas", monospace, sans-serif;text-align:center}@media only screen and (max-width: 50em){.form__pwfield{font-size:3rem}}@media only screen and (max-width: 28.125em){.form__pwfield{font-size:2.8rem}}.form__pwfield::-webkit-input-placeholder{font-size:calc(3.5rem / 2)}.form__pwfield::-moz-placeholder{font-size:calc(3.5rem / 2)}.form__pwfield:-ms-input-placeholder{font-size:calc(3.5rem / 2)}.form__pwfield::-ms-input-placeholder{font-size:calc(3.5rem / 2)}.form__pwfield::placeholder{font-size:calc(3.5rem / 2)}@media only screen and (max-width: 50em){.form__pwfield::-webkit-input-placeholder{font-size:calc(3rem / 2)}.form__pwfield::-moz-placeholder{font-size:calc(3rem / 2)}.form__pwfield:-ms-input-placeholder{font-size:calc(3rem / 2)}.form__pwfield::-ms-input-placeholder{font-size:calc(3rem / 2)}.form__pwfield::placeholder{font-size:calc(3rem / 2)}}@media only screen and (max-width: 28.125em){.form__pwfield::-webkit-input-placeholder{font-size:calc(2.8rem / 2.3)}.form__pwfield::-moz-placeholder{font-size:calc(2.8rem / 2.3)}.form__pwfield:-ms-input-placeholder{font-size:calc(2.8rem / 2.3)}.form__pwfield::-ms-input-placeholder{font-size:calc(2.8rem / 2.3)}.form__pwfield::placeholder{font-size:calc(2.8rem / 2.3)}}.form__icon{height:4rem;width:4rem;fill:rgba(0,0,0,0.5);-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s}.form__icon--spin{-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s}.form__checkbox,.form__pwlength{align-self:center;margin-left:-1.5rem}.form__checkbox{display:none}.form__pwlength{width:9.5rem;height:3.5rem;text-align:center;font-size:2rem;font-family:inherit;font-weight:bolder;background-color:rgba(0,0,0,0.5);border:1px solid #3aa460;border-radius:2px;color:#EFEFEF}.form__checkbox{display:none}[for="hasNumber"] .form__checkbox-style,[for="hasSymbol"] .form__checkbox-style{left:7.5rem}.form__checkbox-style{height:3rem;width:3rem;border-radius:2px;display:inline-block;position:absolute;left:9rem;top:.4rem;background-color:rgba(0,0,0,0.5);border:1px solid rgba(0,0,0,0.2);-webkit-transition:all .2s;transition:all .2s}.form__checkbox-style:after{content:"";display:block;position:absolute;top:50%;left:50%;opacity:0;height:2rem;width:.8rem;border:solid #4EEE86;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);transform:translate(-50%, -59%) rotate(45deg)}.form__checkbox:checked+label .form__checkbox-style::after{opacity:1}.btn:hover .form__icon{fill:#fff}.btn:active .form__icon--click{-webkit-transform:scale(0.8);transform:scale(0.8)}.btn:active .form__icon--spin{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.btn{padding:.8rem;border-radius:2px;border:1px solid rgba(0,0,0,0.1);background-color:#3AA460;cursor:pointer;-webkit-transition:border .1s;transition:border .1s}.btn:active,.btn:hover{border:1px solid #fff}@-webkit-keyframes moveUp{0%{opacity:0;-webkit-transform:translateY(10rem);transform:translateY(10rem)}50%{}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes moveUp{0%{opacity:0;-webkit-transform:translateY(10rem);transform:translateY(10rem)}50%{}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}