.form{--input-focus: #2d8cf0;--font-color: #323232;--font-color-sub: #666;--bg-color: beige;--main-color: black;padding:20px;background:#add8e6;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;border-radius:5px;border:2px solid var(--main-color);box-shadow:4px 4px var(--main-color)}.title{color:var(--font-color);font-weight:900;font-size:20px;margin-bottom:25px}.title span{color:var(--font-color-sub);font-weight:600;font-size:17px}.input{width:250px;height:40px;border-radius:5px;border:2px solid var(--main-color);background-color:var(--bg-color);box-shadow:4px 4px var(--main-color);font-size:15px;font-weight:600;color:var(--font-color);padding:5px 10px;outline:none}.input::placeholder{color:var(--font-color-sub);opacity:.8}.input:focus{border:2px solid var(--input-focus)}.login-with{display:flex;gap:20px}.button-log{cursor:pointer;width:40px;height:40px;border-radius:100%;border:2px solid var(--main-color);background-color:var(--bg-color);box-shadow:4px 4px var(--main-color);color:var(--font-color);font-size:25px;display:flex;justify-content:center;align-items:center}.icon{width:24px;height:24px;fill:var(--main-color)}.button-log:active,.button-confirm:active{box-shadow:0 0 var(--main-color);transform:translate(3px,3px)}.button-confirm{margin:50px auto 0;width:120px;height:40px;border-radius:5px;border:2px solid var(--main-color);background-color:var(--bg-color);box-shadow:4px 4px var(--main-color);font-size:17px;font-weight:600;color:var(--font-color);cursor:pointer}.loading-wave{width:300px;height:100px;display:flex;justify-content:center;align-items:flex-end}.loading-bar{width:20px;height:10px;margin:0 5px;background-color:#3498db;border-radius:5px;animation:loading-wave-animation 1s ease-in-out infinite}.loading-bar:nth-child(2){animation-delay:.1s}.loading-bar:nth-child(3){animation-delay:.2s}.loading-bar:nth-child(4){animation-delay:.3s}@keyframes loading-wave-animation{0%{height:10px}50%{height:50px}to{height:10px}}