:root{--light:#fff;--dark:#272727}html,body{width:100%;height:100%;margin:0;background-color:var(--dark);color:var(--dark);font-family:sans-serif,Arial,Helvetica;min-width:320px}header h1,main h1{margin:0;text-align:center}header{width:100%;min-height:0;background-color:var(--dark);position:relative}header h1{color:var(--light)}main{width:100%;min-height:0;background-color:var(--light)}main img,.strength{position:relative;left:50%;transform:translateX(-50%)}main h1{font-size:20px}main section{width:100%;display:inline-block;margin-bottom:8px}.container{text-align:center;min-height:0;position:relative}.container input{position:relative;left:0}main section:nth-last-of-type(6){margin-top:50px}label[data-type=button]{position:relative;background-color:#fff;border:1px solid #adadad;touch-action:manipulation;color:#333;box-sizing:border-box;padding:9px 6px;font-size:17px;outline:none;margin-right:-5px;line-height:40px}label[data-type=button]:last-child{margin-right:0}label{-webkit-user-select:none}label[data-type=button]:active{background-color:#e6e6e6;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.selected{background-color:#e6e6e6!important;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}main section input,#result{border-radius:5px;border:1px solid #adadad;padding:5px 0;font-size:20px}main input{text-align:center}main section input,#result{position:relative;left:50%;transform:translateX(-50%)}#result{width:80%;margin-bottom:8px;display:block}.strength{margin-bottom:8px;width:30px;height:30px;box-shadow:inset 0 0 5px #fff;border-radius:50%;background-color:#bdbdbd}a{text-decoration:none;color:var(--light)}footer{position:relative;width:100%;min-height:0}footer h2{margin:0;text-align:center;color:var(--light)}@media (min-width: 768px){footer{bottom:0;position:absolute}main section{width:50%}main section:nth-last-of-type(5),main section:nth-last-of-type(3){margin-left:-5px}main{border-radius:3px;position:relative;left:50%;transform:translateX(-50%);max-width:1024px}main section:nth-last-of-type(5){margin-top:50px}main section:nth-last-of-type(1),main section:nth-last-of-type(2){width:100%}}@media (min-width: 1024px){label,input[type=checkbox]{cursor:pointer}label[data-type=button]:hover{background-color:#e6e6e6}.effect{cursor:pointer;position:relative}.effect:after{content:'';position:absolute;bottom:1px;width:0;height:2px;left:50%;transform:translateX(-50%);transition:width .4s;background-color:var(--light)}.effect:hover:after{width:100%}}