@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap);
:root{--color: #FF6AB2;--black: #121212;--white: #ffffff;--keyboard: #FFC6ED;--back: #1e1e1e;--small-font-size: 12px;--radius: 8px}*{padding:0;margin:0;box-sizing:border-box;font-family:"Inter",sans-serif}.page{width:100vw;height:100vh;display:flex;justify-content:center;background-color:#fafafa;background-color:var(--back)}.main{max-width:844px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.intro__container{width:100%;display:flex;justify-content:center;margin-bottom:40px}.intro__container .description{font-size:20px;font-weight:300;text-align:center;color:var(--white)}.description span{border-radius:5px;border:1.5px solid var(--color);color:var(--color);font-size:15px;font-weight:400;letter-spacing:.02ch;padding:0px 5px}.note{font-size:20px;font-weight:300;text-align:center;color:var(--white)}.note a{display:inline-block;position:relative;color:var(--color);text-decoration:none;transition:all .3s ease-in}.note a::after{content:"";position:absolute;width:100%;height:1px;left:0;bottom:0;background-color:var(--color);transition:width .2s ease-in}.note a:hover::after{width:0}.textarea__container{width:100%;height:160px;margin-bottom:20px}.textarea{width:100%;height:100%;border:1px solid var(--black);border-radius:20px;background-color:var(--white);padding:15px 20px;margin-bottom:20px;outline:none;resize:none;font-family:"Inter",sans-serif;font-size:20px;color:var(--black)}.keyboard{width:100%}.keyboard__container{width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:5px;border:1px solid var(--black);border-radius:20px;padding:20px;margin-bottom:40px;background-color:var(--keyboard)}.key{width:50px;height:50px;display:flex;justify-content:center;align-items:center;outline:none;border:1px solid var(--black);border-radius:8px;background-color:var(--keyboard);padding:6px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:var(--black);transition:all .2s ease-in;cursor:pointer;user-select:none}.key:hover{border:1px solid var(--color);box-shadow:0px 0px 6px var(--color)}.key:active{background-color:var(--color);box-shadow:none;transform:scale(0.98)}.key--active{background-color:var(--color);border:1px solid var(--color);box-shadow:none;transform:scale(0.98)}.key__delete{width:85px;font-size:var(--small-font-size);justify-content:flex-end;align-items:flex-end}.key__tab{width:85px;font-size:var(--small-font-size);justify-content:flex-start;align-items:flex-end}.key__caps{width:95px;font-size:var(--small-font-size);justify-content:flex-start;align-items:flex-end;position:relative}.key__caps::after{content:"";position:absolute;top:6px;left:6px;width:5px;height:5px;border-radius:50%;background-color:var(--black)}.label--small{font-size:var(--small-font-size);font-weight:500;align-items:flex-end}.key__return{width:95px;justify-content:flex-end}.key__shift--left{width:123px;justify-content:flex-start}.key__shift--right{width:123px;justify-content:flex-end}.key__fn{justify-content:flex-start}.key__cmd,.key__ctrl,.key__opt{justify-content:flex-start}.key__space{flex-grow:5}.arrows{width:160px;display:flex;gap:5px}.arrows--middle{width:50px;height:50px;display:flex;flex-direction:column;gap:4px}.arrows--middle .key__arrow{flex-grow:1}.arrows--middle .key__arrow{border-radius:7px}.key__arrow{display:flex;align-items:center;justify-content:center}.key__arrow .label{width:8px;height:8px;background-image:url(../images/arrow.svg);background-position:center;background-size:contain;background-repeat:no-repeat}.key__arrow:last-child .label{transform:rotate(180deg)}.arrows--middle .key__arrow:first-child .label{transform:rotate(90deg)}.arrows--middle .key__arrow:last-child .label{transform:rotate(-90deg)}