style.min.css

*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Poppins", sans-serif;color:#444;background-color:#f3f3f3;min-height:100vh;padding:20px}nav{display:grid;align-items:center;grid-template-columns:2.5fr 1fr 2.5fr}.welcome{font-size:20px;font-weight:500}.logo{display:block;margin:auto;width:100%;height:auto;max-width:80px}.login{text-align:right}.login__input{border:none;outline:none;padding:5px 10px;font-size:16px;font-family:inherit;text-align:center;width:120px;border-radius:20px;margin-right:10px;color:inherit;border:1px solid #fff;transition:all 0.3s}.login__input:focus{border:1px solid #ccc}.login__input::placeholder{color:#bbb}.login__btn{outline:none;border:none;background:none;font-size:22px;color:inherit;cursor:pointer;transition:all 0.3s}.app{position:relative;width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:auto repeat(3, 140px) auto;gap:20px;opacity:0;transition:all 2s}.saldo{grid-column:1 / span 2;display:flex;align-items:flex-end;justify-content:space-between;margin-top:40px}.saldo__label{font-size:22px;font-weight:500}.saldo__data{color:#888}.saldo__valor{font-size:40px}.movimentos{grid-row:2 / span 3;background-color:#fff;border-radius:10px;overflow-y:scroll}.movimentos__item{padding:15px 30px;display:flex;align-items:center;border-bottom:1px solid #eee}.movimentos__tipo{min-width:110px;padding:5px 20px;text-transform:uppercase;font-weight:500;font-size:12px;color:#fff;border-radius:15px;margin-right:20px}.movimentos__tipo--entrada{background-image:linear-gradient(to top left, #39b385, #9be15d)}.movimentos__tipo--saida{background-image:linear-gradient(to top left, #e52a5a, #ff585f)}.movimentos__data{font-size:14px;text-transform:uppercase;font-weight:500;color:#666}.movimentos__valor{font-size:22px;margin-left:auto}.sumario{grid-row:5 / 6;display:flex;align-items:baseline;padding:0 5px}.sumario__label{font-size:12px;font-weight:500;text-transform:uppercase;margin-right:10px}.sumario__valor{font-size:20px;margin-right:20px}.sumario__valor--entrada,.sumario__valor--rendimento{color:#66c873}.sumario__valor--saida{color:#f5465d}.btn--ordenar{outline:none;margin-left:auto;border:none;background:none;font-weight:500;cursor:pointer}.operacao{border-radius:10px;padding:20px 30px;color:#333}.operacao--transferir{background-image:linear-gradient(to top left, #ffb003, #ffcb03)}.operacao--emprestar{background-image:linear-gradient(to top left, #39b385, #9be15d)}.operacao--encerrar{background-image:linear-gradient(to top left, #e52a5a, #ff585f)}h2{margin-bottom:10px;font-size:17px;font-weight:600;color:#333}.form{display:grid;grid-template-columns:2.5fr 2.5fr 1fr;grid-template-rows:auto auto;gap:0.4rem 1rem}.form .form__input{width:100%;border:none;outline:none;background-color:rgba(255,255,255,0.4);font-family:inherit;font-size:16px;text-align:center;color:#333;padding:5px 10px;border-radius:10px;transition:all 250ms}.form .form__input:focus{background-color:rgba(255,255,255,0.6)}.form__label{font-size:14px;text-align:center}.form__label--emprestar{grid-row:2}.form__btn{border:none;border-radius:10px;font-size:22px;background-color:#fff;cursor:pointer;transition:all 0.3s}.form__btn:focus{outline:none;background-color:rgba(255,255,255,0.8)}.form--emprestar{grid-template-columns:2.5fr 1fr 2.5fr}.timer{margin-top:5px;text-align:right;font-size:15px}