*{margin:0;padding:0;border-radius:0;text-decoration:none;text-transform:none;font-size:16px;line-height:1;font-family:Montserrat,sans-serif;box-sizing:border-box;color:#000}:focus{outline:transparent}main{display:flex;align-items:center;justify-content:center;flex-direction:column}.wrapper{display:flex;flex-direction:column;align-content:center;justify-content:center;height:100vh}h1{text-align:center;font-size:30px;margin-bottom:30px}.form{display:flex;align-items:center}.form .box{position:relative}.form .box:nth-child(1){margin-right:20px}.form .box label{display:block;text-align:center;margin-bottom:5px;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:3px;z-index:0;transition:.3s;white-space:nowrap;font-weight:300}.form .box input{padding:5px;border:none;border-bottom:1px solid grey;background-color:transparent;text-align:center;z-index:2;position:relative;font-weight:300;-webkit-text-decoration-color:transparent;text-decoration-color:transparent}.form .box input:valid+label{bottom:30px;left:2px;font-size:14px;-webkit-transform:none;transform:none}.form .box input:focus+label{bottom:30px;left:2px;font-size:14px;-webkit-transform:none;transform:none}.btn{width:100%;padding:7px;border:1px solid grey;text-align:center;margin-top:30px;cursor:pointer;border-right:none;border-left:none;position:relative}.btn:before{content:"";position:absolute;left:0;top:0;width:1px;height:0;background-color:grey;transition:.3s}.btn:after{content:"";position:absolute;right:0;bottom:0;width:1px;height:0;background-color:grey;transition:.3s}.btn:hover:before{height:100%}.btn:hover:after{height:100%}#result{display:flex;align-items:center;justify-content:center;padding-top:20px;opacity:0}#result.open{opacity:1}#result .text{text-align:center;font-size:20px;margin-right:20px}#result #copy{cursor:pointer}#result #copy svg{width:20px;height:20px}.home{position:absolute;left:40px;top:20px;cursor:pointer}.home:after{content:"";position:absolute;width:0;height:1px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-4px;background-color:#000;transition:.3s}.home:hover:after{width:100%}.night{position:absolute;right:40px;top:20px;cursor:pointer}.night:after{content:"";position:absolute;width:0;height:1px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-4px;background-color:#000;transition:.3s}.night:hover:after{width:100%}main{transition:.3s}main *{transition:.3s}main.black{background-color:#000}main.black *{color:#fff!important}main.black .night:after{background-color:#fff}.info{left:5vw;bottom:0;width:90vw;padding:40px}.info p{line-height:1.2}@media screen and (max-width:768px){.btn:before{height:100%}.btn:after{height:100%}.home:after{display:none}.night:after{display:none}}@media screen and (max-width:640px){.info{padding:10px}}@media screen and (max-width:490px){.form .box input{width:140px}}@media screen and (max-width:330px){.form .box input{width:100px}}@media screen and (max-height:350px){h1{margin-bottom:35px;font-size:24px}}