@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap);body,html{background-color:#dbd7cc;color:#333;height:100vh;width:100vw}#app{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:25px;text-transform:uppercase;letter-spacing:.3em;font-family:Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:300;line-height:2em}.logo{position:relative;max-width:400px;height:auto;margin:0 auto 20px;text-align:center}.logo img{width:150px;height:150px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.1));margin-bottom:-25px}.logo h1{font-size:2rem;font-weight:300;text-transform:uppercase}.top-area{flex:0 1 auto;position:relative;text-align:center;width:90%;max-width:400px;margin:0 auto}.button{font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:300;letter-spacing:.15em}.bottom-area{position:relative;flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;background-color:#58743c;width:100%;min-height:0;font-size:2.3rem;line-height:1em;transform:translateY(100%)}.bottom-area--show{transition:transform .5s ease;transform:translateY(0)}.bottom-area--error{background-color:#8b0000}.bottom-gif{position:absolute;width:120px;height:150px;-o-object-fit:contain;object-fit:contain;bottom:1vw;right:1vw;transform:rotate(15deg);mix-blend-mode:luminosity}.output{width:90%;max-width:300px;margin:40px auto}.output span{display:block}.output-name{font-weight:600;color:#fff}.output-error{color:#fff}.inputs{text-align:center;padding-bottom:20px}.inputs .label{font-weight:300;letter-spacing:.15em;color:#fff}.inputs .input{background-color:transparent;box-shadow:none;outline:1px solid #fff;text-align:center}.inputs .input:active,.inputs .input:focus{background-color:hsla(0,0%,100%,.5);box-shadow:none;outline:1px solid #fff;border:none}