html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}.body{margin:0;font-family:Roboto,sans-serif}.main{width:100vw;height:100vh;padding:20px 0;background:linear-gradient(178.1deg,#131128 8.5%,#13112b 82.4%)}.container{max-width:80%;margin:0 auto}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0,0,0,0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.key{border:3px solid #4cac8a;outline:0;font-size:1.5vw;line-height:1.2;border-radius:2px;background:#fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.key:focus{outline:none}.key.on{border-color:#411f4a}.key:hover{opacity:.8;cursor:pointer}.textarea{overflow:auto;border:10px solid #4cac8a;outline:none;font-size:2vw;line-height:1.2;color:#fff;border-radius:5px;background:transparent;resize:none;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.textarea:focus{border-color:#411f4a}.textarea:hover{opacity:.8}.keyboard{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:50vh repeat(5,5vh);grid-gap:10px}.keyboard__key{margin:0}.keyboard__input{grid-column:1/-1}.keyboard__backspace,.keyboard__enter{grid-column:-3/-1}.keyboard__caps-lock,.keyboard__tab{grid-column:1/3}.keyboard__shift{grid-column:1/4}.keyboard__space{grid-column:4/11}