form#profileForm{margin:50px 0}textarea{width:100%;resize:none;background-color:var(--color-bg_nav);border:none;border-radius:var(--borderRadius);padding:10px;color:var(--color-fg);font-size:1.05rem}.input-group{position:relative;margin:10px 0 15px;& .input~label { position: absolute; left: 0; color: grey; cursor: text; transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease; pointer-events: none; top: 0; font-size: 1rem; } & .input { background: var(--color-bg); display: block; width: 100%; padding-top: 1.5rem; border: none; border-bottom: 2px solid rgba(128, 128, 128, 0.3); border-radius: 0; color: var(--color-fg); font-size: 1.5rem; transition: border-color 0.3s ease; &:placeholder-shown ~ label { top: 1.5rem; font-size: 1.3rem; color: rgba(255, 255, 255, 0.5); } &:focus { outline: none; &:valid { border-color: var(--color-prime); & ~ label { color: var(--color-prime); } } &:invalid { border-color: var(--color-error); & ~ label { color: var(--color-error); } } } &:user-invalid { border-color: var(--color-error); & ~ label { color: var(--color-error); } } &:disabled { border-color: transparent; } }}