html{height:100%}body{height:100%;display:flex;flex-direction:row-reverse;align-items:stretch}aside{background:var(--secondary-color-1);width:25%;display:flex;justify-content:center;align-items:center;flex-direction:column;row-gap:3rem}form{width:100%;padding:0 14%;display:flex;flex-direction:column;align-items:center;row-gap:2rem;position:relative}form div{position:relative;width:100%}form div input{position:relative;width:100%;padding:.8rem 1rem;border:none;outline:none;background:transparent;color:var(--primary-color-1);font-size:1.4rem;z-index:1000}form div .invalid~label{color:#d20;animation:invalidShake .25s linear}form div .invalid~label:before{content:"";position:absolute;bottom:0;right:0;width:100%;height:3px;background:#e20}@keyframes invalidShake{33%{transform:translate(6px)}66%{transform:translate(-12px)}to{transform:none}}form div label{position:absolute;left:0;color:var(--primary-color-3);font-size:1.5rem;pointer-events:none;padding:.4rem 0;width:100%;transition:.5s}form div label:before{content:"";position:absolute;bottom:0;right:0;width:100%;height:3px;background:var(--primary-color-3);transition:.5s}form div input:valid~label,form div input:focus~label{transform:translateY(-2rem);font-size:1rem;padding:.4rem .8rem}form div input:valid~label:before,form div input:focus~label:before{height:3rem;bottom:-3rem;border-radius:5px}form button{background:var(--primary-color-1);box-shadow:0 0 8px 1px var(--primary-color-1);border:none;outline:none;color:var(--primary-color-3);font-size:1.5rem;padding:1rem 2rem;border-radius:10px;margin:.8rem 0}form span{color:var(--primary-color-3);font-size:1rem;text-align:center;position:absolute;bottom:-3rem}a{color:var(--secondary-color-2);text-decoration:none}