:root{--background:#111111;--box-background:#111111;--secondary:#F1F1F1;--primary:#f7e626}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;height:100vh;display:flex;background-color:var(--background);justify-content:center;align-items:center}.box{background-color:var(--box-background);padding:24px;max-width:fit-content;width:100%;padding-top:12px;border-radius:16px}.box h2{margin:0;font-weight:400;font-size:1.5rem}.input__wrapper{position:relative;padding:15px 0 0}.input__field{outline:1.5px solid var(--secondary);font-size:1rem;color:var(--secondary);padding:8px;border:none;padding-right:32px;background:0 0;transition:all .2s}.input__field::placeholder{color:transparent}.input__field:placeholder-shown~.input__label{font-size:1rem;cursor:text;color:var(--secondary);top:24px}.input__field:focus~.input__label,label{position:absolute;top:1px;padding:0 4px;background-color:var(--box-background);display:block;font-size:14px;left:8px;color:var(--secondary);transition:.3s}.input__field:focus~.input__label{color:var(--primary)}.input__field:focus{outline:1.5px solid var(--primary)}.input__icon{position:absolute;right:-10px;bottom:-10px;width:28px;height:28px;transform:translate(-50%,-50%);transform-origin:center;cursor:pointer}.textarea{border:1px solid #ccc;font-family:inherit;font-size:inherit;padding:1px 6px}.textarea{display:block;width:100%;overflow:hidden;resize:both;min-height:40px;line-height:20px}